Elements of Usability Design: OK/Cancel vs Cancel/OK – Is it just a matter of taste?

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? Is 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:

If you have been using a Mac extensively, you would note that the majority of applications 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,
Dialogues 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 an option to open System Information dialog from the About box. A legacy followed for atleast a decade.

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.

OK, 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 cannot (atleast easily) change the OK/CANCEL or ABORT/RETRY/CANCEL text from a dialog. Only with Vista (how many years after Mac???) did Microsoft introduce 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 we deliver quality products.

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.

So is Microsoft Office on Mac.

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.

Now, with more and more applications moving towards web and cloud computing is taking the norm, which philosophy should your web application follow? Now 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.

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

Web applications like Wordpress use this convention.

Even Microsoft’s 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 to 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.

Now, 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 flavour) 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 centre stage, to facilitate easier printing and easier stacking of the character moulds, 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

Related posts: 

1. Usability and Visual Studio 2005 People always hate when things don’t work as they expect....
2. What is Software Usability? As a software engineer, and that too a Windows Application...

Related posts brought to you by Yet Another Related Posts Plugin. 

CodeProject