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 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:
- Research the priority content that should load in your interface. If it’s a news article, the text content should load first, allowing the user to start reading before the experience has even finished loading.
- Provide a loading state (e.g. placeholder content) and a fallback (e.g. un-styled text) for all elements you design and use.
- Work with the developers to fine tune performance and work out what technologies can be used to ensure quick loading (e.g. browser caching and progressive jpegs).
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.
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:
- Analyse your designs with heatmaps
- Animated Transitions in Mobile Apps
- The Psychology Principles Every UI/UX Designer Needs to Know
- Design Principles for Reducing Cognitive Load
- Perceived Performance - Treehouse
- Perceived Performance - KeyCDN
- Beginners Guide To Perceived Performance - Mobify
- Why Performance Matters - The Perception of Time - Smashing Magazine
- Actual Performance, Perceived Performance - Coding Horror
- Website Response Times - Nielsen Norman Group
