Welcome to the home of Donavon West. An independent consultant and Microsoft MVP. I'll be discussung things that are near and dear to me, including life, love, technology and politics. Are you looking for Donavon Stinson? Or possibly even Donavon Frankenreiter? (man, that dude is everywhere!)

This Blog | Home Server Hacks | LiveGadgets.net | The Swatch | VehiCROSS.net | Explore the Studio Space | Chuck Todd Facts

For years we've been presented with dialogs and web pages that ask us OK or Cancel. But what order do they belong in? I've always placed my action button (e.g. OK, Save, Yes) to the left and the negative action (e.g. Cancel, No) on the right. This came from growing up on Windows. Mac people do it backwards (in my opinion), placing the OK/Cancel buttons in reverse order (i.e Cancel/OK).

The Apple Human Interface Guide states:

Always put the action button in the bottom-right corner of the alert. This is the button that completes the action that the user initiated before the alert was displayed.

In other words, Apple says Cancel/OK as shown here:

image

Microsoft's Windows User Experience Interaction Guidlines state:

Place command buttons that apply to all property pages at the bottom of the property window. Right-align the buttons and use this order (from left to right): OK, Cancel, and Apply.

And as you can see, Microsoft says OK/Cancel as shown here:

image 

What do the popular web sites do?

So much for the OS. How does this translate into apps for the web where the OS is not the one who positions the buttons? Let's take a look at some popular web applications to see what they do to try and answer the question: Should you code your buttons OK/Cancel or Cancel/OK?

Google Apps: OK/Cancel

image

Facebook: OK/Cancel

image

Evernote: Cancel/OK

The people at Evernote seem to have come from the Mac world. In fact, the Windows desktop version of the application even has a Mac OS X Spotlight looking search box (see below). It's no wonder they chose Cancel/OK.

image

image

PayPal: OK/Cancel

image

And the winner is…

It's pretty clear that the majority of the web community has embraced the OK/Cancel format. But here's one more site that I'd like to show you. It does what I believe is the best way to present choices to the user on the web.

LinkedIn: OK/Cancel*

 image

As you can see, they use the OK/Cancel left to right format, but are using a button for OK action and a link for the Cancel or negative action. This allows the user to quickly perform the task they intended to do, yet still provides them with a mechanism for canceling the operation.

So to answer the original question "Should you code your buttons OK/Cancel or Cancel/OK?", then answer is OK/Cancel, but with an asterisk. You should use a button for OK and a link for cancel. As always, this is only my opinion. You particular situation may require a different approach.

18 comments:

xentek said on September 3, 2009 at 12:37 AM ...

These results are pretty inconclusive, and do not necessarily show a clear winner. However, the convention of OK/Cancel only seem to have stuck because of the dominance of the Windows platform.

However, in all of your examples from the web, only Linked In seems to have nailed the fact that the 'cancel' action should be made less prominent then the other option(s).

 
timmay! said on September 3, 2009 at 5:01 PM ...

This has been dealt with quite extensively by interface design pros...and it's not so much a formula of OK/Cancel or Cancel/OK.
You didn't touch at all on the visual communication of the colors, font weights, placement/alignment with the form fields they serve, etc. If you're really good at "visual communication" then it may not even matter what order you put your buttons in.
You're getting at that somewhat with the "Ok button-cancel link" conclusion, but the real power of some of your examples (namely LinkedIn) come from the contrast of visual weights and,therefore, relative importance of one action compared to the other.

 
Kalpesh Soni said on September 3, 2009 at 8:32 PM ...

and why should it be a link for cancel?

 
Jay said on September 3, 2009 at 9:37 PM ...

Buttons are typically used for POST events, while links are used for GET events. Cancel is a GET to a new page, while the button is a POST that will affect the application state.

 
Barak said on September 29, 2009 at 3:12 AM ...

Check out this article:
http://www.tinyurl.com/26pzcn

 
Gonzalo González Mora said on October 2, 2009 at 8:57 AM ...

While the GET/POST reason is right, I think what's more important is that users will, most of the time, want to Save/Proceed instead of Cancel it, so it's appropriate to highlight the most common task.

Another thing to note is that the cancel should have a confirmation dialog when possible, as it's a "destructive" task.

 
hong_hai_long said on November 19, 2010 at 3:50 AM ...

I've read some good stuff here. Definitely worth bookmarking for revisiting.
windows 7 home basic

 
dissertationconsultant said on February 15, 2013 at 1:08 AM ...

I am grateful to found such helpful postCancel Buttons and the Web. I actually increased my information after read your blog post which will be valuable for me,

uk dissertation

 
devil jiang said on April 23, 2014 at 4:16 AM ...

This volume begins with Walter and gucci replica Alucard talking as they prepare to chase the Nazis down to their hidden location in South America. They chanel replica quickly reminisce over the mission they thought they had completed the first time, but somehow a part of Millennium had survived to complete their work. Seras finishes replica handbags her preparations for the pending battle.

 
Mark Wright said on September 25, 2014 at 6:01 AM ...

I must say,It is a great reminder that there is always room for improvement. Thanks for the great examples and inspiration.
Buy Essays Uk

 
papa young said on March 28, 2015 at 4:11 AM ...

cheap. is cheap ray ban aviators sunglasses played by Ann freezing rain. cheap heard Ann sleet, or heard of. What movies. cheap ray ban wayfarer sunglassescheap took from the hands of cheap ray ban sunglasses australia cheap movie tickets and asked the. Written above it, cheap ray ban sunglasses australia providential cause, cheap ray ban sunglasses australia big ice cheap ray ban sunglasses online cream, sale immediately go out and buy a large number, and then took two a spoon ready to share with

 
dongdong said on March 3, 2016 at 10:22 PM ...

kate spade outlet
canada goose jackets
louis vuitton outlet
prada outlet
prada bags
toms outlet
jordan 3 white cenment
converse shoes
michael kors
burberry outlet
ture religion outlet
burberry uk
reebok uk
juicy couture
cartier glasses
omega watches
michael kors handbags
louboutin pas cher
nike roshe runs
ray ban outlet
jordan pas cher
rolex submariner
supra for sale
michael kors outlet
burberry
levis jeans
ghd hair straighteners
ugg boots sale
louis vuitton outlet
michael kors handbags
asics shoes
reebok
converse sale
cheap oakley sunglasses
fitflops outlet
adidas originals
prada
jeremy scott shoes
nike tn
ralph lauren pas cher
20163.4wengdongdong

 
Mohit Dua said on July 16, 2016 at 7:45 AM ...

this is really great,unique and very informative post, i like it. thanks.
apk games
kik messenger apk
popcorn time apk
kingroot apk
pou apk

 
caiyan said on November 25, 2016 at 7:56 AM ...

christian louboutin outlet
nike store
michael kors canada
coach outlet
supra for sale
north face jackets
adidas nmd
true religion outlet store
canada goose outlet
longchamp handbags
20161125caiyan

 
John said on March 7, 2017 at 9:27 PM ...

tory burch sale
nike uk
hermes bags
michael kors bags
michael kors bags
oakley sunglasses on sale
michael kors outlet online
discount oakley sunglasses
longchamps
coach outlet online
chenshanshan20170308

 
evelyndana09@gmail.com said on July 13, 2017 at 8:54 AM ...

Usually it ought to terribly tough to cash if it is now not official hours. That’s why we have a propensity to feel you ample and commenced twenty 4 hour offerings.
check casher

 
xumeiqing said on July 19, 2017 at 4:35 AM ...

20170719meiqing
cheap nike air max
michael kors outlet
coach outlet
birkenstock sandals
timberland boots
red bottoms
oakley sunglasses outlet
polo ralph lauren outlet
coach outlet
longchamp uk

 
John Snow said on November 21, 2017 at 1:46 AM ...


Fantastic blog you have here but I was wondering if you knew of any user discussion forums that cover the
same topics talked about here? I’d really love to be a part of online community where e-slovensko I can get suggestions from other experienced individuals that share the same interest. If you have any recommendations, please let me know.

 

Post a Comment