Button UX Design: Best Practices, Types and States
by Nick Babich
Buttons are an ordinary, every-day element of interaction design. Despite this, because buttons are a vital element in creating a smooth conversational flow in web and apps, it’s worth paying attention to these basic best practices for buttons. Also we’ll go over button types and states — important information you need to know to create effective buttons that improves the user experience.
Best Practices for Buttons
Make Buttons Look Like Buttons
Think about how the design communicates affordance. How do users understand the element as a button? Use shape and color to make the element look like a button.
And think carefully about touch target size and padding when designing. The size of buttons also play a key role in helping users to identify these elements. Various platforms provide guidelines on minimum touch targets. Results of an MIT Touch Lab study found that averages for finger pads are between 10–14mm and fingertips are 8–10mm, making 10mm x 10mm a good minimum touch target size.
Location and Order
Put buttons where users can easily find them or expect to see. For example, iOS UI guidelines show known location for buttons
Mind the order and position of buttons. The order that buttons go in, especially if there are corresponding pairs (such as ‘previous’ and ‘next’) is important. Ensure the design puts emphasis on the primary or most important action.
In example below we use red for the button that performs a potentially destructive action. Notice how the primary action is not only stronger in colour and contrast, but also is on the right hand side of the dialog.
Labels
Label buttons with what they do. Add a clear message of what happens after the click.
Same example as above but without proper text labels. Feel the difference?
Call to Action (CTA)
Make the most important button (especially if you use them for calls to action) look like it’s the most important one.
Button Shapes
Usually, you’ll want 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 the element.
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.
Be sure to maintain consistency throughout your interface controls, so the user will be able to identify and recognize your app user interface elements as buttons.
Button Types and Behavior
1. Raised Button
Raised Button typically rectangular button that lifts (the shading indicates that it is possible to click). Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces.
Use
Inline (to give more prominence to actions in layouts with a lot of varying content). Use raised buttons to give more prominence to actions in layouts with a lot of varying content.
Behavior
Raised buttons lift and fill with color on press.
Example
Raised buttons stand out more than flat buttons. Example for Android application.
2. Flat Button
Flat buttons do not lift, but fill with color on press. The major benefit of flat buttons is pretty simple — they minimize distraction from content.
Use
In dialogs (to unify the button action with the dialog content)
On toolbars
Inline with padding, so the user can easily find them
Behavior
Example
Flat button in Android application dialog.
3. Toggle Button
A toggle button allows the user to change a setting between two (or more) states.
Use
Most common toggle button is used as On/Off button in preferences.
Also Toggle buttons can be used to group related options. But your layout should be arranged in a way to convey that certain toggle buttons are part of a group. Also toggle button requires:
- Have at least three toggle buttons in a group
- Label buttons with text, an icon, or both
Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles.
It’s a very important to choose right icon for your button. I’ve cover this topic in article Icons as Part of an Awesome User Experience.
Example
Apple iOS use toggle buttons for Settings section.
4. Ghost Button
Ghost buttons are those transparent and empty buttons that have a basic shape form, such as a rectangular. They are generally bordered by a very thin line, while the internal section consists of plain text.
Use
Using ghost button as a primary CTA is usually not such a good idea. You can see Bootstrap example and ghost button Download Bootstrap which looks the same way as their main logo which may confuse users.
Ghost button is best used for secondary or tertiary content, since it will not (or should not ) compete with your primary CTA. You ideally want the user to see your main CTA and then (if not relevant) skip over it to the secondary button.
Positive action has much higher contrasts and user sees a clear action.
Behavior
Example
AirBnB website has ghost buttons for action “Become a Host”
5. Floating Action Button
Floating action button is a part of Google Material Design. It’s a circular material button that lifts and displays an ink reaction on press.
Use
Floating action buttons are used for a promoted action.
Behavior
They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.
Choosing Button Type
Choosing a button style depends on the primacy of the button, the number of containers on screen, and the screen layout.
Function: Is button important and ubiquitous enough to be a floating action button?
Dimension: Choose button type depending on the container it will be in and how many z-space layers you have on screen.
Layout: Use primarily one type of button per container. Only mix button types when you have a good reason to, such as emphasizing an important function.
Button States
This point is not so much about how the initial button looks like for the user, but it’s about hovering a button and finding that nothing changes. User might gets confused: “Is it a button, or not. Now I have to click to find out if that thing that looks like a button is actually a button. Well...”
Button isn’t a one-state object. It’s multi-state. And providing a visual feedback to the users to indicate current button state should be a top priority task.
Normal State
Main rule for this state—button should look like a button in a normal state. Windows 8 is a good bad example of such problem — it hard for users to know if things are clickable or not in a Settings menu.
Focused State
Offering a good visual feedback to users that they’re hovering over a button is good practice. The user instantly knows their action was accepted and they want be delighted by visual rewards.
Pressed State
By animating different elements of your design you can add a bit of excitement and delight your users with creative and helpful motion.
Inactive State
There are two possibility — either hide a button or show it in disabled state.
Arguments for hiding the button:
- Clarity. Only showing what is needed for the task at hand.
- Save estate. It allows you to change the controls, using the same space for different means. This is handy when there is a lot going on. Gmail does this.
Arguments for using a disabled state:
- Show the action possibility. Even if button isn’t in use, the user has a chance to learn that the action is possible. You may even have a tooltip explaining the criteria for use.
- Control location. The user can learn where controls and buttons live within the interface.
Conclusion
Button is meant to direct users into taking the action you want them to take. A smooth handover keeps the conversation flowing along; glitches such as an unable to find a right button, at best, as interruptions and, at worst, as breakdowns.
Button UX design is always about recognition and clarity. Think of the web or app as a conversation started by a busy user. The button plays a crucial role in this conversation.
Originally published at babich.biz
