When displaying an "OK/Cancel" button group that is right-aligned should the main action be on the right?

Question

I am designing an "OK/Cancel" button group on a modal hence this button group is right-aligned. Since this is the case I have placed the main action button "OK" on the right, and the secondary action button "Cancel" on the left.

On other pages these button groups are left aligned hence the main action "OK" button is on the left.

My colleague argues that "we should be consistent with our button order" regardless of the positioning of the button group.

What should be the best practices concerning this situation?

Thanks in advance!

Answer 1

From a UX point of view, the best practices would be consistent with user behaviour and expectations. This being said, however, I am providing some ideas to help you consider what would be the user expectations for your application.

For Ok/cancel button alignment, the OK button is usually done on the left in Windows or on the right on MacOS. So it depends on what platform your modal is on.

Secondly, the position also depends on the context which the modal pops up, whether OK is meant to be the primary or secondary response. Primary response should be on the right, see the illustration taken from https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112

Lastly, you should (as your teammates suggested) consider the consistency of the buttons positioned. It can be the same as the rest of the application if the button grouping appears the same, i.e. the user expect the OK button to be on which side of the modal when the pop up appears? You would not want the user to click on the button when the result is not intended.

Hope this helps!

Answer 2

If you have multiple similar button groups (OK / cancel) on your page that look the same (i.e., two buttons next to each other), possibly even in the same colors and general styling, then you should avoid having them act differently. Consider what happens if a user doesn’t realize fast enough that the Cancel (or secondary action, as Eric Chia put it) button is not the second button as they’re used to. The effects may range from uncomfortable to destructive.

Considering this I suggest you put the two buttons to the right of your modal, but in the same order as they appear elsewhere on your page.

However, I am also a proponent of the ‘right is proceed, left is return’ element alignment, which I believe to come naturally from our left-to-right writing direction. Another solution along these lines is to break up your two-button group and display the ‘OK’ button in the bottom right side corner and the cancel button in the bottom left corner. This also helps greatly in avoiding mis-clicks that happen from rushing to the buttons (which you don’t think will likely happen until you’ve seen somebody dying to finish of the workday before they miss their bus).