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.

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?

share|improve this question
    
related: ux.stackexchange.com/questions/19/… –  greenforest Jun 14 '12 at 20:09
    
plz put some light on the context –  kmonsoor Dec 19 '13 at 19:37

14 Answers 14

up vote 32 down vote accepted

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

share|improve this answer
4  
And test it. test it. test it to ensure that It Doesn't Matter. ;) –  Kevin M Aug 25 '11 at 17:26

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.

alt text

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

share|improve this answer
    
I personally prefer Ok, Cancel in the final case as it puts Ok first in the tab order. –  Steve May 23 '11 at 12:16

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.

share|improve this answer
2  
Definitely do what fits with your app. Ideally this will also match the operating system that you're in as well. –  Scott Newson Aug 9 '10 at 20:45
    
@sgnewson - good point, I'll update the answer –  ChrisF Aug 9 '10 at 20:50
    
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 Fisher Aug 10 '10 at 20:21
    
When in Rome, do as romans do. –  Leonardo Herrera Aug 13 '10 at 14:21

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

share|improve this answer

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.

share|improve this answer
    
+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 Duveborn Oct 5 '10 at 16:58

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
    
+1 for referencing Fitts's law en.wikipedia.org/wiki/Fitts's_law –  Benny Skogberg Mar 28 '12 at 14:00

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

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
  1. The order doesn't matter as long as they are close together to imply that they're siblings. That is, the OK and Cancel buttons do different things but they affect the same element.
  2. For a left-to-right language, I would put the buttons in the center or flush right.
  3. I would emphasize the OK button with a color that matches the branding.
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.