Introduction
The correct order of "OK" and "Cancel" buttons (or similar other buttons) in Web applications is the topic of discussion among web designers, people who are interested in usability, and geeks. Take a look at a few examples:
- In the Windows platform , for years the standard is that as long as such a button appears at the bottom of the modal window, it must be "OK" on the left, "Cancel" in the right combination. Take a look at this Vista User experience Guide. So is the Sun's Java Interface Style design guide. The logic behind this seems to be based on the western reading order from left to right, so the "OK" button (presumably because it is more important or more commonly used than other buttons) is first seen.
- On the Mac platform , the standard is exactly the opposite: the group of buttons at the bottom of the pattern window is "canceled" on the left and "OK" on the right. See the Apple HMI Guide for details. The logic behind it seems to be reflected in the right button below ("OK") is always associated with the forward, like reading when the page action.
- There is no clear standard in the Web environment . The most appropriate example might be to apply the "prev" and "Next" buttons in a series of related pages, the actual standard is "prev" on the left, "next" on the right, unless the last page becomes the "submit" or "Finish" button.
So what do web designers do when they need to use the "OK" and "Cancel" two features? First, let's be clear about what these two features are:
- OK function : It raises an action that will be executed, such as saving changes or submitting an order. The common tags that perform this function on the Web are OK, save, submit, and finish.
- Cancel feature : It raises an action that will be canceled, and the user returns to the previous state or initial state. The most common label on the web may be "cancel." (sometimes "back" is also used, but it is likely to be confused with the browser's fallback function.) "Off" is also a related feature, but it does not give up the meaning of the operation that will be handled.
When I saw a few questions about how to properly arrange these buttons in Web applications in a mailing discussion group about availability, I decided to do a usability and user experience Network survey to see what the best order was.
Investigation
This survey uses SurveyMonkey. There are 4 questions in the questionnaire, as shown in the following picture:
(Click on the picture to see the larger image.) ）
4 questions and individual pictures all contain two variables:
- button Placement : either put together (question 1th and 3rd) or put them separately (2nd and 4th).
- button Label : either "OK" and "Cancel" (question 1th and 2nd), or "Submit" and "Cancel" (3rd and 4th).
To avoid misleading, the Order of labels ("OK" and "Cancel", "Submit" and "Cancel") is random. As shown in Figure 3 above, each option can only choose one answer.
I sent this survey link to the discussion group on availability email and also to a mailing list of our company web designers and user experience experts.
Results
This questionnaire is valid for 24 hours after release (between February 26, 2008 and 27th). A total of 64 people participated in the survey. The results of 4 questions are as follows:
|
tbody>
| A &N BSP; |
B |
| determine |
; 51% |
 49%  |
| Cancel |
50% |
|
comment:
- two buttons are too close.
- But "OK" should be the default option
- if it's left-handed, the choice is the opposite
- I'm too deeply affected by Windows standards. The expected or active selection of
- should be in front of
- OK and forward corresponding, cancel and back corresponding ...
- reference to Windows Conventions
- I prefer to "back" rather than "cancel," and "Cancel" seems to be the end of the choice.
- refer to the Practice specification for Windows pop-up windows
- reference to "left page/Right page" convention, B will turn to the next page
- I think you can connect it with the "forward", "back", "back" on the left, "forward" on the right.
- I want the "submit" button or any other name that represents "forward" to be on the far right (as if to the next page).
- is read from left to right, and from top to bottom in most western conventions. The button on the lower right should represent forward. The label
- Cancel is too many to appear in the wrong place.
- Our habit is to have a more positive choice on the right side.
- This issue is a Mac versus PC contention, and if you use Mac my answer will be the opposite
- for right-handed, "OK" is closer to the right.
- in our culture, the area to the right is used to turn the page, representing the advance.
- I think "Cancel" should be a link
- is not only in the comic strip will be painted like this, Windows platform everything is "OK" on the left, "Cancel" on the right.
- should match the standard settings of an earlier Windows application
|
|
|   |
; A |
B |
| OK |
 24%  |
 76%  |
| cancel |
; 76% |
 24%  |
|
comment:
- If you must have a "Cancel" button, you should put it there.
- But I'm not going to put them so far apart, unless they are grouped in some way with the rest of the buttons.
- which is all right
- I feel like they're separate.
- OK = forward, Cancel = back
- I've seen them like this before,
- again, "back" is better than "Cancel"
- because they are placed on the edge, they look more like navigation , so the button on the right means to go on, and the left means to back
- I would never separate these two buttons like this.
- I think that separating them means that they function more like "previous page" and "next page".
- that doesn't make sense, what "a" is not related to "B" for "next page"
- is better placed than the previous diagram because separating them can reduce misoperation
- You can put them anywhere, and they all have the same meaning! This is not "prev"/"Next", but "OK"/"Cancel".
- This problem is a bit nerve-racking. I think it depends on the context of the wizard. In this case, I advocate a= "back", back to the previous page, b= "Next" (2nd in 6 steps).
|
|
| A |
submit |
&nbs p;42% |
 58%  |
| cancels |
 58%  |
42% |
|
comment:
- scan in Z-mode
- unless the information is in the left column
- is really difficult to choose, there is a point of view that the positive first, but this is the "cancel" conflict with the
- I don't like "Cancel"! What about
- with "submit"/"objection"? [Smart alec!]
- "Commit" = "OK", so I will not change the previous answer.
- with the same principles as OK/Cancel
|
|
| A |
submit |
24% |
76% |
| cancel |
; 76% |
24% |
|
Comments:
- All right
- Same as the previous comments.
- Say it again-it doesn't make any sense. "Next Page" and "previous page" should be used here
- As with the 2nd question, I think the design can only be used in a step-by-step way. Otherwise, it will confuse people.
|
Discuss
What surprised me most was the result of question 1th. is to put the two buttons together, give them the "OK/Cancel" label, ask which should be "OK" which should be "Cancel", the results of the two options are equal to each other. There is obviously no one in the circle of usability research that agrees.
The results of the two designs (questions 2nd and 4th) that separate the two buttons are the most consistent. In both cases, 76% of respondents thought that the "OK" or "submit" button should be placed on the right, and "Cancel" on the left.
The results of the group that put the buttons together and use the "Submit"/"Cancel" label (question 3rd) are between: 58% of people put "submit" on the right, "Cancel" on the left, and another 42% choose the opposite. The difference between this and the probability of equalization (50/50) is just a significant difference (χ2 distribution p=0.05).
Suggestions
The recommendations I have drawn from this survey mainly include the following points:
Avoid putting the buttons labeled OK and Cancel together in a Web application (as in question 1th). This is too likely to give your users a different view of the sequence of "OK" and "Cancel". If they are rushing to do things, they may happen to pick the wrong way.
It's better to have different buttons visually delimited (probably not as extreme as the survey shows). When two buttons are placed separately, the button that represents the continuation action (such as "OK", "save", "submit", etc.) on the right side may be more in line with the user's expectations.
Luke Wroblewski has an interesting article called Primary and secondary Actions in Web Forms, which he uses to analyze the order of the "OK" and "Cancel" buttons.
