2

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?

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 '21 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 '21 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, privacy policy and cookie policy

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