3

My scenario is that I have a menu that loads pages on my SPA when an item is clicked. Right now it is rather fast (.1s with cache and ~.3s when not cached). However I expect this time to rise in production, specially in cases when the users's internet speed is slow. This is my page as is:

left sidebar, rest is an orange outlined rectangle with "permissions" in the top left

Highlighted in orange is the space where the pages are loaded. I wonder if I should use a loading state, which I'm very inclined to base on the heuristic of system status. However, which one? I don't want to implement a complex loading state if not necessary. Luke Wrobleski wrote an article back in 2013 about avoiding spinners and the usage of skeleton Pages, which are now most everywhere. Bill Chung performed research on user experience comaring spinners and with skeleton pages (see in Everything you need to know about skeleton screens).

I will most certainly use skeletons for the individual components of the page that has data fetching. However, is it too overkill for this idle time between a user clicking a link to a page and it being loaded? If so, what's the best approach? I'm overthinking this too much and maybe a simple spinner would do the trick without impacting the user?

1
  • There’s also the option to only show a spinner after a while, being optimistic about the loading time. I believe I read some about that approach, I’ll try to find it. What’s sure is that a spinner focusses the user on the waiting leading to the waiting time being perceived longer.
    – Andy
    Feb 6 at 9:48

3 Answers 3

1

Occupy the user with a transition animation, like fading out contents. This will distract users from the waiting and provide you some magical 200 ms more to finish the actual content loading.

Showing a spinner focusses the user on the waiting, which will lead to the delay being perceived longer, hence the app being perceived slower.

You will still need a loading indicator, in case it really takes longer, to visualise system status. But you can show it after the old content faded out and the new one is still not ready.

A good practice during longer loading periods is to provide tips on the app usage.

See also How can I distract / entertain people in an app while waiting?

0

Use loading indicators where dynamic content is loaded

Keep your "page furniture" cached or otherwise in a state where it doesn't need to be loaded every time the page paints. Then, use loaders (spinners, skeletons, whatever works best) for the dynamic content that's being retrieved. An example from Twitter shows loaders only on the content that needs to be retrieved:

Twitter loading screen

Your point about the user's internet speed is right on - they might be having wifi issues that day. A loading indicator helps them understand that the system is trying to retrieve content, but there's something hindering it. Without the indicator, the user might think their browser is frozen.

2
  • 1
    "use loaders (spinners, skeletons, whatever works best)"... the question is basically asking which one to use.
    – musefan
    Aug 12, 2021 at 16:12
  • I think it depends on the information being loaded, but I'm interested in your answer. Mine focused on the question of showing a loading state at all.
    – Izquierdo
    Aug 12, 2021 at 16:14
0

In our work, we use spinners quite a lot. It is definitely better than not having any loading indicators. We have seen from our actual user data that, where we expected quick loading times, but something went wrong, and there were no indicators of something happening the users just refreshed the page to make the issue even worse in the end. So at least a spinner or something of a higher grade is definitely a must.

Your Answer

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

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