#1: Performant design 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.
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.
#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.
#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.
#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.
#5: Performant design is for everyone
Incorporating accessibility principles 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 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