Cover picture

Interface guidelines

Small details & suggestions that can improve the quaility of a user interface.

Interactivity
  • Forms should be submitted by pressing enter
  • Avoid placeholder text for inputs, we rarely need them, use help text instead
  • Inputs should disabled spellcheck and autocomplete most of the time
  • Use the HTML required attribute where appropriate
  • Toggles take immediate action on the page, if there’s a save button, use a checkbox
  • Buttons trigger actions, links change routes/pages
  • Tooltips should never have interactions inside, use a popover
  • Inline feedback is often better than global notification messages
  • Searching should highlight the matched text
  • Display stale data to improve page speed but still fetch the latest update
  • Indicate when new data is loading
  • Consider if clicking back should reopen a modal
  • Hitting escape should close a modal
  • While a form is submitting data, disable the submit button to stop multiple requests
  • Truncated text needs tooltips to see full data
  • Inputs should have the correct type like password, email, etc
  • Two primary actions should never be placed next to each other
Errors / help
  • Catch as many errors on the frontend as possible
  • Think about the loading, errors and empty state flows
  • Empty states should suggest next steps
  • Don’t rely on colour alone for errors, use icons and text
  • Do not mark all fields as required or optional, mark whichever appears least
  • Inline help for small tips, links to help centre to explain larger concepts
  • Avoid putting all help text behind help icons
General
  • Clicking table headers should sort the contents
  • Make data human readable, but consider showing the full value inside a tooltip
  • Spacing will always be a multiple of 4px, ideally using a design token
  • Select and dropdowns are not the same thing
  • Bullet points over long paragraphs
  • - and — are different, you most likely should be using — (⇧ + ⌥ + - )
  • Avoid mixing font sizes on the same line
  • Not everyone has a 1440px display, how does it work on a smaller screen
  • Indicate if a link opens in a new tab
Accessability
  • Disabled buttons should not have tooltips, they are not accessible
  • Icon only actions require tooltips and aria-label
  • If an element is clickable, it should most likely be a button
  • Focusable elements in a sequential list should be navigable with ↑ ↓
  • To open immediately on press, dropdown menus should trigger on mousedown, not click
  • Opening a modal should focus the first selectable element inside