OK/Cancel on left/right?

Question

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

Are there any studies suggesting either of the solutions?

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

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.

Answer 9

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)

Answer 10

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.

Answer 11

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.

Answer 12

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!

Answer 13

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?

Answer 14

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.

Answer 15

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

Answer 16

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.

Answer 17

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.

Answer 18

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.

Answer 19

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

Answer 20

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.

Answer 21

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

Answer 22

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.

Answer 23

I just wrote an article about OK/Cancel buttons on my Samsung TV. I went with the prev/next kind of solution.

Poor UX: Samsung le40c635k1w TV