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:
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:
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
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.
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.
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.
- 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:
- 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,
- 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
jordan 3 white cenment
ture religion outlet
michael kors handbags
louboutin pas cher
nike roshe runs
ray ban outlet
jordan pas cher
supra for sale
michael kors outlet
ghd hair straighteners
ugg boots sale
louis vuitton outlet
michael kors handbags
cheap oakley sunglasses
jeremy scott shoes
ralph lauren pas cher
- Mohit Dua said on July 16, 2016 at 7:45 AM ...
- caiyan said on November 25, 2016 at 7:56 AM ...
- John said on March 7, 2017 at 9:27 PM ...