OK-Cancel or Cancel-OK?

Here’s one of the epic questions in UX design: should the OK buttons be to the left of the Cancel button or should it be the other way round?

image of OK and Cancel buttons

Before I go into details, here’s the executive summary: there’s neither a significant difference in performance (task execution speed) nor in user preference.

It’s interesting that although it’s a source of constant discussions, it’s not something that would be published about in textbooks or on the web (if you know of something recent, please let me know!!!).

You can argue that consistency with platform conventions is the most important thing to consider. For desktops, that’s Microsoft/Windows vs. Apple/Mac. The former uses OK-Cancel, the latter Cancel-OK. If you’re designing a desktop product running on Windows, your button sequence should be the same that all other applications on that desktop feature.

On the web it’s not that easy. There, all bets are off because browser-based UIs can be accessed from multiple platforms. You can use web analytics to find out the most used platform for any particular web product, but whatever button sequence you choose, it will not be consistent with that some users know from their operating system. So then, the sequence should be whatever is better from a usability perspective. Here are pros for each sequence (see bottom of blog for the references):

 

Pro OK - Cancel:

  • Supports normal reading flow and sentence structure in the Western culture, where you say for example “Do you agree with me – Yes or no?”. So the positive option comes first, the negative second.
  • Given that in most cases OK is the primary action to complete a flow and therefore is used more frequently than Cancel as the secondary action, OK is faster to hit with the TAB key for keyboard users (assuming a reading direction that goes from left to right).

 

Pro Cancel - OK:

  • Improves the flow, because the dialog "ends" with its conclusion, assuming a reading direction that goes from left to right. The final UI element to interact with – the OK button – is at the right-most position.
  • As with Previous/Next, OK is the option moving you forward towards the completion of your flow, while Cancel moves you back. Therefore, OK should be in the same location as Next - on the right.
  • Less fixations. Users look at all options before choosing which action to take. Most users won’t blindly engage with the left button without also looking at the right button. So in the case of OK – Cancel you look at OK, then look at Cancel and then if you want to engage with OK, you look back to OK. That’s a total of three fixations in two directions. In the case of Cancel – OK you look at Cancel first and OK second. Since OK is what you want, you don’t need to look anywhere else but can just click/tab the OK button. This creates a total of two fixations in one direction.

 

So which way is better? Like with many UX design topics, there’s no right or wrong answer. It’s helpful though to know what speaks for each option. My personal preference is OK-Cancel. What’s yours? Any other reasons than those stated above?

 

Further readings:

http://www.nngroup.com/articles/okndashcancel-or-cancelndashok/

http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/

http://measuringuserexperience.com/SubmitCancel/


Comments  (2 )

Geoff Bennett
on Thu, Jun 5 2014 12:30 AM

Neither. They should be appropriately named for the action/inaction being performed, with the default button following the environmental defaults. Obviously, on the web this is a bit tricker. In that case, I would following the reading direction of my target audience, and have the default/preferred/safe action item as a large button or similar, and the cancel/abort/escape button as an ordinary hyperlink.

David Lean
on Mon, Jun 16 2014 12:59 AM

Other supporting fact.

It is common knowledge in the advertising industry (western world) that the eye travels from upper left to lower right of a page. Often we don't even look in the upper right or lower left corners. This supports the argument that putting the affirmative (OK/Submit/Next/Continue) button in the lower right, makes it quick for users to progress thru your pages. Unfortunately it also means they might not give sufficient consideration to what they are doing.

This was one of the reasons the original "Microsoft Win 3.0 UI guidelines" suggested the OK was lower left. The other reason was the user did not need to read the "Cancel" & "Help" buttons once they had found the OK button.

Add a Comment

Please Login or Register to add a comment.