Primary & Secondary Actions

Match the visual presentation of actions to their importance to minimize the risk for potential errors and help people complete a form as quickly as possible.
Primary actions are actions such as “Submit”, “Continue”, “Finish”, and “Save”. They enable form completion, the most important action on the form.
Secondary actions are actions such as “Cancel”, “Go back”, or “Reset”. They are less important, alternative actions, which often have negative consequences when used accidentally. For example, hitting “Reset” erases all the data a user has entered.

Two different ways to distinguish primary and secondary actions on a Web form.

Two different ways to distinguish primary and secondary actions on a Web form.

What problem does the pattern solve?

  • You have a Web form containing both primary and secondary actions.

When to use it?

  • You have a Web form containing both primary and secondary actions.

How to use it?

  • First of all, avoid secondary actions whenever possible. Do you really need that “reset” button?
  • Ensure a clear visual distinction between primary & secondary actions. Add visual weight to primary action elements (stronger color and/or bigger size), and reduce the weight on secondary action elements (use a link instead of a button, use lighter color).
  • Align primary action button vertically with the input fields to create a clear path to completion.

Why to use it?

  • All form actions are not equal, and therefore the visual presentation of actions should match their importance to make it easier to complete a form.
  • Visual distinction helps users make “good” choices. For example, “Cancel” is secondary action which is rarely used compated to primary actions. Therefore, the visual weight of it should be reduced in some way to minimize the risk of selecting it unintentionally.

Accessibility

Sources

The pattern is inspired by “Primary and Secondary Actions” from Luke Wroblewski’s book “Web Form Design: Filling in the Blanks”.

Useful links

Example images (10 examples)

Comments

  • Adiux ⋅ Feb. 16, 2012 17:07

    Isn't it more natural to have the primary function on the right?
    tripit vs delicious

  • Parvej Solkar ⋅ March 6, 2013 07:09

    Thanks a lot....!!!

    Definately changes appraoch towards designing primary and secondary actions on web page

  • Mobdro App (www) ⋅ Feb. 7, 2017 13:30

    Great You could arrange streams according to our selection as well as choices and include it to your favorite list for future recommendations. Fine.

  • Fildo Download (www) ⋅ Feb. 11, 2017 12:41

    awesome Install the data and also you are done.Download Apk documents to your COMPUTER. As soon as the download is completed attach your Android phone to your COMPUTER nice.

  • private car service London (www) ⋅ Feb. 15, 2017 20:49

    I see a ton of utilizations that don't address the issues of either organizations or clients and in this manner add to lost benefit and poor client encounter. It even happens that creators are not included during the time spent making applications by any means, putting the greater part of the duty on the shoulders of designers.

  • James (www) ⋅ Feb. 17, 2017 12:41

    nice blog <a href="https://www.google.com.pk">Nice Blog</a>
    https://www.google.com.pk

    [url="http://www.reverso.net"]understand[/url]

    [url=http://www.reverso.net]truly[/url]