How to Design Buttons to Help Improve Usability

Buttons can play a big part in how visitors interact with a website. They come in varying shapes, sizes and styles but there are a few things to consider when designing buttons:

  • Use of Icons
  • Look and Feel
  • Behaviour
  • Importance
  • Consistency

Use of Icons

Using icons as part of buttons can help improve usability by providing a visual aid making it more obvious to the user as to what function the button provides. Below are examples of buttons incorporating icons and shapes to do just that:

exampleButtons

One of the most common uses of icons in buttons is to include an arrow to indicate that the button guides you to the next or previous step or page.

Other common uses seen above are an up arrow for uploading, down arrow for downloading, play icon to for video playback and magnifying glass for search. As long as the icon makes sense and doesn’t confuse the user then icons can definitely have a positive impact on usability.

Look and Feel

The vast majority of buttons are wide and thin to accommodate one, two or three words of text. Now and again you will come across buttons that are square or bigger than usual. As long as it is clear that a button looks clickable and is clear in what it presents then it will certainly help improve usability.

variedButtons

One of the biggest observations is the vast majority of buttons have rounded corners. Some bigger than others. This really is the typical style of a button. Using this as a standard when designing a button is a good place to start as it will be immediately familiar to the user that it is indeed a button.

Behaviour

Here at Inspect Element, I’ve looked at button behaviour before. It is important that design of a button includes a hover and active state as it can go along way to conveying the appearance of a button.

Physical Buttons

Think of a physical button such as those on an mp3 player, television remote control or a computer keyboard. Essentially this is what a button in web design is emulating.

Hover State

button_hover

With that in mind, the hover state is the closest interaction on the web can get to the sensation of touch. Physical buttons are usually raised so they are easily accessible to touch. Remembering this when designing a button, design a hover state to improve usability. Common techniques include changing the colour or making the original colour darker or lighter.

Click State

button_click

Keeping the physical button metaphor, a click state also adds to the sensation of pressing a button. Again, make this different from the hover state so that the user knows they’ve clicked a button. A common way of achieving this is to use an inner shadow to give the impression of the button being ‘pushed’ in.

Importance

The importance of a button will have an affect on the design. Using a different colour that grabs your attention is a good way of increasing the performance of a button. Increasing the size of the more important button(s) is also very effective.

As can be seen on the Squarespace homepage it is obvious that they are encouraging visitors to try their service for free above taking the tour which is a much smaller and darker button underneath:

ssButtons

Over on the Paramore|Redd homepage they clearly want you to sign up for enews more than anything else due to the size of the button, typography used and emphasis on the embedded icon:

pRedd

Using the example of colour, Postbox‘s goal is to convert users to either download the free trial of their app or purchase a copy. The red buttons at the top of the page really catch the attention of the visitor:

postbox

Consistency

It is important for all buttons on a site to retain a certain level of consistency or else you risk confusing the users into trying to work out what is or isn’t a button.

They shouldn’t have to work in order to find out what they can click on and what they can’t. The best buttons are the ones that integrate into the design and are obvious to the user what function they serve.

Conclusion

There is much more to think about button design other than just making them look pretty. Considering icons, colours, wording and behaviour too can go along way to improving the usability of your next web design. It is worth noting that it is one of the easier ways to do so and is often overlooked.

by @tkenny

You should follow me on Twitter here

Newsletter

Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: