The Problem With OK/Cancel Buttons... Or Is That Cancel/OK?

Image: Juan Reyes / Stack Overflow

It's easy to get caught up in the cool and grandiose when designing a user interface, but any developer can tell you the real work is in the simple stuff. Take Yes/No or OK/Cancel buttons in a dialog box: what order should they be in? Got the answer? It's wrong.

As Michal Kovari, technical director at Wube Software wrote recently, everything from the programs you use on a regular basis to your operating system of choice determines what the right order is — for you.

For example, if you use Windows, then OK feels correct on the left, while Cancel should be on the right. However, Apple aficionados will say the opposite is better (as the lead image demonstrates).

You might not be surprised to learn that this is an old debate with no best answer. In 2008, Jakob Nielsen outlined the pros and cons of each approach:

Listing OK first supports the natural reading order in English and other languages that read left-to-right. Many other button sets have a natural progression (say, Yes / No or Previous / Next). You should always list these so that the reading order matches the logical order — in this case, OK / Cancel.
...
Listing OK last improves the flow, because the dialog box "ends" with its conclusion. Also, as with Previous/Next, you could argue that OK is the choice that moves the user forward, whereas Cancel moves the user back. Thus, OK should be in the same location as Next: on the right.

Nielsen goes on to state that, ultimately, whatever you go with doesn't matter, as long as you stay consistent. If in doubt, follow the OS. This gets trickier for multi-platform apps, but it is possible to detect the platform and adjust accordingly.

Do you have a preference and if so, why?

Friday Facts #246 — The GUI update (Part 3) [Factorio, via Reddit]


Comments

    When I was coding I preferred to have the most likely (and default) choice first. Since it saves time, fill in the form, do whatever, hit enter and you're done. One less keystroke.

    But I can understand the reasoning of making cancel the default. If you're working on the assumption that users are idiots you maybe want to make sure they don't accidentally just tab through and hit enter without thinking.

    If you want to mess with people, flip the meaning of OK / cancel in the text.

    Uninstall, for example, brings up a warning dialog box - and if you click OK, the uninstall is aborted.

    This used to annoy me so much back when I had an Iphone! Just standardise it so all those dialog boxes have the same format!

Join the discussion!

Trending Stories Right Now