7

I am working on a data-rich webapp using Meteor. I was previously considering that everything I can load should be loaded asap, and every part of my page depending on data should have its loader while it has not been received.

As a consequence, every thing is loading pretty fast, the user can explore the interface while the data is loading, but I get several simple spinners populating my interface. It creates imho a feeling of cluttering, or a lack of simplicity in design.

I am wondering if I should switch to a different approach: use a single, full page (except for the navigation layout), fancy loader and display the stuff all at once when I get its related data. The final result would certainly be more clean, but the UI would stay hidden longer, not to mention that all CDN data (mostly images) will still have its loader once the rest of the page has been loaded and populated.

Is there a consensus on how to deal with that? A best practice? As far as I can tell, the big players (facebook, google, quora, etc.) don't use a single page loader. Is there a reason why?

Improve this question

1 Answer 1

Reset to default
7

A great way to make people perceive loading as "quick" is to show dummy wireframes, like placeholders.

It gives the user a feeling of progress. When the dummy wireframe is loaded (which takes less than 100 milliseconds), it feels like the content will be added to that very soon.

enter image description here

Dummy loading or loading icon?

A loading icon loops and doesn't show progress, so it becomes boring and unpredictable for the user to watch.

Spinners will annoy people, especially if the loading is taking long. If the loading takes less than 1 second, there will be no point in showing the loading icon either, because most users won't even notice it.

Loading icon or progress bar?

According to the Nielsen Norman Group:

The main guideline is to use a looped indicator for delays of 2–9 seconds and a percent-done indicator for delays of 10 seconds

https://www.nngroup.com/articles/progress-indicators/

Conclusion

My advice would be to first show the layout like a wireframe, using placeholders for the content. After the content is done loading, it can fade in to the dedicated fields.

Sources

  1. http://uxmovement.com/mobile/3-tricks-to-make-your-load-times-feel-faster/
  2. http://www.justinmind.com/blog/loading-times-make-the-wait-feel-shorter/
  3. http://productblog.seek.com.au/3ux_tips_to_make_your_site_feel_faster
Improve this answer
6
  • I find those "wireframes" and placeholders to be obnoxious, because they look like everything loaded but instead I find I've been lied to.
    – whatsisname
    Commented May 29, 2016 at 2:16
  • @whatsisname It isn't lying, it's preparing. But the text will almost instantly load in most cases. It's the images that can be filled in later. People will understand that loading content just takes a while.
    – Max de Mooij
    Commented May 29, 2016 at 9:20
  • Thank you, this is a very helpful answer. I was already using loaders for the images but I will probably switch to static placeholders. To extend this principle to the layout part, as it is in your example image, the tricky thing is to have a placeholder of the same size than the content when you don't already know how much content you have. It is easy when you have a single level of documents (like your example), not so much when you have two levels: e.g. youtube channels by category (very similar to my use case).
    – Billybobbonnet
    Commented May 29, 2016 at 11:32
  • Also have a look at the low definition image placeholders: jmperezperez.com/medium-image-progressive-loading-placeholder. Definitely a good way to go if well implemented.
    – Billybobbonnet
    Commented May 29, 2016 at 11:54
  • 1
    @TheRedPea I think it doesn't have an official name yet, so lets be the first! ;-) I see dummy wireframe placeholders as "passive tunnelling", since we're making the user feel like he/she is getting a step closer to seeing the actual content.
    – Max de Mooij
    Commented May 1, 2017 at 22:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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