Is it just me, or skeleton screens are annoying as hell?<p>I instinctively interpret them as a malfunction, not as a loading screen. A screen is supposed to have data. If it shows up empty, something has gone horribly wrong somewhere.<p>And as a developer, once it fills out, I get the secondary tinge of discomfort due to the nagging thought "this application has a bad handle on timing, there might be a race condition somewhere. Better do things really slowly and carefully."<p>In general though, 99% of the time, there should be no loading screen at all. My local airline shows a "Loading..." for several seconds even when doing things like logging in, and all I can think of is wondering what could take so much time. At this point a login should be a thing that can be done in a few ms.
Minimal has a nice trick for loading new collaborations… When joining a note a writer is met with a simple presentation of the note title, the collaborator’s name, and a small bit of text describing how collaboration works. By the time the writer has processed that minuscule yet valuable information, the note has loaded and is ready for them.<p>Effect:
- no wait time, snappy interaction
- better context around a new experience<p>Cost:
- nothing<p>It reminds me that a solid portion of good design is not applying a rule or system, but creatively working between the cracks of known/obvious problem-solution pairs.
They make a common mistake in the "Frequency" section in regards to passive operations: The examples are a "frequent" operation (syncing your changes up) and a "rare" operation (remote changes being synced down while you are working). Frequency of course is not the salient property here. The difference in UX is practical: The latter requires your explicit attention, while the former does not.
I've noticed an obnoxious new UI anti-pattern showing up more frequently as of late: a loading page that renders a fake UI made of nothing but light grey boxes. More often than not, it's not even the actual UI layout of the page, just an artful rendition of a blank UI. These sorts of things drive me nuts, especially when it's a page whose contents could easily have been served as a static HTML page instead of rendering this silly fake UI via javascript then using more js + requests to replace that garbage with the actual content I want.
For my customer's multi-step wizard [0], I tried to make inevitable waiting less boring by showing a random AI-related fact, such as:<p>In 2017, Saudi Arabia has given citizenship to the social humanoid robot Sophia. She became the first-ever robot to get citizenship of any country in the world.<p>[0] <a href="https://www.kadoa.com/playground" rel="nofollow noreferrer">https://www.kadoa.com/playground</a>
> For high-stakes operations that are done occasionally, you might consider making tasks seem longer, as if more important, than they actually are.<p>Hmmm, not sure this is the best approach. There is no reason to deceive your user.
On the other hand, we're in the multi gigahertz, multi gagabyte era, there's almost no excuse for loading times except bloated libraries and not giving a damn about performance.
On the section regarding loading items in a list, the article notes to be careful with infinite loading or a "load more" button for performance reasons, which is totally correct but would it not be standard practice to have some kind of recycler/virtualizer mechanism in place if the UI is likely to be handling such large quantities of items?
I don't need to know how long it's going to take (because that's always made up) but at least tell me what's going on in the background so I have some indication of progress. Loading is often made up of a few sequential steps so tell me where you're up to.
Instead of trying to build fanciest loading animation, maybe we should use "Network client hints" and send less data to slow networks? Figuring out how to use browser cache correctly and serving data from edge closest to client are also good options.
The first animated example, loading things one row at a time, is bad because you might think there's only one item in the result list, before it loads the next one.
> Progress bar<p>> Hot tip: Use an ease-in animation to make the progress seem like it’s accelerating.<p>So annoying when websites try to deceive me with a quantified progress bar inversely inching towards completion even though I cut off Internet five minutes ago.
> For high-stakes operations that are done occasionally, you might consider making tasks seem longer, as if more important, than they actually are.<p>No. Just no.
I absolutely HATE the loading spinner. Even if a dev has no idea how long something is going to take, at least attach a number that increments in response to a listener event indicating some additional "tick" of work was done - otherwise there is zero visual difference between a process that is hung and one that is simply slow. It boggles my mind how many UI/UX people don't understand this.