OK-Cancel or Cancel-OK?

Tobias Komischke / Wednesday, June 4, 2014

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?

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?