We have arrived at the final lesson concerning wireframes, and one of the most important features of any interactive design:
Primary & Secondary Buttons
(If you’re just starting the UX Crash Course: Start Here.)
The example above shows two button examples (don’t click them). As a general guideline you will only need two button styles, because most user actions fall into one of two categories:
1) Primary Actions that are helpful to our goals.
2) Secondary Actions that are not.
****
Primary Buttons:
Some actions that are available to the user are productive, like registering, buying, submitting content, saving, sending, sharing, and so on. They produce things that didn’t exist before. Those are primary actions, or things that we want the user to do as often as possible.
Buttons that execute primary actions — primary buttons — should be as visible as possible. We do that using the principles we learned earlier in the course.
Primary Style: High contrast compared to the background. (Very different colour or shade).
Position in Layout: On or near the Axis of Interaction so users notice them first, by reflex.
****
Secondary Buttons:
Some actions that are available to the user are counter-productive, like canceling, skipping, resetting, declining an offer, and so on. They remove or stop the creation of new things. Those are secondary actions, or things we don’t want the user to do, but we provide the option for the sake of usability.
Therefore, buttons that execute secondary options — secondary buttons — should be less visible, to prevent accidental or “reflexive” clicks.
Secondary Style: Low contrast compared to the background (a similar colour or shade).
Position in Layout: away from the Axis of Interaction so users only notice them when they are looking for them.
****
Importance is a BIG exception:
Sometimes counter-productive actions are important, like deleting your account.
Those actions should get a primarystylebut secondaryposition in the layout. The reason is that we want the user to find it, but we want them to think about their action before doing it.
It is also a good idea to give this button a colour that indicates the importance of the action (red, orange, yellow, etc.).
****
Special Buttons:
In some cases, you will have one type of action that is unique to your site or app, which requires special focus. Design a special button for this, so it stands out in your design (pattern breaking).
Amazon’s “Add to Basket” buttons, Pinterest’s “Pin it” button, and Facebook’s old thumbs-up “Like” button all got this treatment (more or less).
****
Tomorrow we switch gears and get into some of the most powerful parts of UX design: User Psychology — Conditioning.