Loading doesn’t have to be painful

Andy Fang
HH Design
Published in
5 min readJan 27, 2015

This is no news, but users hate waiting. Every second I have to wait for my screen to respond, I’m 16% less interested. Sometimes there is a technical fix; but by and large, waiting is still a process users have to go through. While quicker load times yield better experiences, the reverse is not always true. Users are far more attached to the byproducts of performant pages: how responsive it feels, its reliability, and its tone. All three of these can be met with a strategic approach to preloading.

Minimum layouts

What bare minimum layout gets your point across? Users should be shown signifiers on a page as soon as possible to set expectations.

Facebook is a good illustration of this; when users load their feed, they’re not requesting specific content from their friends. As in, you have no idea what the context is, only that there should be content, somewhere. By showing people where they should expect content, it gives them time to process the next logical expectation.

First impressions are important

As a principle, platforms loading in under a second don’t need much feedback. Feedback is only needed when a user diverts from his flow of thought, which usually happens after a second. The only exception to this is when there’s an external AJAX request, in which case you need to account for broken internet connections.

Users don’t always mind waiting

The second principle is that a delay is only painful when no new information or context is presented. Alex Stone noted that in 2012, Houston airport complaints dropped to nothing after the airport extended the distance between the terminals and baggage claim. Even though the policy forced travelers to walk six times further, people didn’t categorize occupied time as a delay.

To recap, three principles:

  1. Occupied time feels like “part of the experience”
  2. Users aren’t afraid to multitask, and will return to the page if they’re given enough context to believe the wait is worthwhile
  3. As a general rule, the more urgent the task (browsing content vs toggling settings, etc), the more persistent users are.

Inconsistencies

Inconsistencies, such as an unstable connection, need to be acknowledged — yet should never imply a one-sided problem; that is, the platform should act as a bystander who is actively trying to sort things out. One way to achieve this is by acknowledging delays in third person. Twitter does this well because people are assured that other people are also having the same issue.

Provided they stick around, another principle is that users will justify a longer wait by how well context is transitioned. An animation is “responsive” when it’s quick, originates from the point of interaction, and ends in a predictable way.

Do

Don’t Do

Don’t overuse animations. Movement on anything <200ms (before users notice a delay) is just overwhelming. There are three guidelines that can help you approach appropriate feedback.

  • the Time between the intial and final state
  • the Urgency of the task
  • the Reward

Longer time, more feedback

The longer the load time, the more frequent, informative, and progressive each checkin should be. Flickr is traditionally slow, so flicker.com/upload gives frequent, light-hearted feedback on their loading indicator. Like the airport anecdote, users don’t categorize occupied time as a “delay”.

More urgent, more context

The more urgent the task is at hand, the more persistent and tolerant the user becomes. Banking sites are conventionally slow, but the frustration of that is trivial compared to if the platform were to suddenly stop loading. So the more urgent the task, the more consistent the experience needs to be.

You can do this by dissecting a comprehensive experience. So, instead of a settings view that loads in 3 seconds, break it down into three separate forms that load in a second. This way the perceived load time is shorter in exchange for prolonged interaction, which users are more tolerant of when doing an important task.

More context, more tolerance

Humans inherently enjoy having goals, then achieving them. It turns out that when you finish a complex task, your brain releases massive quantities of endorphins. Yes, the more the user knows what is happening, and why they‘re waiting, the more rewarding the wait becomes.

When it never loads:

At the highest end of the spectrum, something that never loads is going to be a disappointment regardless of its urgency. Since you’ll never meet the MVE, it is best to set a timeout so the user is aware that things aren’t inherently broken.

There are clever ways of shifting blame; Facebook has seen great results just by using the preloader on the right; with a native spinner, the user subconsciously associates any issues with their device.

With the exception of static sites, even fast platforms need to account for the “never loading” case. Dropbox’s approach is simple but effective: the “Loading” placeholder is displayed after a 200ms timeout from loading photos.

Everything thus far has come down to three principles:

  • Occupied time feels less like waiting and moreso “a part of the experience”
  • Users aren’t afraid to multitask, but will return to the page if they’re convinced the wait is worthwhile
  • The more they understand what’s happening and when it’s finished loading, the more tolerance they have towards longer wait.

Waiting is an everyday routine, but it shouldn’t feel like one on screens. Load times aren’t absolute but rather, highly perceived. It should be immersive, and ultimately feel like part of the experience. In the end,

Don’t make users wait, period.

Thanks to Geoff Teehan for inspiring this article and responding to a stranger’s email.

HH Design is a community for students interested in the intersection between design and technology.

contribute

--

--