The Visual Weight of Primary and Secondary Action Buttons

by on 07/07/11 at 9:33 pm

Most user interfaces have multiple buttons. But not every button is equal. Some are primary to the user’s task and some are secondary. To make this distinction clear, you should make use of visual weight. Visual weight is how users compare button priority. The button with the strongest visual weight will get the most user 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:

9 Responses to “The Visual Weight of Primary and Secondary Action Buttons”

  1. Tom Laurinec

    Jul 9th, 2011

    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?

    • anthony

      Jul 11th, 2011

      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.

  2. Adam Williams

    Jul 10th, 2011

    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.

    • anthony

      Jul 11th, 2011

      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.

  3. Mike

    Jul 11th, 2011

    “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

    • anthony

      Jul 12th, 2011

      Putting the “or” in the middle is clutter that the user doesn’t need. I suppose that was done in the first place because a link next to a button looks off and users didn’t know what to make of it. It’s best if secondary actions are buttons unless it’s the direct opposite action of the primary one, then links work best.

  4. Josh

    Jul 12th, 2011

    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.

  5. Aaron

    Jul 12th, 2011

    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).

  6. Leroux Michelson

    Aug 2nd, 2011

    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.

Leave a Comment