Website interaction design: Unusual "cancel" button

　　

 

The "cancel" button does not belong to the operation process and is not designed as a major element. But it often appears in the actual pop-up box or some operation applications. What are the xuanjicang of this small cancel button?

　　First, let's take a look at the concept of cancellation.

Cancel: A confirmation action is required when you submit a question, selection, progress, or information. At this time, two buttons, "OK" and "cancel", are usually provided ". The "cancel" button generally does not appear separately. It usually appears together with "OK", "save", and other operations.

　　

 

(This is a common dialog box in the operating system. It contains two keys: Confirm and cancel)

　　2. Design and use the cancel key

"Cancel" the position on the page

When you design the "cancel" Key (or operation confirmation page), the "OK" and "save" buttons are usually placed on the left side, marked in a conspicuous format, or selected by default. The "cancel" button is usually placed on the right. "Confirm" and "cancel" should not be too far away. As shown in Figure a, the distance between the two buttons increases the visual movement distance, causing a burden on reading. The reading efficiency of Figure B is much higher than that of Figure.

　　

 

()

　　

 

(B)

The difference between "cancel" and other buttons and the weakening Method

For the sake of product operation, some operations that encourage users to do will fade down the "canceled" operations. For example, the confirm button and cancel button are differentiated to different degrees.

　　

 

The advantage of doing so is to reduce the prominent visual performance of secondary operations, and minimize misoperation to guide users to achieve their goals. Enable the two buttons to be clearly differentiated to highlight the performance of the validation side. This makes it easier for users to make judgments.

The button can highlight the primary-secondary relationship based on the actual content. Properly Guide users and avoid misoperations as much as possible to make operations more convenient and clear. You can also use descriptive words to emphasize the button. The function of "cancel" and "cancel" is to allow the user to return to the previous operation. However, the main intent to be expressed on the interface cannot be overly influenced. User-friendly descriptive words can attract enough attention to users and make them feel friendly. This movie comment page on Douban uses blue-gray and small characters in different formats than other buttons. The whole page only highlights one "OK, add comment" button.

　　

 

This page requires the user to fill in the content, the "cancel" operation will produce negative results. In particular, if you click Cancel inadvertently, the entered content will no longer exist. In the design of this page, the "cancel" button is removed in the form of a link instead of the button, highlighting the "OK, add a comment" button for the confirmation operation ". It plays a very important role in visual presentation. But remember, the text should be concise and concise, with clear intentions.

"OK" and "cancel" are used in the dialog box.

For the content of the main title text, "Are you sure you want ...... You can use the "OK" and "cancel" combination in the "Sentence Structure" dialog box. However, do not use "OK" or "cancel" to answer questions. A is an error example. In addition to the above cases, when the combination of "OK" and "cancel", "OK" is equivalent to "Submit". B, the option in "OK" is actually "Submit.

Figure c. Do not use overly-heavy Warning icons for errors or warning information, which may make the user feel great. You can use the yellow "!" when prompted for design error or warning.

The buttons can be "OK" or "secondary recommendation action" + "I know"

 

When you ask "do you ...?" You can directly use the "yes" or "no" combination. D

　　

 

"Cancel" is used as the default button item

When multiple buttons exist in a dialog box, one of the buttons is set as the default item. The "cancel" key always appears immediately after the action is executed. At this time, it is full of previous actions. Naturally, I chose "OK" without thinking about it (usually the default option), and then I regret it. Therefore, because the pop-up box appears too fast, the user does not even realize that "operations may fail ". Therefore, the default item should be on the button that is beneficial to the user.

For example, when you close an unsaved document, the default item of the prompt is saved. Because the SAVE is more lossless than the other two buttons.

　　

 

In the prompt box prompting players to upgrade the game version, we recommend players to update the game version here. Therefore, the default item should be on the "OK" button.

　　

 

When setting the default item of the prompt box button, we should consider whether the default item is beneficial to the user when the user misoperations occur. We also need to take into account the recommendation and encouragement of user operations and give users appropriate guidance.

　　Iii. Case Analysis

In the original design player, click the prop pop-up dialog box in the game prop bar. The "buy" and "cancel" buttons are provided.

　　

 

(Purchase dialog box for hero kill items)

Problem:

Button does not appear as primary or secondary

From the operational perspective, we cannot highlight the intention to encourage gamers to purchase

Players cannot distinguish between purchased and unpurchased items.

As needed, we need to set up the Primary and Secondary buttons to differentiate their performance. In this case, we should weaken the "cancel" button to increase the attention of the purchase button and encourage players to buy it.

After the optimization, the "cancel" button is removed, and the effects of the buttons purchased and not purchased are differentiated for differentiated design. Is the modified design clearer than the previous content?

　　

 

　　To sum up, use the "cancel" key Scheme

In PC, the "cancel" button is usually placed on the right. However, in ios, the highlighted button is placed on the right.

To distinguish between the primary and secondary buttons, it is necessary to clearly express and highlight the topic. The cancel button can be relaxed based on the content of the expression.

Use words that describe the operation results to force the user to read them.

Do not use "OK" or "cancel" to answer questions.

You can use "cancel" as the default item, and sometimes select a helpful button.

To sum up, although "cancel" is not a major button element, it is not correct to put it on, but it should be properly designed according to the actual situation. Do not care about this button because it is not obvious. The interaction design is often determined by details!

(For more information, see GDC ),