interface - Should I display UI asap and populate it later or show a preloader until I get my data?

Saturday, February 13, 2016

interface - Should I display UI asap and populate it later or show a preloader until I get my data?

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?

Answer

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.

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