Should the OK/Cancel buttons be aligned right or centered?

Question

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?

Answer 1

I think this applies to this question too and answers it:

(Spoiler: It doesn't matter.)

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.

More info: useit.com/alertbox/ok-cancel.html

Answer 2

Do what fits in with your application and the target OS.

However, as you point out, being consistent across your application is probably more important.

Answer 3

When strictly speaking about alignment, there is no right answer other than to be consistent.

However, the alignment of buttons is related to the positioning or logical order of the buttons.

There are two general paradigms that can be applied to the positioning of buttons**.

1. Reading Order - The first button encountered in reading order is primary (Ok) and given priority over subsequent options (Cancel)
2. Forward/Back - Forward progress or action (Ok) is associated with movement to the right while backward or undo (Cancel) is associated with movement to the left.

The alignment of the buttons can influence the perceived paradigm of the user. As such some combinations of alignments and positions can be conflicting and thus confusing for users.

** this assumes left to right reading; perhaps not the same for right to left reading languages.

Answer 4

I think it is better (and more generic) to have them aligned right.

Answer 5

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.

Also see this question on ui.stackexchange.

Answer 6

They are always on the right, and the user expects them to be on the right. Make sure you space them enough and give them different styles to highlight the primary action.

Answer 7

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.

Answer 8

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).

Answer 9

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.

Answer 10

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

Also keep in mind my suggestions are not for small devices.

Answer 11

I generally use OK on left, Cancel on right.

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.

Answer 12

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.