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 of 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 can often make or break the performance of a site 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 experience designed has a hierarchy of needs that must be met. Those needs may shift in order based on the product’s focus on the people you are designing for. The design process is often an exercise of balancing all those needs appropriately. While speed may not always be at the top of the list in needs, it should always fit into the equation. Understanding the importance of speed in the experience will inform your compromises and stands.

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 hand-optimizing your images, cleaning your HTML, CSS and Javascript. Make your sites pixel-perfect and byte-perfect.

More Concrete Tips

Write framework-less Javascript

Javascript frameworks are useful in many circumstances, but unnecessarily used far too often. 90 percent of blogs do not need any Javascript framework. They are often applied for overly-narrow application or inconsequentially to the core experience. Writing bare-bones Javascript is a pain but for simple functionality, it is well worth it.

Think twice before using custom fonts

For far too long web designers could choose from only 5 or 6 fonts. Now, the opportunities are endless — and people have gone crazy. Just because you can use any font doesn’t mean you have to (or should). Besides, we use way too many fonts. There should be a measurably improved experience by using custom fonts to justify their use.

Kill your social media buttons

Many social media buttons silently produce multiple requests for various assets. It ads up fast. At the very least, you should track how often people interact with those buttons. Those added requests should justify their weight. Unless the core use of a site is to share things on social networks, these elements are suspect at best.

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

Show your support

Clapping shows how much you appreciated PJ Onori’s story.