Tuesday, May 28, 2024
HomeUSER EXPERIENCEPrimary & Secondary Action Buttons

Primary & Secondary Action Buttons

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.

Visual distinction for ‘Submit’ button. Image credit: Lukew

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.

Image credit: Material Design

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.

‘Save’ is a positive primary action button

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.

‘Cancel’ is a secondary action in this dialog but it has more visual weight

‘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.

LinkedIn dialog is very clear and leaves no ambiguity

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.

You may even have a tooltip explaining the criteria for use for a disabled button.

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.

Undo is an emergency exit for 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:

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.

Dialog box in Microsoft Windows

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.

Apple MacOS dialog box. Image credit: Apple

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.

Google Android dialog box. Image credit: Material Design

If you’re designing an application for one of these platforms, your choice is pretty obvious: Do what the platform owner tells you to doWhy? Because it will help you to create consistent design and will save people time.

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.

Green arrow shows the scanning direction.

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

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here