Primary & Secondary Action Buttons
by Nick Babich
A typical site or app form (or dialog box) usually offers more than one option. In most cases users see two options — one stands for a primary to the user’s task and other, which is expected to be less utilized, stands for a secondary task (e.g. allow users to cancel the conversation).
In this article we overview basic UX moments for action buttons and answer the most common question among designers ‘Which button should come first — ‘OK’ or ‘Cancel’).
Error Prevention
As Jakob Nielsen’s usability heuristic says: “Careful design prevents a problem from occurring in the first place.” You should try to eliminate error-prone conditions which might happen when users accidentally select a wrong option.
Visual weight. To make clear distinction between two options, you have to use different visual weight for buttons. The button with the strongest visual weight will attract more attention.
Clear and distinct label. A good dialog box isn’t just about asking users which action they want to perform. It’s also about making each option as clear as possible. That’s why it’s so important to have a clear label for each option. An explicit label give users more confidence in selecting the correct action:
- It’s often better to name a button to explain what it does rather than to use a generic label (such as “OK”).
- Verb is better describe the action than noun.
Below is an example of dialog: in the first example, the dismissive action label ‘No’ answers the question, but does not suggest what will happen afterwards. A better action pair would be an explicit ‘Cancel’ and ‘Discard.’ The affirmative action text ‘Discard’ clearly indicates the outcome of the decision.
When a Primary Action Is Positive (‘Send’ or ‘Submit’)
The primary action associated shoud have a stronger visual weight. Secondary actions should have less visual weight because we assume that majority of users will go with the primary action.
When a Primary Action is Negative (‘Replace’ or ‘Delete’ )
In this case, giving the button which stands for irreversible action more visual weight is dangerous because the user can select the irreversible action by mistake. For example, when it comes to replacing a file, it’s fine that a user takes an extra second to think about the action.
‘Delete’ and ‘Erase’ operations require additional attention. All of us were in a situation when we accidentally deleted something and found that we cannot recover it. That’s because we skip read text in confirmation dialog and just push the button. But sometimes even when we actually read the instruction, we still accidentally click the wrong button by mistake (‘Delete’ when they actually meant to click ‘Cancel’). To solve this problem, it’s recommended to provide a single and obvious confirmation action that the user can take without giving an extra though by relying can on color alone.
However, you should design a fundamentally different mechanism for critical operations with valuable user data. Instead of using an action button that users could accidentally press, you should provide a text field and request to type the word “delete” to confirm the operation.
Secondary Actions as Disabled Buttons
Inactive (or Disabled) buttons are useful when you need to inform the users that the action is possible under some conditions. Even if button is disabled the user has a chance to learn that this option exist.
Another good use-case for a disabled button is an “emergency exit” out of a situation users may have entered. Undo options is improves the usability because it acts as a Back button when users want to escape from an undesired state.
‘OK’-’Cancel’ or ‘Cancel’-’OK’?
‘OK’/’Cancel’ button debate is very popular among designers: “Should the primary action button come before or after the secondary action button?” Actually there’s neither a significant difference in performance nor in user preference. However, there are a few things that you need to take into account:
Apple, Google and Microsoft Guidelines
Consistency with platform conventions is the most important thing to consider when designing dialog buttons. Sadly, the Windows User Experience Guidelines differ from the Apple Human Interface Guidelines and Google Android Guidelines when it comes to the sequence of ‘OK’/’Cancel’ buttons:
Microsoft guidelines for Windows suggest following order:
- ‘OK’/[Do it]/’Yes’
- [Don’t do it]/’No’
- ‘Cancel’
So ‘Cancel’ is always on the right of OK button for Windows platform.
Apple MacOS Guidelines says that “A button that initiates an action is furthest to the right. The Cancel button is to the left of this button.” So for MacOS users ‘Cancel’ is on the left of ‘OK’ button.
Google Android guideline says “The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.” And this means that for Android, ‘Cancel’ is on the left of the ‘OK’ button.
If you’re designing an application for one of these platforms, your choice is pretty obvious: Do what the platform owner tells you to do. Why? Because it will help you to create consistent design and will save people time.
Web-based Platforms
If you’re designing a web-based application, the decision is harder. From the first glance, you can use web analytics to find out the most used platform for your product and use the order for that platform (i.e. if the majority of your visitors come from Windows OS, you can follow Microsoft guidelines). But whatever button sequence you choose, it won’t be consistent for all your users due to the different OS. Thus, it’s recommended to select buttons sequence according to the user reading behavior.
OK — Cancel direction supports normal reading flow and sentence structure for western culture, where we ask a question: “Do you agree with me— Yes or no?”. The positive option comes first, the negative comes second. Further, assuming users need ‘OK’ much more frequently than ‘Cancel’, it’s better to place this option first so that users who use keyboard can rely on Tab to navigate on this option with less keystrokes.
However, Cancel — OK construction also has its benefits. Because the dialog ends with its conclusion, the final element to interact will be a primary action button.
Either choice has good arguments in its favor, and no choice is likely to cause usability problems. It’s recommended to A/B test both choices to find the one that works best for you.
Conclusion
Button is meant to direct users into taking the action you want them to take. That’s why button UX design in all parts of your product, including system dialogs, should always be about recognition and clarity.
Thank you!
Follow UX Planet: Twitter | Facebook
References
Learn how to design better products
Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.
