Design for speed

Have you ever asked a person a question where there is an unnatural delay in the response? It’s unsettling. You’re left questioning if the person heard you, if they understood, or if they’re just ignoring you. People expect a response in a certain amount of time, otherwise things get weird. The same can be said with peoples’ expectations of software. When they click a link, they expect the page to load within a certain amount of time. When they tap a button, they expect an immediate response. Otherwise things get weird. Speed needs to be a core tenant of software design in order to make good on that contract.

Why Speed is Important

The breaks between loading times or interactions create breaks in experience. Speed often has a greater impact on experience than what’s typically focused on in design. Page loads are more important than ever when considering mobile devices. A 500Kb page size may be annoying on desktops, but it can prove unusable on mobile. Responsive design is not just about fitting a website nicely in a smaller screen. It is also responsive to bandwidth, lower computing power and other less celebrated constraints.

Tips to Shape Your Thinking

Consider time as a core dimension of user experience

Speed has traditionally been considered an engineering topic and been ignored by most designers. Yet design often makes or breaks performance before a single line of code is written. The temporal experience of a product (e.g., page load speeds, app performance and anything else that impedes fluidity) is foundational to the practice of interaction design. Translation: A design is unsuccessful if it sufficiently impedes performance.

Understand how design can impact speed

Grasping the basics of design’s impact on speed is simple. Digging into the nitty-gritty of performance is quite difficult. The basics are obvious: large files and many requests will take more time to download. Anything delivered to the user takes time. The challenge is uncovering the less obvious. Issues like avoiding expensive database queries or CPU-intensive tasks. The main takeaway is that every decision has an impact. The goal is to take a preventative approach towards the basics and to work closely with developers to avoid the less obvious.

Determine where speed resides in the hierarchy of experiences you’re designing

Every designed experience has a hierarchy of needs. Those needs shift in priority based on the product’s focus or the people it’s for. While speed may not always be at the top of the list in needs, it should always be part of the equation. Understanding the importance of speed in the experience will inform your compromises.

Make every element justify its existence

Designers already know that every pixel on the screen needs to be accounted for; every interaction justified. That same approach should be taken towards speed. Each request, byte and query added should be intentional and markedly improving the experience. If not, it should be gone.

Treat bytes like pixels

It’s great to see an increased attention to craft, simplicity and a pixel-level focus in interface design. That same tenacity towards aesthetic and reduction needs to be directed towards performance. This means optimizing your images, cleaning your HTML, CSS and Javascript. Make your sites pixel-perfect and byte-perfect.

The points above are not far off from what’s typically prescribed for effective design. The difference is that designers normally talk about stripping things away to simplify interaction. Those same practices of refinement and reduction yield equally worthwhile results for faster web experiences. The world will thank you.