A Designer’s Guide to Perceived Performance

Posted 3 months ago by Luke Jones

A well-designed site isn’t how easy it is to use or how elegant it looks. A site isn’t well-designed unless the user is satisfied with their experience. An overlooked aspect of this experience is performance. A slow, beautiful site will always be less satisfying to use than an inelegant fast site. It takes a user just three seconds to decide to abandon a website.

“To the typical user, speed doesn’t only mean performance. Users’ perception of your site’s speed is heavily influenced by their overall experience, including how efficiently they can get what they want out of your site and how responsive your site feels.” – Roma Shah, User Experience Researcher

“A slow, beautiful site will always be less satisfying to use than an inelegant fast site.”

At the surface, performance is achieved through compression, cutting out extra lines of code and more, but there are limits to what can be achieved at a technological level. Designers need to consider the perceived performance of an experience to make it feel fast.

“There are two kinds of time: clock time and brain time.”

There are two kinds of time: clock time and brain time. The former is the objective measure of time; the latter is how a person perceives time. This is important to people involved in human-computer interaction, because we can manipulate a person’s perception of time. In our industry, this manipulation is called the perception of performance.

How Quick is Appropriate?

This visual demonstrates how we perceive time. Anything less than one second is perceived as ‘instant’ behaviour, it is almost unnoticeable. Up to one second is immediate, anything more than this is when the user realises they are waiting.

Instant behaviour could be an interface providing feedback. The user should not have to wait for this, they should get a message within 0.2s of clicking a button.

Immediate behaviour could be a page loading. The user should not have to wait any more than 1 or 2 seconds for the results they want to load.

If an interface needs that extra time, we should say ‘this may take a few more seconds’ and provide feedback on how long it will take. Don’t leave the user asking too many questions.

Active & Passive Modes

Humans do not like waiting. We need to consider the different modes a person is in when using a website or application: the active and passive modes. During the active mode users do not realise they are waiting at all; during the passive mode their brain activity drops and they get bored.

“It takes a user just three seconds to decide to abandon a website.”

You can keep people in the active mode by pre-loading content. Modern browsers do this while you are typing in a URL or searching in the address bar. Instagram achieves this by beginning to upload photographs in the background the moment you choose a photograph and starting creating the post to make the upload feel instant.

instagram

Instagram also shows an obscured preview of images that have not yet loaded.

“As designers, we should do everything we can to keep our users in the active mode.”

Display content as soon as you can to reduce the amount of time a user is in the passive mode. YouTube does this by streaming the video to the user despite it not being 100% downloaded. Instead, it estimates how fast the user can stream, and waits for that portion of the video to load, automatically chooses a bitrate, and starts playing it. Only buffering when absolutely necessary.

Both methods require us to prioritise the content we want, and load the rest of the page around it.

“Your page needs to load 20% faster for your users to notice any difference.”

Your page needs to load 20% faster for your users to notice any difference. If your page takes 8s to load today, a new version needs to take 6.4s to load for it to feel faster. Anything less than 20% is difficult to justify.

Helping Developers

Even if you understand all aspects of page speed, you should be thinking about it the moment you start creating a design system for a UI, working with the development team to fine-tune performance and figure out where marginal gains can be had.

This could be as simple as ensuring you provide loading states and fallbacks (failed states) to your developers so the user doesn’t have to wait for the entire page to load before they can read anything.

Here’s a short step-by-step guide to ensuring you are considering performance when designing:

slack-placeholder-content

Slack take a common approach of placeholder content to imply what the user is going to see, making progress feel faster than it is. A blank screen here would be frustrating.

These tasks may seem complete, but it is important to revisit your work and fine-tune to make as many marginal gains as possible.

Measuring Performance

A way to measure perceived performance is by inviting users to navigate your site and asking them to estimate how long it took to load. Another option is to provide multiple experiences and ask which is faster.

perceived-performance-survey

A survey can be as simple as a scale like this one. Get enough answers, and you have a clear average.

The sample should be large enough to gather a realistic average that takes into account different perceptions and, if remote, the varying connection speeds of your participants.

“A site isn’t well-designed unless the user is satisfied with their experience.”

Once you have measured the perceived performance, you should continue to tweak it, perform research, and make further improvements. Things can only get better. Keep tweaking until it’s at a point you’re happy with it, then tweak again.

Further Reading

If you want to dig deeper into the perception of speed, check out the following resources:

Design and prototyping for everyone

Design and prototyping for everyone

Thousands of individuals and teams use Marvel to design and prototype ideas.

Get Started, it's Free!

UI / Visual designer with a focus on user-centred design and research. Currently working at Hudl. Follow me on Twitter @lukejones and check out my work.

Related Posts

When I started working as a Junior UX Designer, I was a fish out of water. My knowledge about technology was limited. In meetings I would keep hearing these words, but had no clue what they meant. I’d get back to my desk and google what I’d heard, hoping no one would spot me! Overtime, I found there were lots… Read More →

Who the hell am I to tell you anything about being a good product designer? I am not a personal trainer, a Human Resources specialist, a Guru or any type of Evangelist. I just try to do my best in every sphere of my work, enjoy every process and learn as much as I can on the journey. A big… Read More →

Work is work and will always be. Some people love it, some just roll with it. Like a service, the impressions we have about our jobs is based on how well the company culture, relationships, and work environment contribute to achieving our goals. As design professionals, we know that not every company praises the value provided by design-oriented approaches. Production-oriented… Read More →