Saturday, November 2, 2024
HomeWeb developmentUX Checklists For Interface Designers — Smashing Magazine

UX Checklists For Interface Designers — Smashing Magazine


Given just how complex the web has become, it’s easy to overlook some fine little details just before the big release. And sometimes it’s difficult to pick out just the right technique or strategy to address a particular problem. That’s where design checklists can help — and there a few new ones that you might find helpful, too.

Checklist Design

Checklist Design is an ever-growing collection of best design practices, all gathered in one single place. You’ll find pretty much everything from checklists for standalone pages to elements and flows, as well as topics and branding. A neat little resource created by George Hatzis.

Checklist Design
A comprehensive checklist for everything UI: from form controls to password recovery.

Design System Checklist

Design System Checklist is an open-source checklist to planning, building and growing a design system. It includes the foundation of things to keep in mind for design language, design tokens, core components, tooling and project management. Beautifully created and maintaned by fine folks from reshaped. Also, you might want to check Design Systems Handbook as well and you can download the Design System Checklist in Figma.

Design System Checklist
A good reminder of things to keep in mind in your design system, in the Design System Checklist.

Accessibility Not-Checklist

Accessibility Not-Checklist is a thorough guide through accessibility, with points grouped by topics and success criteria, with filters for WCAG 2.0 and WCAG 2.1 and best practice recommendations. You can sort the checklist by topic and by role. A fantastic tool by fine folks at intopia.

Accessibility Not-Checklist
A very thorough accessibility checklist, grouped by topics and success criteria. Good UX is about good accessibility.

A11y Project Checklist

A11y Project Checklist is a yet another very thorough checklist for accessibility that goes into all the fine detail from forms and controls to video, audio and animation. It also links to specific parts of WCAG in every individual section with further examples and guidelines. Neat!

A11y Project Checklist
A11y Project Checklist with a very detailed overview of accessibility issues to consider with common components: from lists to video and audio. A goldmine!
More after jump! Continue reading below ↓

Design System Checklist Trello Template

You and your team are working on a design system? The Design System Checklist template for Trello is a great example of how to structure your work and keep everyone involved on the same page. Even if you’re not a Trello user, the template provides some valuable ideas for creating your own checklist of things to take care of when working on a mammoth project like this.

Design System Checklist Template
Everything is ready in a Trello template: from UI components to design tokens to accessibility touchpoints.

Gov.UK Design System Components (Figma)

The lovely team behind Gov.UK has released a full collection of styles and components designed for UK Government services. During the design process, the team has tested and validated the design of the components, and we can use them to explore the states or conditions that we perhaps haven’t considered in our design just yet.

You can also check the GOV.UK Prototype Kit if you want to install all components locally, and GOV.UK Design System to explore how to use the styles and components in prototyping.

Design System Checklist Template
All form components in all states, in one place: GOV.UK Design System Components Figma file.

Complex Tables UX Tree

In his article on Architecting a complex table, Slava Shestopalov explores how to design and architect advanced tables — with a very comprehensive table tree checklist of all those fine details that are often forgotten or overlooked.

Complex Tables UX Checklist
Everything that goes into a complex table, with various states for rows, columns and cells: complex tables UX checklist.

UX Recipe is a helpful little tool to discover and choose some of the UX project tools and techniques for your project. It also allows you to estimate the amount of time require for the work done. All tools are broken down into groups, and if you click on the hashtags, you’ll find plenty of useful resources for each category. Created and maintained by Alecsandru Grigoriu.

UX Recipe
Choose your own UX adventure, with the UX Recipe.

UX Research Methods Flowchart

How do you choose what UX research methods works best for you? There are at least 20 popular methods, and a handy UX Research Methods Flowchart by Norman-Nielsen Group helps you find the right one.

It provides an overview of common strategies, grouped into behavioral, attitudinal, qualitative and quantitative methods. Once you know what insights you are after, you can pick your strategy using the chart.

UX Research Methods Flowchart
How to choose the right UX research method? UX Research Methods Flowchart has got your back.

Form Design UX Checklist

With web form design, it can be quite difficult to figure out just the right component to use when asking a particular question. The team behind Lyft has created a flow chart to make it easier for designers (and not designers alike) to make decisions for their forms.

In an article about form selection patterns, Runi Goswami describes the struggles the team went through when designing a segmented control, and how they ended up with a form selection control flow chart as a result.

Form Design UX Checklist
How to make a design decision around forms? Lyft’s Form Design UX Checklist is here to help.

Decision Trees For Design System Components

Design systems often come in various flavors. Surely there will be basic components, color, typography and spacing, but often also more sophisticated components, usage guidelines, accessibility considerations and live previews. Additionally, Workday Canvas Design System includes flow charts for deciding what components to use, with examples of the outcome that designers and non-designers can follow to make their decisions.

Flowcharts For Design System Components
Workday’s Canvas design system includes decision trees and flow charts for many patterns and components.

Interaction Design Checklist

The IxD Checklist that Aaron Legaspi and Amit Jakhu created helps us form a better understanding of interaction. Whenever you’re building some kind of interaction — be it a control, navigation, or an entire interface — you can use the checklist to evaluate your design against affordance, simplicity, structure, consistency, accessibility, tolerance, and feedback to ensure it is easy to use for everyone.

IxD Checklist
Evaluate the interaction of your design with the Interaction Design Checklist.

Bonus: Text-To-Timeline Tool

Markdown is an incredible little tool to generate timelines, e.g. for project planning or life timeline! You write markdown-ish text and it gets converted into a nice looking cascading timeline. Also available as a VS Code Extension.

Text-To-Timeline Tool
(Image credit: Image source)

And That’s A Wrap!

If you are looking for more gems like this one, we’ve published a few UX guides with checklists over the last few years, so feel free to continue exploring there. Happy checklisting, everyone!

Smashing Editorial(il)
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments