Thursday, June 12, 2008

OK and Cancel Buttons: What's the Right Order?

A follow-up to Jakob Nielsen's recent article ...

"There's some debate among web designers, usability people, and other geeks who think about these kinds of things, about the correct order for "OK" and "Cancel" (or similar) buttons in a web application. There are several precedents that people point to:

* In the Windows environment, the standard has for many years stated that when the buttons are placed at the bottom of a modal window, they should be grouped together with "OK" on the left and "Cancel" on the right. See, for example, the Windows Vista User Experience Guidelines. The Sun Microsystems Java Look and Feel Design Guidelines also specifies this order. The logic behind this appears to be based on the left-to-right reading order in Western cultures, which causes "OK" (presumably the more important or commonly used button) to be read first.
* In the Macintosh environment, the standard has been the opposite: buttons at the bottom of a modal window should be grouped together with "Cancel" on the left and "OK" on the right. See, for example, the Apple Human Interface Guidelines. The logic behind this appears to be based on reading a book, where the button on the right (OK) is associated with moving forward, like turning a page in a book.
* In the web environment, there's no clear standard. The closest is perhaps the use of "Previous" and "Next" buttons in a sequence of related pages, where the de-facto standard is that "Previous" is on the left and "Next" is on the right, except on the last page where it is replaced by "Submit" or "Done".

So what's a web designer who has a need for "OK" and "Cancel" functions to do? First, let's clarify what is meant by these functions:

* OK function: This causes a pending action to be executed, such as saving some changes or submitting an order. Common labels on the web are "OK", "Save", "Submit", and "Done".
* Cancel function: This causes a pending action to be cancelled, and the user is returned to the state prior to the initiation of the action. The most common label on the web is probably "Cancel". ("Back" is sometimes used, but is easily confused with the Back function of the browser.) "Close" is a related function, but does not carry a connotation of discarding a pending action.

After some questions about the most appropriate order for these buttons on a web application came up on a usability-related email distribution list, I decided to conduct an online survey of usability and user experience professionals to see what order they think is best.

... My main takeaways from this survey are as follows:

* Avoid using grouped buttons labelled as "OK" and "Cancel" on the web (as in Question 1). There's too great a chance that your users may have a different expectation from yours about which button is which. If they're in a hurry, they might accidentally choose the wrong button.
* It's probably better to use buttons that are visually separated (although perhaps not to the extreme as the ones in this survey).
* With the buttons visually separated, putting the action to continue (e.g., OK, Save, Submit, etc) on the right is more likely to match your users' expectations.

There's an interesting article on a related topic by Luke Wroblewski about Primary and Secondary Actions in Web Forms which includes eye-tracking data."    (Continued via Measuring the User Experience, Tom Tullis)    [Usability Resources]


Post a Comment

<< Home

<< Home