This is a short list of UI issues that look broken or can otherwise negatively impact customer confidence in our product. Before you ship UI, ensure these basics are covered:
A bad z-index value makes this dropdown look broken. Fix by creating a new position context or carefully adding a z-index value to our app's SCSS variables file.
.truncatehelper class with
.flex--1for layout elements
<span title="text...">title attribute so truncated text is still accessible
Use the correct
.truncate helper class in combination with
.flex--1 for the layout elements.
A bad z-index value makes this dropdown look broken.
Navigating between pages should animate and transition between states. Pages should feel responsive to your actions. Avoid states where the interface feels stuck or sluggish.
A clear headline and short description helps guide to their next step.
This blank table offers no help to the next step and may leave a person feeling frustrated. Avoid a blank page like this.
<a>link to show the URL for discoverability in the browser UI
<a>link to allow open in new tab functionality
<a>link if the URL changes
buttonto trigger modal dialogs or perform an action
Don’t use a div/li with an href. Know the distinction between what it looks like and the underlying code.
This failure message offers no help to the next step and may leave a person feeling frustrated.
Follow the Manual of Style and use title case for headings, employ the right tone of voice, and write clear and helpful messages.
Allow short forms to be submitted on enter keypress for quick interactions.
Follow this checklist, along with our Manual of Style, and ensure our user interface details have been carefully considered. Using this checklist can help us pay down our design debt and reduce incoming polish bugs.