The UX of OK/Cancel buttons

By | May 8, 2007

Nice article about OK/Cancel Buttons.  I was researching this because I had to make a decision on Marketo whether or not to put the OK before the Cancel or vice-versa.  Apparently, as this study shows, MacOS X and Windows do things very differently.  Should the OK come first or last?  This is definetely an idiom that people get used to, but doesn’t really matter all that much. In fact, many web applications just do it however they want.

In general, I think that you want the user to click OK or Yes or an affirmative answer more than you want them to click a negative answer.  Therefore, using Fitt’s Law, you would try to make the affirmative button closer and bigger.  One way of doing this is to eliminate the cancel button and have an X in the top right.   But if you have to have both, the choice comes down to order.

I chose affirmative on the left and negative on the right.  Mostly because that is how people say it in english.  “Do you want to go potty Matthew?  Yes? or No?”  No or Yes isn’t the way people talk.  Mac people will have to suffer.

3 thoughts on “The UX of OK/Cancel buttons

  1. Rob Wilkerson

    Fitt’s Law or not, I don’t like the idea of removing the “Cancel” or “No” button. If it’s a choice, then the options should be presented similarly. Removing one of those options or, in this instance, obscuring it is just confusing and is likely to make users wonder if it’s supposed to be that way.

    I totally agree on the affirmative to the left and negative to the right. For the stated reason and because it’s how people read. Top to bottom, left to right. It’s also the reason I align any action buttons to the bottom right of my form or text. It’s the direction users’ eyes are moving anyway and, dammit, it just feels right. 🙂

    Reply
  2. Glen Lipka

    The thing I don’t like is when there are NO and cancel buttons right next to each other. It gives the Negative response twice as much weight.

    Interestingly in wordpress, when I insert a link using their WYSIWYG editor, the insert button is alone on the right and the cancel button is way float left. Plus they have the X to close. I actually like this. I never hit the wrong thing and it reads well.

    Unfortunately, this is difficult in certain circumstances to maintain a good pattern. Hmm, Have to think more about that. Also the project I am on uses Ext (http://extjs.com) and it seems that the options are a little limited for placement.

    Thanks for the feedback though.

    Reply
  3. Rob Wilkerson

    Most of the Ext library is heavily tied to style sheets (in my limited experience with it). You may be able to modify those to get the appearance you want.

    Agree about the No + Cancel buttons, but mostly because Cancel isn’t really part of the same choice. It’s the answer to a different question, if that makes any sense. There should be some kind of visual cue to indicate that distinction.

    Reply

Leave a Reply