![]() 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". ![]() 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. ![]() ![]() 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. ![]() 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. ![]() 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 “!” ![]() When asking "Is...?" you can directly use the combination of "yes" and "no". Figure d ![]() 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. ![]() ![]() 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". ![]() 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? ![]() 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 |
>>: How to install and use Ubuntu Docker
Nginx can use the limit_req_zone directive of the...
Sometimes you need to install certain dependencie...
This article shares the specific code of jQuery t...
Flex Basic Concepts Flex layout (flex is the abbr...
This article mainly introduces the dynamic SQL st...
And, many times, maintenance requires your website...
How to allow remote connection in MySql To achiev...
This article example shares the specific code of ...
Questions about select elements in HTML have been...
Cockpit is a web-based server management tool ava...
This article uses examples to describe the creati...
Table of contents 1. MySQL join buffer 2. JoinBuf...
Effect: CSS style: <style type="text/css&...
The effect we need to achieve: What is needed The...
This article example shares the specific code of ...