User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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.
I'm not sure you can identify a complete set of rules, I don't think it's 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:
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.
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.
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.
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.
