User experience (UX) is a huge area, covering every interaction a user makes on your website. This post focuses on how to create the best button design for optimum UX and how it supports users to navigate around your website and take the actions that you want them to take.

Buttons – what makes a good user experience?

Good UX thinks about your site from your visitor’s point of view. What actions will they want to take at each point? For example, we might want them to ultimately get in touch via email, but what information and how much of it will they need before they are ready to do that?

Good button design helps a user to take an action. Google’s Material Design recommends three principles for buttons – they should show they result in an action, they should be easy to find, and what they do should be clear.

Showing a button results in an action

A button needs to look like something you can click. The most familiar is a box filled with colour or a box with an outline colour. Rounded corners can help, but square corners have also become popular.

Intro cards for PPWD Consulting with clear buttons and a strong hover state

Intro cards for PPWD Consulting with clear buttons and a strong hover state

Having a slight drop shadow on your buttons can help performance as this tends to be recognised as a signal that the object is interactive.

Having different ‘states’ for your buttons helps them to look interactive. They are subtle differences, such as a slight darkening of the background or text when you hover over them (also known as a rollover) and reinforce that the user can take an action.

The hover and focus states of the buttons creates a greater sense of interaction.

The hover and focus states of the buttons creates a greater sense of interaction.

One action per page

Best practice advises that each page on your website or app should have only one main call to action. If a visitor has too many actions to choose from, they will often opt to do nothing.

AVCA's Conference website has a single bright blue button in the top banner to encourage event registration

AVCA's Conference website has a single bright blue button in the top banner to encourage event registration

But if you do have more than one call to action on a page, the trick is to use ‘primary’ and ‘secondary’ styles. The primary button design should focus on what is THE most important action for the user to interact with – and ideally, there should only be one of these per page.

For HPD Lendscape, we designed a vibrant orange as the action colour, balancing text links and solid buttons to help create a hierarchy of actions

For HPD Lendscape, we designed a vibrant orange as the action colour, balancing text links and solid buttons to help create a hierarchy of actions

Consistency

Buttons throughout your website or app should be consistent in colour and style so that every time a user comes across it, the design is a signal that they can take an action. Use a prominent colour from your brand palette for this and, to prevent confusion, avoid using this colour for anything else that isn’t clickable. This creates the contrast you need to signal what visitors should do.

The Submit button stands out on the Thompson Taraz website, even though there are many text links which are also clickable

The Submit button stands out on the Thompson Taraz website, even though there are many text links which are also clickable

Clarity

It should be clear what clicking on a button will do. Use simple, clear text that preferably sits on one line. The text should be different in some way to other text on the page, for example, written in caps and needs sufficient contrast between it and the button background to be legible.

To aid clarity, you could add an icon to your button design, like an arrow. This works well with short button text as it should sit alongside text, not above or below. Only one icon per button should be used.

Space around the text inside the button and around the button itself is important for legibility. Think about touch screens and make sure your buttons are generous and easy to use for everyone.

Bright green is the action colour for Enterprise Drive, used for coloured text links with an icon, followed by a large green button for submitting article ideas

Bright green is the action colour for Enterprise Drive, used for coloured text links with an icon, followed by a large green button for submitting article ideas

Think of your website buttons as signposts through your online content. Whilst the button design will depend on the design of your website, they must be distinctive and stand out from non-interactive elements. You can choose to have an exclusive ‘action’ colour throughout your site to make your buttons stand out.

Above all, keep them simple, clear and recognisable!