Stop using those annoying spinners

I've been catching myself thinking that loading spinners really piss me off lately. It's okay when I see them while logging in to some service, but it becomes a living hell when I see them everywhere afterward. In some mobile apps, you may encounter them on each and every screen. Moreover, I've seen a web app with 10-15 different sections on one screen with 10-15 spinners. One for each section.

I do understand why people use them. It is the easiest way to show that something is loading. And it's even worse when you don't give your user any feedback. But these spinners have some serious flaws.

In The Psychology of Waiting Lines, David H. Maister describes the psychology of queueing. The concepts from his research can be applied to any situation when people are forced to wait for something.

Here are my three takeaways:
1. Unexplained waits feel longer than explained waits.
2. Unoccupied time feels longer than occupied time.
3. Anxiety makes wait feel longer.

And now you can see why bare loading spinners are garbage:
1. They don't explain to us what we are waiting for.
2. We can only watch at the spinning wheel, which is boring. You can compare it to looking at the clock.
3. We don't know when it'll end.

Here is what you can do to fix it:
- Explain the wait. Put some text like: "We are looking for available tickets so you can forget about your work and chill out on the Miami beach. This might take up to a minute." below the spinner.
- Occupy your user with additional information, a short survey, fan fact, or motivational quote.
- Show progress indicator, which will display the actual progress. You can estimate the speed of the progress bar using historical data if you aren't able to get real-time feedback from the application.
- Remove the spinner if it is a placeholder for other content. You might have noticed how Google, Facebook, Instagram, and other big services handle such situations. Google shows low-quality images while high-quality ones are on their way. Facebook and Instagram often use Skeleton UI*. Facebook has even developed an open-source library Shimmer for Android and iOS that make these skeleton screens even more appealing.

*A skeleton screen is a UI that doesn't contain actual content; instead, it shows the loading elements of a page in a shape similar to the actual content.

#dev #thoughts