What order should a dialog boxes options appear in?

Question

With dialog boxes, I find that you usually have two options:

1. "Cancel", "disagree", "No, go back" - an option to close the dialog box without performing an action.

2. "Agree", "Yes, I'm sure" - an option that performs the intended action.

I've always thought you should present the action first "yes, I'm sure" followed by an option to cancel "No, go back". However, looking around there seems to be conflicting ways of presenting this.

One of the reasons I feel like the action should be first (left) as it is the first thing the user will read and therefore be the primary action you want them to achieve. Although considering mobile, the primary action wants to be as close to the thumb as possible so you would want to present it on the right [I realise this is favoring right-handed people].

Answer 1

The reason why we find different approaches in web applications is that not every operating system is using the same way to place primary and secondary options, there is literally no right and no wrong.

If your users are 90% Apple users then you should place the primary action to the right while when your users are mostly coming from windows you should place it to the left.

Apple:

Windows:

Of course there is not only windows/apple, android is also a point to consider.

If you want to read more: https://uxplanet.org/primary-secondary-action-buttons-c16df9b36150

Answer 2

Both can be done, cancel/action or action/cancel. One is based on the western reading order of left to right (action/cancel) and the other based on the concept of moving backwards and forward (cancel/action).

My agency has an optimisation team (web-only) that loves to A/B test on these kinds of dilemmas, and their trial and error has shown cancel/action to convert the best.

Here's why: When people read (Dutch, but any western language will do), they read from left to right. This means they will read cancel first, but action last. The thought behind this is that the brain will perceive this as preferable, because to the brain, the dialog box "ends" with a conclusion. Coupled with the fact that primary actions are visually distinct from the non-desired action (cancel), the brain will be further motivated into believing this to be the desired action.

However this choice can also be dependant on your operating system. Cancel/ok (Apple) or ok/cancel (windows). If you’re designing a desktop product running on Windows, your button sequence should match the windows conventions. People are expecting certain conventions then more so than when they browse the internet (where anything goes).