Button priority selection and user experience best practices

dialog boxes in Web sites and apps typically have informational descriptions and offer several options. The most common number of options is usually two-one option has the highest priority, and the other option is less selected as a secondary option. (for example, after a user fills out a form, the end provides two buttons, one for submission and the other for cancellation)

In today's article, we use this most common user experience scenario as the object of discussion, that is, "confirm" and "Cancel" which button has a higher priority.

　Prevent errors

As Jakob Nielsen talks about usability design, "only careful design can be a preventative." "You should try to avoid error-prone situations, especially if users are prone to making bad choices," he said.

Visual weight. When there are significant differences between the two options, you should make the two buttons have different visual weights and make one of them a visual center of gravity. A button on the visual center of gravity gets more attention.

A clear and obvious label. A properly designed dialog box should not only give users choices, but also make each option as clear as possible. That's why the labels for each option are as clear as possible. A clear label gives the user "just enough help" to make the right choice without hesitation:

• tags (button content, text) that usually have a clear directivity and description are better than common "OK" or "OK".

• Use verbs as much as possible, rather than OK, because the former will be more explicit and the user will not make the wrong choice out of context.

Because of the differences in the mode of answer between Chinese and English, the two options in this dialog box, OK and Cancel are different in the two languages.

In the next case, in the first dialog box, "No" is just a question, but there is no directivity, and it does not point to the consequences of that choice. The second dialog box is much better, with "Cancel" and "Discard" two options, which correspond to the questions raised in the previous article, have a clear point of reference, and cancel has a clearer meaning.

Preferred action forward ("send" or "submit", etc.)

When the preferred action is positive, the related forms and buttons should have more visual weight, and the minor options should have lighter visual weight, minimizing the potential for error risk and directing the user to the right direction.

Often, what we call "save," "Submit," "Send" is a positive button most of the time.

　　Reverse Preferred action ("replace" or "delete")

If the operation at this time is mainly reverse, replace, delete, remove, etc., then these irreversible operation of the corresponding buttons and options to give more visual weight, in fact, more dangerous. Because of the irreversibility of these operations, they are not necessarily "safe operations", and the user may not be aware of their harmful and subconscious actions under boot, which may cause errors. For example, when the user in the operation of the replacement document, the speed of execution itself is not important, whether the correct operation is the focus, only so that users will not regret.

"Cancel" is a minor operation, but it should have more visual center of gravity.

"Delete" and "erase" related operations should be more attention. Have you ever accidentally deleted a document and found out that you didn't regret it? Many users do not carefully read the confirmation message in the dialog box to make a choice. But sometimes, the user actually reads the hint, but still makes the wrong choice by slipping the hand. (when it should be "canceled" accidentally click "Delete")

You should provide users with a single and obvious confirmation action button, while ensuring the accessibility of the design, not due to cultural differences in the understanding of the deviation, including the color itself guidance.

The options in the LinkedIn dialog box are clearly stated.

In addition, you should design a different set of processing mechanisms based on core user data for key operations: for example, to avoid user contact, instead of providing a button instead of an input box, let the user enter "delete" to delete the operation.

　　Buttons that are disabled

Inactive, disabled buttons are sometimes useful, and can tell the user about the possibilities of certain actions. Even if they are not available in the current situation, users will realize that they may be used at some point.

This disabled button also has another role to play in emergency situations, helping users who are in trouble. The Undo button is rare, but it does exist and is quite practical from a usability point of view. Users face the wrong touch or unexpected operation, will subconsciously "return", and "undo" button exists, so that the operation of the direction of more clear.

"OK"-"Cancel" or "Cancel"-"OK"?

The OK/Cancel button is one of our most common button combinations. The most common question facing this group of buttons is whether the preferred button should be in front or behind. In fact, there is no significant difference between the two collocation methods in terms of actual effects and user preferences.

Design specifications for Apple, Google and Microsoft

The consistency design of the platform is actually more important than the sequence, but the order of operation between several different platforms is not the same.

　Microsoft's design follows the following sequence:

· Ok/[do It]/yes

· [Don ' t do it]/no

· Cancel

However, in the MacOSX design specification, "the button that can throw a particular action should be on the right side, and the Cancel button should be on the left side of the button." "So, on the Mac platform, the Cancel button is on the left and the confirmation button is on the right."

Google Android's design code stipulates that the "Cancel" button is always on the left, and when the user does this, it returns to the previous state, while the Forward action button is arranged on the right side. "In other words, in Android, the Cancel button is on the left side of the Confirm button."

If your design is for a specific platform, then the order of the buttons is very clear, according to the design specifications to come. Compared to the "personalized" choice, the platform's consistency principle is higher priority, the user experience on the addition of more, in short is better use, more intuitive. The design that does not follow the specification is not a mistake, but the user hesitates, hesitates, or even mistakenly touch it.

　　web-based Platform

Of course, if you are designing web-based applications, what kind of design you should follow depends on the specification of your platform or the habits of your users. You can use user analysis and research to find the best alignment for the platform. In this case, you need to consider based on usability, based on the user's use of the scenario to deduce the user's understanding, to make the most optimal.

The choice of "OK/Cancel" and "Yes/No" is in line with the basic communication logic of the Eastern and Western cultures, "Do you agree with me?—— Yes/no", yes is the preferred option, "No" is a minor option. If the user chooses "is" the probability is much higher than "no", then will "is" puts in the first place, reduces the user the chance which the mistake touches.

The "Cancel-ok" arrangement modifies the logical process, and this arrangement makes the rear elements more important.

There are advantages and disadvantages in both ways, but there is usually no usability problem.