Interface guidelines

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

• 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

• 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

• 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

• 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