Buttons, as one of the most critical components of UI/UX, are broadly used in different platforms. They have the power of impacting user action and experience. If the buttons are not designed reasonably, it would cause misunderstanding and barriers to the user flow. The platform may even lose users due to the failures of achieving their purposes. Our goal is guiding the users to complete the actions and certain aims that we expect in the interactive system. It’s time to talk about how to design your buttons to lead your users!
When the users see multiple buttons at the same time, they never want to think for too long. If the buttons are not represented distinctly, the users would be misled and fail to attain their predicted results. A clear and logical button hierarchy calls the users to click the expected buttons and enables them to make decisions intuitively and immediately. Here are 3 aspects affecting building the button hierarchy:
Let’s introduce the 4 types of buttons (These are the buttons I’ll cover in this article, but not limited to these):
Generally, the button types can be sorted by hierarchy (high — low):
raised button > flat button > ghost button > text button
The core of clarifying the button hierarchy is selecting the proper button type based on the diverse scenarios and user’s needs to differentiate the primary and the non-primary buttons visually. For example:
Use the raised button or flat button to highlight the primary button and ghost button or text button to distinguish the buttons with different hierarchies. “Sign up free” is the primary button here since developing potential users has top priority in this scenario.
It means the elements that have a similar visual characteristic are perceived to be more related. The buttons with the consistent appearance can be considered as the buttons at the same level of hierarchy, which enables the users to set the corresponding connections and understand the buttons sufficiently.
Update” buttons and “More” buttons on the right have different visual characteristics. Users can anticipate their next action.
It’s obvious that the buttons from the “Home” button to the “More” button tend to be regarded as a group and are at the same level of hierarchy. “Tweet” button has a different appearance and is at a higher level of hierarchy.
The elements arranged close to each other tend to be more relevant. Proximity helps to further organize similar buttons, implying that they have the same type of function. The importance of proximity is like the spaces between words and the returns between paragraphs. Properly utilizing this principle creates a positive effect on leading the users.
Add space between the buttons to divide them into types. The buttons placed together have a similar type of function.
The space between the “More” button and the “Settings” button subtly divides the buttons into two groups, suggesting that the buttons from “All” to “More” are the categories of search results and the “Settings” button and “Tools” button have different usage.
We must know one thing that the users never “read” the content of the interface. They “scan” the interface to find and do the things they want. If they miss the button we expect them to press, we would lose the potential users and business opportunities. So, making the buttons stand out is crucial.
To achieve this, emphasizing the buttons through building the contrast is an effective way. No matter what button type you use in what scenarios. Here are 3 universal factors work together to make your buttons can’t be missed:
Negative space, as known as white space, is the space around and between the elements in the image. Regarding making the buttons prominent, it’s the first thing you should do to create a strong contrast is leaving enough negative space around the buttons. Once you do that, you’ll find that your attention will be fully focused on the buttons. The users can immediately notice and press the buttons by using the negative space properly.
Size is one of the most effective factors to create contrast. Large-sized buttons can always attract the user’s attention. With leaving the negative space around the buttons first, adjusting the size of the buttons helps to make them more noticeable on the interface.
By introducing negative space and size for the buttons, adding colors to the buttons can enhance the contrast even more. Pick a splashy color in your color palette if possible to make the users can’t help to click.
Conveying the accurate messages and telling the users what each button does is essential. If the functions of the buttons are not displayed obviously, it would cause the users’ antipathy since they don’t want to guess and test each button’s usage. There are different elements for explaining the buttons including copy, icon and label.
Copy is one of the most straightforward elements to convey the complex concept minimally. Making the copy concise and to the point helps the users to get the information efficiently and ensures the friendly user experience.
For the same question, users may have different judgments in terms of “Yes” and “No”. Use appropriate copy instead of “Yes” and “No” for the options to ensure the user-friendly experience and avoid misunderstanding.
Make the button’s copy refers to a distinct user action.
Icons are a common UI element that visualizes the button’s function concisely and clearly. Accurate and recognizable icons help in illustrating the meaning of the buttons. The users can tell the diverse usage at a glance.
For the buttons that have specific or complex functions, it’s necessary to label the buttons to illustrate briefly the function. Labels are usually hidden unless the cursor hovers over the buttons.
Buttons are crucial and powerful in any interactive system. Thus, it’s worth taking effect and paying attention to the button design. To lead the users properly, we can:
Buttons should be designed with care in various scenarios to enable the users to find the buttons they need, make the choices intuitively and finally achieve their purpose.