It’s Time to Replace Your Loading Spinners

By Scarlett Payne |   April 29, 2021

USABILITY

In a 2017 study, Google  found that:

• 1-3 second load times increased bounce rates by 32%. • 1-5 second load times increased bounce rates by 90%. • 1-6 second load times increased bounce rates by 106%.

Designing for  Load Times

“Design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.” This is where loading indicators come in.

A Good Indicator:

1. Makes a user’s perception of time feel faster. 2. Gives the sense that the application is making progress. The most common loading indicator in UI design is the loading spinner.

The Problem With Loading Spinners

1. They don’t give any sign of progress. 2. They fail to answer a user’s questions (Is it almost done?) 3. They make the wait feel longer than it is. 4. They don’t prepare user expectations.

Your Options

The best way to fix frustration with a loading spinner is to: • Reduce the wait until it’s near nonexistent • Use an alternative loading animation to indicate progress

Standard Loading Animation Options

1. Indeterminate progress indicators: used when you don’t know how long loading will take (e.g., spinners). 2. Determinate progress indicators: used when you do know (e.g., progress bars).

The problem with this strategy is that you never actually know how long something will take to load. You can make an educated guess, but that’s about it. It’s why countdown indicators sometimes count back up.

The Solution

Where spinners stick around until a page is fully loaded, skeleton screens reveal each part of the UI as it loads. They start with an outline of the interface design and fill in the text and images as they load, usually in that order.

Active vs Passive Waiting

Passive waiting is when you wait with nothing to do. Active waiting is when you do something that feels like progress as you’re waiting. Skeleton screens use active waiting by giving users new information to process each time the screen updates.

Good skeleton screens use multiple progression phases to keep activating the user’s focus and show content as soon as it’s ready to keep users informed, interested and hopeful.

Benefits of Skeleton Screens

• Remove focus from the length of wait times • Provide proof of progress • Make the loading process feel faster • Allow users to start building UI expectations

Shorter is Better

If a wait is longer than ideal, you can use a spinner for a couple of seconds before revealing the placeholder UI and loading in your content. Still, reducing your wait time is always the best option and should be your priority.

Test Even The  Good Ideas

User experience starts with the user, and no answer is right for everyone, even when it is for most. That’s why you should always test solutions for yourself first.

To learn more about improving your UX,  reach out.