Summary

An introduction to using buttons.


Buttons should be designed to help the user navigate sites and encourage positive actions. This is achieved by using a mix of button states and styles which clearly communicate to users when individual buttons are selected and which are most important on the page.


Design Theory

Appropriate application of colour is essential to creating buttons that are intuitive to use. Darker colours attract the eye and will take a prominent place in the visual hierarchy of any design, by applying the darker colours to buttons which have priority actions we can drive users to them easily.

Changes in colour should also be used to confirm actions undertaken by users, such as a button changing colour as it is selected or hovered over.

Using icons on buttons also helps to visually indicate their purpose and enables them to be quickly recognised by users.


Usage

We use 3 main navigational buttons:

  • Primary Buttons - these indicate positive and progress actions such as ‘Forward’, ‘Next Page’, ‘Submit’ etc.
  • Secondary Buttons - these buttons are used to indicate actions that are not to take priority and are secondary to the primary button actions. This can include actions such as ‘Show all’, ‘Add another’, ‘View details’ etc.
  • Call off Button - these buttons are used for a negative or retractive actions such as ‘Cancel’, ‘Back’, ‘Remove’ etc.

Each button has 3 states:

  • Default - This state shows the button as it appears on screen before it has been selected.
  • Hover - This state is triggered when the button has been hovered over by a mouse or tabbed to via a keyboard, this indicates to the user where they are in a list of buttons and that the button is ready to be actioned with a click or return.
  • Selected - This state appears after the hover state when the button has been triggered by the user, it is important to include this state to indicate to the user their action has been carried out whilst the next page loads or the action is performed.

Button types and states.

Sizing of buttons will vary depending on viewport and the type of buttons used.


Accessibility

All buttons and associated states should be actionable by either a mouse or a keyboard and any text included in buttons should be included in the code so that it can be read by screen readers.

Using different tints of a single colour in button states is preferable to changing colour as certain combinations are indistinguishable for users who are colourblind.

Any buttons which are intended for use on mobile devices or touch screens need to be designed to ensure that users can easily select them without incorrect selections occurring regularly. This is achieved by observing minimum sizing for buttons and ensuring there is enough tap space between objects.