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.

Windows 95 at first run: notice that every button including famous ‘Start’ button has a rectangular shape. Image credit: Wikipedia

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.

Floating Action Button (FAB) which represents the primary action in Android application is shaped like a circled icon.

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.

If button casts a subtle shadow this helps users understand that the element is interactive.

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.

Avoid designing interface elements that make people wonder what they do. Image credit: uxmatters

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.

A button’s label should say exactly what will happen when user press it. Image credit: Amazon

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.

Image credit: Apple

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.

Smaller touch targets are harder for users to hit than larger ones. Image credit: Apple

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.

10mm x 10mm is a good minimum touch target size. Image credit: uxmag

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.

Padding between buttons. Image credit: Material Design

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:

Make sure you consider the hover/tap states and active states of the button. Image credit: Material Design

Animation shows the button’s behavior in action. Image credit: Behance

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.

Adding one color to a grayscale UI draws the eye simply and effectively.

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.

The most important call to action button stands out against the background.

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.

Notice how the primary action is stronger in colour and contrast. Image credit: Apple

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.

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

This post was originally published on the Creative Cloud Blog.

More about Adobe XD:

• Download Adobe Experience Design CC (Preview) — Mac 10.10+ only
• Adobe XD Twitter account — also use #adobexd to talk to the team!
• Adobe XD UserVoice ideas database
• Adobe XD forum