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.

Should OK button be on left of Cancel button or vice versa?

Are there any studies suggesting either of the solutions?

share|improve this question
1  
Duplicate of ui.stackexchange.com/questions/37/… –  Jouke van der Maas Aug 30 '10 at 7:18
10  
It's not a duplicate; your question was about alignment, this is about positioning (close, but still different!) –  Rahul Aug 30 '10 at 8:14
1  
possible duplicate of Default button OK or Cancel –  Ignacio Sep 1 '10 at 12:53
3  
@ign - Also not a duplicate... similar, not duplicate. :) –  Rahul Sep 1 '10 at 15:15
1  
Just to add to the conversation, Luke Wroblewski also wrote an article called "Primary & Secondary Actions in Web Forms" where he shares the results of some eye tracking research. –  David Alpert Sep 1 '10 at 21:13

23 Answers 23

up vote 103 down vote accepted

As with everything: user test! Thankfully, usability hero Jakob Nielsen jumps to the rescue here in his Alertbox article about OK/Cancel buttons:

Should the OK button come before or after the Cancel button? Following platform conventions is more important than suboptimizing an individual dialog box.

Kostya was right on the mark in advising adherence to platform guidelines. But what about web-based platforms?

If you're designing a Web-based application, the decision is harder, but you should probably go with the platform preferred by most of your users. Your server logs will show you the percentage of Windows vs. Mac users for your specific website or intranet. Of course, Windows generally has many more users, so if you can't be bothered to check the logs, then the guideline that will apply to most situations is OK first, Cancel last.

He also mentions two additional important guidelines you might consider when creating OK/Cancel buttons:

  • It's often better to name a button to explain what it does than to use a generic label (like "OK"). An explicit label serves as "just-in-time help," giving users more confidence in selecting the correct action.
  • Make the most commonly selected button the default and highlight it (except if its action is particularly dangerous; in those cases, you want users to explicitly select the button rather than accidentally activating it by hitting Enter).
share|improve this answer
15  
Luke Wroblewski also wrote a more in-depth article called "Primary and Secondary Actions in Web Forms" (lukew.com/resources/articles/psactions.asp) that includes the results of eye-tracking studies. –  David Alpert Sep 1 '10 at 21:15
1  
No offense Rahul, but I can't believe that this answer got that many upvotes. First of all it's not a matter of user tests but about AB testing if anything (which is not the same) Second of all The advice about looking at the server log to see whether you will most likely have mac or windows users is straight out bad advice. –  ThomPete Nov 14 '10 at 20:16
4  
@ThomPete Um, okay. If you're going to argue with Jakob Nielsen, can you provide some reasons other than "it's straight out bad advice"? It sounds like it makes a lot of sense to me: look at the data and make decisions from there instead of guessing. Yes, AB testing would work here too - but so would user testing, and IMO you learn a lot more from user testing than from AB testing, so I recommend that first. Finally, the reason this got a lot of upvotes is because Joel Spolsky tweeted it at some point and that probably blew things out of proportion a bit. –  Rahul Nov 15 '10 at 7:36
2  
With regards to the bad advice. It's bad because on the web people are not mac or windows users. They are browser users. –  ThomPete Nov 15 '10 at 8:09
2  
User testing variations of the design will tell you a lot, for instance whether you're dealing with users with a Mac background and therefore certain expectations on location of Cancel vs OK. Just because people are using the web platform doesn't mean they don't bring along expectations set by the software platform they're using, so Jakob's advice is good because it reminds you to think about that when designing for the web. It's not mutually exclusive - you can take platform into account while at the same time being aware of the fact that you're designing for the web. –  Rahul Nov 15 '10 at 8:59

The answer is in user interface guidelines for the system you use.

For Windows

Present the commit buttons in the following order:

  • OK/[Do it]/Yes
  • [Don't do it]/No
  • Cancel
  • Apply (if present)
  • Help (if present)

So Cancel is always on the right of OK button.

For MacOS

A button that initiates an action is furthest to the right. The Cancel button is to the left of this button.

So for MacOS users Cancel is on the left of OK button.

For Android

The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.

The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.

For Android, Cancel is on the left of the OK button.

For other systems see guidelines.

share|improve this answer
4  
Unfortunately there are no guidelines for the internets, so you'll have to use best practices there! –  Rahul Aug 30 '10 at 8:15
    
I think for web apps you may either try to detect user's OS (and reposition buttons if needed) or use Windows order since this order is more popular (it is used also in many Linux systems as far as I know). –  Kostya Aug 30 '10 at 9:00
6  
@Kostya - This will cause problems when people view the same websites on different systems, there would be no consistency which is one thing you should expect from a good website. –  Toby Aug 30 '10 at 12:33
3  
@Toby But this is actually used, for instance, on this very website! I've worked with the source of the editor they use here, and it has this exact behavior, for the image and hyperlink dialog boxes - take note of it the next time you use it on different OS –  Yi Jiang Sep 8 '10 at 14:37
1  
@Toby: That would be an interesting follow-up question to this one: is it better for a website to adhere to a single behavior or change depending on the user's platform? Calum Benson also raises a good point about OS detection not being enough for Linux. –  Lèse majesté Nov 14 '10 at 1:49

Think "reading" metaphor. Westerners read left to right, our brains are conditioned to flow left to right. CANCEL is basically a step backwards (left) and OK/SUBMIT/YES/Etc., are a step forward (right).

share|improve this answer
1  
Also timelines usually go from left to right. So Cancel would correspond to go back in time. And OK would be to move forward in time. Good analogy there. –  neoneye Aug 31 '10 at 20:24
8  
Specific platform conventions trump the broad reading direction argument. Windows does OK|Cancel. –  dbkk Sep 27 '10 at 18:33
8  
I agree with the reading metaphor, but you could just as easily come to the conclusion that since you read from left to right, top to bottom, that the buttons should go in order from most likely to least likely to do. In other words Ok, then Cancel. Ultimately however, I believe that following what your users expect is the most important and trumps anything else (i.e., platform conventions). –  Nemi Oct 27 '10 at 17:56
1  
@dbkk: in the case where you are serving a multi-platform userbase, then this would be a good "tie-breaker" argument. It may be better than detecting which OS the user is on and trying to conform to that (and as a result, show the same user different behavior depending on whether he's on his laptop or desktop or iphone). –  Lèse majesté Nov 14 '10 at 1:45
    
I think that the most commonly used operations should be first and the least last. Submit/Cancel are not like Prev/Next in the manner that Prev/Next are undo-able (by clicking on Next/Prev) and Submit/Cancel are not. –  Danny Varod May 2 '12 at 18:45

For users whose language is read left to right, I would suggest putting the OK button to the left, since those users would ascribe greater importance to the first thing they see.

This would allow this subset of users to complete their task as quickly as possible.

share|improve this answer
2  
Interesting mention of LTR, because it implies you would have to think differently about RTL. Surely there is some research done in that area? –  Rahul Aug 30 '10 at 8:16
    
@Rahul: That might be a good reason to arrange them vertically if you can. I don't know of any languages where you read from the bottom up, and pretty much all interfaces with vertically arranged buttons put the affirmative at the top, so it would be both culture and platform agnostic. –  Lèse majesté Nov 14 '10 at 1:47
2  
I don't know about research, but Microsoft put a lot of effort into reversing UI elements like this for RTL. –  ICR Jul 6 '11 at 12:06
1  
I disagree. We read left to right (in the West), but we do NOT scan interfaces uniformly left to right. A row of buttons is not read like a sentence, as our brains perceive them as separate objects first, and then we attempt to parse the text inside each one for meaning separately. –  Graham Aug 12 '11 at 14:51
    
@Graham When I am use English UIs, I read buttons or links from left to right until I find the one I am looking for. I don't see how you can read multiple buttons simultaneously, are you a Homo-Sapian? –  Danny Varod May 2 '12 at 18:49

Luke Wroblewski wrote a book about web forms (Web Form Design: Filling in the Blanks) and he also covered some principles like: "Primary & Secondary Actions" ( http:// www.lukew.com/resources/articles/psactions.asp ), "Top, Right or Left Aligned Form Labels" ( http:// www.lukew.com/ff/entry.asp?504 ) or "path to completion", etc. (you can read also http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php)

So, IMO depending on what label placement you have (preferable vertically) and left-to-right + top-down rules, in order to have a good path to completion you should place primary action first (OK) and then secondary ones (++Cancel)

EDIT: Label placement in forms, by Caroline Jarrett, 2010 http://www.formsthatwork.com/files/Articles/labels-on-forms-for-uxlx-2010.pdf

share|improve this answer

I think everyone had given good point but there is one more key point to be mention here.

Buttons such as Ok/Submit/Save etc are called positive action buttons. Similarly, buttons such as Cancel/Reset etc are called negative action buttons.

Now to answer the query, most of them has come with some good points but here is another perception that is User Testing of an application usually decide most of the issues. After all any application created are for users only.

There were some eye moment test & heat test were done on users and still being done depending on the labs availability. The best scenario comes up are that most of users start looking at the web application or any other application from Left - to - Right & from top corner and start scrolling toward the bottom picking up key hotspots and generally end toward the left bottom thus it is always good to keep positive action button on left and negative action buttons on right.

Also, not denying the fact that these are research based on few users, it is not necessary that this will always hold well but most of time it will.

There is one more key point here is that there shold be more space between positive & negative action buttons so that users will take little more time to reach to negative buttons and thus will give them ample amount of time to thought and react.

I have tried to explain couples of points are based on my experience and from research papers.

Do comment, so that I can also learn more.

Regards Deepak Bajaj

share|improve this answer

Note, incidentally, that just trying to detect the user's OS doesn't necessarily help-- at least not if you detect the OS as being Linux. Because of the two most popular Linux desktops out there, KDE uses Windows button ordering, and GNOME desktop uses Mac button ordering.

share|improve this answer
    
Worse yet, a user that moves from machine to machine (different OS) yet visits the same site will get a different UX each time - very confusing! –  Danny Varod May 2 '12 at 18:51

Just to clarify the reasoning:

It's considered "more correct" to place the main button (OK) on the exact corner of the dialog, since it's easier to hit (there have been several past questions/discussions about this).

However, it also depends on what the users are accustomed to - if you're creating a site or application for Windows users, you had better follow Windows standards.

Make sure that "Enter" on the keyboard is correctly associated with the OK - a lot of people will use that too.

share|improve this answer
3  
How would it be easier to hit in the corner of a dialog? Dialog windows generally don't extend to the edge of a user's screen, so they can't use the same technique there. Or am I misunderstanding? –  Rahul Aug 30 '10 at 8:17
    
1. In my opinion, it's not only the physical screen that stops you - it's easier for us to follow the contour of an object. –  Dan Barak Aug 30 '10 at 13:22
    
2. The corner is the END of the dialog, and it's easier to jump to the end rather than any point in between. –  Dan Barak Aug 30 '10 at 13:23
    
Hmm, I dunno. Perhaps you could give a visual example? –  Rahul Aug 30 '10 at 14:07

A lot of applications have been shifting to use different styles for OK vs Cancel buttons. One common UI is to have the OK button but a traditional button whereas the Cancel is a link button. This gives a very clear visual distinction between the two and even though it leads the user to click OK, the visual distinction ends up highlighting the difference and helps the user pick the one they actually want.

I've seen this both in web and desktop applications.

share|improve this answer

IMHO it does not matter too much where you will place "OK" button: to left or to right. It does not matter what kind of users visit your site (with hebrew or arabic languages). It does not matter what kind of software they use. The stats tell us that 55% of users want to see "OK" button from the right but if we will put it to the right, then the other 45% of users will be dissatisfied.

The best solution is to emphasize "OK" button (make it more prominent than "Cancel") and all the users will indicate "OK" button easily as more important and primary button.

enter image description here

share|improve this answer
1  
I agree that the visual weight and labels of action buttons are an important design aspect to consider (and very useful in this case where position alone can't be relied on), but it’s not the only aspect. I feel that a meticulous designer would think about how every design aspect affects the user - position cannot be ignored. –  M.A.X Dec 5 '12 at 19:20

Should depend on the environment. As Kostya has described, Windows users will likely press left button, without reading the button label, to do action. On the contrary, Mac users will likely press rightmost button.

On the web, I guess OK on the left is the majority (or no cancel button at all)

share|improve this answer
    
Did Kostya say that? It it really true that Windows users will likely click the left button without noticing that it says "Cancel"? There may be some grounds for this assertion if it's a Windows application, but the question didn't mention what the platform was... –  Bennett McElwee Jan 17 '11 at 2:40

For ASP.NET web applications, after taking a lot of aspirin for dealing with default button issues (whatever will fire when the Enter key is pressed), I just put my default button on the left so that it is first in the markup.

Different browsers will handle multiple submit buttons differently when the Enter key is pressed (especially when the cursor is inside a text box at the time of Enter press). Some browsers will just use the first button in the markup to submit the form, which may not be what you want (especially if you need to do something on the server-side afterwards).

If you aren't using custom javascript to handle default button scenarios, and are relying on web browser default behavior, then you should probably put the default button on the left.

share|improve this answer

You can find an interesting opinion here; Anthony T. suggests that placing the "OK" button to the right of "Cancel" is better:

With the ‘Ok’ button on the right, the visual fixations are less and flow in one direction [...]

Compare that with the primary action placed on the right of the dialog box and the secondary action placed on the left. Users start with their eyes on the secondary action, and move their eyes to the primary action to click the button. This creates a total of two visual fixations in one direction, giving users a faster visual flow. Users fixate on each button only once and end on the primary action button. Putting the primary action left might make it easier for users to reach, but when you look at speed in terms of the user’s mental processes and visual fixations, placing the primary action on the right of a dialog box is actually faster.

share|improve this answer
1  
+1 for an excellent article! I think another key point he makes is that platform consistency is not good enough; the suggestion to follow platform conventions for the sake of consistency is simply not good enough and leaves designers empty-handed. –  M.A.X Dec 5 '12 at 19:18

I must say that me, my brother and everyone else I know tend to look on the right side for the fastest choice.
But I'd suggest using a feature of most OSes: "accept button":
On Windows, most dialog boxes have a (somehow) highlighted button that represents the fastest/easiest/recommended choice. You could use that!

share|improve this answer

For me it depends on the the positioning of the button set. So if buttons are on the left, the first button/default should be the positive action (Save/Submit/OK) followed by cancel. In case the button set is on the right side of the form, the button on the farthest right should be the positive action and cancel on the left. I've been using cancel as a link rather than a button to provide ample distinction.

Most important key for web is to follow the standard. Whatever approach you take should be consistent throughout.

Thoughts?

share|improve this answer

I'd go with "Ok" on the right. Because of western reading direction that goes from left to right. And "Cancel" wouldn't bring you ahead but "Ok" will.

But a totally different approach. Don't use "Ok" and write on the buttons what they do. For example "Save" or "Don't Save" doesn't require the user to read the description text. Saves time and prevents input errors.

share|improve this answer

In my apps I'm using visual color for highlighting the action button purpose. Then no matter if it's left or right. I personally prefer to have the "ok" button on the right (because I'm right-handed and/or osx user - and actually this is link..)

  • big green button for validation
  • big red button for deletion
  • (big or not)gray button for cancel
share|improve this answer

Ultimately (especially after reading all the above replies) I see this discussion boil down to platform convention vs. 'objective' usability. What I mean by 'objective' is how usable something would be for users who aren't familiar with any OS convention. More specifically:

OK on the right
This pattern wins hands down in the objective usability argument IF users aren't conditioned to the less usable windows convention (see article). As the article discusses, having the OK on the left aligns with our left-to-right reading convention, more efficient task flow, is a better corner target, also the fact that we think of timelines as running left-to-right (hence a 'back'/'cancel' on the right makes sense seeing as it's a back in time pattern).

OK on the left
Windows convention

It's an unfortunate reality, but poorly designed patterns (such as OK on the left) can become a convention and users will come to expect them. Trying to do something else, even if objectively it's a more usable pattern, will result in poor usability. A classic example is the metric vs. imperial measurement system - the metric system has everything going for it in terms of usability, easy of unit conversion, etc; but if you force small-town Americans to think in meters and centimetres when they're used to inches/feet you'll get poor usability and very frustrated users. I guess the lesson is to work very hard to make sure we never introduce poor conventions in the first place!

Personally when designing for the web I choose to put the OK button on the left, I also insist on stating my height in centimetres and my weight in kilograms, even when talking to imperial-minded folk. It's a war of attrition really, but slowly the imperial system will die off, and hopefully the windows 'OK on the left' convention will too :)

share|improve this answer
    
Similarly to your argument about "conditioning of users" who's been trained to use OK on the left, one can refute that opposite arrangement is very much the same conditioning, arguably found mostly in the Mac world. –  Art Dec 5 '12 at 20:54
    
Completely agree, I'm not arguing in favour of the windows approach, simply stating that if you design for the windows world then you might have to go with convention over objective usability. Luckily in the Mac world the conditioning also aligns with what is the most objectively usable solution, so no problems there :) –  M.A.X Dec 5 '12 at 22:58

Lol I can't help but laugh by many of these answers. It seems like a case of not seeing the forest for the trees. Like every UX problem fundamentally it depends on how the form is layed out. For example, Labels top, fields below or labels left fields beside. Look at the entire page and how a user's eyes flow down the form. Is there a clear line of sight to the final 'Submit' button?

As stated in a previous post Luke Wroblewski book about web forms Web Form Design: Filling in the Blanks contains some of the best advice in web form creation as well as a great paradigm of forms from a user perspective - Forms are a means to an ends and are tolerated because of the intended end result (ie purchasing something, creating an account to get access to somewhere etc). User test, AB test yes of course if you can. The ultimate goal being the easier your form is to fill out the better.

share|improve this answer

If posible, I would suggest omitting the cancel button altogether, thus solving your dilema. - It is sometimes unnecessary, and is often activated by mistake.

From http://www.nngroup.com/articles/reset-and-cancel-buttons/:

Most Web forms would have improved usability if the Reset button was removed. Cancel buttons are also often of little value on the Web.

Offer a Cancel button when users may fear that they have committed to something they want to avoid. Having an explicit way to Cancel provides an extra feeling of safety that is not afforded by simply leaving.

Cancel is mainly useful for multi-step dialogs where the user has progressed past one or more pages with actions. At this time, pressing the Back button will not undo these actions and it would be better if the user would click Cancel.

share|improve this answer

It seems like Windows OK/ Cancel convention has done a lot of brain conditioning for users. So usability tests would certainly come out with lots of people looking for an OK button on the left, Cancel on the right.

But that doesn't change the most basic instinct of someone who is interacting with the system without any pre-conditioning. My basic instinct says that the OK/ Approval/ Move Forward button, no matter what colour or size you apply to it, needs to be on the right edge of the dialogue box.

Consider this dialogue box, with no labels or colour highlights:

enter image description here

Where would you click? I'd click on the button on the right edge, if I am looking to submit the form. The reason is, that before Windows, I've been conditioned into my instinct in the following ways:

  • The English language flows left to right.
  • The browser navigation works Back(left) and Forward(Right). enter image description here
  • Old 2D games like Dangerous Dave move the character to the right, when they are progressing further.

enter image description here

  • Numbers on the number line increase to the right, decrease to the left.

  • Atomic weights on the periodic table increase to the right.

  • The clock ticks to the right.

  • Calendar increases dates to the right.

I think the Windows platform has created an anti-pattern with OK/Cancel, that is now so widespread that its validating usability studies. But if you consider the factors above, I believe keeping the primary button on the right is justified and a defensible position.

EDIT: One additional factor to consider is consistency. If you expect additional buttons in your dialogue boxes, the primary button on the right edge would help to stay consistent with placement. A visual example would make this clear:

enter image description here

share|improve this answer
    
Best answer for me! –  zoidbergi Sep 26 at 10:25

I believe that the best thing to do, is to go with what has already been done.

There are pros and cons for doing it either way, but just try to do a Competitive Analysis to see which way the market is going, and base your decision on that.

Generally Windows users will be used to it being on the left.

You may also want to consider visual cues, Humans tend to recognise pictures faster than words (http://bluefaqs.com/2010/01/10-details-you-shouldnt-neglect-on-your-website/). So having a tick where the ok button is, could help, regardless of which side the button is on...

-b

share|improve this answer

I really like some of the sites where there is NO button (visually) for negative action, only a link. This way I dont have to waste time looking at buttons, I more-less know that the button does. And If i know i dont want to do what the pages wants me to, i take some time to see how would it be the best to go on (look for close button, cancel button)

so instead of:

[NOOOOO!] [CLICK ME! CLICK ME!]

there would be:

No, thank you! [Yes, please!]

This way there is not really important where you position your button, there is visually only one and therefore easy to locate.

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.