7 top tips for performant design

[Rss Bot 1]

With Progressive Web Apps and Single-Page Apps (PWAs and SPAs), developers have the technical tools to deliver fast and engaging web experiences, rivalling their native counterparts. But there exists a missing piece of the puzzle, a catalyst that can propel a high-performing web app to a hyper-performant, best-in-class user experience. This ingredient is found through considering performance a fundamental principle of the UX and visual design process. This is Performant Design.

A delay between 300 and 1,000 milliseconds makes the user feel like a machine is working, but they begin to mentally context-switch above 1,000 milliseconds. Anything that provides the content faster will result in a more positive engagement. These tips will show you how to make an app along performant design principles; follow them to get your web apps flying.

• How to build a Progressive Web App

01. Use lazy loading

Load times can be significantly reduced by Lazy Loading offscreen elements. This deconstructs the initial payload to render content that is in view first. Images and other heavy elements load later in the sequence, or as the user scrolls.

Lighthouse is a Google tool full of actionable insights that help designers and developers optimise performance in fine detail across the loading spectrum.

02. Don't download fonts

Downloading custom fonts cost around 200–500ms on 3G connections. Letting the device handle font rendering by using system fonts ensures text loads instantly, and using variable fonts offers typographic variation without forcing the user to download fonts in multiple weights. Check out variable fonts in action at v-fonts.com.

03. Optimise vector art

This demo of SVGOMG shows 60 per cent+ savings from optimising artwork markup [Image: SVGOMG]

Exporting vector icons and illustrations often adds a lot of unnecessary bloat to the file. This can be cleaned up considerably, reducing a site's image payload and giving the user quicker access to key icon-based navigation and signposting. Coming from Google's Development Team, SVGOMG is a useful tool to help optimise SVGs.

04. Optimise images

Squoosh demonstrates how huge file savings can come without compromising image quality [Image: Squoosh]

The task of optimising images is a job that holds space in both the design and development process. The art of image optimisation comes from the human eye judging the compression tool's impact on image quality. Several algorithms and rendering techniques can significantly reduce the size of an image in ways that are invisible to the naked eye. 

The Google Chrome team introduced Squoosh to help in both these processes. This powerful web-based image compression tool puts high-resolution visual comparison to the forefront, while giving users access to all the complex behind the scenes compression options.

05. Ensure it feels fast

When motion is used effectively it helps inform users and guide the their next step

Delays of less than 100 milliseconds still feel instant, but anything above that is perceptible. When it comes to optimising speed, it's what the user perceives that really matters, which is what makes designing for those in-between states integral to delivering hyper performance.

Content placeholders, or skeletons, are used to construct a preloaded version of a page while content is loading. They not only prevent jagged and disruptive 'reflows' — where rendered elements are pushed out of view by subsequent items loading in their place — they can also make users believe the page is loading quicker than it really is.

When implementing skeleton screens, content should be rendered as soon as it is ready, rather than blocking it until everything is ready to show. 

Which works best? Which one feels faster? An app where the user has no indication when the content is coming? Or one that uses staggered loading animations, skeleton screens, frosted images and metadata on content? These two examples may take the same amount of time to load, but the user perception of length is completely different.

Using a spinner shows no indication of when the page will be finished loading. Brief animations, on the other hand, can mask the loading transition and imply that the system is 'progressing' rather than 'processing.' 

We all want to see reaction to our actions, and it's no different on the web. Smooth scrolling, silky animations and tap feedback states all help to increase a user's perception that the experience is responding immediately to their touch. Considering tap, hover, loading and passive states all help to simulate a performant experience, Google's Material Design provides guidance of how to effectively craft all these states.

Today's user is impatient, and the more you make them think, the more likely they are to go elsewhere to get the job done. Clarity and simplicity are therefore key components of any highly performant web experience.

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 first seen in native apps, such the floating action button and fixed header bar, get the user moving quickly and translate well to any performant web app.

A general rule of navigation is 'out of sight, out of mind'. Patterns such as a Bottom Navigation Bar and Tabs successfully put primary user actions front and centre, while the traditional 'hamburger' menu has a lower engagement rate. Facebook found that by moving from a hamburger menu to a tabbed approach improved engagement, satisfaction, revenue and perception of speed.

Having a strategy of the type of content you want to promote is important, and simply treating all navigational items as equal will result in a decrease of engagement in the areas that you want to improve. Spotify found that by reducing the number of options in the tab bar to five increased the reach of Spotify's programmed content — a great example of how promoting certain navigation items over others can focus the user's experience.

06. Use one-tap payments and sign-in

Digital wallets like GooglePay and upcoming automatic sign-in API both leverage data stored on the device to simplify friction-heavy user flows. GooglePay allows shoppers to complete multiple checkout steps in a single tap, while one-tap sign in gets users into their account in the same way.

Results from early adopters show that removing the interruption of login screens and checkout forms, along with the mental friction of remembering and entering information, speeds up task completion and improves engagement.

07. Make it work everywhere

Financial Times is one of the highest profile responsive PWAs, allowing desktop readers to consume articles offline and on the go. 

Today's user spends around six hours a day online with an average of 6.5 connected devices per person. Not only is it fundamentally important to design for a number of different devices, but to design for areas of low and no connectivity.

Users often take multiple sessions to complete a task, and delivering performant experiences on each device ensures that entire process is smooth and satisfying. 

Desktop supports PWAs and designing performant responsive PWAs without the bloated code commonly associated with responsive websites, means designing mobile first. This brings the essentials to the forefront, adding more items only when the user agent can handle it.

Service Workers allow PWAs to stand up when the network connection goes down. This opens the door to craft offline user experiences by use of clear network status messaging and disabling elements that would otherwise derail the experience.

This article was originally published in issue 286 of creative web design magazine Web Designer. Buy issue 286 here or subscribe to Web Designer here.

Related articles:

• How to design app icons
• Performance UX: A primer
• How to make responsive web apps with container queries

View the full article