by anthony on 07/07/11 at 9:33 pm
When a user interface prompts users to take action, they’ll usually see 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. Therefore, it’s important that primary actions on your interface have the strongest visual weight, and that secondary actions have the weakest visual weight.
When the Primary Action is the ‘Cancel’ Button
The primary action is normally the one that completes the user’s task. However, when the user is capable of doing an action that’s permanent and irreversible, the primary action is actually the ‘Cancel’ button. The ‘Cancel’ button should get the most visual weight because the irreversible action is not an immediate one to take. It’s one that the user needs to carefully think through. Giving the irreversible action the most visual weight is dangerous. When you do this, the user can easily mistake the irreversible action as a safe action and mistakenly click it. When it comes to tasks such as permanent data deletion, completing the task quickly is not the important thing. What’s important is choosing the correct action in the task so that the user won’t later regret their actions later on.
How to Make Your Primary Actions Strong
Using a saturated color for your buttons is the best way to make the visual weight of your primary actions strong. The more saturated the button color is, the more it’ll catch the user’s attention. If there are other buttons on your interface, use a saturated color for your primary buttons and an unsaturated color for your secondary buttons. This will keep the buttons from competing with each other for the user’s attention. Compare the differences between a saturated color and an unsaturated color on a button in the example below. The saturated color makes the buttons visually pop more. The unsaturated buttons, while distinguishable, doesn’t pop as much.
Saturated colored buttons call more attention than unsaturated ones.
How Secondary Actions Should Look
A secondary action isn’t as important as a primary action so it shouldn’t call too much attention to itself. Instead, it should blend in to the interface background. In the example below, the diablog box uses a soft, neutral gray color for the secondary buttons. The secondary button doesn’t overtake the primary button because they blend perfectly in to the interface background. Because most interface backgrounds are white or gray, unsaturated colors on secondary buttons work well because they have different degrees of white and gray in them.
Using Links as Special Opposite Actions
Some interfaces use links as a 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. Even though a link is smaller than a button and seems like it has less visual weight due to its size, it doesn’t always look secondary because links take a different form than a button. When two actions are similar in form with each other, users associate them as related. A link and a button is not easily associated together because they’re different in form.
Instead of using a link as a secondary action, it’s better to use a link as a special action that is opposite to the primary action. 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 the primary action is the ‘Move to Trash’ link. The ‘Move to Trash’ a link doesn’t visually compete with the ‘Publish’ button in color or size, nor does it compete with the secondary buttons because it looks too different. The link’s form is opposite in appearance and function to the button, making it clear to users that the link does a special but opposite action.
Secondary Actions as Disabled Buttons
There’s a subtle difference between an enabled secondary button and a disabled. They can look similar, but a disabled button doesn’t just blend in to the background, it fades in to the background because it’s transparent. A disabled button should fade just enough so that the button and label is still seeable. Disabled buttons are useful for telling users that an action is available, but not at the moment.
Giving your primary and secondary action buttons the proper visual weight they need is crucial in facilitating user task flow and in making sure that users choose right action. Button placement and labeling are also important things to consider on user interfaces. But without proper visual weight on your buttons, you can seriously make the user’s task difficult and cause mistakes that the user can never recover from.
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