A Different Kind of "Cancel" Button

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

Recommend

How to prevent event bubbling in JavaScript

What we need to pay attention to is that the char...

Detailed explanation of the underlying implementation method of Nginx polling algorithm

Introduction to the polling algorithm Many people...

CSS example code for implementing sliding doors

The so-called sliding door technology means that ...

Vue3 (III) Website Homepage Layout Development

Table of contents 1. Introduction 2. Actual Cases...

Beautiful checkbox style (multiple selection box) perfectly compatible with IE8/9/10, FF, etc.

It's embarrassing to say that I had to search ...

What are the benefits of semantic HTML structure?

one: 1. Semantic tags are just HTML, there is no ...

MySQL spatial data storage and functions

Table of contents 1. Data Type 1. What is MySQL s...

How to enter and exit the Docker container

1 Start the Docker service First you need to know...

Detailed explanation of selinux basic configuration tutorial in Linux

selinux ( Security-Enhanced Linux) is a Linux ker...

Vue realizes web online chat function

This article example shares the specific code of ...

Solve the problem that the directory mounted by docker cannot be read and written

Use the following command to create a container a...

MySQL 5.7.20 installation and configuration method graphic tutorial (win10)

This article shares the installation and configur...

Mobile Internet Era: Responsive Web Design Has Become a General Trend

We are in an era of rapid development of mobile In...

Detailed explanation of the construction and use of docker private warehouse

1. Download the repository image docker pull regi...

Detailed explanation of axios encapsulation and API interface management in React project

Table of contents Preface Install Introduction Sw...