It's Kind of Mesmerizing...

Home / Blog / This Post

That feeling of disappointment when the loading screen is ... done!?

Like everyone, I avoid retarting my phone/laptop/etc... if at all possible.

One of my first smart phones was a Moto G 3. Oddly enough, I absolutely loved the bootscreen spinner. For fun, here's my attempt at recreating it in HTML/CSS.

I learned something interesting about spinners years back. If you make an interesting spinner, your users don't mind load times quite as much.

I was hoping that the data fetch would take longer...

In fact, I once worked on a project where I actually felt disappointed when the spinner went away. Like a good piece of music, the spinner we used on that project had a sense of tension and release.

Setting Expectations

It would start out with all the elements aligned with one another, thus setting the expectation.

Creating Tension

Then it would proceed to rotate each element at a different speed, thereby breaking the alignment and creating tension.

And Wait for It...

Sure, data was fetching in the background, but as the user, I was no longer thinking about that. I was hoping that the data fetch would take just a little longer. I really wanted to see the rotating elements once again align. There's the release.

Lemons Lemonade

Sure, the ideal user experience is for everything to load instantly. In reality, we all have to wait sometimes.

The spinner we used on that project had a sense of tension and release.

When faced with the necessity of loading indicators, consider using one with an interesting dynamic of tension and release.

If you found this useful, you'll love my UX Mini Course.

Give Your Users a Better Experience in 5 Easy Steps

Apply the principles by the end of the course your users will have a significantly improved user experience.

Plus, you'll have learned five fundamental principles of great UX that will pay dividends for the rest of your career!

Including
  • Improved Discoverability - make it easier for your users to find valuable features.
  • Better Form Input - make it easier for your users to sign up, log in, and pay you.

The UX Mini Course is COMPLETELY FREE!


Read Now
Contact Me
Copyright Caleb Peterson • Soli Deo Gloria