Where should I put the OK/Cancel buttons on my dialogs? At the bottom centered or aligned right? I've seen both and I personally don't care, but I want to create a consistant look across my application. Are there any guidelines for this or should I just do whatever I want?

14 Answers
14

In cases like this, it often doesn't
matter what you do. Either choice has
good arguments in its favor, and no
choice is likely to cause usability
catastrophes. It might save some users
0.1 seconds if you pick the "right" choice for certain circumstances, but
it's simply not worth it to conduct
sufficiently elaborate research to
find out what that choice is. Better
to spend your usability resources on
those things that can change your key
performance indicators by 83% or more.

Your app should be consistent with itself, of course, but it should also be consistent with the platform. Let’s also explicitly say that “OK” and “Cancel” here should merely be stand-ins. The buttons should say what will happen when they are pressed rather than simply “OK” or “Cancel”.
–
Robert FisherAug 10 '10 at 20:21

I prefer to position the most-likely action (OK in this case) on the right and give it some kind of color to make it easy to spot and the less-likely action (Cancel in this case) on the left colored in gray or a color along the lines of the form background.

I think it is bad design to place them next to each other. Following the "don't make me think" approach, when I need to cancel - I stop and look for the button, but in all other times I just want to act automatically.

+1 at least I think it's bad design to make them stand out the same amount if one option is an obvious default action. I too generally go with the default action as a button and the cancel action as a link - just like this comment box has a Save Edits button and a cancel link ^^
–
Oskar DuvebornOct 5 '10 at 16:58

For a linear process (like an installer), aligning "Next" buttons to the right (in a Western environment) might be more intuitive.

I'd say that the order of your buttons is more important. On Windows, the "OK button" is always on the left and the "Cancel button" on the right. Because users don't read, swapping OK and Cancel buttons (like some ported Mac applications do), confuses the user.

It's depends of your platform. Windows places the buttons on the right side in the order < OK > < Cancel > and Mac OSX in the order < Cancel > < OK >. Like other answers.... be consistent.
For button placement i would prefer the right bottom side.

i think "OK" or your prioritised action button should be on left because of following reason
1: Good percentage of user use keyboard on forms or dialogue boxes and user will take less time to reach most favorable action via tabbing if they are on left side.
2: Eye rotation or Fitt's Law
3: Think about blinds (semi blind) people or use of application when you are driving or accessing application on speech mode.
4: last not the least use verbs as your action

There are plenty of threads available in this forum, pls go through them

I think it depends on the design. If you are using a standard design for your form, I would place the OK/Cancel buttons on the right side (http://bit.ly/9IzQo0), but if you are using CSS to change your forms then I would place them in the center (http://www.tumblr.com/register).

If your form fields are left-aligned, it seems to make sense to left-align your buttons as well. Here's some research on where users' eyes actually go and how fast they react:
http://www.lukew.com/ff/entry.asp?571

This suggests that left-alignment of these two options is the best design choice – especially when the form controls above are also left aligned. Placing the “Submit” and “Cancel” buttons on the left meant that people’s eyes had less distance to travel.

In terms of their eye movements, people were least efficient when using [an option with buttons right-aligned].

The only case where I could see altering this pattern (and this is splitting hairs, mind you) would be for irrevocable actions on the part of the user (ie., delete my account, kill all humans, etc.) and then I might want to deviate to force them to think about the action or to force the default action to be the safer option.

According to the Gutenberg Diagram, the terminal area (where the site presents its final call after the user has scanned the page's content) is the bottom right of the screen. Because of the natural reading pattern of western readers, having the buttons in this location actually reduces user fatigue, as they finish their browse in this location. If buttons are located on the bottom left, the users will generally finish in the terminal area and have to return to the left based on recall to make their action. This pattern applies both to pop-ups as well as edit/add screens.

This general pattern also applies to the order in which buttons are positioned. If you list OK before Cancel, the user will almost always view all their options before selecting the one they want. In the majority of cases, the user will want to click OK over Cancel. This means that they view OK, then Cancel, and then move back to OK. Very minor, but still added work.