Fight user disillusionment! Designing for performance
Mellary specializes in wireframing and interaction design, visual design, user experience design, illustration, and lettering. She works on projects for Saskatchewan Blue Cross, Government of Saskatchewan, AltaGas and Great Plains College.
Fight user disillusionment! Designing for performance
Do you ever find yourself searching for information on your phone, loading the first interesting google result only to get impatient and hit the back button for the next result? And perhaps you find yourself repeating this process over and over until your ravenous information appetite is finally satiated?
Can I get a show of hands?
The truth is this is a common situation. It’s known that ‘people will visit a web site less often if it is slower than a close competitor by more than 250 milliseconds’. But really, how quick is that you ask?…well it’s quicker than the blink of an eye. A blink takes a whopping 400ms. Although my mind has a hard time comprehending that, I know I notice it. And so do you.
I feel a twinge of pain when I check out an old website I designed and worked on for months and I find myself *noticing* the load time. “My son! What is… wrong with you?” I think. “My poor, child we’ve failed you.” When I look at a site that is engaging, visually stunning, memorable and unique but the performance is slower, a knife goes through my heart. The total experience has been a let down. My eyes may be feasting, but my brain is tapping its toes in impatience and more often than not, I bail.
People will visit a web site less often if it is slower than a close competitor by more than 250 milliseconds
Planning for performance - using a budget
As a designer, it is my job to make sure that the beauty and the performance of a site work together to create an exceptional experience for my client’s users. Recently I’ve been watching many videos and reading articles that emphasize just how important this is–and what I, as a designer, can do to ensure this happens. Performance is a design feature just as important as beautiful brand photography, or awesome animation. A fast site is important. A fast site shows that a brand is trustworthy. A fast site is a memorable experience. This is important for our clients. Performance is important. We want them to have a competitive edge, and not have users bail for the next site. To ensure these things for our clients, there are a few things we must plan for and communicate. As the saying goes, failing to plan is planning to fail.
Instead of worrying about the performance of a site in the last 10% of the project timeline, we must incorporate it right from the beginning. We must make design decisions with it in mind, and have our clients on board with a performance budget by incorporating it into the project plan. This is a written guideline we can base our decisions on. For example, stating goals for page weight, goals for page start render, a fully loaded page, and a site's speed index. Designers and developers must work together to adhere to this performance budget. (Read our developer Kevin’s take on it here)
Once we have a performance budget, we can be mindful of it and make design choices to use our budget wisely. Just as 5 hours of design time will use up x amount of money from the client budget, so too will different design elements eat up a performance budget, causing pages to load slower and users to become disillusioned.
So, what can we be conscious of during the design process?
1. Optimizing images
A smart use of images can go a long way. Can you reuse images to be used at a different size? Or does your design use three different aspect ratios of the same image? Cut out the clutter. Can you use a sprite sheet? Small files and fewer requests are important. The right file type can also make a big impact. If photography is an important element of your site, one file type that can often enhance experience is the progressive jpg. Instead of jarringly loading a few pixels, pausing, and then the whole image loading, the whole image will load pixelated and slowly come into focus. This creates a perceived load time much faster than baseline jpgs.
Using apps to create optimized or compressed files that save even more space than what traditional programs like Photoshop can offer is also very helpful. It is also important to educate clients about these apps as they will often take over content uploading to the CMS after the site is launched. We want to prepare the client for a continuing successful site as much as we can. And if we have already talked about performance at the start of the project it shouldn’t come as a surprise.
2. Type packages
Fonts need to be downloaded the same way images do on every page. Do you really need 10 different fonts? What is the best use of your performance budget? Katie Kovalcin, Sr Product Designer at Vox media and cohost of the Path to Performance podcast will generally not use more that four total weights across a site. Another great way to keep fonts light is to use system fonts when appropriate, perhaps for paragraph text, or to look for a similar font that is a smaller size. Say if you want to use Futura which is 268k, and that is over budget, you could use Brandon grotesque which is very similar looking and only comes in at 133k. Some would call that winning. As the designer, you have the job of weighing the pros and cons of all of these options and choosing the best design that portrays the client’s brand, and also creates a great experience.
3. Icon fonts & SVGS
Icon fonts are great. We use them a lot and even create our own. Instead of loading multiple rasterized images, we can load one font and get a wealth of images from it, all that are scalable and easily customized with CSS if need be. SVG image files, which are also vector images and can be scaled, are great to replace multiple sizes of graphics and can even be simply animated. One word of caution is to create these SVGs with as few points and curves as necessary, as more points can increase file size.
4. Constant editing and evaluating
At zu we are a firm believer in style guides. This is where we keep track of our type styles along with all the elements we will incorporate in the site. We want to reuse design elements and modules to create consistency across a site which in turn can improve the performance and shorten dev time without decreasing quality. While designing, we want to be using the style guide as our reference. However, we always want to be editing designs to make sure that we pair down modules that can be substituted for something similar. When designing an alternate style we want to use enough variation to make something stand out, but be mindful that we do not go unnecessarily overboard in styling.
We also want to evaluate features that we want to incorporate against our performance budget… and if a client politely demands a feature, we can now weigh our options. Do we have room for that in our performance budget or is the page too overloaded? Can we compromise something else to incorporate this new feature? With a performance budget, we can talk tangibly about the design and what it will take to implement it. For example, do we need two carousels, or can we have just one and a static image? Does that animation need to work on mobile? We have the goal of a total desirable performance and work towards that together.
A brighter, lighter future together
With these things in mind, and working with developers and clients as partners, designers can ensure we do our part to adhere to performance budgets. And in doing so, we fulfill our responsibility to create fast, beautiful, functional websites with the best overall experience for users. We do our part to help our design offspring flourish and to ‘Just say no’ to user disillusionment.