User Experience Design: OK and Cancel buttons in Web pages

Web page Production WEBJX article introduction: we are often asked to confirm when we perform an action, which often gives two buttons, "OK" and "Cancel". The Cancel button often does not appear alone, but with actions such as OK, save, and so on.

"Cancel" (Cancel,stop) and undo (undo) seem to be the same thing and seem to be similar. However, there are some differences in the use of the two, the experience is slightly different.

One, cancel key and undo key

We are often asked to confirm when we perform an action, which often gives two buttons, "OK" and "Cancel". The Cancel button often does not appear alone, but with actions such as OK, save, and so on.

(common in the Operating system such dialog box, contains two keys, confirm-ok, and cancel-cancel)

Undo, in fact, is ctrl+z, back to the last operation, returned to the previous page. The biggest difference from cancel is that the "cancel" action is done before the action occurs and the undo action is performed.

(After the message is deleted in Gmail, there will be a undo prompt on the top of the page)

Undo is often not written in words, but instead with symbols (arrows to the right). There are also special forms of canceling operations, such as stopping the loading of page content while browsing the web, which is an abort of an operation that takes time. In that sense, cancellation also has a particular symbol, expressed as a fork, or a horizontal bar in the middle of a red hexagon.

(The Cancel key in the browser's address bar)

(The Cancel key in the browser toolbar)

Second, how to design

"Cancel" and "undo" are not the necessary processes for the operation, nor should they be designed as primary elements.

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 the item by default. The Cancel button is often placed on the right. Because of the use of the Mac system, the position is often reversed.

(Cancel key design in delicious)

(Cancel key design in Flickr)
For some actions that encourage the user to do so, you should downplay the "cancel" action. such as watercress on the publication of the film review page, using gray and small, in the format and other buttons are not the same, the entire page highlights only a "OK, add comment" button.

(Cancel key design in Douban)

Undo keys are not designed much and are often overlooked in web design. Gmail is a good example, but Google Calender has no undo button.

Three, different experience

Although the operation of the reverse, but it is due to the different time, the user experience on the feeling of nature is also different.

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, although it is to prevent mistakes, because the "cancellation" appears too fast, users do not even realize that "their own operation may be wrong."

By contrast, the Undo button appears generous and magnanimous, and users can be assured of exploration on the site (Security exploration, safe exploration), to build the confidence of the user has a great help. Multiple-level undo operations are also available on highly interactive interfaces such as Ms Office, Photoshop, and so on.

Of course, not to say that you will never use the "Cancel" button in the Web page, you have to use the Undo button. It is not that we must first come to a "cancel" button, and then get an "undo" button, to a double insurance. In the design of the user to consider the use of habits and daily mistakes, improve product fault tolerance is the key.

For relatively risky operations, organize several optimization scenarios that use the Cancel key:
1. Do not use "OK", "OK", "Yes" and other simple general words: use some words to describe the results of the operation, forcing users to read. But here to note the length of the text, if it is a button, text to refine; if it is a link, it can be a little longer.
2. will be canceled as the default.
3. Provide a third option: Provide a third choice that is safer than a direct deletion, rather than a simple yes or no option. For example, in itunes (below) choose to delete a song, the default selection is "Reserved file" (deleted in the track library, but the file is still saved in the original location of the disk, do not move into the Recycle Bin).