Primary & Secondary Actions

Also known as: Primary actions

Tags: actions, forms

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.

Sources

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

Useful linksUseful links icon

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