#1: is fast

The length of time between a user’s interaction and the websitet’s response to that action will affect the user’s perception of the site. Performance testing tools such as webpagetest.org is useful to profile a full loading experience and test the site on various network speeds. A 300 and 1,000 milliseconds delay makes the user feel like a machine is working, but they begin to mentally context-switch when it takes more than 1,000 milliseconds.

Webpagetest.org paints an interesting picture of performance over time and the journey from ‘First Byte’ to ‘Interactive’ to ‘Fully Loaded’

These numbers matter when product scopes increasingly feature rich content such as dynamic elements, large JavaScript files and complex graphics, without consideration to the impact on performance. Often websites will unknowingly force their users to download unnecessary resources, but there are ways designers can lighten the load.

Simple things such as using system fonts and Variable Fonts rather than forcing the user to download heavy custom font files and their variations, has a big impact on page speed, and still gives designers control of the typographic hierarchy. Another way to speed up page speed is by Lazy Loading offscreen elements. This deconstructs the initial payload to render content that is in view first and loading images and other heavy elements later in the loading sequence, or as the user scrolls.

Lighthouse recommends “deferring the load of offscreen images” in the Performance section of their their generated reports. Source

#2: Performant design feels fast

Looking again at the loading sequence we find that delays of less than 100 milliseconds feels instant, but a delay between 100 and 300 milliseconds is perceptible. When it comes to optimizing for speed, it’s all about what the user perceives rather that’s what’s actually going on under the hood.

Humans’ propensity for loathing unoccupied time is well illustrated in this real world example from Houston Airport. In an attempt to quell customer complaints about lengthy waits at the baggage claim, the airport execs chose to strategically move the arrival gates farther away from the baggage carousel. The time it took to unload the bags stayed the same, but giving the passengers further to walk eliminated time spent waiting around, and complaints stopped.

Designers using content skeletons can begin 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.

The Facebook app preloads a skeleton of the news feed with placeholders for text and imagery.

#3: Performant design is simple

Usability is about people and how they understand and use things, not about technology. Today’s user doesn’t read, they scan, and the more you make them think, the more likely they are to go elsewhere to get the job done. This makes clarity and simplicity key to creating a highly performant product.

“If something requires a large investment of time — or looks like it will — it’s less likely to be used.” — Steve Krug, author ‘Don’t make me think’

Through careful analysis and understanding of a user’s goals and requirements, designers are able to anticipate a user’s next action and present the interactive elements that allow them to move forward quickly. Pinning essential interactions to prominent positions on the page makes things obvious, reduces thinking time, and reduces the time it takes to complete tasks.

AB testing on Debenhams’ progressive web app showed positive improvements after pinning important checkout actions to the edges of the browser.

#4: Performant design works everywhere

Today’s user spends around 6 hours a day online with an average of 6.5 connected devices per person. Not only is it fundamentally important for digital products to work on a number of different devices, but also to function well in all areas of connectivity, including areas of no network connection at all.

Web browsers are taking advantage of technological innovations to deliver offline user experiences through the use of clear network status messaging and by reusing already downloaded content between pages. These tools let designers craft offline and low connection web-based user experiences without the frustration of getting slowed down or derailed completely.

Examples of good offline design range from “toasts” that let the user know they are offline (Google I/O PWA), to downloadable content that brings key online functionality available offline (Google Translate iOS App). Source

#: Performant design is for everyone

Incorporating accessibility into product design improves the overall usability for all that use it. Video captioning is one example of such, it not only benefits deaf users but also someone trying to learn a foreign language, users struggling to hear in a noisy environment, or conversely, users in a library where there’s enforced quiet.

Minimum font size and color contrast guidelines ensure maximum visual clarity when reading text, while guidelines on minimum tap targets ensure there is enough space between clickable elements. This improves usability while also reducing the number of errors (and time spent correcting them) caused by users accidentally tapping the wrong link.

Supporting key interactions through iconography not only helps users with challenges in cognitive ability, but also speeds up everyone’s ability to recognize common interactions, while labelling ambiguous icons eliminates the hesitation and time spent deciphering a symbol’s meaning.

“if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.” — Nielson Norman Group

The importance of labelling icons as illustrated in Material Design’s usability guidelines. Source


The decisions that are made during the design process can have a significant impact on a product’s success. Designers now have access to a large suite of tools and technology to help champion site speed, and with Performant Design, they can build on a set of principles that communicate the fundamental goals of a performance-driven digital experience.

By factoring performance into the design process, designers are not only helping users get things done quicker and with less frustration, they are demonstrating a heightened respect for their users’ time.

Source link https://uxplanet.org/good-performance-is-good-design-the-5-principles-of-performant-design-54ca44c7c4e0?source=rss—-819cc2aaeee0—4


Please enter your comment!
Please enter your name here