How to create the right button hierarchy?

Deep dive 

Prioritizing hierarchy in UI design shows users you care about their experience. It helps them navigate the interface more easily, complete tasks faster, and feel more comfortable using your product.

The principle of button hierarchy 

We previously discussed this topic in the article on accessibility. In short, hierarchy organizes buttons based on their level of importance.

Material Design categorizes these levels as high, medium, and low emphasis. Some design systems classify them as primary, secondary, and tertiary buttons.

• Primary or high-emphasize buttons represent the most important actions. They are usually filled. They catch the user’s attention and guide them to the main action on the page.
• Secondary or medium-emphasize buttons are typically outlined. They represent alternative actions and should stand out without competing for attention. They work well with filled buttons.
• Tertiary buttons, often filled tonal or text buttons, represent less important actions.

Text buttons work particularly well with multiple options. They appear frequently in cards, dialogs, or snack bars. Since they have no visible container in their default state, they don't distract from the surrounding content.

Button grouping 

You can group buttons vertically or horizontally. Web interfaces often use horizontal grouping because they traditionally have more space.

Mobile interfaces, with less space, typically use vertical grouping. This layout also increases the tap zone, improving the user experience.

However, you can still use horizontal grouping in mobile interfaces when it fits the design.

Button order

You can align button groups to the right or left, depending on factors like cultural context, the target audience's handedness, and the visual balance of the design. There is no universally correct solution. 

Whatever the alignment, the primary button is often placed in a corner.

This rule also applies to multiple buttons.

If the buttons are fluid and expand to fill their container, place the primary button on the left.

When buttons are arranged vertically, they can either scroll with the content or stay fixed at the bottom. No matter how many buttons there are, the primaries should always stay in their designated position. 

• If the buttons scroll with the content, place the primary button at the top. 
• If they are fixed at the bottom, the primary button should be positioned at the bottom.

When a vertical button group is centered, the primary button can be placed on either the left or right. This rather depends on your preferences. What’s more important is staying consistent with your design choices.

Button group alignment 

According to the button hierarchy best practices, groups should be aligned based on the context and layout of the interface:

• Left alignment: Groups are generally left-aligned when they follow content like a block of text. This keeps the interface visually balanced and allows users to easily scan from the text to the buttons. 
• Center alignment: In the context of an empty state or when attention needs to be drawn to a specific action, buttons are typically center-aligned. This works well when there’s no other content competing for attention, making the buttons a focal point. 
• Right alignment: When buttons are placed inside container components such as dialogs, popovers, or cards, they should be right-aligned. This positions the buttons closer to the user’s final decision point.

In all cases, the order of button priority should match the alignment of the surrounding text. When text is left-aligned, the critical action is on the left; when text is right- or center-aligned, the critical action is on the right.

Destructive buttons

Destructive buttons, which trigger actions like deleting or removing items, should be placed further away from the group of the function ones. 

Destructive UI elements are visually less prominent. You can achieve this by making them smaller, less button-like, or even presenting them as links. You can also apply a distinct color, usually red, to destructive buttons to clearly signal the consequences of the action and draw attention to the potential risk.

This encourages users to actively search for the destructive option, while those focused on their tasks are less likely to click it by mistake.

What to do when there are too many actions? 

According to Hick’s Law, the time it takes to make a decision increases with the number and complexity of choices. Hence, it's essential to find ways to avoid overwhelming users with too many options. 

One effective approach is to use progressive disclosure, a UI button hierarchy technique that gradually reveals information and actions. This helps users focus on the most relevant choices, avoiding cognitive overload. Here are ways to implement this:

• Overflowing actions: For interfaces with limited space and multiple actions, you can hide some actions by placing them in an overflow menu. This is triggered by a single button and lets users access additional options only when needed.

• Action grouping: Group similar actions under a menu or a split button. A split button has one designated primary action, while additional related actions are hidden within a dropdown menu.

Limit the number of actions displayed to seven or fewer. Place less frequently used actions in menus, keeping the most important actions visible and easy to access.

How many primary buttons can there be in one view? 

Generally, a single view should have only one primary button to direct users' focus to the main action. However, if there are multiple important actions, you can use up to three primary buttons.

👋 Read the full case study

When more than three actions are equally important, using multiple primary buttons can clutter the design and confuse users. In such cases, it’s better to use multi-secondaries or tertiaries.

You can also use color to help users differentiate between primary buttons. This is common on login or sign-up pages where UI elements have equal importance.

Source

What mistakes do designers make most often when styling buttons?

In your designs, you may occasionally break the rules intentionally. However, as a general guideline, always aim to meet WCAG 2.0 level AA accessibility standards.

Low color contrast ratio

User interface components such as form fields, buttons, and tabs must have a color contrast ratio of at least 3:1. The same rule applies to button borders. Decorative elements that aren't necessary for distinguishing interface components can have a lower contrast ratio.

In this example, the contrast ratio of the secondary button's fill against the background is less than 3:1, making it difficult for users with vision impairments to clearly see the button's shape.

Low text contrast ratio 

Aim for a text contrast ratio of at least 4.5:1 to ensure that button text is easily readable.

In this example, the secondary button text has a contrast ratio below 4.5:1, making it difficult to read, even for people without visual impairments.

Similar styles for buttons of different levels of importance 

When buttons of different levels of importance look too similar, it creates confusion and makes it hard to tell which action is more important. This goes against the principle of hierarchy. 

If different types of buttons are filled, color becomes the only way to distinguish between them. It goes against accessibility principles.

Additionally, the contrast ratio between the buttons should be greater than 3:1 to ensure people with visual impairments can easily differentiate them.

In this example, none of these guidelines are followed, and here’s the result:

The same issue appears in this variation:

And also here:

Color is the only indicator of interactivity

As mentioned before, color shouldn’t be the only signal of interactivity. 

In this example, the tertiary button isn’t accessible because color-blind users may struggle to distinguish it from plain text. Although its position near other buttons might help, it can still confuse.

Consider adding visual cues like borders, icons, underlines, and clear labels to make tertiaries easily recognizable.

Different button shapes 

Elements with the same function should look the same. Avoid inconsistent shapes. This button hierarchy UI will confuse users.

How to prioritize buttons in the interface by size?

While it’s tempting to search for the perfect size, the best choice depends on the specific interface and available space around the button. Sizes may vary across different parts of the interface, but it’s crucial to link the size to the button's importance.

According to the button hierarchy best practices, larger buttons should represent the most important actions, medium-sized—for less critical actions, and smaller—for the least important ones. This hierarchy helps users easily navigate the page. Look at the example:

Here are some guidelines: 

• Small: At least 32px in height.
• Medium: At least 40px in height.
• Large: At least 48px in height.

Related reading: What should be considered in app button design?

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• I’ve been doing buttons wrong! Have you? by Adham Dannaway
• How to design UI for multiple buttons by DesignForDucks

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers. 

Buttons on the web: placement and order by Artem Syzonenko