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:
- Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right
- Why Users Click Right Call to Actions More Than Left Ones
- Why the ‘Ok’ Button is No Longer Okay
- Why Your Form Buttons Should Never Say Submit
Book
Affiliate
Interesting article, I’ve been thinking about that few months ago, when I did some website and web architect put there three buttons in line. Of course one was the important one.
Until then, I never thought about it. I had the fixed, the buttons are always the same throughout the entire site. always told my supervisor. but it was odd to me that it must be so, although in this situation, offering significant opportunity to make a button differently, and thus highlight it.
It was at the time I just drew a website and I did not know UX.
In the last picture, the transparent button quite confusing. Looks like a disable, not functional. I think that disable button is maybe wrong. Why is there when disable and you can’t use it?
Inactive or disabled buttons are useful to let users know that an action is available, but isn’t activated yet. They’re used for things such as pagination, where the previous button can be disabled on the first page, but then enabled on the second page.
This is a nice overview. I especially found the cancel-as-primary section interesting.
I’m curious though about the link-as-oppsite bit. Is there any research to back up the claim that links can be/should be used to perform opposite-to-primary actions?
It seems to me that links should be used to take the user to another interface, not perform actions.
It definitely can be used as opposite actions. I have used links as opposite actions to the primary on my projects and they have worked fine. I believe it’s much more intuitive to users for the opposite action to be a link instead of the secondary action. Imagine the secondary buttons as links in the article example. I don’t think it would have as strong of an effect. The visual weighting of the WordPress publish widget is done perfectly.
“Some designers will use links as their secondary action next to a primary action button. This approach is known for confusing users in usability studies because users aren’t used to seeing buttons and links together as primary and secondary actions.”
What about in this form:
Button –or– link
[Save] –or– cancel
Putting the “or” in the middle is extra noise the user doesn’t need to see. It’s best if secondary actions are buttons because links are small and can get easily missed by users.
What I’ve learned to do to maintain consistency throughout a site (following rules of layout, components, etc) is to create a file I call “Components.PSD” and put all the interface/interactions in one massive layout. That way I can reference things like primary action compared to secondary and the “opposite” of primary. It helps a lot to see it all in one place. – Just a thought.
Nice Post.
Don’t mix Primary-Secondary actions with OS Safe/Reversible Defaulted actions.
In the example you bring, the primary action is still “Erase and Sync” not “Cancel”. “Cancel” is blue because it’s the Defaulted action (in case the user presses the Enter key), not the primary one. As you correctly mentioned it, it’s the defaulted action because it’s the safer and reversible one.
So you have two factors to take into account:
1 – Primary-Secondary Action
2 – Defaulted Action (which isn’t necessarily the Primary action).
It’s Ironic that you show the inconsistency of itunes.
It’s so easy to click the “Erase and Sync” button (I’ve done this countless of times), regardless of its colour, because the button position is inconsistent in comparison all to the other UI’s.
Position is also very important in this matter.