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?
The basic rules of button design
Everything in life has a few ground rules that should be taken into account. Button design is typical in that it looks fairly easy but comes with lots of seemingly small factors the designer must consider.
Make Buttons Look Like Buttons
Whenever a user uses any product, they must decode the meaning and function behind every single element in the interface. Just like all other elements, you don’t want users to take a long time to understand and decode any of the elements they see – the longer they take, the worse your usability is.
Use shape and color to make the element look like a button. That includes square buttons, rounded squares or other forms of buttons that people can find in other common interfaces.
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.
Don’t have a button for everything
Offering users every single functionality on the same screen may sound like a good idea, but that’s a trap. People feel like they want to have all the options on their hands but in reality we don’t appreciate the wave of decisions to be made.
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. Users crave predictability and familiarity, so use color to help them identify and interpret your app’s content and interact with the right elements. Remember that whichever color palette you choose will determine how users will recognize and remember the elements in your user interface. The colors in your UI should help users navigate buttons and anticipate the actions behind each click, as well as match your brand.
Location and Order
Put buttons where users can easily find them or expect to see. 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.
Labels
Label buttons with what they do. Add a clear message of what happens after the click. The text that goes inside your button doesn’t need to be restricted to “OK” and “Cancel”. Your usability would improve by setting those generic terms aside and focusing on the action that each button does. Having buttons that read “Delete permanently” or “Cancel booking” can guarantee that your users understand each button, and even improve usability by decreasing chances of users making mistakes. Try to create boxes that have at least one line of text explaining what action is being taken and what it means for the user.
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. It is an interactive element of a user interface that’s aimed at encouraging a user to take a certain action. What differs it from all the other buttons on the page or screen is its engaging nature: it has to catch attention and stimulate users to do the required action.
Some Common Types of 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.
Text Button
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.
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 raised buttons to give more prominence to actions in layouts with a lot of varying content.
Ghost Button
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.
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.
Toggle Button
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.
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. A FAB should perform a constructive action such as creating a new item or sharing the item on screen. Used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.
Dropdown Button
Dropdown button, when you click it, displays a drop-down list of mutually exclusive items. You can often come across this type in the settings button. When a user chooses one of the options in the list, it’s usually marked as active, for example by color.
The wrap up
Button design is important, both because buttons help users navigate your product and because they can compel users to convert to any desired outcome. They need to be planned with care, so that your users can both know where the buttons are instantly and at the same time never once stop to think about that button. Make it flashy, make it useful – and let users enjoy your product to its full glory.
