How to maintain quality with a UX checklist

Design principles, Expert evaluation, UX design

10 minutes read

If you were to buy a car tomorrow, which makes would you consider? Assuming that you had a sensible budget (no supercars I’m afraid) would you consider a Ford, a BMW, a Tesla, a GM, an Audi, a Jaguar, a Toyota perhaps? Of the countless makes that you could choose, there is a pretty good change that your shortlist would include some from one of two countries. Two countries that have come to dominate the global car industry: Germany and Japan.

Makes such as BMW, Mercedes-Benz, Volkswagen, Audi, Honda, Toyota, Mazda and Nissan produce cars that are popular around the world. What has enabled these manufacturers to march ahead of their French, Italian, American, British and Korean rivals? Why have their cars been chosen by so many drivers? Part of the answer lies in a shared national obsession that has given manufacturers from these two countries an advantage. Something that is deeply steeped in German and Japanese culture: An obsession with quality.

Japanese and German car manufacturers are renowned for their high-quality products, such as these models from BMW and Mercedes-Benz

You see it’s no good having a great looking car that’s brilliant to drive if it’s poorly designed, poorly put together and likely to regularly leave you stranded on the side of the road waiting for a tow truck. If this was the case then Italian, not German and Japanese car manufacturers would reign supreme.

A product that doesn’t meet the quality expectations of its customers isn’t going to be a success. This isn’t just true of physical products like cars, but digital ones as well. A poor-quality app will soon be uninstalled. A poor-quality website will soon go unused. So how can you maintain the right level of quality, without significantly slowing things down, or significantly increasing costs? Well firstly you should be judging your design and research efforts to ensure that you’re putting in the right level of effort required to win. Secondly you should be using a UX checklist to ensure that every release that goes out of the virtual factory doors meets your agreed UX standards. Read on to find out what a UX checklist is, how to create one and how to use it to help maintain the right level of quality.

What is a UX checklist?

In the same way that a car manufacturer will have a set of quality checks that every car being made must pass, a development team can have an agreed set of UX checks that every release will be checked against. These will typically cover areas such as usability, visual design, content, accessibility and the user experience on a mobile. Along with meeting any functional acceptance criteria, such as user stories, releases should also meet the UX checklist. Those that don’t meet all the necessary UX requirements shouldn’t get released.

A UX checklist such as the example in this article helps a team to maintain a desired level of quality. Firstly, by prompting the team to agree what that level of quality should be, and then secondly by collectively holding themselves accountable to it. Usually there are criteria that must be met, such as key branding and accessibility considerations and criteria that should be met, such as following agreed design principles.

Creating a UX checklist

A UX checklist should be agreed, not imposed. A good starting point is to consider what the minimum UX requirements are for a release, and to build from there. Too many teams make the mistake of creating a long list of requirements which will never all be met and invariably create a significant bottleneck for releases.

A team workshop is a good starting point for creating a UX checklist. The following structure works well.

1. Prior to the workshop gather examples of UX checklists (there are links to some at the end of this article) and ask for suggestions from the team.
2. Capture potential UX requirements for the checklist.
3. Group UX requirements into areas, such as usability, visual design and accessibility, and remove any duplicates.
4. Vote on UX requirements that ‘must’ be followed.
5. Vote on UX requirements that ‘should’ be followed.

Once an initial version has been agreed the checklist should be regularly reviewed and amended if necessary.

Using a UX checklist

A UX checklist list shouldn’t only be checked just before a release. Not only does this leave insufficient time to address any concerns, but it’s not helping to bake the sweet taste of quality throughout the development and design process. A UX checklist should be used to help review early designs, to review work whilst it’s in development and of course to help answer that all important question: Is the team happy to go ahead with a release?

An exploratory UX testing session can be a great way to review work in development against the UX checklist list. Take a look at my How to run an exploratory UX testing session for more on how to do this.       

Example UX checklist

There are links to example UX checklists, such as design quality heuristics used by Dropbox at the end of the article. I’ve outlined an example UX checklist that I’ve previously used as a starting point with teams. The team will decide whether items are ‘must’ or ‘should’ and if there are any additional UX requirements missing. The checklist covers:

Usability

It’s important that the UI is usable. Focus on usability in the context of the user’s key tasks and jobs-to-be-done. Some important usability questions to consider:

Is it clear how to complete key tasks?

Will users know how to complete key tasks? Is it clear what to do, and how to do it?

Is the UI clean and well-structured?

The UI should not be cluttered or overloaded with too many controls and information. The structure of the UI should be easy to understand.

Is the UI consistent?

UI components, design patterns and styling should be consistent so that the UX feels harmonious.

Are well known UI standards and patterns used?

The UI should use standards and patterns that users will be familiar with wherever possible.

Are important features and information available?

Important features and information shouldn’t be hidden or missing. Users shouldn’t have to memorise a lot of information in their head.

Are desired user workflows supported?

Workflows should be consistent with what users would expect. It should be clear where a user is within a workflow and what the next steps will be.

Is the system structure and mental model to use clear?

The structure of the app or website should be clear and easy to understand. The mental model for users to utilise should be clear (see How to build intuitive products by utilising mental models).

Is the navigation intuitive and consistent?

Navigation should be intuitive, consistent and utilise well-known UI standards and patterns.

Is prompt and appropriate feedback provided?

Prompt and appropriate feedback should be provided following a user action. Where an action can’t be undone (e.g. deletion) the user should be made aware beforehand.

Are calls to action clear?

Links and buttons should be clear, have descriptive labels and appear clickable / tappable.

Are potential problems and errors well handled?

Users are able to anticipate and resolve potential problems. When errors do occur users are able to recognise, diagnose and recover from them.

Is adequate help and instruction provided?

Help and instructions should be available where necessary. If users need further help or have important questions it should be clear where to go.

Is the UI performant and reliable?

Poor performance and reliability can significantly inhibit the user experience. For example, if a page takes a long time to load, or nothing appears to happen following an interaction. Users should be warned about slow operations and feedback should be provided to indicate how an operation is progressing.

Is the UI consistent with design principles?

There should be design principles in place act as a compass for your product. Take a look at A guide to design principles & why you should be using them for more about how to establish and use design principles.

Visual design

It’s important that along with being usable, the UI is visually well designed. Some important visual design questions to consider:

Is the design consistent with brand / design system guidelines?

Hopefully brand or design system guidelines will be in place to ensure a consistent brand and user experience. Are styles, colours, fonts, images, logos and icons in-line with the guidelines?

Is a colour palette being used?

The design should be using a colour palette to ensure that colours used are harmonious. There are a number of great tools that can be used to generate a colour palette, such as Colourcode, Colormind and Coolors.

Is a grid being used to aid alignment?

Alignment helps to bring order and organisation to a design. For example, text on a page is easier to read and understand if it is properly aligned to the margin. A grid-based layout helps to ensure that UI components are aligned.

Is the visual hierarchy of the design obvious?

Colours, styles, shapes and size should be used to highlight the most important elements of a design.

Is the design minimalist?

UIs shouldn’t contain information, or components that are unnecessary. Every element of a UI competes to win the user’s attention, so the fewer the better.

Is the design consistent?

Repetition of colour, shapes, styles and design patterns is how consistency is maintained within a design. Consistency helps users to understand the way information is presented to them.

Content

It’s important that content, such as help text, labels, error messages and images are concise, easy to understand and helpful for users. Some important content question to consider:

Is the content consistent with writing style guidelines?

If a writing style guide exists the UI should follow it. For example, text styling, tone of voice, spellings, casing and terminology etc.

Is a helpful tone being used?

Does the content have helpful tone, or does it talk down to users? It can help to write as if you are talking to users one-to-one, but with the authority of someone who can actively help.

Is the content useful?

Does the content help the user achieve their task or job-to-be-done? If the content isn’t genuinely useful then consider revising or removing altogether.

Is the content concise?

Good content is as concise as possible. Is the content too wordy? Can superfluous information be removed?

Is the content easy to understand?

It’s important that simple, easy to understand language is used. Avoid complex sentences, along with terms and acronyms that users might not be familiar with.

Is the content well structured?

Is there a good fit between the structure of the content, and the user’s task or job-to-be-done? For example, does documentation utilise a task driven structure or a more feature driven structure? Are FAQs used when a content, or task driven structure might be more appropriate?

Is the content scannable?

Are descriptive headings, labels and calls to action used to make it easy to scan and understand the content available? Are styles, alignment, proximity and spacing used well to help users interpret the content available?

Is the content trustworthy?

Is the content accurate, up-to-date and free from errors, such as typos and spelling mistakes?

Accessibility

Accessibility is not just about disability. Good accessibility benefits all users by striving for simple, usable and inclusive products. Some important accessibility questions to consider:

Are web and platform standards used?

Recognised web and platform standards, UI controls, objects and elements should be used to support platform accessibility options and the use of assistive technology.

Is good semantic markup used, including language and any meta data?

Using appropriate semantic markup and meta data provides browsers and assistive technology with the necessary information about UI controls and content. It’s important to specify the language so that screen readers can apply the appropriate pronunciation.

Can tasks be completed solely with a keyboard?

A user that is unable to use a mouse or touchpad should be able to complete their tasks using only a keyboard. Tabbing and navigation via a keyboard should be possible and interactions with UI controls such as buttons, links and form elements.

Is the content and focus order logical, with the current focus clear?

The content, including the layout of forms should make sense when using assistive technology, such as a screen reader. When tabbing through elements the focus order should be logical and the current focus should always be clear.

Is there sufficient contrast to view content?

There should be sufficient contrast for users to differentiate text, images and other content. Large text should have a contrast ratio of at least 3:1 between the foreground and background colours. For normal size text the contrast ratio should be at least 4.5:1. A tool such as the WebAIM contrast checker can provide a contrast ratio for foreground and background colours.

Is text legible and re-sizable?

Text should be sized and styled to ensure that it is legible. A minimum size of 12 pts (16 px) should be used. Sans serif fonts, such as Arial can be easier to read than Serif fonts, such as Times New Roman. Users should be able to re-size text using browser, or accessibility options.

Can tasks be completed when content styling is changed or removed?

Some users might have elements of styling changed or removed to improve the legibility of the content. For example, applying a high contrast style, or significantly increasing text size. It’s important that users can still complete tasks when this is the case.

Is additional information provided to support the use of colour?

A UI shouldn’t rely on using colour alone to convey information. Users with colour blindness, impaired vision, or even just using a device in direct sunlight all benefit from additional information to support the use of colour. For example, additional text and iconography.

Are interactive elements clear, with appropriate triggers and click/tap targets?

It’s important that interactive elements, such as buttons, links and UI controls are clear and have sufficiently large click / tap targets. There should be sufficient space between elements. Elements should support appropriate triggers, such as clicks, taps and keypresses.

Are descriptive titles, headings, links and labels used?

Descriptive titles, headings, links and labels should be used to ensure that the content makes sense out of context. This is important for screen reader and magnification users who may interpret content out of the usual order. Non-descriptive text for links, such as ‘Click here’ or ‘Read more’ should be avoided.

Do links open in the same window?

Opening links in a new window can be disorienting for people who have difficulty perceiving visual content, and for some people with cognitive disabilities. It’s better to open links in the same window. If this isn’t possible users should be notified that a link will open in a new window.

Are equivalent alternatives available for images, audio and videos?

Unless an image is purely decorative alternative text should be provided. Images should never be used in place of text. Alternative formats such as subtitles, sign language, audio description and transcripts should be available for audio and visual content.

Can auto-play videos, audio or animations be stopped?

Auto playing videos, animation or audio can be disruptive for screen reader users and disorientating, or even distressing for some people with cognitive or sensory sensitivity. Ensure that videos, audio and animations can be stopped and avoid content that flashes or flickers more than 3 times in any 1 second as this can cause discomfort, nausea or even induce seizures for some. Ideally there should be the option for users to opt out of auto-playing content.

Are page refreshes notified and controllable?

Users should be notified before automatic page refreshes as entire page refreshes can be confusing and disorientating for some people, such those using a screen reader.

Mobile

Even if a product is primarily used on desktop, it’s important to evaluate the usability on other devices. For example, a user should ideally be able to complete key tasks on a mobile device. Some important mobile UX questions to consider:

Can key tasks be completed on a mobile device?

Whilst the user experience might not be ideal, users should be able to complete key tasks on a mobile or tablet. The same content and functionality that is available to desktop users should also be available to mobile users.

Does content respond and adapt without losing information?

Content should respond and adapt across different screen sizes without losing information, or functionality. Horizontal scrolling should be avoided where possible.

Can users switch between portrait and landscape orientation?

Ideally a user should be able to user their preferred orientation (usually portrait). The same content should be available for portrait and landscape orientation. If a product only works for a set orientation, the user should be informed of this.

Is content legible on a mobile device?

Content, including text and images should be legible on a mobile device. Text size should be at least 16px and above with a line height of around 1.5. Ideally mobile optimised styling should be applied to optimise the viewing experience on a mobile device.

Are interactive elements clear with sufficient size and spacing for tap targets?

It’s important that interactive elements, such as buttons, links and navigation are clear and look tappable. There should be sufficient spacing and sizing for tap targets. The touch-friendly size for buttons and other widgets should be at least 1cm x 1cm (about 44px X 44px).

Downloads

Other checklists

Here are some other UX related checklists that are useful:

Usability

Visual design

• C.R.A.P. principles of graphic design (Saylor Academy)

Accessibility

See also

Image credits

• BMW and Mercedes-Benz by Dariusz Sankowski from Pixabay