When a user interface prompts users to take action, they’ll see at least two buttons. One button is primary to the user’s task and the other is secondary. To make this distinction clear, you have to use visual weight.

Visual weight is how users compare button priority. The button with the strongest visual weight will get the most attention. It’s important that primary actions have the strongest visual weight. Secondary actions should have the weakest visual weight.

When the Primary Action Is the ‘Cancel’ Button

The primary action is the button that completes the user’s task. But when the user is about to do an irreversible action, the ‘Cancel’ button is the primary action. The ‘Cancel’ button gets more visual weight because it doesn’t need an immediate action. Users need to carefully think through the task before they act.

Giving the irreversible action the most visual weight is dangerous. When you do this, the user can mistake the irreversible action as a safe action and click it by mistake. When it comes to permanent data deletion, completing tasks quickly is not important. What’s important is choosing the correct action so that users don’t regret their decision.

How to Make Your Primary Actions Strong

Using a saturated color for your buttons is the best way to make the visual weight strong. The more saturated a button color is, the more it’ll catch user attention. Saturated colors appear brighter to the eyes and aids task efficiency.

Using a saturated color for your buttons is the best way to make the visual weight strong. The more saturated a button color is, the more it’ll catch user attention. Saturated colors appear brighter to the eyes and aids task efficiency.

You can use a saturated color for your primary and an unsaturated color for your secondary. This keeps the buttons from competing with each other for user attention.

Compare the difference between a saturated and unsaturated button color in the example below. The saturated color makes the buttons pop more. The unsaturated buttons doesn’t pop as much because they have gray tint in them.

How Secondary Actions Should Look

A secondary action isn’t as important as a primary action so it shouldn’t call as much attention. Instead, it should blend into the interface background color.

In the example below, the diablog box uses a neutral gray color for the secondary buttons. The secondary button doesn’t overtake the primary button because it blends into the background. This is also why unsaturated colors on secondary buttons work well. The degrees of gray tint it carries helps it blend into the gray background.

Using Links as Opposite Actions

Some interfaces use links as the secondary action. This approach can confuse users because they aren’t used to seeing links next to buttons. They often associate clicking links with leaving a page. It’s easy for them to assume that link will take them away from their task.

Instead of using a link as a secondary action, it’s better to use it as an opposite action to the primary. This is because a link is opposite in form to a button. A good example of this is the WordPress publishing widget.

On the widget, ‘Publish’ is the primary action. ‘Save Draft’ and ‘Preview’ are secondary actions. But the action that does the opposite of publishing is the ‘Move to Trash’ link.

The ‘Move to Trash’ a link doesn’t compete with the ‘Publish’ button in color or size. Nor does it compete with the secondary buttons because its in the form of a link. The link’s form is opposite in appearance and function to the button.

Secondary Actions as Disabled Buttons

There’s a subtle difference between an enabled and disabled secondary button. They may both look gray, but a disabled button is actually transparent.

An enabled secondary button’s color blends into the background. A disabled button fades just enough so that the button and label is still visible. Disabled buttons tell users that an action is not in this context.

Giving your primary and secondary action buttons the proper visual weight facilitates user flow. Without proper visual weight, you can cause the user to make mistakes. Button placement and labeling are also important things to consider on user interfaces. Dress your buttons for success.

Read about button placement and labeling:

Toolkits