Design principles for determining and canceling the design of web button interaction

Source: Internet
Author: User
Tags reset

The "OK" and "Cancel" buttons should be considered the most unbeatable combination of Web apps, you can see them everywhere and their sister combination "Finish"/"Cancel", "Yes"/"no" ... they don't always express the same interactive action every time, but we always encounter them.

Why is there a combination of "OK" and "Cancel"?
The question seems to be a nonsense. Because almost all of your actions in a Web application can be canceled, that's why every browser has a back button.
Of course, sometimes we will only see "OK" in the solo flight. For example, students from Bohemia collected the registration form of 30 famous websites in China, and we saw that there were "cancel"/"Reset" buttons in the registration form of Yahoo Chinese, MSN China, Tom, and Youku.
Perhaps in the business considerations, they only give users a single direction of guidance, the system to restrict the user to turn back; Perhaps the product personnel think that users can completely manually remove the wrong information in a long page of the form or use the browser's "Back" button to solve their problems.
However, there is no "cancel" or "reset" button in a form that is basically one page long and is obviously not friendly enough . The user has the right to end his or her own operation and to be allowed to restart his or her operation. A "Cancel" button is obviously much less expensive than using the browser's Back button or "F5" to refresh the browser.
So, from this point of view, the best I've ever experienced in these 30 forms is the cool sign-up form. Although Yahoo China provided the cancellation button, but the click of the cancellation appeared in the following embarrassing scene ....


When       will appear at the same time OK, cancel
      Indeed, sometimes we do not need to cancel the button. For example, in the Comments box form, we only need a "submit comment" is enough, because we have nothing to cancel, you can choose to close the page to stop browsing, you can also choose to click the link to enter the next article reading.
      cancellation is mainly used in the 2 scenarios where users are alerted and users are asked to operate. For example, when a user chooses to perform an irreversible operation, we need to alert the user if he or she is determined to do so, and the user chooses the actions we do not want him to do, such as deleting an account, and we want the user to think twice.
   
      determination and cancellation are not omnipotent, need to be more perfect
      "OK" And the Cancel button works in most cases, but the more obvious button tag is better at helping users create expectations for the hit results .
      such as QQ mailbox Registration form, click this "OK" button what will happen? Save the information I fill out or register me as a new QQ mailbox user? Clearly, the expectation is vague for the user.
      Of course, we are delighted to see that the "OK" button is replaced with a more obvious hint on the registration form for most Web sites, such as "Sign Up" and "Join Now" 、.... But in the software world, it seems that this annoying approach has been going on for a long time and has not changed, and the typical representative is our browser window tip ....
      Direct use of "OK" and "Cancel" is a lazy designer's performance and design techniques. This is a noteworthy and pondering detail because you have a wrong hint that may induce n multiple users to click incorrectly.

I can't determine the confirmation button.
For example, the following interface hint, I am the point of certainty or cancel it? I can't be sure.

For example, a blog site in the release of the article can choose the full screen editor, they will be in the lower right corner of the screen set a "Cancel" button, this cancellation is how to mean it? Cancel this edit to return to my blog home page or exit this time full screen edit into the normal editing state? I can't be sure.

About determining and canceling the button placement
The prevailing practice is to follow the "Fitzpatrick rule", when a person is using the mouse to move the pointer, some features of the target on the screen make it easy or difficult to click. The farther away the goal is, the harder it is to arrive; the smaller the target, the more difficult it will be. designed to be a large "OK" combination with a small "ungroup" or a large "OK" button with a hyperlink "Cancel" combination.
In addition, regarding is "OK" in the left or "Cancel" in the left , the Mac system and the win system is the opposite practice, this is another topic, the interested schoolmate may study.
Here, in an article in the Ucdchina translation team, the question is: "OK" and "Cancel" button how to sort correctly?

Finally, when looking for examples of this article, browse through a few Web sites and edit a little joke.
Q: If a website pops up "yes", "no" or "Cancel", which one should you choose? A: The upper right corner of the X. Because, he is lazy tube you choose which is, he judged that there is a mouse click action will give you rape, so first x it is the right!



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.