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
andautocomplete
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
, notclick
- Opening a modal should focus the first selectable element inside