Dialog Button Orientation

Question

I'm sorry if this has been discussed before, I spent about 5 minutes searching to find a topic on this, but was unable to.

I've been trying to come up with a standard for my application dialog buttons because the 3 developers on my team all do it differently (and differently for the same person too). This could be extremely confusing to the users so I am attempting to add a little sanity to my application.

We've got dialogs that always have footer buttons, the buttons can vary in meaning and number, but we always have at least one Primary Action and one Cancel Action, unless they both are the same, at which there's just the primary action that closes the dialog.

I've already come up with a visual styling to indicate higher weighting on the primary action (in my example the darker green with white text, as the lighter green is common place in the theme). The consensus is that the buttons should be floated to the right edge of the screen to drive the eye from top left to bottom right.

The dillema is over what is logical to the user:

1) Flowed Left-To-Right like writing, the first thing is the most important:

2) Flowed Right-To-Left like a Forward/Back Button, where progression is moving rightward, and regression is moving leftward.

Any ideas and reasoning would be amazing.

Answer 1

It seems your experience is to guide a user through a process or encourage them to follow through, so I would go with your second iteration, because in theory, it is moving them 'forward' or to the 'next page'. You are ending the dialog/box with an an action that you want the user to take.

See Nielsen Norman Group article

Answer 2

You can step further in visualizing primary action to minimize possible user error, see picture from eBay.

Answer 3

You should move your Cancel button to the bottom left corner of the window, for the following reasons:

• If you have a different number of buttons, the safe action (Cancel) will move around in your second example. This is best fixed by aligning Cancel to the left and actions to the right.

• Your buttons are very close together, increasing the chance of inadvertently hitting the wrong one (e.g., confirming a deletion instead of cancelling it). This issue is also fixed by moving the Cancel button to the far left of the window.

• If you have a multi-stage (wizard) dialog, it's not obvious where your "Back"/"Previous" button would go. If you move your cancel button to the left, the remaining buttons get a clear and obvious placement (at least in LTR languages); back goes to the left side of continue, with both buttons on the right hand side of the dialog.