6

I have an app I created for my company that uses arrays and a lot of JS to load in the content. This obviously comes back with some huge load times (up to 8s), where the majority of it is when the arrays are appended to my html.

What are some ways I can alleviate this loadtime, I have my JS optimized bringing close to 100 lines down to about 20-30, and that seemed to help. Is using a fake loader, or something that could symbolize that the page is not 100% there yet, bad ux?

For example, if I displayed a little rotating animation for 5 seconds on the side that is being appeneded, is this considered poor ux? More so than just leaving it blank? Is lying to a user to 'fake a load time' worse than just having a slow load time?

|improve this question
  • 1
    With a little JS work, you can track the download progress of files loaded using XMLHttpRequest. Maybe you should try refactoring your page so the slow data is loaded using XMLHttpRequest, rather than with the page and then you'll be able to provide a more realistic load progress. – Lie Ryan Mar 5 '17 at 3:23
  • So i took a look at some analytics, and our page is slowing as it loads iframes. I'm going to be talking with our site manager tomorrow on whether we can pass CORS headers instead, because the iframes are bringing over both content, but also the errors/warnings from those sites that are being framed. – knocked loose Mar 6 '17 at 4:51
  • I'm not clear about what the question is. I see three options: 1) nothing, 2) a static progress indicator (eg. "Loading...", or a spinner), or 3) a dynamic progress indicator ("66% complete"). Are you asking which of the three is best, given that you'd have to lie about the third? – Adam Zerner Mar 24 '17 at 19:38
  • From a technical perspective, could you show each item as it comes in, rather than waiting to show them all? Or perhaps show them in small batches? – Adam Zerner Mar 24 '17 at 19:39
  • Have you thought about lazy loading elements who aren't visible yet ? – JoeriShoeby Mar 28 '17 at 15:57
11

https://www.nngroup.com/articles/progress-indicators/ has in-depth research about it:

In short: Dynamic “visibility of system status remains among the most important and universally applicable principles in user-interface design.”

Summary: Wait animations, such as percent-done bars and spinners, inform users of the current working state and make the process more tolerable to the user by reducing uncertainty. Users experience higher satisfaction with a site and are willing to wait longer when the site uses a dynamic progress indicator.

As one of the original 10 heuristics for web usability, visibility of system status remains among the most important and universally applicable principles in user-interface design. The goal is to provide the user with feedback about what is happening with the system or interface, within a reasonable amount of time, and, in Norman’s interaction theory, to bridge the gulf of evaluation between the user and the system.

One of the most common forms of system feedback on websites and applications is a wait-animation progress indicator. This design element shows “busy” feedback when the site is loading or processing information.

Static progress indicators: Don’t use them.

One final way to provide feedback is through a static progress indicator. This includes an unmoving image or text, such as “Loading…” or “Please wait while we process your request” to indicate that the request has been received. While any feedback is better than none, static indicators should be replaced with another type of indicator, because they do not offer enough information about what is happening. If the system hangs or becomes stuck, the user has no way of knowing they need to restart the action.

[image of static progress indicator]

Avoid using static progress indicators, which do not give enough feedback about the status of the action.

|improve this answer
  • 1
    If you plough through the waffle on that NN group link you get to the "10 second rule" for loading indicators. – PhillipW Mar 3 '17 at 21:34
3

I assume this is either initial load of a single-page application or you're dealing with an asynchronous update of content on a specific part of the page.

If you're trying to preview content during an initial page load (to prevent the layout from awkward re-drawing), look at stencils.

For subsequent asynchronous content loading triggered by a user action, then use some animated indicator (e.g. spinner).

The Lightning Design System docs have great guidance for these scenarios: https://www.lightningdesignsystem.com/guidelines/loading/

Spinners

Show spinners when retrieving data or performing slow computations.

Spinners are animated SVGs or GIFs. They reduce the use of awkward white screens and blank containers to communicate that the system is working. Use spinners when a component on a page is making an asynchronous update without refreshing the page.

Center the spinner horizontally and vertically within the container. Don’t place spinners directly over text or other visual elements on a page without first applying a light or dark mask.

If necessary, you can use a text label to communicate what the system is doing, such as “Uploading data …”

|improve this answer

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.