Non-generic "Cancel" button

The "Cancel" button is not part of the necessary flow of the operation and is not designed to appear as a primary element. But in the actual frame or some operational applications often appear, then this small cancel button and what are the mystery?

First we need to understand the concept of cancellation.

Cancellation: We need to perform a confirmation action when submitting questions, selections, progress, and information, which often gives two buttons, "OK" and "Cancel". The Cancel button generally does not appear alone, usually with actions such as OK, save, and so on.

(common in the operating system such dialog boxes, including two keys, confirm and cancel)

Second, design and use the "Cancel" key

The position of cancel in the page

When you design the Cancel key (or the Action confirmation page), you will always have the "confirm", "save" button on the left, and identify it with a bold format, or select the item by default. The Cancel button is often placed on the right. "Confirm" and "cancel" should not be too far away. The distance between the two buttons in figure A is too far to increase the distance of visual movement, which is a burden to reading. The reading efficiency of Figure B is much higher than that of a.

(a)

(b)

How to distinguish and weaken the "cancellation" and other buttons

For the sake of product operation, some actions that encourage the user to do, dilute the "cancel" operation. For example, the following diagram of several scenarios, determine and cancel the button to do a different degree of distinction.

The advantage of this is to reduce the visibility of minor operations in visual performance, and to minimize misoperation to guide users through their goals. The two buttons can be clearly distinguished from each other, highlighting the recognition of one side. Make it easier for users to make judgments.

button in the design can be based on the actual expression of the content, highlighting the primary and secondary relationship. The appropriate guide users, as far as possible to avoid misoperation, so that the operation more convenient and clear. You can also use the humanized descriptive Word accent button, weakening the "Cancel" "Cancel" function is to allow the user to return to the previous operation. But can not unduly affect the interface to express the main intent. The humanized descriptive words can cause the user enough attention, let it feel intimate and cordial. The following image of the film review on the page, using the blue-gray and small print, in the format and other buttons are not the same, the entire page highlights only a "OK, add comment" button.

This page requires the user to fill out the content, the "cancel" operation will produce negative results. In particular, users inadvertently in the case of the cancellation, will lead to fill out the content is no longer exist. In the design of this page, the "cancellation" is weakened by the form of a link instead of a button, highlighting the Confirmation action button "OK, add comment". Played a very good visual highlight role. But remember, the text should be concise and clear.

"OK" plus "Cancel" is used in the dialog box.

For the main caption text content, "Are you sure you want to ...?" ? "The question of the sentence Pattern dialog box, you can use the" OK "" Cancel "combination. Do not use "OK" and "Cancel" to answer the question of whether to judge. As shown in Figure A is an example of error. In addition to the above, "OK" is equivalent to "commit" when the "cancel" group is identified, as in Figure B, the option in is actually "OK" for the submission.

Figure C, do not use excessive warning icon for error or warning information, it is easy for users to feel a lot of pear. In the design of the error class or warning class hints can be used yellow "!"

The button can be "OK" or "auxiliary recommendation action" + "I know."

When asked "whether ...?" You can use the "yes" or "no" combination directly. As shown in Figure D

"Cancel" as a button default

The usual dialog box, when there are multiple buttons, sets one of the buttons as the default. The "Cancel" key always appears immediately after the action executes, at this time is full of the previous action, naturally without thinking to choose "OK" (usually also is the default), and then regret. So, often because the frame appears too fast, users are not even aware of "their own operation may be wrong." Therefore, the default item should be on a button that is beneficial to the user.

For example, the following figure when you close an unsaved document, the default entry for the prompt is on the save button. Because saving is less damaging than the other two buttons.

The following image prompts the player to upgrade the game version, where we need to recommend players to update the game version, so the default item should be on the OK button.

When we set the default entry for the Prompt box button, we should consider whether it is beneficial to the user if it is mistakenly manipulated when it is set to default. It is also necessary to consider the recommendation and encourage the user's operation, to give the user appropriate guidance.

Third, the case analysis

The original design player clicked on the Props Bar popup dialog box, offering "buy" and "Cancel" two buttons.

(Hero Kill props to buy dialog box)

Problem points:

Buttons don't seem to be primary or secondary.

From an operational standpoint, we cannot highlight the intention to encourage the player to buy.

Players can no longer distinguish between purchased and purchased items.

According to the requirements we have to establish the primary and secondary in the performance of a distinction, this time should weaken the "cancel" button, improve the Purchase button attention, encourage players to buy.

After optimizing the effect, remove the "Cancel" button, and do a distinction between buying and not buying the button effect, making a differentiated design. Is the following picture a modified design that looks clearer than the previous content?

Summary, using the "Cancel" key scheme

The "Cancel" button on the PC is often placed on the right. But on iOS, the emphasis button is placed on the right.

Distinguish button primary and secondary to express clearly, highlight the subject, according to the content of the expression can be appropriate to weaken the cancellation button.

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

Do not use "OK" and "Cancel" to answer the question of whether to judge.

"Cancel" can be used as the default, and sometimes a useful, lossless button is selected.

To sum up, although "cancellation" is not a major button element, but it is not put on the right, or to be based on the actual situation of the design of a reasonable standard. Do not because this button inconspicuous and not, interactive design is often the details of the success or failure!

Article Source: Tencent GDC