UX Checklist Series: Button Design

This post is from our User Experience (UX) Checklist Series:

Buttons are actionable touchpoints for users to engage with content in actionable ways. Small but mighty, buttons can make or break user experience on a website if poorly designed, so it’s important to follow best UX practices when designing buttons.

Pressing buttons is gratifying. From big glowing red buttons to tiny tappable icons on our phones, buttons signify action. We often don’t realize how many buttons we tap or click every day until we have a negative experience; a pesky button that is too small to tap, or a button you click that results in nothing happening, can ruin user experience.

In this post, we'll walk through how to ensure positive UX with buttons on your site. Follow these guidelines to decide what type of button would work best both for your content and users.

Button Anatomy

5 Types of Buttons

Solid Buttons

Solid buttons point toward a primary action for users to take by standing out on a page as a visual cue for user action. Buttons empower the user to make choices rather than passively engage with content. Therefore, you want solid button actions to be your highest priority action items, whether it be a CTA to sign up for more information or to drive users to another content page.

buttons solid

Example of a Solid button

Line/Ghost Buttons

These buttons are for secondary actions and stand out less on the screen. With a simple color outline, they draw less attention from users but are still differentiated from other content on the page. When a user hovers over the button on desktop, a color fill may “ghost in” to add interactivity.

Example of a Line/Ghost button

FABs (Floating Action Buttons)

Made popular by Google’s Material Design, FABs represent a primary action on a screen, typically conveyed through a single action icon. The shadow behind the button optically draws it off the screen, making the FAB a natural attention grabber. Their circular shape typically differs from other visible content, and UX research has shown that rounded corners are easier on the eyes.

Example of a FAB

Icon Buttons

Icon buttons are often paired with labels to convey action. Icon buttons without labels are not recommended for audiences with low computer literacy, therefore a safe bet is to always pair icons with text in buttons.

buttons icon

Icon + label (left) versus icon button (right)

Text Links

Last but not least, text links are signified with a color (often blue), underline, and/or specific actionable verbiage such as “follow us”, “read more”, etc.

These buttons can fall within as well as outside of a body of text and are typically for less important actions.

Button Sizing

Following MIT’s Touch Lab results on measuring finger surface area used to touch screens, a good rule of thumb (pun intended) is to have a minimum button size of 10mm x 10mm, or, 37px x 37px. At the smallest minimum requirement, buttons of this size have low touch accuracy.

On the flip side, buttons over 72px x 72px also have low touch accuracy, making the sweet spot for button size around 42px-72px on mobile.

When sizing buttons for desktop instead of mobile, the cursor is smaller than a finger, and often tricks designers into thinking they can create smaller buttons. Computer screens are much larger than tablet and mobile screens, and buttons can easily get lost on a page if too small.

A general rule to follow is padding the vertical height of your button with the line height of the font point size you’re using + 1 unit. If users with visual impairments increase the font size in their browsers, this will ensure that the button height will not be cut off with the increased font size.

Along with button sizing, it’s also important to consider the amount of space between buttons. Putting buttons too close together raises the risk of the user accidentally tapping the wrong button, but placing them too far apart may make the UI appear disjointed, and it may be difficult to quickly tap different buttons if need be.

Button Consistency

Consciously or not, users remember UI details. We associate certain element shapes with actions and buttons, like the floppy disc icon as a “save” button or a trash can icon to remove a file from your device. Consistent design not only improves overall design, it also creates a familiar and more seamless experience for users.

Since buttons are action points for the user, button text should also be actionable. Stick to using verbs (Complete, Start/Finish, Search) or a simple verb + noun combination for buttons (Next Page, Submit Post, Learn More). Whichever labeling method you choose, maintain consistency across all of your buttons.

buttons wording

Verb + noun (left) versus verb (right)

When it comes to visuals, decide whether your button text will be all lower case, upper case, or title case. Consider color language: users may be confused by a red button that says “Save”.

Similarly, keep readability in mind when choosing colors. Users with visual impairments may have difficulty reading and engaging with buttons on your site, so try using this helpful tool to ensure your colors meet accessibility requirements. Check out our UX Checklist for Accessible Design Best Practices for more details.

buttons case

Lower case (left), upper case (center), title case (right)

buttons color

Color language in button design

Use buttons as an opportunity to showcase your brand colors.

Use a consistent button shape and size. Buttons can have a varying corner radius, but typically fall into one of three categories: hard line, rounded edges, or pill-shaped. Rounded corners typically communicate simplicity and openness whereas hard edges are more uniform and formal. Whichever style you choose, make all of your buttons the same shape to be consistent.

buttons cornerradius

Hard line (left), rounded edges (center), pill-shaped (right)

Next Steps

After reading this, don’t get too button happy. An overuse of action cues causes users to leave a site without engaging with anything. Buttons should be reserved for the small handful of important actions you want users to take. Make sure and check the buttons you have on your site against this guide to ensure they’re consistent and align with your visual brand identity.