[HN Gopher] UX design patterns for loading ___________________________________________________________________ UX design patterns for loading Author : akbarnama Score : 44 points Date : 2023-08-26 17:02 UTC (1 days ago) (HTM) web link (pencilandpaper.io) (TXT) w3m dump (pencilandpaper.io) | agumonkey wrote: | Thanks, nice reference/summary that is easy to forget when you're | deep down in your component tree :) | chrisjj wrote: | > For high-stakes operations that are done occasionally, you | might consider making tasks seem longer, as if more important, | than they actually are. | | No. Just no. | abdullahkhalids wrote: | The unsend-within-a-minute feature in various email | services/client is an example of this that is super useful. | happytoexplain wrote: | That's a grace period - the parent is referring to faux | loading times, e.g. a spinner that blocks the UI despite | nothing happening. | nkrisc wrote: | Like all things, know your audience. | | I know of a case where a delay was introduced because users | didn't believe the task was done because it happened so | quickly, and contacted support thinking there was a problem | (there wasn't). | | All related support contacts stopped after the artificial delay | was introduced. | | As you may have guessed, these were not technically savvy | users. But it's what they needed. | happytoexplain wrote: | There are UX solutions that are not deceptive/time-wasting | (e.g. a brief checkmark, but the actual solution will depend | on many variables of the exact scenario). | elwell wrote: | How about dropping CPU clock speed until the computation | _actually_ takes avg 5-10 seconds? | blowski wrote: | During testing of a pension calculator I built, the users | expressed more trust in the page when it took about 5-10 | seconds to show results than when it showed them instantly. | They equated instant results with a less complex model. | happytoexplain wrote: | I've always considered this a good example of the rare case | where metrics are true and meaningful (how the users feel), | but should still be ignored in favor of _principles_ (well, | not _ignore_ - one should look into other avenues to improve | the user 's perception of the tool). A more black-and-white | example would be dark patterns that demonstrably increase | user retention. | Permik wrote: | Ah yes, I love my "wipe my hard drive and send my wife a text | message that divorce papers are on the kitchen counter"-button | next to my enter button on my keyboard! | | Edit: Humans make mistakes, give them a little time for | introspection before something non-reversible happens. Also, | for people like you, there's usually an option for "don't show | this again". | serial_dev wrote: | The feature you are looking for is the "undo" option. Gmail | has it, many other apps have it, so you have time to cancel | your divorce email. | | Pretending to be busy for five seconds with no way to undo it | or cancel the request while waiting won't save you your | marriage. | Espressosaurus wrote: | There's a difference between "are you sure?" and the | time.sleep(10) with a loading bar to make it seem like you're | doing work that was done in the first 10 milliseconds. | Eduard wrote: | > Progress bar | | > Hot tip: Use an ease-in animation to make the progress seem | like it's accelerating. | | 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. | amelius wrote: | So what's a good programming design pattern to build good | progress bars? | | Progress bars for I/O are typically easy. Progress bars for | computations with deep call graphs are typically more | difficult. | tanbog5 wrote: | I would say, don't use progress unless they are communicating | useful and/or meaningful information? | gochi wrote: | All progress bars lie | https://austinhenley.com/blog/fixprogressbars.html | | It's a challenging problem, because either attempts at a | solution (being direct, or being indirect) causes a worse user | experience due to expectations of linear progress. For example | proposed solution 1 in the article would have you create some | sort of animation or additional progress bar to let people know | if something is actually stalled/dropped vs something just | taking more time, you would still be lying to them, but it's | for the benefit of user experience. | jwells89 wrote: | 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? | mteam88 wrote: | This was my thought as well. Virtualization can reduce | performance impact, but I like their point for pagination, that | it gives users a specific place to link or reference. | happytoexplain wrote: | 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. | arthurofbabylon wrote: | 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. | | Effect: - no wait time, snappy interaction - better context | around a new experience | | Cost: - nothing | | 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. ___________________________________________________________________ (page generated 2023-08-27 23:00 UTC)