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_WebFor…

“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