Design: Should “cancel” be on the left or right?

I always love design questions. Especially questions that don’t necessarily have a correct answer. One of those questions is whether the OK button comes first or the cancel button comes first. These types of questions don’t necessarily have a correct answer. And if you encounter a situation where such a decision needs to be made, the best course of action to create consensus is to decide by seniority or committee. Especially in cases where being wrong can easily be fixed, it’s not worth the time to fight over it.

However, if you want to know the reason for this issue, I implore you to keep reading. Maybe this simple explanation will prevent a lot of discussion.

The short answer is simple. It’s all related to the design language of two competing companies: Microsoft and Apple. Microsoft has decided to put the “safe action” on the right, while Apple has put the “default action” on the right.

The Microsoft guidelines say:

The “do it” action button(s) should appear as the leftmost button. The safe, nondestructive action should appear as the rightmost button.

Source: learn.microsoft.com

The Apple guidelines mention that default buttons are trailing (thus on the right) while cancel buttons are typically leading (thus on the left):

Place buttons where people expect. In general, place the button people are most likely to choose on the trailing side in a row of buttons or at the top in a stack of buttons. Always place the default button on the trailing side of a row or at the top of a stack. Cancel buttons are typically on the leading side of a row or at the bottom of a stack.

Source: developer.apple.com

And the UX of Android, which is typically the material design guidelines, states the exact reverse:

Confirming actions are aligned to the ending side of the screen, with dismissive actions on the leading side of the confirming action.

Source: m3.material.io

What is also interesting to note is the choice of language. For example, when deleting a file, all three design systems will state that the cancel button should be the last. This is because Apple knows four different roles for a button: normal, primary, cancel, and destructive.

And the Microsoft language doesn’t apply to most wizards: The first button is “back,” and the last is “cancel.” In contrast, the “next” (aka “do it”) button is in the middle.

All three design languages instruct that the buttons should be placed in the order that makes the most sense to the user. So next time this discussion comes up, you can suggest that the operating system should determine the order the user is using.