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.
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.
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.
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.
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.
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.
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!