Hurry Up & Load!
4 ways to distract impatient users through clever design
The Need for Speed
Let’s get real: People shop online because it’s convenient, easy, and fast. Even though you don’t receive your purchase right away, the overall shopping experience is — or at least should be — relatively quick. That being said, ecommerce shoppers are super sensitive to web performance. The slightest delay will have them clicking buttons they’ve already clicked, refreshing their browsers, or even worse: leaving the site entirely.
So this must be a matter of engineering, right? It’s true that at Wayfair, we have an entire team of talented engineers dedicated to improving the speed of our site by setting ambitious goals and optimizing our back-end like a boss. But despite their best efforts, sometimes we just can’t make every experience as fast as our user’s attention span will last. Not only that, chances are users won’t even notice improvements in speed unless they’re at least 20% faster than expected. That’s why in addition to actual performance, we need to focus on perceived performance — and that’s something designers can impact.
How Users Sense Time
Users aren’t measuring load times with a stopwatch. The actual numbers don’t matter to them — what matters is perceived performance.
Perceived performance is how fast a user thinks a site is.
This is a measurement of subjective time that basically tells us how bored a user is. Unlike the objective time that our engineers optimize for, subjective time can’t be counted. It’s determined by volatile variables like user temperament.
The following chart illustrates the average user’s focus based on limits published by Jakob Nielsen in 1993. Per these limits, anything completed within 100 milliseconds feels instant. Anything that takes 1 second to complete is OK, but users will likely notice a pause. Focus will begin to shift after 1 second without any feedback. By 10 seconds, focus is gone.
Time Is Money
As you can see, it only takes a few seconds to leave customers with a bad taste in their mouths.
Google/Microsoft, Amazon, and Walmart have repeatedly shown that a 1 second improvement in page load times results in a 10% improvement in incremental revenue by lowering bounce rates, improving conversion rates, and raising customer loyalty.
What Can We Do About It?
The only way to improve perceived performance is to make users feel like they aren’t waiting, and this can be achieved with a little design magic. Here are some of the creative techniques and best practices we use at Wayfair:
- Active States on Buttons: This shows an immediate response, making it ideal for instances under 1 second.
2. Progress Bars & Spinners: Anything longer than 1 second deserves a loading indication. Progress bars are preferable, since they show progression as opposed to the ambiguity of spinner. But of course, we don’t always know how much time is left therefore we can not use progress bars.
3. Skeleton Screens: For full page loads, these are a great way to give users a sense of progression and distraction.
4. Animations: This is where we can start getting fancy. Animations will mask loading time while simultaneously delighting the user, allowing us to kill two birds with one stone. These come in handy when when refreshing new content.
Designing for Perceived Performance
We may spend weeks researching, user testing, and iterating until we’ve landed on what we believe to be the best possible user experience. Then we see our product live for the first time and think well…this is wicked slow. Prevent the let-down by considering performance from the get-go:
1. Determine which content is most important (and should be loaded first)
2. Design loading states
3. Provide fallback states
4. Work with your developer to fine-tune and optimize together!
At the end of the day, you haven’t fully considered the user’s experience unless you have considered the perceived performance of your product. Your product is only as seamless as it performs, or as a user thinks it performs. As designers, we need to stop relying on our engineers to build our products to perform as fast as humanly possible, and start taking a creative approach to manipulating our users into thinking we are.
Interested in joining the Wayfair product design team?
Browse our open positions here.
Sources:
- https://wpostats.com/
- https://www.nngroup.com/articles/response-times-3-important-limits/
- https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/#endnote2
- https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/
- https://www.smashingmagazine.com/2015/12/performance-matters-part-3-tolerance-manageme
- http://blog.teamtreehouse.com/perceived-performance
- http://dev.mobify.com/blog/beginners-guide-to-perceived-performance
