This webpage doesn't provide any reasoning for why one is better than the other.
I think I prefer the one on the left, but if I happened to be of the opposite opinion, this page would not have changed my mind.
Edit: I'm curious what they'd think of my design[1], which is simultaneously "animated in a pulsing fashion" and "rotated with a fluid, linear animation". Is this a good design or a bad design, according to their criteria?
Surely someone can do better than this, but the spinning one looks broken to me, as if something snapped and it just began rotating violently. Why do some dots have different shades if not to convey the same motion as the rotation? It might as well be any random image spinning on the page. Maybe it feels like there's a lack of intention?
You only need brightness to simulate the illusion of rotation in stationary dots. If the dots are actually rotating then you can just make them all the same brightness. Using two attributes to simultaneously recreate the same effect is overkill and ruins the effect altogether.
I'll speculate that smooth animations like the rotating spinner (right) made for larger gif images due to needing more frames. So historically the pulsing spinner (left) was preferred. You don't want the spinner itself to take very much time to load, either.
Personally I like both, and might pick one or the other as a stylistic choice.
Completely agree, as evidenced by the fact that the same fontawesome package includes both as an option it feels very wrong to suggest that one is "wrong"
I, personally, prefer the one on the left too but I wouldn't ever say the one on the right is wrong or broken or needs to be "fixed"
...so I did, after some contemplation at what this app will attempt to do, and am greeted with a brief amount of static text and two animations that could easily be GIFs.
IMHO, having to display a spinner at all is usually a symptom of the "modern web". Ironically, this app itself didn't display any while it was loading.
All the content on the site is bundled in the javascript -- even all the text. The only markup in the html file's body is an empty DIV.
That's ~55 KiB of minified JavaScript (roughly, Act I of Macbeth in size) for a page with 82 words. Modern web development sometimes goes out of its way to be overcomplicated.
Ironically, the animation is all being done with CSS.
I was looking at https://css-tricks.com/single-element-loaders-the-spinner/ to see some other ways of doing spinners, but after seeing that I realized that having fancy spinner loaders just frustrates me. It reminds me of all the time I've spent looking at a spinner and waiting for an app/page/game to load. The fact that a lot of time was put into designing a nice spinner is almost an insult.
I think the optimal spinner might be the simplest possible one, just show something moving/changing to show that the page is still loading.
I think I've seen this animated (... -> -> . -> .. -> ...), this is quite good. But the animation is important. Without it user can think that the app froze, especially in the world where every other app shows some sort of animation.
Yeah, works only the other way: the fact that the loader is still means one of two things — either the app is completely stuck or it ignores UI conventions of the last decade (which can be good or bad, depending on domain).
I hate these "This is way you do it" people who just assert they're right.
For years there was the whole "Never film vertically" and oh look it turns out that it's quite popular to film that way and in fact Tiktok relies on it.
(I get WHY people think filming horizontally is better, I agree it is)
The whole "I'm right you're wrong" crowd need to get in the sea.
The "never film vertically" was popular when we didn't live on our phones and most media consumption happened on computer screens. I haven't seen that rule mentioned in a very long time now...
That's my point. People were obsessed with how right they were and turns out after a period of time, they were actually wrong and what they were campaigning against (why?) become the defacto choice.
I clearly remember at least 4 different family members all calling my first mobile phone a "wanker phone" and every single of them carries a mobile these days.
> Our goal should be to get people to their content quicker, not satiate them with a perfect spinner, right?
Yes, this.
Every spinner is a band-aid over a bug.
I've dealt with C-suite (typically not engineering!) in tiny startups who were very interested in every detail of their spinners . . . but unwilling to consider the very fact that they needed a spinner to be a problem.
A bug? The reality is there are plenty of times it's simply not feasible to complete a user request instantly (particularly if you're depending on 3rd party services), but it's not likely to take so long you need to redesign the UX to make it clear a background task has been started that will finish later on (in fact some users have real difficulty with such interfaces anyway). Whereas you can always respond to a user action with some instant feedback that indicates work is in progress, and ideally give the user some indication of how long they might have to wait and that the request is still being worked on.
I say this having recently developed such a feature - in fact the customer was fine that the requested action might take up to 10 minutes to complete, but their preference was that a modal dialog showing the progress of said task with an explicit warning not to close it should be shown, despite the fact we'd implemented it to allow the dialog to be closed and the app to be fully functional while the task ran. And yes, every effort was made to reduce the time needed to complete the request but ultimately we were constrained by 3rd party libraries, the large amount of processing needed (image processing on very large documents, well over 1gb) and the fact the customer was unwilling to pay for more compute resources.
The spinner on the page is definitely designed to pulse; it is segmented and each segment has varying contrast (via brightness) to create the illusion of rotation.
I don’t think segmentation alone is enough to justify pulsing rather than spinning. Compare for example two variants of a Font Awesome spinner:
My conclusion is that it’s clear that pulsing is sometimes much more correct than spinning, but it depends on the icon you’re using, it’s not as simple as “it’s segmented” or even “it’s segmented and the segments have visually contrasting brightness”.
My advice would be “Although they are called spinners, spinning may not be the best animation for them, there is also pulsing to consider. Whenever you pick a loading animation, compare ‘spinning’ to ‘pulsing’ to see which one looks more correct.”
To add on to this, it can in fact be much more complicated than both styles put together and still look correct if done well. If you’re on iOS Safari, try scrolling to the top and then slowly pulling the page down (the universal iOS Safari gesture for refreshing).
It starts out not spinning and each segment fades in to full opacity one by one, creating an impression of the spinner “filling up” as you get closer to completing the gesture. The moment you complete the gesture, the fully solid spinner starts spinning, then the spinning slows while some of the segments start fading, and the fade starts pulsing as well. By the time the spinning has stopped, the pulsing is in full effect. When the action completes, all segments quickly return to full opacity and the spinner quickly begins spinning once again, and then (while spinning) the whole icon both fades and shrinks until it disappears.
That is an incredibly complex and incredibly well-executed spinner animation!
The spinner on the right is better simply because 90% of users have already been trained to have a visceral hatred reaction to the spinner on the left. I would rather look at a pulsating orifice than the left spinner.
Why is requiring javascript an accessibility issue? Whether fully rendering the page requires client-side script execution really shouldn't affect whether the resulting DOM can be presented to users with various accessibility needs. OTOH a screenshot is almost never a good way to present information if you care about accessibility... (or searchability, device-neutrality etc. etc.)
53 comments
[ 3.3 ms ] story [ 44.1 ms ] threadI think I prefer the one on the left, but if I happened to be of the opposite opinion, this page would not have changed my mind.
Edit: I'm curious what they'd think of my design[1], which is simultaneously "animated in a pulsing fashion" and "rotated with a fluid, linear animation". Is this a good design or a bad design, according to their criteria?
[1] https://retr0.id/stuff/spinner.html
Personally I like both, and might pick one or the other as a stylistic choice.
If you combine them, you get one where the dots spin slowly, while there's another spinning effect with the colours of the dots themselves.
I, personally, prefer the one on the left too but I wouldn't ever say the one on the right is wrong or broken or needs to be "fixed"
...so I did, after some contemplation at what this app will attempt to do, and am greeted with a brief amount of static text and two animations that could easily be GIFs.
IMHO, having to display a spinner at all is usually a symptom of the "modern web". Ironically, this app itself didn't display any while it was loading.
edit: it is, it's just also a React app
That's ~55 KiB of minified JavaScript (roughly, Act I of Macbeth in size) for a page with 82 words. Modern web development sometimes goes out of its way to be overcomplicated.
Ironically, the animation is all being done with CSS.
Somewhat amusing, a little detail missing
I think the optimal spinner might be the simplest possible one, just show something moving/changing to show that the page is still loading.
Please fix your webpage.
that's entirely troll-bait!
The whole "I'm right you're wrong" crowd need to get in the sea.
I clearly remember at least 4 different family members all calling my first mobile phone a "wanker phone" and every single of them carries a mobile these days.
Our goal should be to get people to their content quicker, not satiate them with a perfect spinner, right?
A loading indicator does a nice job of indicating work being done.
Yes, this.
Every spinner is a band-aid over a bug.
I've dealt with C-suite (typically not engineering!) in tiny startups who were very interested in every detail of their spinners . . . but unwilling to consider the very fact that they needed a spinner to be a problem.
I don’t think segmentation alone is enough to justify pulsing rather than spinning. Compare for example two variants of a Font Awesome spinner:
Spinning (correct) https://fontawesome.com/icons/loader?f=classic&s=solid&an=sp... vs Pulsing (correct) https://fontawesome.com/icons/loader?f=classic&s=duotone&an=...
This other example is a little harder. Both spinning https://fontawesome.com/icons/spinner?f=classic&s=solid&an=s... and pulsing https://fontawesome.com/icons/spinner?f=classic&s=solid&an=s... seem slightly incorrect (though adding in visual contrast between segments makes pulsing seem much more correct: https://fontawesome.com/icons/spinner?f=classic&s=duotone&an...)
And here is a a third spinner from FontAwesome that always looks correct spinning and never looks correct pulsing. Solid spinning (correct) https://fontawesome.com/icons/spinner-third?f=classic&s=soli... / duotone spinning (correct) https://fontawesome.com/icons/spinner-third?f=classic&s=duot..., vs solid pulsing (incorrect) https://fontawesome.com/icons/spinner-third?f=classic&s=soli... / duotone pulsing (incorrect) https://fontawesome.com/icons/spinner-third?f=classic&s=duot...
My conclusion is that it’s clear that pulsing is sometimes much more correct than spinning, but it depends on the icon you’re using, it’s not as simple as “it’s segmented” or even “it’s segmented and the segments have visually contrasting brightness”.
My advice would be “Although they are called spinners, spinning may not be the best animation for them, there is also pulsing to consider. Whenever you pick a loading animation, compare ‘spinning’ to ‘pulsing’ to see which one looks more correct.”
It starts out not spinning and each segment fades in to full opacity one by one, creating an impression of the spinner “filling up” as you get closer to completing the gesture. The moment you complete the gesture, the fully solid spinner starts spinning, then the spinning slows while some of the segments start fading, and the fade starts pulsing as well. By the time the spinning has stopped, the pulsing is in full effect. When the action completes, all segments quickly return to full opacity and the spinner quickly begins spinning once again, and then (while spinning) the whole icon both fades and shrinks until it disappears.
That is an incredibly complex and incredibly well-executed spinner animation!
When it is large it’s fine.
https://i.imgur.com/POLlQnR.jpg
Two images, few lines of text - yeah, let's make it a JavaScript only app!