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.

There are reasons to align buttons to the left, center, or right. What are the best practices of button alignment and what factors should we consider? Which buttons should be on the left, center, and right?

Personally, I base my judgements on the f-shaped reading pattern ,horizontal attention and platform conventions. However, I haven't found a complete list of rules that would tell me where to align each type of button in each context.

share|improve this question
    
Could you clarify what particular design problem you are trying to solve? Otherwise, I would say this question is too broad (from the FAQ: "You should only ask practical, answerable questions based on actual problems that you face.") –  agib Jan 20 '12 at 7:46
add comment

5 Answers

Im not sure you can identify a complete set of rules, I dont think its possible to be definitive... Although I agree the f-shaped and horizontal attention research you refer to should be your starting principles.

If I had to create a set of rules it would look something like this:

  1. For dialog boxes with one button, bottom-centre
  2. Dialog box with two buttons, bottom-centre, "positive" answer comes first - so "Yes/No" or "OK/Cancel"
  3. Simple form, primary action button left aligned under last field on form, secondary actions to the right of the primary button with lesser visual design
  4. Multi-page forms, "forward" action on the right (with bold clear design and label indicating next step of process), "backward" action on the left (less bold in design but clearly labelled)
  5. Variation of 4) - use the left align approach of the simple form ie rule 3) --- but only if there is a progress or wizard bar very close to the button that helps the user orientate themselves in the process and understand what's coming next
  6. Be prepared to change which rule you use, or ignore them completely and come up with something totally different as a result of testing.
share|improve this answer
add comment

In web forms, there does not appear to be a big difference in performance on whether the buttons are left, right, or centered aligned, although left aligned appears to perform best, so I’d be inclined to go with that for a web app. For a desktop app dialog boxes (not to be confused with message boxes), I’d stick to the standards and go with right aligned.

The most important thing seems to be to keep the Execute and Cancel buttons next to each other. Putting Execute on the far right and Cancel on the far left is associated with slow responses and high error rates. Putting Execute is on the far left and Cancel the far right is inconsistent with user expectations. I know that doesn’t make much sense, but until further research sorts it out, the safe thing is to keep Execute and Cancel together.

As for whether Execute or Cancel should be first, users apparently don’t have a strong expectation one way or the other when they’re next to each other. The most important things are:

  • Be internally consistent within your app. If it’s a desktop app, follow the applicable standards.

  • Always label the Cancel button “Cancel” so the user knows which is which.

The Execute button should be labeled with the action it commits (e.g., “Buy” or “Register”). Use something non-descript like “Submit” only if there’s nothing more specific you can use.

share|improve this answer
    
Thank you very much for this. I agree with you, but I have doubts with one of your points. I usually left align buttons for the web, but if it's a form like Facebook's wall post ( bit.ly/amYKnQ ) and even commenting here ( bit.ly/bpolJb ), aligning to the right is what I'm personally used to, which affirms one of your points ( measuringuserexperience.com/SubmitCancel/index.htm ). I think, aligning to the right in this context is ideal because the person's eye moves to the right while typing –  Allan Caeg May 30 '10 at 3:16
    
That makes a lot of sense to me. Perhaps the rule should be "put the buttons next to wherever the users were likely last looking." –  Michael Zuschlag May 30 '10 at 14:47
    
Hmm. That "OK and Cancel buttons" survey (measuringuserexperience.com/SubmitCancel/index.htm) seems bogus to me. Only UX professionals were surveyed, so you can't draw conclusions about users' expectations from it. Also, the questions were too artificial: empty web forms with two buttons. Furthermore, the buttons were exactly alike, whereas common practice (and other answers on this page) gives the primary button a more prominent design than secondary buttons. –  Bennett McElwee May 30 '10 at 21:34
    
Yeah, that might explain the apparent contradictory results from what Wroblewski reported. Also, I wonder if UXers are more likely to use Macs. Interestingly, Wroblewski reports users prefer differential weight to the buttons, but performance was better with equal weight. –  Michael Zuschlag May 30 '10 at 23:16
    
I must say that I totally DISAGREE about having Cancel and Excecute buttons next to each other. I would always split them apart with a very obvious gap between them. From experience I can say that having the buttons next to each other makes it far more likely the user will select the wrong button, and cancel out of the page they were intending to Submit. As long as they are obvious buttons I believe it is fine, and indeed necessary to seperate the two. Also, I am leaning much more towards having Cancel as a Link and Excecute as a button. This highlights the primary action on the page. –  JonW Jun 1 '10 at 8:46
show 1 more comment

If you're using buttons on a form I would suggest placing the 'next' or 'submit' button in line with the left hand edge of the inputs.

If a user is focussing on the form and everything moves down in a straight line, then it's a good idea to put the button they are most likely to want to press in line with that.

We recently ran some tests on a multi page registration form, where the 'previous' button was on the left and the 'next' button was on the right. Because the form was left aligned, it meant that every time our participants went to click on the 'next' they would hover over the 'previous' button first because that was what was in their line of sight. They didn't always click the 'previous' button but some of the did on occasion, which as you can guess was very frustrating for them.

It obviously depends on how the form is designed, but more often than not there is a straight line that your users will follow as they scan down the form and it makes sense to put the most used button there.

share|improve this answer
add comment

Nathan provides some good points although not sure about point 2: OK/Cancel

There is an old but interesting Alertbox from Jakob Nielsen about OK- Cancel where he suggests, that it doesn't really matter whether its OK/Cancel or Cancel/OK and "no choice is likely to cause usability catastrophes" as long as its consistent. He goes on to say Apple uses Cancel/OK and Windows uses OK/Cancel....if you know what platform the majority of your audience is using, you could consider that.

share|improve this answer
    
Im a PC lad, and most of our users are too :) –  Nathan-W May 29 '10 at 21:47
    
the ok / cancel debate is eternal. –  Adrian May 31 '10 at 13:52
    
The order is less important. What's more important is a) consistency of placement and b) solid visual contrast between the two. –  DA01 Jun 3 '10 at 15:43
add comment

Nathan has pretty much hit the nail on the head. And the nuance that Oliver has pointed out really just emphasizes Nathan's overarching point that "I don't think it's possible to be definitive".

Most of the arguments I've been in with people about these types of design decisions are usually rooted in debate and not in the interest of good design possibilities. The more you design (for any medium), the more you'll learn that there is no right or wrong. There's just really good or really bad ;). And in many cases, like Nathan has mentioned, people are interacting successfully with a number of different design solutions and patterns. This should not be a surprise when we consider design in other aspects of our life aside from computers and software. For instance, some countries drive on the right, some on the left, and some on both.

In the case of web forms, the important thing is that you're consistent and that you exercise good visual design principles. So it feels like if fits with the over arching aesthetic, general content layout, spacing, and color. The basics can go a long way if done well.

Sure, Nielsen's research is useful like any other research (it's nice to have samples). But if the heat maps were measuring a form with a big huge red button in the bottom right of the page, all of a sudden the E-pattern is the new F-pattern if you get my drift.

share|improve this answer
add comment

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.