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

  • frank baido ⋅ April 8, 2015 23:28

    pls dis is ma work sir baido

    theodora

  • Primary & Secondary Actions (www) ⋅ May 6, 2016 08:25

    Despite the fact that you begins outlining from versatile screen, your default screen size ought to be desktop size. After that lone the outline ought to be made for receptive to showed in different gadgets. It is the prescribed (best practice) strategy for planning responsive locales.