Buttons

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: But It Now, Add to Cart, and Sell now.


How to Use Buttons

Apple’s guidelines for buttons (they call them “push buttons” for clarity) are:

  • Avoid using a push button to mimic the behavior of other controls
  • Use enough space between buttons so that users can click a specific one easily
  • Avoid displaying an image in a standard push button
  • Use a verb or verb phrase and title-style capitalization for the title of a push button
  • Add an ellipsis to the title if the button immediately opens another window, dialog, or app to perform its action
  • Resize a button’s width to accommodate the title
  • In general, don’t use a static text label to introduce a push button

Critically, they point out that “Users expect an immediate action to occur when they click a push button.”

Another thorough reference for buttons is the GNOME Human Interface Guidelines. It contains more best practices, such as:

  • 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.
  • In a dialog, one button may be made the default button, which is shown with a different border and is activated by pressing Return. Often this will be the OK or equivalent button. However, if pressing this button by mistake could cause a loss of data, do not set a default button for the window.
  • 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.

Read the full list here.

Basic Usage

For more detailed suggestions on designing and styling buttons, here’s a good post about buttons in design systems.


Types of Buttons

States

Variations

The Google Material Design guidelines and this article from UX Planet on Button UX Design describe even more variations and states.




Edit this page