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.

29 comments:

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

 
洛噷 said on January 17, 2018 at 4:00 AM ...

2018117 leilei3915
canada goose
uggs outlet
christian louboutin shoes
nfl jerseys
canada goose jackets
canada goose
michael kors outlet
oakley sunglasses wholesale
prada outlet
coach outlet

 
Nadia Butt said on April 5, 2018 at 6:02 AM ...

Hi admin,
I have read this article and i have seen that you have a very good information share.
buy bed sheets
buy bed sheet online pakistan
buy bed sheets near me
Buy bedsheets online in Pakistan
Buy bedsheets online

 
Zz Zz said on April 16, 2018 at 8:54 PM ...

fred perry polo
christian louboutin
coach outlet online
christian louboutin shoes
birkenstock sandals
air max 2018
louboutin shoes
timberland outlet
fitflops sale
pandora charms
clb20180417

 
ProEssays said on May 2, 2018 at 10:06 AM ...

Thnk u for this post. It was interesting for me and my friends! I am working on some custom essay writing service. If u r interest in u can fallow https://proessays.net/

 
ruting aaa said on May 14, 2018 at 4:20 AM ...

hermes belt
nike lebron soldier 10
hermes belt
nmd
nike zoom running shoe
crazy explosive
nike foamposite
adidas superstars
off white
air force 1

 
ruting aaa said on June 3, 2018 at 10:20 PM ...

van cleef
chrome hearts online
kd 10
nike lebron soldier 10
nike zoom
off white x jordan 1
adidas tubular shadow
curry 5

 
dong dong23 said on July 4, 2018 at 6:08 AM ...

nike blazer
argentina world cup jersey
ralph lauren
nike roshe run
hermes outlet
nike air max
tommy hilfiger
air force 1
oakley sunglasses
bijoux swarovski
2018.7.4linying

 
洛噷 said on August 20, 2018 at 5:50 AM ...

2018820 LEILEI3915
christian louboutin outlet
true religion
ralph lauren outlet
coach factory outlet
ralph lauren shirts
ray ban sunglasse
coach outlet store
michael kors handbags
canada goose outlet store
fitflops sale clearance

 
Yesi Nurazizah said on September 4, 2018 at 12:52 AM ...

Thank you, the article is very petrifying

Tips Untuk Menormalkan Kanker Kelenjar Getah Bening
Cara Cepat Untuk Menghilangkan Panu
Obat Alami Untuk Kuku Cantengan
Obat Herbal Untuk Penyakit Paru Obstruktif Kronis

 
Toni Myran said on September 12, 2018 at 2:17 PM ...

With assignments piling up during the academic right throughout the year it makes sense to start looking for the answer to that question Who can do my homework for me? as soon as possible. As the saying goes, the best time was yesterday, the second best time is now! So once you’ve decided to take the plunge and go looking for some professional academic help with your homework there are quite a few things you should know before you choose the service you need.

If you are fed up with so many assignments or you have tried to determine what to write, but you cannot find anything, then you do not need to worry. A student needs to have free time to have fun and relax. The homework online services for sale is an ideal solution for any student who is overwhelmed or cannot find time for his or her assignments. Expert writers http://do-my-homework-for.me/ write assignments excellently in order to help students to succeed in their careers. The service is offered at an affordable price and it is available whenever you need it.

 
chenlili said on September 14, 2018 at 9:24 PM ...

canada goose outlet
nike air force 1
ugg boots
adidas superstar
valentino
ugg outlet
nike epic react
x-large clothing
christian louboutin
givenchy handbags
20189.15chenjinyan

 

Post a Comment