Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

1

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

2

Any ideas and reasoning would be amazing.

share|improve this question

3 Answers 3

up vote 2 down vote accepted

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

share|improve this answer

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

dialog buttons

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.