Is it just me, or skeleton screens are annoying as hell?
I instinctively interpret them as a malfunction, not as a loading screen. A screen is supposed to have data. If it shows up empty, something has gone horribly wrong somewhere.
And as a developer, once it fills out, I get the secondary tinge of discomfort due to the nagging thought "this application has a bad handle on timing, there might be a race condition somewhere. Better do things really slowly and carefully."
In general though, 99% of the time, there should be no loading screen at all. My local airline shows a "Loading..." for several seconds even when doing things like logging in, and all I can think of is wondering what could take so much time. At this point a login should be a thing that can be done in a few ms.
What do you propose instead? Just a spinner? No indication that something is happening at all (browser default)?
I think placeholder components are a step above “Loading…” because they hint at what’s to come and confirm that you’re about to go to the screen you expect. They also indicate that the user is experiencing a view change which is more specific than "wait while something is happening." It's more info.
As for why we need loading screens at all, plenty of developers make the mistake of never considering loading UX because they only use their own app from an optimal internet connection, so they never consider the experience from worse connections.
They show a white screen for half a second, which is usually enough to load the content.
If the request takes too long, a spinner fades in.
They also, very conservatively, show partial- or skeleton screens. Crucially, these skeleton never animate, cause layout shifts or show filler content. They usually just show UI elements that would be there regardless of what the loaded content is.
I never even noticed the loading states until I started paying attention to them.
> What do you propose instead? Just a spinner? No indication that something is happening at all (browser default)?
Sure, that works. If that's too slow, it should be made faster.
I mean, maybe that sounds odd, but even on say, a 10 Mbps connection you can load stuff at 1 MB/s, which means you can load 100K in 100 ms. That's plenty, considering in modern times we don't reload the whole page, so stuff can be preloaded and cached.
I would've guessed that it's normal to have bad connection often when on mobile. At home I have a stable and high bandwith connection, but on my phone when commuting I regularly loose connection for seconds or minutes at a time. Designign apps should take this into account (that you can't completely optimize out of a bad connection)
Oh, sure. I get having it as a fallback for the rare cases. But there's stuff that performs horribly in optimal conditions.
Eg, my airline has this "Login" link on the front page. If I click that, it pops up a little box, then for some bizarre reason has a "Loading..." inside that shows up for 2 seconds, then finally shows a field for username and password. This is on a 16 core CPU with a 1 Gbps fiber connection.
Like what is there even to load? It's just 2 text fields and a couple buttons!
If it's some tracking BS, well, that could be done asynchronously in the background.
I get that there still exist slow computers and bad connections, but in 99.9% of cases, there's no reason to have a visible load time on anything even relatively modern. We've long had the bandwidth to load more than anyone would care to read in 10ms, and the CPU horsepower to deal with it.
I hate skeleton loaders. I usually see them implemented to "prevent" async-loaded elements from causing layout shift... the problem is the backend isn't set up to tell you how many things need to be loaded, what the size of those things are, so the skeleton just assumes some arbitrary values and sizes, takes up space in the layout, and when the loading finishes the layout still inevitably shifts, so the skeleton didn't even do its perceived job except make loading "prettier" (to someone obviously not me).
They cause me to defect. I used to use CNN.com every morning to check stock futures. But the skeleton loading screen takes an incredibly variable amount of time. Sometimes, it’s just a second, but often it’s longer. I don’t feel like sitting there waiting to find out so I switched to CNBC.com, which doesn’t seem to have that problem.
I am not a UI designer, but I don't know why content loads without changing the layout and then has a gentle animation to expand to the appropriate size.
the sudden shift is jarring, especially if the content is staggered
I instinctively interpret them as a malfunction, not as a loading screen. A screen is supposed to have data. If it shows up empty, something has gone horribly wrong somewhere.
And as a developer, once it fills out, I get the secondary tinge of discomfort due to the nagging thought "this application has a bad handle on timing, there might be a race condition somewhere. Better do things really slowly and carefully."
In general though, 99% of the time, there should be no loading screen at all. My local airline shows a "Loading..." for several seconds even when doing things like logging in, and all I can think of is wondering what could take so much time. At this point a login should be a thing that can be done in a few ms.