OK-CANCEL vs CANCEL-OK

OK, many of the programmers would have been confused as how to design a dialog on your website. In what order should the dialog contain the OK and Cancel Buttons? Should it be OK - Cancel like Windows or Cancel - OK like the Mac? Are there any "rule of thumb" why a certain standard should be followed? Or is it just a matter of taste? Firstly Apple's Human Interface Guidelines state that, rather than OK or Cancel, use the action verb that determines what the user is going to perform. KDE for Linux and Microsoft's own Human Interface Guidelines also state the same. For example, the screenshot of Smultron, (a text editor I use extensively on Mac) shows the dialog like this.

Smultron - Shows Save/Don't Save over OK/Cancel

If you have been using a Mac extensively, you would note that, majority of application use this philosophy. The reason? Minimalist Design. Your UI shouldn't be cluttered. A traditional Microsoft dialog would be like, The document has unsaved changes. Quitting this application will really make you lose all your changes. If you really want to lose them click OK, else click Cancel.

What's the problem with this design?

Lack of minimalism.

People prefer minimalistic user interface. According to Jakob Nielsen's Heuristics for User Interface Design, one of his heuristics for usablity design states that, dialogs should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

In the Smultron's case, the user needn't even read what the application is trying to say. The buttons are marked clearly and user can click an option with confidence. It follows minimalism. Mac users appreciate this minimalism. The UI is uncluttered with unwanted options unlike Windows.

Look at this screenshot taken from Office 2010. It has a option to open System Information dialog from the About box. A legacy followed for at least a decade.

Why do we need a shortcut to system info dialog from Outlook?

Users will only be confused with this kind of workflow, wherein I have to open Outlook to see my system information. A minimalistic UI shouldn't be cluttered like this.

If Microsoft is making these kind of silly usability mistakes, why should Windows programmers also follow the same cluttered, "un-minimalistic" UI design? Don't shout at me, I'm also a Windows Developer. The reason, until Windows Vista a Windows Programmer could not (at least not easily) change the OK/CANCEL or ABORT/RETRY/CANCEL text from a dialog. Only with Vista (how many years after Mac?) did Microsoft introduced Task Dialog. Only with a task dialog can the developer change the button face text easily. You might have noticed the changes in Windows Vista's Notepad or Paint's dialog. Only with better SDK, can quality products be delivered.

Paint Save dialog

Now coming to the order of buttons, our main topic, after a useful digression, should it be OK-CANCEL or CANCEL-OK? Mac introduced GUI far before Windows (of course Apple copied it unabashedly from Xerox PARC Labs).

I would say if you are a platform developer, follow the platform conventions. For example, iTunes on Windows follows Microsoft's conventions of OK-CANCEL rather than CANCEL-OK like Mac.

iTunes preferences on Windows Vista

So is Microsoft Office on Mac.

Preferences Pane of Word 2008 for Macintosh

Why is this so? Because you should not confuse users. Cancel - OK might be superior for Apple. But when it comes to Windows development, they follow the platform conventions. So did Microsoft.

With more and more applications moving towards web and with cloud computing is becoming the norm, which philosophy should your web application follow?

That's an interesting question.

Apple chose that any "positive action" should be on the right and negative actions should be on the left. Why? Because the real world has been modeled like that. See this link (opens in new window). Long long ago, when people hated left handers, they used the word "gauche" (which actually means left) for anything that's awkward and now Oxford says the meaning of gauche is awkward.. Slowly, it has been hardwired into our brain that left means something awkward. Another reason, why over 75% of countries drive on the right is because of this. (Though driving on the left has recorded lesser accidents because, when you drive on the left you can react quickly to oncoming vehicles which is to your right).

Apple's philosophy of choosing positives on the right can be seen throughout the UI. The desktop icons are aligned from the right. Any task panes/toolboxes are placed on your right (unless you are a left handed person, you usually leave your pen on the right side of the writing pad isn't it?)

The close button is placed on the left top corner as opposed to the right corner. The "Don't Save" button is to the left of the Save button.

Tasks pane on XP

Office shows the tasks pane on the right

Microsoft never follow any sort of convention. Windows Explorer's tasks are placed on the left where as Office shows its tasks pane on the right. I've literally no idea, why it's like this by design.

Web applications like Wordpress uses this convention.

Publish button is to the right, Delete is to the left.

Even Microsoft's Bing uses this convention!

Even Bing uses this convention!

The download button is to the right. The normal Microsoft convention is to have it at the center when there is only one button. Any website you visit will have "Actions" to the right and "Navigation" links to the left. For example, your shopping carts are always to the right in a majority of cases.

Though Windows had a huge market share, why did web developers stick with the Mac way of doing things? Because the browser philosophy was like that. To go the the previous page, you click the button to the left, to move forward, you click the button to the right. The philosophy is, to progress forward click the "Right" button. A variety of web forms use this philosophy. Look at the location of "Sign in" boxes on Yahoo and Gmail. They are placed on the right.

Critics claim that since English is written from left to right, the icon ordering and the order of buttons should follow the other way round. If I'm not wrong, the world's first written language, Chinese (not the Mandarin flavor) was written top to bottom, right to left. Why did the Chinese write that way? Because, intuitively, it was the most comfortable way to read. But when the printing industry took the center stage, to facilitate easier printing and easier stacking of the character molds, they followed this left to right norm and it still stays like that till date. Sometimes technological limitations force us to do things the wrong way. We all use QWERTY keyboard over DVORAK keyboard though DVORAK was designed for humans and is ergonomically superior to QWERTY. It happens. Can't help it. But don't let something like that happen again. You may end up getting carpal tunnel like syndromes for your eyes!

So in my opinion, ordering of buttons or layouts is not just a matter of taste. Follow platform conventions when targeting a platform. Else follow the "Apple way" or the right way.

--

Mugunth
http://blog.mugunthkumar.com/tech/elements-of-usability-design-okcancel-vs-cancelok-is-it-just-a-matter-of-taste/



About the Author

Mugunth Kumar

Developer of iPhone Apps, Windows Apps, Web Apps... http://mugunthkumar.com

Comments

  • Nice article

    Posted by Ajay Vijay on 09/14/2009 09:43am

    There are right-handers and left-handers. But we read English in left-to-right only. So, finding positive early is good approach; that's why OK on left is appropriate. In Mac, it's on right, but locating it take some time (in milliseconds, I agree!).
    Tasks in Windows explorer are on left side, the reason is Tree-view which is being replaced by 'Tasks'.
    I somewhat would agree with your point on Word, and other Office applications. But, still, I would say in Word we type from left-to-right and we mostly use left-aligned or justified-alignment, and in both cases text is left aligned. So the workflow goes naturally from left to right!

    Reply
  • Good, but needs some work

    Posted by DJ_Chandler on 08/06/2009 06:01am

    Good article. I've read another article on GUI design similar to this that points out the need for message box button names to reflect their action rather than always being Yes/No/Cancel or OK/Cancel. Of course, any Windows GUI programmer worth their salt would be able to make their own message box with customisable text in the buttons, but most don't bother because (1) it's easier to use the standard Windows message box (as mentioned in the article) and (2) they follow Microsoft's bad example! Only those who use Macs - or read articles like this - usually see there is a better way to present information in a minimal GUI than Microsoft's. I also said the article needs some work. It needs some editing to correct grammatical errors and make it easier to read, especially for native speaking Englishmen and pedants - like me! Derek

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Available On-Demand Today's changing workforce dynamics, economic challenges, and technological advances are placing immense pressure on business leaders to turn their focus on people – their most valuable asset – in order to remain competitive. Research shows that a significant number of new employees quit within one year of taking a new job*. Whether it's through a merger and acquisition, or standard hiring process, like any first impression, early experiences shape their opinions of their new …

  • Do you know where your data is? Consumer cloud-based file sharing services store your sensitive company data on servers outside of your control, outside of your policy and regulatory guidelines – maybe even outside your country – and not managed by you. The potential for data leakage, security breaches, and harm to your business is enormous. Download this white paper to learn about file sync and share alternatives that allow you to manage and protect your sensitive data while integrating and …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds