(Building for) The IT Crowd

Muneesh Kapoor / 14 Feb 2020

Performance is too often thought of as a solely technical problem that needs to be tackled by developers. However, that is not the case. Designers have a tremendous impact on site performance based on how they design for the web, before even a single line of code is written. Page load time and how fast your site feels is a large part of the user experience and should be weighed equally with the aesthetics of your site. So, when it comes to load time, what is the benchmark? Consider this, 40% of the users will leave a page that takes longer than three seconds to load!

Here are the ways how designers can design with performance in mind rather than it being an after-thought.

Gone are the days where users will wait for 5 minutes for a beautiful flash application to load. Today, most people average only 3 minutes on any given task before switching to something else. It means that, in an e-commerce context, you have 3 minutes from the moment the user gets onto your site to checkout in order to make a sale! One way of doing this is keeping the website light. Google suggests that any website should not weight more than 1MB. In that case we need to consider about performance every time we add rich content such as dynamic elements, large JavaScript files and complex graphics to our website.

The decisions made by designers are what typically drive how a website is built. It includes:

• Colours and gradients, which impact image format choices, transparency needs, how many sprites can be created, and how much CSS3 is used
• Layout, which impacts the HTML hierarchy, class and ID names, the repurposability of design patterns, and the organization of CSS
• Typography, which impacts the weight and number of included font files
• Design patterns, which impact what can be repurposed and cached across the site, how and when assets are loaded, and ease of editability by future designers or developers

Improving a website’s load time is great start. However, we need a more holistic approach to keep the user engaged. This includes making the user think or perceive that the website is loading quickly. Perceived performance is a measure of how quick a user thinks your site is, and that’s often more important than its true speed. This could be as simple as ensuring you provide loading states and fallbacks (failed states) to your developers so the user doesn’t have to wait for the entire page to load before they can read anything.

The three stages of modern loading are:

1. is it happening? (is there anything on screen to indicate the page is loading)
2. is it useful? (is there any meaningful text or useful content on screen)
3. is it usable? (can the user tap with elements in the UI and interact with it)

Zomato uses skeletons to display the page before content is fully loaded. This not only prevents disruptive “reflows” where content is pushed out to a different position on the page by subsequent items loading in its place, it also has the added benefit of making users believe the page is loading faster than it is through the use of visual progress indicators. Zomato also uses clever copywriting to keep the user engaged as the page loads.

Another parameter of measuring UI performance is usability. Usability is the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. This makes clarity and simplicity key to creating a highly performant product. Emphasised call to action (CTA) buttons allow users to move forward quickly in their task with confidence. Paying careful attention to CTA size, colour, placement and microcopy helps make the key actions more obvious and reduces thinking time. Patterns, such as floating action button and fixed header bar, get the user moving quickly and translate well to any performant web app.