XD Essentials: Button Design Best Practices

Buttons are a common element of interaction design, and while they look like a very simple UI element, they are one of the most important elements to create. In this post, I’ll cover the basics you need to know in order to create effective controls that improve user experience.

Make Buttons Look Like Buttons

How do users understand an element as a button? The answer is simple — visual cues help people determine clickability. It’s very important to use proper visual signifiers on clickable elements in order to make them look like buttons.

Shape

A safe bet is to make buttons square or square with rounded corners, depending on the style of the site or app. Rectangular shaped buttons were introduced into the digital world a long time ago and users are very familiar with them.

You can be more creative and use other shapes such as circles, triangles or even custom shapes, but keep in mind the latter might be a bit more risky and you need to ensure that people can easily identify these varying shapes as buttons.

/No matter what shape you choose be sure to maintain consistency throughout your interface controls, so the user will be able to identify and recognize UI elements as buttons.

Shadows and Highlights

Shadows are invaluable cues in telling users what UI elements they’re looking at. Drop-shadows make the element stand out against the background and makes it easily identifiable as a tappable/clickable element, because objects that appear raised look like they could be pressed down (tapped/clicked). Even with flat buttons (_almost_ flat, to be exact), there’s still a place for these subtle cues.

Clearly Label Buttons

Users avoid interface elements without a clear meaning. Thus, each button in your UI should have a proper label or icon. The selection should be based on the principle of least astonishment: if a necessary button has a label/icon with a high astonishment factor, it may be necessary to change the label/icon.

Clear and Distinct Label

The label on actionable interface elements such as a button should always tie back to what it will do for the user, because users feel more comfortable when they understand what action a button does. Vague labels like ‘Submit’ or abstract labels like in example below, don’t provide enough information about the action.

It’s important to indicate what a button does using action verbs. For example, if a user is signing up for an account, a button that says ‘Create Account’ tells them what the outcome will be after pressing the button. Such explicit label serve as just-in-time help, giving users confidence in selecting the action.

Put Buttons Where Users Can Find Them

Don’t make users hunt for buttons; put buttons where users can easily find them or expect to see them.

Location and Order

If you’re designing a native app, you should follow platform GUI guidelines when choosing a proper location and order for buttons. Why? Because applying consistent design that follows user expectations saves people time.

/In the case of web-based apps, you should think which placement truly works best for your users and testing is the right way to figure it out.

Make It Easy for Users To Interact With Buttons

The size of buttons and visual feedback play a key role in helping users interact with them.

Size and Padding

You want to consider how big a button is in relation to the other elements on the page. At the same time, you need to ensure that the buttons you design are large enough for people to interact with.

When tap is used as a primary input method for your app or site, you can rely on the MIT Touch Lab study in order to choose a proper size for the your buttons. This study found that the average size of finger pads are between 10–14mm and fingertips are 8–10mm, making 10mm x 10mm a good minimum touch target size. When a mouse and keyboard are the primary input methods, button measurements can be slightly reduced to accommodate dense UIs.

/You should consider the size of button elements, as well as the padding between clickable elements, because padding helps separate the controls and gives your user interface enough breathing space.

Provide Visual Feedback

This requirement isn’t about how the initial button looks like to the user, it’s about interaction experience with the UI element_._ Usually a button isn’t a one-state object, it has multi-states and providing a visual feedback to users to indicate current state should be a top priority task. This helpful illustration from Material Design makes it clear how to convey different button states:

Visually Highlight the Most Important Buttons

Ensure the design puts emphasis on the primary or most important action. Use color and contrast to keep user focus on the action, and place the button in prominent locations where users most likely notice it.

Call to Action Button

Important buttons (such as CTAs) are meant to direct users into taking the action you want them to take. If you want to create an effective call to action button that grabs the user’s attention and entices them to click, you should use colours with a high contrast relative to the background and place the button in the path of a user.

If we look at Gmail’s UI, the interface is very simple and almost monochromatic except for the “Send” button. As soon as users finish writing a message, they immediately notice this nice blue button.

Same rule works for websites. If you take a look at the Behance example below, the first thing that’ll catch your attention is a “Sign Up” call-to-action button. The colour and the position, in this case, is more important than the text.

Visual Distinctions for Primary and Secondary Buttons

You can find another example of grabbing the user’s attention with buttons in forms and dialogs. When choosing between primary and secondary actions, visual distinctions are a useful method for helping people make good choices:

• The primary positive action associated with a button needs to carry a stronger visual weight. It should be the visually dominant button.
• Secondary actions (e.g. options like “Cancel” or “Go Back”) should have the weakest visual weight, because reducing the visual prominence of secondary actions minimizes the risk for potential errors and further directs people toward a successful outcome.

Conclusion

Because buttons are a vital element in creating a smooth user experience, it’s worth paying attention to basic best practices for them. A quick recap:

• Make buttons look like buttons.
• Label buttons with what they do for users.
• Put buttons where users can find them or expect to see.
• Make it easy for user to interact with buttons.
• Make the most important button look like it’s the most important one.

When you would design your own buttons, start with the ones that matter most, and keep in mind that button design is always about recognition and clarity.