Boxes And Arrows : The Design Behind the Design

Placement of OK, CANCEL buttons - There have been a long-standing discusses about the placement of these buttons. It principally comes down to two contrary viewpoints. One viewpoint is ..., that the OK button have to be placed to the left of the CANCEL button. The reason for this first opinion is because we read from left to right, top to bottom, buttons should be placed left to right in order of importance, importance being how likely a button will be used. The second viewpoint says that because we read from left to right and from the top to bottom – in most parts of the world. The left side is typically implicit as being BACK and the right side is implicit as being FORWARD. When we look at our browsers it´s almost the same - the BACK is on the left and FORWARD buttons on the right have arrows - pointing left and right in that order. The function Cancel is a back action and OK is a FORWARD action, the OK button should be to the right of the CANCEL button. I concur with the second viewpoint, as it is more consistent. I strongly believe that CANCEL always goes on the left, and OK always goes on the right. ( - On rare occasions I reverse this “common” practice - when I will avoid interruptions or abort by the user - )

Great suggestion! And, Maassen- good observation! I agree with it. This has always been a dilemma for me too. What if we put "OK" first and "Cancel" later if we placed the buttons on the left side of the page and vice versa if we placed the right side of the page? I think an additional affordance could be to introduced with a visual distinction between the two buttons as well. I came across another article by Luke W, that really creates some food for thought. Read it here: http://www.lukew.com/resources/articles/PSactions.asp

We should be using the Microsoft standard, as it is very ubiquitous - Most users in LTR (Left-to-Right) cultures are accustomed to the affirmative action button being placed on the left, and the "undo" or "Cancel" or "Reset" button being on the right. Example That alone is a compelling enough reason for me. But, for those who would like more, I have had many users express frustration with "Cancel" or "Reset" buttons being the left-most button, since they often will, out of habit, complete a lengthy form, and then automatically click the left-most button, only to find out that they have reset the entire form. Don Demrow, UI Designer

Prasad, are you talking about okay and cancel in a modal or a form? If the former, I recommend reading the first couple of chapters of "designing the obvious" by Robert Hoekman, Jr.--who keys off of dialog frustrations articulated passionately by Alan Cooper. During design it may make sense to determine how necessary either button or the dialog truly is. If it isn't, then placement of okay and cancel may be moot. If it is, then testing should include the whole interaction within context of a task rather than, "does 'okay' and 'cancel' make sense to you?". If these buttons are for a form, I would ask what a cancel button does and how important that option is to users.

I think this issue has be very nicely put to bed by Luke W. Check out this deck: http://www.lukew.com/resources/articles/UI12_LukeW_WebForms.pdf

"Should the OK button come before or after the Cancel button? Following platform conventions is more important than suboptimizing an individual dialog box." Jakob Nielsen - Alertbox = http://www.useit.com/alertbox/ok-cancel.html

Some things to keep in mind. Both of the standardized methods were developed and implemented in desktop software before the web. This means that both of these models were not designed with the web context in mind. There is one big difference between the traditional desktop environment and a web-based environment - the browser's "Back" button. o “Cancel” is also a way to “go back” and "OK" is a way to move "forward". This "Forwards/Backwards" metaphor underlies most forms of "Cancel" and "OK" functions. Here are some other extensions of this metaphor: o Time: in our standard visualizations ”Old” is usually depicted on the left, “New” is depicted on the right (most graphical depictions of time use this left-to-right metaphor) o Process: We use the left-to-right metaphor when visualizing progressive steps: “First” is on the left, “Second” is usually displayed on the right. o Writing and Reading: in writing and reading we “continue” or move “forward” from left to right (unless we’re in Asia of course) o In film: if a person is “going somewhere” she moves from the left side of the screen to the right. If she's going “back” she travels from right to left o The Cancel/OK model may help to improve conscious decision-making: This model assumes that you want to read the options before making a decision on which action you want to take (advisable on important interactions that require the user’s full attention and have more than a couple of actions available to them.) The Cancel/OK model presents the “alternative” actions first (on the left)…so you can read them before deciding that “OK” is the action you really want to take. The OK/Cancel model may get the user in the habit of clicking the first option they encounter. At the same time, the users who are trained to use the Cancel/OK model may go directly for the "OK" button whenever they're fairly certain that's the choice they want to make. o OS Adaptation: Mozilla's Firefox matches the OS being used when displaying the order of the OK and Cancel buttons. In other words, the display of the buttons adapts to fit what your OS has trained you to use.

This link takes you to an article that shows the survey and result about the specific question of the order of the Cancel/OK buttons. Different layouts and different button labels were tested. The results are interesting and worth considering as they introduce other factors that influence the way that people interpret the buttons (such as the distance between the buttons.) http://measuringuserexperience.com/SubmitCancel/index.htm