A Different Kind of "Cancel" Button

A Different Cancel Button 123WORDPRESS.COM

The “Cancel” button is not part of the necessary operation process and does not appear as a major element in the design. But it often appears in actual pop-up boxes or some operating applications, so what is the mystery of this small cancel button?
First we need to understand the concept of cancellation.
Cancel: When submitting questions, choices, progress, or information, we need to require a confirmation action. At this time, two buttons are often given: "OK" and "Cancel". The "Cancel" button generally does not appear alone, but usually appears together with operations such as "OK" and "Save".

(Such dialog boxes are common in operating systems, containing two buttons, Confirm and Cancel)
Second, design and use the "Cancel" key. The position of the "Cancel" button on the page. When designing the "Cancel" button (or operation confirmation page), the "Confirm" and "Save" buttons are often placed on the left and marked with a prominent format, or the item is selected by default. The "Cancel" button is often placed on the right. "Confirm" and "Cancel" should not be too far apart. The distance between the two buttons in Figure a is too far, which increases the visual movement distance and creates a burden on reading. The reading efficiency of Figure b is much higher than that of Figure a.

(a)

(b)
The way to distinguish and weaken "Cancel" from other buttons is for product operation considerations. Some operations that encourage users to perform will be implemented, de-emphasizing the "Cancel" operation. For example, in the following solutions, the OK and Cancel buttons are differentiated to varying degrees.

The benefit of doing this is that it reduces the visual prominence of secondary operations, minimizes erroneous operations, and guides users to complete their goals. Make the two buttons clearly distinguishable and highlight the confirmation side. Make it easier for users to make judgments.
When designing buttons, you can highlight the primary and secondary relationships based on the actual content being expressed. Guide users appropriately, try to avoid incorrect operations, and make operations more convenient and clear. You can also use humanized descriptive words to emphasize the button and weaken the "Cancel" word. The function of "Cancel" is to allow users to return to the previous operation. But it cannot excessively affect the main intention of the interface. Humanized descriptive words can attract enough attention from users and make them feel caring and friendly. The page for posting movie reviews on Douban in the picture below uses blue-gray and small fonts, and the format is also different from other buttons. The entire page only highlights one "Okay, add a comment" button.

This page requires users to fill in content, and the "cancel" operation will produce negative results. In particular, if the user inadvertently clicks cancel, the filled content will no longer exist. In the design of this page, the “Cancel” button is weakened by using a link instead of a button, and the confirmation button “OK, add a comment” is highlighted. It plays a very good visual highlighting role. But remember, the text should be concise and the idea should be clear.
Use of "OK" plus "Cancel" in dialog boxes.
For question dialog boxes whose main title text is a sentence like "Are you sure you want to...", you can use the "OK" and "Cancel" combination. But don't use "OK" and "Cancel" to answer yes/no questions. Figure a is an error example. In addition to the above situations, when "OK" and "Cancel" are combined, the meaning of "OK" is equivalent to "Submit". For example, the option in Figure b actually means "OK" means Submit.
Figure c: Do not use overly heavy warning icons for error or warning messages, as this can easily make users feel overwhelmed. When designing error or warning prompts, you can use a yellow “!”

; The button can be "OK" or "Assisted recommended action" + "I understand"
When asking "Is...?" you can directly use the combination of "yes" and "no". Figure d

Whether "Cancel" is used as the default button option. When there are multiple buttons in a normal dialog box, one of the buttons will be set as the default option. The "Cancel" button always appears immediately after an action is performed. At this time, the mind is full of the previous action, so naturally you choose "OK" without thinking (usually the default option), and then you regret it. Therefore, often because the pop-up window appears too quickly, users don’t even realize that “they may have made a mistake in their operation.” Therefore, the default option should be on a button that does not harm the user.
For example, in the figure below, when closing an unsaved document, the default item for this prompt is on the "Save" button. Because saving is more lossless than the other two buttons.

The picture below is a prompt box prompting players to upgrade the game version. Here 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 a prompt box button, we should consider whether it will be beneficial or harmful to the user when the user makes an error operation after setting it as the default. We also need to consider recommending and encouraging user operations and providing users with appropriate guidance.
3. Case Analysis: In the original design, when the player clicks on an item in the game item bar, a dialog box pops up, providing two buttons: "Buy" and "Cancel".

(Hero Killer item purchase dialog box)
Problem:
The buttons seem to have no priority. From an operational perspective, they cannot highlight the intention of encouraging players to buy. Players cannot distinguish between purchased and unpurchased items. According to the needs, we need to establish the priority of buttons and distinguish them in performance. At this time, we should weaken the "Cancel" button, increase the attention of the purchase button, and encourage players to buy.
After optimization, the "Cancel" button was removed, and the effects of the purchase and non-purchase buttons were differentiated for differentiated design. The picture below shows the revised design. Doesn’t it look clearer than the previous content?

In summary, the solution using the "Cancel" key is that the "Cancel" button on a PC is often placed on the right. But on iOS, the emphasized button is placed on the right.
Distinguish the primary and secondary buttons clearly and highlight the theme. The cancel button can be appropriately weakened according to the content of the expression.
Use words that describe the result of the action and force the user to read it.
Don't use "OK" and "Cancel" to answer yes/no questions.
You can use "Cancel" as the default option, or sometimes choose the button that does no harm.
To sum up, although "Cancel" is not a major button element, it does not mean that it is right to put it there. It still needs to be designed reasonably and standardized according to the actual situation. Don’t ignore this button just because it’s inconspicuous. Interaction design is often about details that determine success or failure!
Source: Tencent GDC

<<: CSS makes the child container exceed the parent element (the child container floats in the parent container)

>>: How to install and use Ubuntu Docker

CSS implements six adaptive two-column layout methods

A Different Kind of "Cancel" Button

CSS implements six adaptive two-column layout methods

Six ways to reduce the size of Docker images

Detailed explanation of the process of nginx obtaining the real source IP after passing through multiple layers of proxy

Detailed usage of Vue timer

How to implement ansible automated installation and configuration of httpd in Linux system

MySQL optimization connection optimization

Native js to implement 2048 game

The implementation principle of Tomcat correcting the JDK native thread pool bug

Javascript Basics: Detailed Explanation of Operators and Flow Control

Vue uses filters to format dates

Recommend

How to use limit_req_zone in Nginx to limit the access to the same IP

Detailed explanation of the use of Docker commit

jQuery implements the function of adding and deleting employee information

CSS3 new layout: flex detailed explanation

Dynamic SQL statement analysis in Mybatis

Tips for List Building for Website Maintenance Pages

How to allow remote connection in MySql

javascript to switch pictures by clicking a button

Select web page drop-down list and div layer covering problem

How to install and use Cockpit on CentOS 8/RHEL 8

Detailed explanation of creating a view (CREATE VIEW) and usage restrictions in MySQL

MySQL join buffer principle

Example code for using CSS to implement the style of logistics progress

How to use CSS to write different styles according to sub-elements

Vue implements zoom in, zoom out and drag function