Designing Better Loading and Progress UX

As designers, often we can't speed up interactions for technical reasons. But we can reduce the perceived waiting time, which is often way more important than the actual duration.

But how do we reduce the frustration of waiting? Let's explore a couple of options and UX guidelines to consider — to reduce the impact of waiting and choose the right loading indicator based on anticipated wait time.

The Psychology of Waiting #

Nobody likes to wait. Especially when it's not clear how much is left to wait, and if there is any progress at all. However, not every waiting is the same. The perception of waiting time is typically way more important than its actual duration.

There are 2 types of waiting that we experience:

• Passive waiting (standing still)
• Active waiting (walking, interacting, being busy)

Research shows that we tend to overestimate passive waiting by a significant margin (36%) (Katz et al., 1991), so mundane waiting usually feels much longer than it actually is. Active waiting, on the other hand, usually feels much shorter — even although it isn't necessarily true.

Changes in speed are perceived differently, too. Small optimizations in speed, like shaving 0.2 seconds off a 5-second wait, typically go unnoticed by users. We usually speak about the 20% rule: users only notice speed changes of at least 20%.

Choosing The Right Loading Indicator #

When we design loading experiences, we must always answer 2 key questions: "How much longer will this take?" and "Is it actually working?" Typically this means adding signals about progress — a loading bar and a status update.

When we are choosing a loading indicator, we actually design not that indicator — we are designing the waiting UX. The less that waiting feels like passive waiting, the better. And typically it means keeping people busy while something is happening in the background.

We choose the right loading indicator based on the anticipated waiting time:

• No wait (< 1 sec):
  Don't use any loading indicators. They won't be perceived in time, and only cause visual noise.
• Short wait (1–3 secs):
  Use skeleton screens or looping spinners.
• Medium wait (3–10 secs):
  Determinate progress bars that show how much is left.
• Long wait (10+ secs):
  Show progress bar, percentage, status update.

For long wait times, it's a good idea to not only show detailed progress, but also allow users to interact with other parts of the application or offer options for what to do next. Keeping people busy works best.

Reducing Perceived Waiting Time #

Uncertainty amplifies waiting discomfort. But when a product signals and visualizes progress, users tend to accept longer waiting time because they have right expectations and can track that progress as it's happening (Buell & Norton, 2011).

One interesting technique to reduce perceive waiting time is optimistic UI. There, we allow users to proceed with next steps or interactions while a background process continues. Basically we shift from passive waiting to active waiting, again, by keeping users busy.

We know it intuitively, but it's worth mentioning nevertheless: the more valuable the reward for completing a task, the higher the user's tolerance for waiting. So if we communicate that the waiting will be worth it, it might be helping to nudge user to wait a little bit longer.

Always Start Early #

Research also shows that waiting to start a task feels longer than waiting for it to finish, so initiating tasks early can minimize frustration. For example, we perceive loading slightly faster if the progress bar moves faster at the beginning and slows down at the end, rather than moving at a constant speed.

We also need to be mindful of "queue jumping": when a task that started later finishes before one that started earlier. That's when users lose trust and confidence in the system as they no longer know if everything actually worked as expected.

TL;DR Useful UX Guidelines #

• Match the indicator to the wait time. The choice depends on how long you expect users to wait.
• Spinners work for short, repetitive tasks. Avoid multiple spinners on one page.
• Skeleton screens work better than spinners. They make the load feel faster and more structured.
• Show indicator where they will appear. For "scroll up to refresh" the indicator should be at the top; for pagination or infinite scroll, it should be at the bottom.
• Design background operations: For long processes (e.g. video export), collapse the task into a background state, so the user isn't "blocked" from using the rest of the application.

Wrapping Up #

While these strategies might not make your application faster, they will make it feel faster — and it could be enough to keep users on the page for just a little bit longer, and drive them to success from there.

Just keep in mind: you are not designing a regular UI component. You are designing the waiting UX. And the best experience is when users never experience it. But if they must, make sure it's worth the waiting.

Useful Resources #

• Part 1: The Perception Of Time, by Denys Mishunov
• Part 2: Perception Management, by Denys Mishunov
• Part 3: Tolerance Management, by Denys Mishunov
• Part 4: True Lies of Optimistic Interfaces, by Denys Mishunov
• Loading and Progress Indicators UX, by Taras Bakusevych
• Everything You Need to Know About Skeleton Screens, by Bill C.
• Progress Indicators Make a Slow System Less Insufferable, by Katie Sherwin, NN/g
• Loading Feedback in Enterprise UX, by Fanny Vassilatos, Ceara Crawshaw
• How To Fix a Bad User Interface, by Scott Hurff