While they may go unnoticed if they’re implemented properly, buttons are a vital element in creating a positive and productive user experience. At their most basic, UX buttons are styled links that grab the user’s attention and help drive them in a particular direction. Buttons can link us to other pages or complete an action like submitting a form or making a purchase. They are often used as calls to actions (CTA) we want our users to complete on our website.
But how do users understand an element is a button? And how can you improve your button design to make it easier for your audience to click through? Keep reading while we look at the most common types of UX buttons and the best button design practices to follow to keep your user journey neat and effective on your website.
Common types of UX buttons
Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your website UI, and they should be easily findable and identifiable while clearly indicating the action they allow a user to complete. In most cases, there are 5 main types of UX buttons: text, ghost, raised, toggle, and floating action buttons.
“The best way to indicate a button is to use visual cues.”
Text buttons
Text buttons are text labels that fall outside of a block of text. The text should describe the action that will occur if a user clicks or taps a button. Text buttons have a low level of emphasis and are typically used for less important actions. Because text buttons don’t have a container, they don’t distract from nearby content.
Here’s a Material Design example of a flat button (via Material Design).
Ghost buttons
Outlined buttons (often called “ghost” buttons) are a step up in complexity and emphasis from a text button in button design. They typically indicate actions that are important but not the primary action on a page. Outlined buttons should be exactly that: an outline with no fill surrounding text that indicates an action.
Raised buttons
Raised (or “contained”) buttons are typically rectangular buttons that “lift” from the surface of the screen via use of a drop shadow. The shadow helps indicate that it is possible to click or press the button. Raised buttons can add dimension to mostly flat layouts, and they highlight functionality on busy, wide, or otherwise congested spaces.
Here’s a Material Design example of raised buttons (via Material Design)
Toggle buttons
Toggle buttons are typically used in button design for one of two reasons: to group related options or to showcase a selected action or setting. For the former, only one option in a group of toggle buttons can be selected and active at a time. Selecting one option deselects any other. For the latter, the toggle button indicates whether an option is active or inactive.
Here’s a Material Design example of toggle buttons (via Material Design)
Floating action buttons
According to Google, “A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.” A FAB should perform a constructive action such as creating a new item or sharing the item on screen.
Here’s a Material Design example of floating action buttons (via Material Design)
UX button best practices
We’ve talked about the types of UX buttons in button design, but what about the best ways to implement them in your website’s UX design? The best way to indicate a button is to use visual cues. These indicators help people determine whether or not a button is clickable. It’s important to use proper visual signifiers on clickable elements to make them look and function like buttons.
Size
The first element to consider when designing in button design is size. You should consider how large a button is in relation to the other elements on the website page. At the same time, you need to make sure that the buttons you design are large enough for people to interact with.
A good rule of thumb comes to us from the MIT Touch Lab. Studies by the Touch Lab say that making your button a minimum of 10mm x 10mm is a great place to start. Keep in mind that with the rise of responsive web, thinking about how the button will resize and percentage widths of buttons has become more important.
Color
The primary action on a page needs to carry a stronger visual weight and have a distinct contrast from its surroundings. It should be the visually dominant button. For instance, adding one color to a grayscale UI draws the eye simply and effectively.
Secondary actions (like ‘Cancel’ or ‘Go Back’) should have the weakest visual attraction because reducing the visual prominence of secondary actions minimizes the risk for potential errors while further directing people toward a successful outcome.
Keep in mind that a button isn’t a one-state object. It’s multi-state. Make sure you consider the hover/tap states and active states of the button. Bear in mind that these states should provide enough contrast for people to clearly identify them as different from the default state.
“Making your button a minimum of 10mm x 10mm is a great place to start.”
Shape
As far as shape is concerned, a safe bet for website button design is to make buttons square or square with rounded corners, depending on the style of the site or app. Some research suggests that rounded corners enhance information processing and draw our eyes to the center of element.
One suggestion, if you do choose to deviate from traditional button shapes, is to make sure you conduct usability testing on your designs to ensure that people can easily identify the buttons.
Related: Your team needs to make user research a habit
No matter what shape you choose, be sure to maintain consistency throughout your interface controls so that your user will be able to identify and recognize the appropriate UX elements as buttons.
Consistency is key (via Smashing Magazine)
Placement
Regarding UX button placement, try to use traditional layouts and standard UI patterns as much as possible because conventional placement for buttons improves discoverability. Using a standard layout will help users understand the purpose of each element — even if it’s a button without other strong visual signifiers. Combining a standard layout with clean visual design and ample whitespace makes the layout more understandable.
Microcopy
UX button microcopy is often a call-to-action that tells users what action they will complete if they click the button. Strong CTA microcopy has to catch users’ attention quickly and lead them right to the action.
For a more effective call-to-action, keep the number of words at minimum. A few appropriately chosen words are much more effective than a long descriptive phrase. In addition, using action verbs and phrases like “Add to Cart” or “Submit” in CTA microcopy can help you give strong and direct instructions to your users on what to do next.
Image from Tubik Studio
Image from Tubik Studio
Related: Good UX copy doesn’t have to be short
Making and following UX button best practices has been made easier in the newest version of InVision Studio. Once you’ve made a button you love, turn in into a component. Then you’ll have easy to re-use elements that you can use throughout your project. Whenever you update a component, all other instances will inherit the changes automatically. You can also customize each instance of a component with overrides. Even better, your components can be either static or responsive, depending on your needs.
