Intro to UI Wireframing > 2. UI Controls > 2.1. Buttons

2.1. Buttons


A button is a control used to execute an action, sending an email for example. Designing buttons may seem obvious, but they are surprisingly complex and there are a few tricky things to look out for.

When to Use Buttons

According to the book "Designing Interfaces", buttons should be "big, readable, obvious, and extremely easy to use for even the most inexperienced computer users". They are best used for important actions.

The challenge with buttons is that the more of them you add, the less obvious and easy to use each one becomes. So, use them wisely and deliberately.

Let's look at an example:

eBay

There are many elements on this page, including several actions the user can perform. But there are only three buttons, used for the most consequential actions: Buy It Now, Add to Cart, and Sell now.


How to Use Buttons

  • Set the button that a user is highly likely to select as the default (primary).1
  • Avoid using a button to mimic the behavior of other controls.1
  • Use enough space between buttons so that users can click a specific one easily.1
  • Avoid displaying an image in a standard button.1
  • Use a verb or verb phrase and title-style capitalization for the button text.1
  • Add an ellipsis to the title if the button immediately opens another window, dialog, or app to perform its action.1
  • Separate destructive buttons from nondestructive controls.1
  • Action should be immediate following a button press.1
  • When several buttons are placed next to each other, ensure that they have the same width. This is particularly important for pairs of Cancel and OK buttons.2
  • If pressing a button by mistake could cause a loss of data, do not set a default button.2
  • Keep labels short, so they don't cause a button to use too much space. It is also important to consider how labels will change length when localized.2

Basic Usage

States

Variations

  • Icon buttons - Buttons that have an icon accompanying, or in place of, the text.
  • Split Menu buttons - Buttons that can be activated by pressing, but also offer a secondary menu of options in a drop-down menu.

References

  1. Apple macOS Human Interface Guidelines
  2. GNOME Human Interface Guidelines


Further Reading


Leon BarnardBy Leon Barnard
Got questions or feedback? Email leon@balsamiq.com.