Creating balance between design and performance

Designers and developers are often at odds when it comes to creating engaging design and performance for user experiences that render quickly.

Developers and operations teams have traditionally been at odds when it comes to adding new applications features. Leading enterprises have started to address this rift through a DevOps philosophy allowing them to deploy software more quickly and reliably. Organizations need to embrace a similar philosophy for bringing designers into the software development process to make engaging and performant Web experiences, Steve Souders said at the Fluent Conference.

Souders, who was previously head performance engineer at Google, Yahoo! and Fastly, knows a thing or two about performance. He recently co-founded SpeedCurve to help bridge the gap between designers and developers.

Souders envisions having designers sitting with the development team, whereas today there is a wall that exists between these groups. "We have been collaborating and talking about this situation of design and performance and how we need to bring these groups together to produce interesting, engaging and enjoyable user experiences," Souders said.

Overcome reckless design

Without an appreciation of performance tradeoffs, designers are likely to pursue reckless designs that are elegant but not performant. Even if the user experience looks beautiful, users will be disappointed when they take two minutes to load.

This is important because a lot of data from leading sites like Bing found that revenues and user satisfaction went down as delays went up. Furthermore, Google recently announced major changes to its page ranking algorithm which grades sites based on how fast they render on different devices.

Break down the silos

A good practice is to co-locate all parts of the team together so they can work on new features from the beginning. The goal is to bring these teams together at the outset to talk about product development in terms of what is important to users, product managers and business. Having them sit and work together from the start is powerful for increasing the communication required to produce designs that are implementable in a fast way. "If you try and do this halfway through the process, it will be harder," Souders said.

If you try and do this halfway through the process, it will be harder.
Steve Souders, co-founder of SpeedCurve

For example, a New Zealand news site Souders consulted for had the goal of creating a site for mobile to push out articles that could be consumed in less than a minute. Performance objectives were specifically included as part of the design. It is important to think about how performance can be articulated in a way that is actionable, said Souders.

Prototype with live applications

Another good practice is to work with prototypes as early as possible. The idea of doing mockups in Photoshop should be avoided, because they say nothing about how the application will actually behave in production. Souders advocates the enterprise should work with code from the beginning with mock data so everyone can see what it looks like and identify the issues with speed that come up.

It is also a good practice to create a shared dashboard. Initially the prototypes are rough, and as they are fleshed out with more design and content, the team will start bumping into a wall. Early metrics will make it easier to think about how to address these issues.

Plan an actionable performance budget

A design performance budget can show how different UI elements affect performance. To make this useful, the team needs a way of implementing a performance budget tracking system and getting alerts when the application starts to exceed the performance budget. One approach Souders demonstrated was a customer dashboard using a Start Render Time metric.

Another good way to track this process is to surface these metrics live in the page. Typically, a website with in-page metrics will be restricted to employees or team members using an internal IP address check. This will provide a consistent reminder to the team on how performance is going.

Rather than just displaying a number, the metrics might be rendered using graphical widgets, like a color progress bar showing the time required for different aspects of loading the page and rendering animation. When particular processes exceed their budget, these can be colored red, signifying action needs to be taken.

Souders finds there is often a lot of data in these pages that is only relevant when problems occur. Create bookmarklets that can be shared with people in the team when something needs attention. This makes it easier for designers and developers to take a closer look at all of the factors that could be responsible for poor performance.

Choose appropriate metrics

The industry standard for performance is page load time using the Window.onload handler built into modern browsers. This is an easy metric to track and is implemented in a fairly standard way across browsers, but fails to capture the complexity of modern apps, said Souders. For example, in Gmail this metric underestimates page speed, while Amazon overestimates it.

Souders recommends organizations consider using the WebPageTest set of tools for gathering a wide variety of synthetic measurements of application performance during the development and design process. WebPageTest also includes tools for displaying a page's appearance with filmstrip images showing the different phases of Web page rendering along a timeline. The trend toward responsive designs means that a Website is rendered differently on PCs, tablets and different sized smartphone screens. Using filmstrips, it is possible to easily compare the progression of site loading across different sized screens and varying network speeds.

Synthetic measurements are ideal for getting a "quick and dirty" view of how a page looks. It is also good practice to complement these with real user measurements. The new User Timing standard from the W3C can help with this.

The challenge comes with a variety of metrics that have varying degrees of relevance to the user experience. "As you are getting into the design, the product team needs to track metrics on what matters most to the users in your application," Souders said. "This lets you focus on what specifically is important for your website."

Next Steps

How do define user experience design?

Learn more about previous events at the Fluent Conference

Dig Deeper on Application modernization