Web Interaction Design: Non-generic "Cancel" button

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

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 have 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 it by default. The Cancel button is often 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. 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 good visual highlight. But remember, the text should be concise and clear.

OK plus cancel is used in the dialog box.

For the main caption text content is "Are you sure you want to ... "The question of the sentence Pattern dialog box, you can use the" OK "" Cancel "combination. But do not use OK and Cancel to answer the question of whether to judge. Figure A is an example of an 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 "!"

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

Cancel as 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 item for the Prompt box button, we should consider whether it is beneficial to the user if it is mistakenly manipulated when set to default. It is also necessary to consider the recommendation and encourage the user's operation, to give the user appropriate guidance.

Iii. Case Studies

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

(Hero Kill props Purchase dialog box)

Problem points:

Button doesn't seem to be primary or secondary.

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

Players cannot 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 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 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.

You can use Cancel as the default and sometimes on a helpful, lossless button.

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!

(reprint please specify the source of GDC),