UI Checklist

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:

1. Prevent Overlap Issues

  • Fix these issues by creating a new position context
  • If you need a new z-index value, carefully add to our existing SCSS variables file (third-party scripts aren't included in this z-index variables object)

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.

2. Truncate Long Text

  • Fixes require a combination of our .truncate helper class with .flex and .flex--1 for layout elements
  • Use a <span title="text..."> title attribute so truncated text is still accessible

Use the correct .truncate helper class in combination with .flex and .flex--1 for the layout elements.

A bad z-index value makes this dropdown look broken.

3. Use Page Transitions

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.

4. Start with an Empty State

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.

  • Use <a> link to show the URL for discoverability in the browser UI
  • Use <a> link to allow open in new tab functionality
  • Use <a> link if the URL changes
  • Use button to 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.

6. Include Clear Error Messages

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.

7. Enable Form Submit via Keyboard

Allow short forms to be submitted on enter keypress for quick interactions.

  • When using full page modals it's helpful to auto-focus the first form field people will be typing inside

Check Please

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.