Designing for the appearance of speed
The jury has spoken: performance, conversion, and brand engagement are inextricably connected. Amazon has shown that each 100ms of latency costs them 1% in sales. Walmart chalks up an extra 2% conversions with every second of performance improvement. Any online shopper will tell you that faster is better than slower — but is speed as simple as the shortest distance from point A to B?
“Speed, it seems to me, provides the one genuinely modern pleasure.” — Aldous Huxley
Why designing for performance matters
Performance plays an important role in shaping how customers perceive your brand, and may affect a customer’s purchase intent. A 2013 study of the effects of mobile web performance on user emotional engagement found that a mere 500 millisecond delay resulted in a 26% increase in user frustration, and an 8% drop in engagement. In the same study, slow sites dramatically reduced the measured emotional dimensions around purchase intent and brand functionality. If that’s not a smoking gun, I don’t know what is!
We in the western world also cannot overlook our first-world bias: while 4G LTE connections have become the defacto mobile standard for North American consumers, most of the world relies on 3G (sub 15 mbps) network speeds. To put this in context, imagine waiting almost 8 seconds for Amazon.com to load completely on a 3G connection! With these constraints in mind, it’s more important than ever to design for real world connections, and optimize where possible, to ensure the quickest possible load for your shoppers.
Measurable vs perceived performance
Real world performance (statistically measurable) and perceived performance (a qualitative measurement of efficiency), are different things.
Decades ago, in an attempt to quell customer complaints about lengthy waits at the baggage claim, the Houston airport increased the number of employees working handling shifts to improve the measurable performance of their baggage off-loading. Wait times fell considerably — but complaints continued to roll in.
An objective measure of performance ignores what truly matters: the customer journey.
The airport executives had failed to see the true problem at hand — a human propensity for loathing unoccupied time. While wait times were down, the walking journey from the terminal gate to the luggage claim was a short trot, so travellers spent most of their time waiting. By strategically moving the arrival gates farther away from the baggage carousel, they increased traveller walking time to the baggage claim, and nearly eliminated any unoccupied time. The complaints stopped. This is a real example of how the performance that people feel is more important than “under-the-hood” performance. An objective measure of performance ignores what truly matters: the customer journey.
How you can change user perceptions
As the Houston airport found out, satisfying users is more than about adding resources — it’s also about understanding what makes people tick. Here are three ways you can start leveraging customer perceptions about performance:
1. Embrace the now: instant load transitions
In 2013, Luke Wroblewski first discussed the drawbacks of using loading spinners in on-screen experiences, and spoke in favour of what he called “skeleton screens.”
The concept behind skeleton screens is the use of empty pages that are progressively populated with content as it becomes available — immutable regions of a page are rendered instantly on load, appearing as neutral color blocks, and are gradually replaced with content such as images, headings, and interface labels.
This approach contrasts with the use of a loading spinner. A spinner is great at communicating that the user is in a state of waiting — but that’s a problem! As we recall in the anecdote of the airport baggage claim, the state of waiting is an agonizing ordeal. In other words, designers can inadvertently make the wait feel longer and more unpleasant by rubbing the waiting period in the user’s face. How’s that for a non-user centric design choice?
Instant load transitions mitigate the wait by providing a perceived sense of movement and activity by loading placeholders instead of making the act of waiting the star of the show like spinners do. It’s similar to how some of the best dentists turn the operating room TV on to your favorite show while performing your root canal. In the same way, the best designed shopping sites can distract you from the act of waiting for pages to load, by seemingly saying that there’s no wait at all.
2. Immutability and motion
The visual power of immutability
Instant Load Transitions (ILTs) improve the waiting experience by pre-emptively providing a perceptible sense of constant progress — but an important role played by the placeholders rendered by ILTs is that of providing a consistent visual experience, between, say, a homepage and a product description page.
How often have you seen image heavy sites load with the site footer appearing where you’d expect a beautiful splashy product image? Seconds later, the image renders, pushing the footer and other UI elements down the page. This flash of a layout in its unfinished state of loading has the powerful effect of making the site feel both slow and disorienting.
Maintain a consistent visual experience and convey the sense of a performant page load by designing a highly controlled first page load. In other words, keep page elements, especially interface elements, in the position they would be in after the page has completely loaded. Use set heights and widths for page elements to avoid any unexpected or erratic reorganization of elements on your pages as content like text and images load in.
Mindful motion
Animation in an interface can affect the perception of time and duration for your site’s visitors. Studies show that carefully implemented animation has a direct effect upon cognitive load (cognitive load being a measure of mental effort). Essentially, it’s possible that when animations are poorly designed, are overly complex, or just don’t perform as expected, you might be making your shoppers think harder and expend more mental energy, which may indirectly affect their decision making process.
As Allen Pike discusses in an article about performance in native applications, aim to keep your animations smooth at 60 frames per second. Pike also recommends the use of momentum scrolling versus any sort of “fake” scrolling, to create a truly native feel (because it is a naturally native behaviour). Interface animations should ideally be an instantaneous response to a user’s touch — anything else would simply be communicating a lag or disconnect between your shoppers and your interface.
To get the best performance with the hardware your site visitors are using, base your animations on CSS transformations of position (translate), scale, rotation, and opacity, which are CSS transformations that are accelerated using a hardware graphics processor. By using these hardware accelerated CSS properties, you’ll have a better chance of hitting that coveted 60 frames per second threshold.
Less is more when it comes to animation on the web, and the goals should always be performance and functionality over anything else.
3. Persistence is key
Because common approaches to building Progressive Web Apps involve caching key parts of a mobile interface, sites load fast and repeat visits load instantly.
Progressive Web Apps are commonly built upon what’s called an app shell model, meaning that the absolute minimum amount of HTML, CSS, and Javascript are loaded by a web browser on first load. For example, interface elements like a navigation header bar are integrated into this app shell.
I mentioned previously how important a controlled first load is to setting up user expectations. By prioritizing certain aspects of the interface and loading content into place, we create a smooth non-abrupt page load. Most importantly, by caching these key parts of the interface, repeated loads of the interface appear almost instantly. In essence, the caching of the interface makes it non-reliant on a network connection, allowing it to behave more app-like and native because the code exists locally on the target device.
What’s more, with the presence of a small bit of Javascript known as a service worker, Progressive Web Apps can even load offline to provide a near complete shopping experience, all without a network connection. As a side benefit, you’re also reducing the amount of data your shoppers use when browsing your site.
Progressively transform perceptions
We’ve learned that performance, both perceived and real, affects brand engagement, conversion, and shopper decision-making. We’ve seen how design decisions can manage the emotional state, cognitive load, and visual expectations of users while mitigating the perceived latency delays when loading websites on slower network connections. We’ve also learned how Progressive Web Apps, using an app shell approach, can provide a near instant load experience for repeat visitors.
Perceived performance is the only manner of performance that need apply to our outlook of the web. Common amongst most consumers is a misinformed vision of a near future in which all networks are, at minimum, LTE capable and that network latency will soon be a thing of the past. But with billions of new mobile consumers on the rise in developing countries where network speeds are a significant obstacle, the struggle to build performant user experiences has never been more real.
Thanks for reading! Follow me on Twitter for more design banter 🐦
