What
Match the visual presentation of actions to their importance to get users through a form as quickly as possible.
Example image
Primary actions are actions such as “Submit”, “Continue”, “Finish”, and “Continue”. 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, particularly when used accidentally. For example, hitting “Reset” erases all the data a user has entered.
Use when
- A form enables “final” action, or several “final” actions, to complete the form.
- Secondary actions are present.
Why
- 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.
How it works
- First of all, avoid secondary actions whenever possible
- Ensure a clear visual distinction between primary & secondary actions
- Reduce the visual weight of secondary action; Use a link instead of a button, or use light colors.
History
The first version (1.0) was created on January 07, 2008 by Janne Lammi. He got the idea for this pattern from reading Luke Wroblewski’s article Primary & Secondary Actions in Web Forms.
Pattern Gallery
Show Your Pattern Examples Here!
More photos in Flickr group "UIPatternFactory.com" tagged with primary-and-secondary-actions
Nice pattern, Janne.
You may be interested in a couple of articles that I've written about buttons on forms:
Buttons on forms: where to place them, what to call them
http://www.usabilitynews.com/news/article4984.asp
The piece of HTML created just for me: Reset
http://www.usabilitynews.com/news/article1944.asp
Best
Caroline Jarrett
I hadn't seen these articles before, thanks Caroline!