The Quest for The Perfect Progress Indicator: Your Last Resort for Slow Loading Issues

According to a Google Consumer Insights Report, 53% of visits are abandoned if a mobile site takes longer than 3 seconds to load. And, according to a 2022 Portent study, website conversion rates drop by 4.42% with each second of load time that goes by!

Slow loading times are a common problem that can lead to high bounce rates and frustrated users. The first solutions that come to mind are, of course, reducing file-sizes, compressing images, moving to a faster hosting etc (If you’re new to lowering load times, try this Ultimate Guide to Website Performance @ Hubspot).

But sometimes there’s only so much you can do. It is what it is, the user has to wait. Right? Well … yes, but that doesn’t mean we need to sacrifice the user experience.

Even more so, while you might think this is the worst thing that could happen, you can still turn it into an opportunity to vibe with the user, or at least comfort him while he is waiting for your product to do its thing.

Enter the powerful tool every UI and UX designer needs to master: the progress indicator.

Image Description — indeterminate, or looped progress indicators A.K.A throbbers. You can find the figma file here

TL;DR:Animated progress indicators are essential tools for improving user experience, helping users track their progress, and reducing perceived wait times. In this article I want to explore the best practices for implementing animated progress indicators, how they impact user experience, what options are out there and which one is the best for each use-case so you can make an informed decision in designing one for your specific project.

Progress indicators are also used for all sorts of other purposes like user onboarding or user paths such as surveys or e-learning. But for the purpose of this article we will focus on the ones used for showing the system status (loading, uploading, processing, installing, minting, etc), things that happen in the background without the need for user input.

Why progress indicators matter for UX and when to use them

Animated progress indicators (such as loading bars, spinners, circular progress indicators) are crucial UI elements that inform users about the status of a task or process (this ticks the first of Jakob Nielsens’ interface design heuristics. Check out the other nine here). They are especially valuable when users need to wait for something to load or process, such as file uploads, page loads or data synchronization.

Without progress indicators, users are left in the dark during wait times, leading to confusion, frustration, and often, abandonment. An effective progress indicator not only keeps users informed but also helps manage their expectations, reducing the perceived wait time and ultimately decreasing the bounce rate.

Now, if your app responds in less than one second, there’s no need for an animated progress indicator. However, if the response time exceeds one second, users start to notice the delay and, as more seconds go by, may start to lose focus. But don’t take my word for it. Response time in man-computer conversational transactions is something that has been studied since the 1960s by the legendary Robert B. Miller and other UX pioneers like Jakob Nielsen.

So, for anything that takes more than 1 second to load, a progress indicator is essential to reduce uncertainty and keep the user engaged.

But now imagine something flashing on your screen for 0.4 seconds before a page is loaded leaving you with “What was that? What did I miss?” and all sorts of existential questions that increase your FOMO😱. So if it loads in less than one second it’s actually bad practice to have any form of progress indication. It’s just too fast.

What are your options?

We figured out when to use loading animations. Now let’s see what types of animations we can use. Well, there are three main options to choose from:

1.

The first and most basic option is the indeterminate or looped animation which indicates to the user that something is happening but doesn’t provide information on waiting time.

Some folks on the internet recommend using looped animations for wait times between 1 and 10 seconds. Personally, I would go even lower as I’ve noticed my ADHD kicks in below the 10 seconds mark.

My (personal) recommendation is not to use looped animations for wait times longer than 5 seconds or, if you do, make sure to provide more context than just a spinning wheel (I still have nightmares with the macOS spinning ball of death).

2.

The second, more complex, option is the determinate or fixed animation which indicates how long you have to wait for the process to complete (approximately or exactly). It’s a visual indicator that progress is being made which puts the user at ease, making him more willing to wait.

As a general rule of thumb, you should use a fixed animation for longer processes that take >5 seconds. But you can go below that if you want.

3.

Last but not least we have the skeleton screens approach, which admittedly sounds creepy but I promise it’s not. Skeleton screens are essentially a version of a page where containers are blank in the beginning but into which information is incrementally loaded.

That’s it, that’s all you need to know!

Or is it?🤔

5 best practices to keep in mind.

Now that we’ve covered the basics of animated progress indicators, it’s time to see how we can take them to the next level so they provide even more value to the user.

1.

Give the user more context than just a spinning wheel (or loading bar, or whatever)

Most of the time, if loading takes longer than expected we might think to ourselves: “Is it frozen? Should I restart, or should I wait?”. We’ve all been there.

Adding some extra clarity by including text that explains what is happening helps the user assess the system status. While the user might not know what “parsing data” means, it helps by letting him know that the process is not frozen.

This is especially useful for processes that take up a longer time like software installations for example.

2.

Provide time estimates if it takes more than one minute

You don’t need to be exact, but providing some sort of time estimation manages the users expectations. This may even be a range like “this may take between 5–10 minutes” or “could take up to 10 minutes”.

3.

Make Waiting Great Again

When I was a kid, my mom used to go to a specific hair-dresser because they had cool magazines she could skim over while waiting. She avoided the others like the plague.

Keeping users entertained while they wait has the potential to turn a pain-point into a pleasant experience. You can entice the users:

visually by providing a cool animation or a nice background (on-brand preferably).

interactively by challenging the user to a short game perhaps. This works best for the gaming industry but why not shake things up with a quick “space invaders” while your user is trying to upload that 5Gb video on your platform.

intellectually by giving bits of information on the product in the form of short tips & tricks or just random trivia facts.

These are just some examples but the sky’s the limit so go wild and send me a link after. I love seeing cool examples.

4.

Apply easing to short animations to make them feel faster

Those of you with a background in motion design and animation know what I’m talking about.

The human brain perceives time in a non-linear way. This 2007 study suggests that we can hack the brain into perceiving time as going by faster just by messing with the animation linearity (keyframe interpolation)! How cool is that?

Basically, what the study suggests is that starting the animation slow and increasing the speed over time (ease-in) makes users think less time has passed for the process to complete than in reality.

First, since users seem to have a strong aversion to pauses especially towards the end of an operation, progress bars can be designed to compensate for this behavior. An intelligent progress bar can cache progress when the operation is first starting to mitigate negative progress behaviors (e.g., pauses or slow-downs) later on. Secondly, progress can be downplayed in the beginning and accelerated towards the end, providing a sense of a rapid conclusion that is highly favored by users in our experiment.

quoted from the study

5.

It’s ok to captivate the user, but don’t hold him captive

In some cases, when the process takes longer, the user might reconsider and that is ok.

Let’s take an example: You need to use wetransfer to send a big file to someone. After you hit the “Send” button you realize you uploaded the wrong file <facepalm>.

Luckily, the guys who designed wetransfer are from the future and probably read this article (maybe even clapped it too — hey, maybe it’s you👏) so they included a “Cancel” option.

This actually ties in directly with Jakob Nielsen’s 3rd heuristic. Feel free to read this short presentation I made for all the 10 heuristics. Or maybe just go check out the OG himself.

Final take-away!

Remember that a well-designed progress indicator doesn’t just inform users about the task’s progress — it reassures them, builds trust, and keeps them engaged, even when the system requires them to wait.

Behind the words — disclaimer:

English isn’t my first language, so to ensure my ideas are communicated clearly and efficiently, I use AI as a helpful writing assistant. However, every sentence in my articles is carefully curated, revised and refined multiple times to reflect my own knowledge, beliefs, and insights. Rest assured, this isn’t a pile of AI-generated slop — it’s my genuine voice, polished for your reading experience! 😊

The Quest for The Perfect Progress Indicator: Your Last Resort for Slow Loading Issues

Why progress indicators matter for UX and when to use them

What are your options?

1.

2.

3.

5 best practices to keep in mind.

1.

2.

3.

4.

5.

Final take-away!

More reading on the subject:

Behind the words — disclaimer:

More Articles

Designing Responsive WordPress Pages with HTML and CSS

…when all we ever needed was a text box

How Do I Start When Trying to Find Programming Errors