The Quick, New Way Designers Can Test User-Centric Metrics
Designers can now test user-centric metrics of their web experiences’ accessibility, assets, and performance. All you need is your internet browser!
Automatic testing always seemed like a field reserved for developers. Now designers browsing the web on Chrome can do the same without installing any extension. If you have Google Chrome 60 or greater, a tool called Lighthouse is built right into your browser:
How do you run the test?
- In the Chrome toolbar, go to View > Developer > Developer Tools
- In the Chrome Developer Tools, go to Audit
- Click “Perform an Audit”, and the tests will start running on the web experience you are currently browsing
Why is each score user-centered?
Performance
The first thing you will notice in the performance section is a timeline of screenshots. The timeline reflects how a user would experience your destination on a low-end Android phone with a 3G connection. Why? So you can relive the experience that many of your users have. Even in parts of the United States, users are lucky to have a 3G connection in many locations.
There are two unique metrics I want to highlight here:
First meaningful paint is the first time the user can see meaningful content (not the nav bar). This is more insightful than the common metric we used to go by, first paint.
Perceptual Speed Index is a 100-point score that tells how fast the user would believe the experience to be. It does not necessarily mean the experience is actually fast, but can be altered with design choices (like loading skeletons).
Tip: The performance score can be the most spotty number. Run the audit several times to see what the average score comes out to.
Accessibility
I am not going to write a rant on why you should care about this section because I hope you do already. There are several things a designer can do to contribute to this score:
- Make sure background and foreground colors have a sufficient contrast ratio
- Provide captions for any audio and video you are providing
- If providing images and graphics, accompany them with alt text for screen readers
Best Practices
This section is almost completely filled with developer-related flags. However, as a designer, you should raise the flags as questions for your development team. Many of the flags can affect certain content loading and expose security exploits.
There are a couple of UX-based flags related to different permissions: A user does not want to be prompted to provide geolocation and notification permissions as soon as the page loads. Instead, they should be prompted based on a certain opt-in action they perform.
Progressive Web App
We skipped the first score because it is such a new concept. Progressive Web App Guidelines were created to help users have the same experience on web apps as they do on native apps. The only expected difference is that the user does not have to do a lengthy installation from an app store.
All abilities for a Progressive Web App are already available on Chrome and Firefox. Edge and Safari are getting there. Some of these abilities include: adding a tile to the user’s home screen, instantly loading a page if already visited, and having browser colors match the experience’s color palette. Work with your development team to provide any info they may need to finish these parts.
How can I learn more?
I hope this sneak peak at a helpful tool helps you! The new auditing in Chrome starts up a lot of conversation with designers and developers. There is even more design can do to convey performance to the user. At IBM, I am now working on those Performance UX standards to gain the user’s trust.
Please help us share our standards at next year’s SXSW by voting and sharing my conference talk submission, Winning the User’s Trust with Performance UX. You can check out the trailer below:
All thoughts are my own and not IBM’s or that Watson person’s.
