Make sure that links, buttons, and other interactive elements are visible and distinguishable from non-interactive elements

Make sure that links, buttons, and other interactive elements are visible and distinguishable from non-interactive elements

  • Content should not look like controls and controls should not look like content
  • Ensure that primary actions are visually distinct from secondary actions
  • Use buttons for “doing something”, use links for “getting somewhere”

distinguish interactive elements

  • Ensure that primary actions are visually distinct from secondary actions
    • When conducting usability testing, observe for common errors that result not from the user’s intent, but from poorly distinct primary and secondary actions. Also, when reviewing the design, make sure that color, size, positioning and other elements differentiate the actions.
  • Content should not look like controls and controls should not look like content
    • Identify all controls in your product and make sure that they are standing out from the content. When running usability tests, pay attention to whether users are having difficulties interacting with controls.
    • Further reading
  • Consider styling positive controls (e.g. ‘Submit’) as buttons and critical controls (e.g. ‘Delete’) as links to make it less likely for users to make mistakes.
  • Links are usually underlined or styled distinctively.
    • Test how your links look when added in the middle of long paragraphs of content. It should be obvious which are links and which are content.

Use Buttons

  • For “doing something”
  • For actions that affect the websites front and back-end

 

For example:

Signing up

Adding comments

 

 

Use Links

  • For getting somewhere
  • For actions that do not affect the website at all

 

For example:

Going back to previous page

Moving from one page to another