5

I work at a company where our users run into a loading screen frequently. We can't preload the data because it's rather random. Right now we have a loading bar, and after a couple of times seeing it, users get sick of it. I am doing everything I can to make the loading faster, and it's down to ~240ms, but that's not good enough.

Yelp uses fresh phrases for its loading indicators (chopping chives, sizzling steaks, etc.); this is appealing to me, but the product has to be very generic for use on many partner sites, so any fresh rotating content would need to be extremely neutral and not imply anything about anything.

One solution I thought of was a "Snapple facts" type of thing where the javascript that loads the content the user is waiting for comes prepackages with a silly random fact. Might work, but also might incidentally generate a fact that offends someone who might take it as a personal suggestion.

What creative ways have y'all come up with to prevent users from getting fatigued by loading screens?

  • IMO, 250ms is way good enough. I bet if you didn't show a loading bar people wouldn't even notice. If they hate that bar, maybe show a blank screen for 500ms and only make the bar show up then, so it only shows up when things take unusually long. – Matti Virkkunen Oct 7 '15 at 14:51
7


Answer


At 200ms you're close to Google's Ideal Server Load Time

You should reduce your server response time under 200ms

There are small things you can do to decrease the perceived load time:

Full Page Loads

  • Work in transitions so the loading bar spends less time on the load screen
  • Provide a loader that users can "play with"
  • Remove the loading bar. Everyone hates loading bars

  • As you've mentioned, make it enjoyable with witty/uplifting/funny phrases

Section/Partial Loads

~250ms is an acceptable duration for most CSS animations. A common tactic when loading data for a modal, sliding pane, data grid, etc. Is to incorporate an animation to decrease the perceived load time, as the data can be loading in the background while this transition takes place. As you're pulling in new data, it also makes sense to draw attention to it with some sort of flash/slide/expand/wiggle.


Thoughts


But at the end of the day, the best way to reduce fatigue and improve UX is to decrease load time. Again, you're not far off, so I'm confused as to why your receiving a healthy number of complaints from your users. It may be worth tracking their load times, and doing some A/B testing with new load screen options.

  • Well its not that we are receiving complaints from our users, its that our users already tend to not like us cough cough advertising. So any time they spend looking at a loading screen is essentially a direct translation into revenue lost – OneChillDude Oct 6 '15 at 21:29
  • Excellent suggestion about the loader that users can play with – OneChillDude Oct 6 '15 at 21:30
6

There is a concept called perceived performance and it is important just as much as the actual performance.

  • Spinners and loading bars actually call attention to the wait and make your pages look like they are loading slower. Consider removing them
  • If you are waiting for data to load you can try animating the
    content’s container so that it shrinks and then grows back to fit the new content, it beats staring at a spinner
  • Have grey cut outs of the block of content that is loading (like facebook does). That way the page will seem like it’s loading faster

enter image description here

0

Have you checked whether it's really the load time that is the issue, or whether it is maybe something else, like that you're unloading other unrelated content or unloading UI components that they'd still want to refer to?

I.e. Sometimes the issue is not the wait itself, but that you're taking away everything the user could occupy themselves with productively while the load is in progress.

Also, could you maybe preload several alternative paths your users might take, or combine screens, or reorder screens so the ones with the longer wait are interspersed with faster ones?

If there is a longer wait after a few steps, there's no problem, but if every step entails a small wait, the entire UI feels like slogging through molasses, even if the total time spent waiting is the same.

You might also want to look at batch processing mechanisms. E.g. old Linux installers would ask for some package's settings, then download it, then ask for the next.

You don't want that, as that means the user constantly needs to be present. OTOH if you request all info at the start, and then take a while to download, your users can go grab a coffee while it's churning away, or start the next form submission while the previous one is being processed or so.

0

Do you have the option of loading the static content first, and then loading the data into the page with Ajax or similar?

Alternatively, if the content can be divided into modules or widgets, users could opt in / out out of loading specific widgets (you could use cookies to save their preferences).

I had an issue where a page took a while to load, and then the left-hand menu appeared to drop into place, which looked odd. So I rewrote the jQuery to load the menu after everything else had loaded.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.