Visual designers' goals haven't changed much in the last two decades, but the media in which they work has evolved rapidly. Jason Cohen, global technical lead at Google, explains how designers can have an outsize impact on mobile page speedāand why marketers should care.
Twenty years ago, broadband was emerging and the web established itself as an innovative medium for creatives. Visual designers at brands and agencies set out to evoke consumer emotions that would lead to positive brand experiences and increased revenues.
Today, even as the desktop web has evolved into the mobile web, a visual designer's goal has remained the same: to evoke emotions that will produce the desired outcomes. But on the mobile web, we're coming up short. Often, we're forgetting a crucial aspect of creativity. And it's time that changed.
When any page is designed, marketers want users to feel positive, curious, excited, and interested. But too often users end up feeling frustrated, annoyed, or impatient when they load pages on mobile devices. Why? Because it takes way too long for our beautiful designs to load. And if a person doesn't wait for a page to load, then the design components are meaningless.
I know what you're thinking. "This is my developer's responsibility. It's tech. Nothing we can do here." I understand that thinking because I felt the same way. However, the page likely loads slowly because of the size and quantity of images we've chosen; the number of visual elements and design complexity we decided on; and the variety of fonts we're using. These are designers' decisions to make. At best, developers can apply some magic to optimise the designs.
Hakan Nizam, director, global digital, E-commerce Centre of Excellence at L'OrƩal, says those optimisations are often limited to improving speed by 20% to 30%. "It is much more efficient to deliver something fast if it is part of the design criteria," he explains. "It would free up developer bandwidth. It would allow developers to focus on other factors that are affecting conversion rates. The speed conversation should be resolved in order to move on to other differentiators."
"Design principles are absolutely critical. Most marketers have a long way to go on this front."
Pete Blackshaw, global head of digital and social media at NestlĆ©, suggests removing the noise from design and accentuating the critical benefits. "Four words: shrink, serve, simplify, and share. They embody the notion of mobile first. ā¦ The designer's role and visual interfaces are at the heart of all those factors," he says. "Design principles are absolutely critical. Most marketers have a long way to go on this front."
Designers must become masters of the limitations presented to them. Here are four tips to help you get there.
Use speed performance budgets to guide decisions
A speed performance budget is a method of ensuring that designers, developers, and business stakeholders hold each other accountable for delivering fast web pages. The budget caps the number of seconds it takes for a design to fully load on a 3G connection. We focus on 3G because through 2020, 70% of mobile network connections globally will occur at 3G and faster speeds.1 A good best practice is three seconds or lessā53% of people will leave a page if it takes longer than that to load.2
Provide agency partners with speed criteria
Hakan points out that if controls are not in place, the challenge won't be met. And creative agencies must be part of working toward speed goals. "It's important to understand what our collective decisions mean for our users, and we should all be responsible for success metrics," he says.
Design for mobile technologies that are built with speed in mind
Technologies such as Accelerated Mobile Pages (AMP) are built from the ground up to allow for fast-loading pages. Any technology is still only an optimisation of design decisions, but understanding how to design for them is a good first step. A rule of thumb is to focus on the most important point in a design and eliminate features that do not support that point or general user-interface requirements.
Embrace limitations
Including speed as part of the design process is no different than accounting for the limitations of other creative mediums. Designers would not create a four-colour ad for a black-and-white print publication, or produce a 30-second video for a 15-second slot. If we don't design within the medium's limitations, the result is a bad experience.
"It's hard to resist all the clutter and the urge to account for everything," says Pete. "We need to lead by example and demonstrate traction. Many of us know simplicity when we see it. We need to share best examples as much as we can."
Designers are capable of creating compelling designs within any medium. Mobile is no different. Once we learn to incorporate speed as a dimension of our design process, utilising tools such as speed performance budgets and technologies such as AMP, we can ensure that the emotions we intend to evoke are the ones that people have when they experience our designs.
Sources 1 GSMA, Mobile Economy 2016. 2 Google Data, Global, n=3,700 aggregated, anonymised Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, Mar. 2016.
