Do Your Buttons Lead or Mislead Your Users?

If the user interface is the paths between users and interactive systems, then the buttons are the signs to lead the users.

by Runyu Xia

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!

Tip: Use tools like Bit (GitHub) to build your design system with reusable components. It will help your team collaborate over your real code, reuse and sync components across apps, and keep your UI consistent. Give it a try.

Build your design system with real components; reuse them across apps as a team

1. Clarify the Button Hierarchy. Don’t Make Your Users Think:

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:

Button Type

Let’s introduce the 4 types of buttons (These are the buttons I’ll cover in this article, but not limited to these):

Raised button — A button with effects, like drop shadow, which makes it eye-catching the most.

Flat button — A regular button without any fancy effects.

Ghost button — Like its name, a ghost button is generally transparent (no solid fill, blend into the background) but with an outline.

Text button — A button made of text only

Button types

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.

Similarity

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.

Proximity

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.

2. Make the Buttons Stand Out. Don’t Let Your Users Miss:

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

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

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.

Color

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.

by Eddie Lobanovskiy

by Outcrowd

3. Explain the Buttons. Don’t Have Your Users Guess:

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

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.

Icon

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.

Label

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.

Conclusion:

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:

Clarify the button hierarchy

Make the buttons stand out

Explain the buttons

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.

Hope this article is helpful. Feel free to share this article.

👏Click the clap button below if you like it!👏