Primary Action
Problem
Commands that look the same can be hard for people to correctly and quickly choose between.
Solution
Make the primary action for a given context more visually prominent than other options.
Context
- There is a known primary action that people normally want to do or that you want to guide towards.
- You are not constrained by platform guidelines or other conventions to make all actions look the same.
Rationale
Having an obvious target action that makes sense for most people most of the time both reinforces a sense of the goal that people are working towards and makes it easy to take action to accomplish that goal. Especially when there are multiple possible commands within a given view, visually emphasizing the primary one can really help people quickly move on with accomplishing their goal and also can increase the likelihood that they will choose the right action for a given context, which could mean lower customer service costs and higher customer satisfaction.
Implementation
This is an extension of having good defaults, and in order to have good defaults, you need to know what the most likely option is. If there is an overall task or goal that a view is addressing, then the primary action will most likely be whatever enables people to accomplish that goal, such as submitting a form or accepting terms and conditions.
If there are multiple possible goals or variations on how to achieve a primary goal, then it can be more difficult to determine the primary action. In such cases, you should look to actual usage data, if you have it, or do usability testing.
Once you have determined the primary action, then you need to figure out the best way to make it visually prominent. An easy way to do this is with color, but if you’re not a visual designer, you should be careful here as it is not hard to abuse color in interfaces. If you use Few Hues, then you could simply make the primary action more saturated or brighter than secondary choices using one of the primary hues. Size is another way to make the primary action stand out.
Typically, you’ll want to make the primary action a button, though you could choose to complement a link button with an icon to draw it out. One option for making the primary more distinct is to make it a button while making the secondary actions links because buttons are generally more prominent and understood to be actions than links. That implies, of course, that if the secondary actions are important, some users might not recognize them if they are links, in which case this approach wouldn’t fly so well.
You can also use location to draw out the primary action, i.e., put secondary actions far away enough so that the primary action seems to stand on its own. Also consider the flow and alignment. If there is a path to completion, put the primary action directly in that path, aligned with the inputs.
You may need to consider platform or UI conventions. Sometimes these do not provide for a visually distinct primary action (though they should!). If you are locked in that way, the best you can do is to default to that button by focusing on it (common in popup dialogs) and/or setting the tab order such that it comes first before the secondary options. In fact, tab order is something to consider regardless so that keyboard users can also get to the primary action first.
Examples
The primary example is from Yahoo’s sign up form. They effectively use positioning (the primary action is more in the direct path to completion), colors (the primary action is a bright orangey yellow while Cancel uses a muted grey), and size (Create My Account larger than the secondary option to Cancel).
This example from Amazon.com illustrates a very prominent primary action (Place your order) using color, a play/go icon, placement, size, and even duplication, while secondary actions for modifying the order are sprinkled throughout.
Fedex uses primary action on their sign up form—the brighter purple-colored button draws more attention than the plain grey one. Most people will accept terms, so it’s good to help them get on with it this way.
This example from eBay uses different button types (a link button versus a regular button). Regular buttons have much more visual prominence than links, so it is a very effective way to draw attention to a primary action. At the same time, people may not expect links as commands, so use with care.
Quince itself uses this pattern on the sign in page. The primary action is to sign in; however, people can also get their password emailed or sign up for an account.
http://quince.infragistics.com
Microsoft Office uses this pattern in the ribbon to draw more attention to primary actions within a command group. In this case, when dealing with comments, the primary action is to create a new one, so it is larger, while the others are smaller next to it.
Twitter takes this pattern to a daring extreme. On the settings view, the main task is to tweak settings and ultimately save those tweaks, so the big button at the bottom does that; however, off to the left as a plain link is the action to delete the account, which indeed is tangential (beyond secondary) for what you’d expect on this view, so it’s good that it is so different and even out of the way.
This is kind of the dark mirror universe twin of primary action. Doubtless what most people want to do is just check out, but they put the emphasis all over the buy-more-stuff buttons and make the primary action barely noticeable.
This is a less inimical example from GoDaddy in that the primary action is indeed Checkout Now, so it is brighter, while the Keep Shopping (what they want you to do) is a less prominent grey; however, the secondary action is still pretty prominent.
This one from GoDaddy is almost downright friendly, although the nearby secondary actions are more informational (and thus wouldn’t normally be competing actions anyways). You could say the Add Gift Card is secondary for sure, and even in the busy screen that is this final checkout step, this primary action Checkout Now button stands out quite well to help people move on with life.
This is a pretty good example from GoDaddy, which you’ll see on the manage domains screen (as of 12/08). They are encouraging and helping people add new services to existing domains, but people can also go to the next page of domains or view them all.
Sources
Jennifer Tidwell, Designing Interfaces
Luke Wroblewski, Primary & Secondary Actions in Web Forms
Patterns in Interaction Design, Action Button
Tags
Commands, Form, Visual Hierarchy, Page Layout, Alignment, Usability, Data Entry.
