Primary/Secondary button placement pattern

Question

Button placement has been a debated topic at within my UX team recently and I am for feedback or direction to research that states a solution. The problem I am trying to solve is where to place Primary and secondary buttons when both are visible on the screen. I place my primary in the bottom right corner and my secondary in the bottom left corner, separated from each other to require the user to think before pushing. In my case, the secondary button cancels the operation and i am concerned with placing it directly next to the primary action.

Answer 1

Nielsen Norman has some research on this, but they assume the buttons are paired together, not far apart.

Ok/Cancel or Cancel/Ok?

In their examples they pair the buttons together, and use 'Save' in place of okay in one of their examples. Here's an excerpt:

Both are reasonable choices, and people can argue for hours about their preferences:

• 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. Further, assuming users need OK much more frequently than Cancel, it's better to place this option first so that keyboard-driven users who tab to the buttons can get to their preferred choice with one less keystroke.

• 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.

When you have more than Save/Cancel

Save / Cancel (or Cancel/Save) being a pair is quite common in most UI. What you're describing when you say a 'Secondary button' sounds more like when you have a dialog with

• Saving
• Canceling out: Nullifying any changes (the escape hatch)
• and (sometimes): tertiary destructive actions

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

It's hard to say anything meaningful about placement of buttons without understanding the visual + info hierarchy, functionality of each button and overall context but I can share a couple things that might help.

I doubt there is a universal answer to your question. But I think that there are some universal truths like, if action buttons are in the same place on multiple screens your users don't have to needlessly re-learn. The other one is that you can easily test this with users. Button placement would be a really simple scenario to create and you can get quick insight from your user group that will give you better answers than you will find here.

Answer 3

This recently came up at my company too. Some HIPPO decided that primary buttons should be set flush right. Yet everywhere else on our site, primary buttons are flush left, with the secondary button adjacent to the right. At least that's the pattern for right-to-left languages. For Arabic and Hebrew, it's flipped.

All the sources I found agree that there should only be ONE primary button per page or modal, but they do not agree on the order. See:

• https://uxplanet.org/primary-secondary-action-buttons-c16df9b36150
• https://balsamiq.com/learn/articles/button-design-best-practices/

Since there is no rule, I would go with consistency here. Follow the standard placement of buttons that's already on your site; don't surprise your visitors with a novel layout.