views:

224

answers:

8

Windows and OS X have always bumped heads on this, but what is the general concensus on whether a Save button or Cancel button goes first in a web application?

[Save] [Cancel]

or

[Cancel] [Save]

Note: I have these buttons at the top of the form flush to the right.

+2  A: 

It's probably not a big difference either way, as long as it is clear what the buttons do. My personal vote would be to have save on the left, as that is what people do the most often, and people read left-to-right.

Also, I would also put some space between the buttons, to make sure users don't accidently click one when they are trying to click the other.

GSto
+1  A: 

I generally put the button which will cause the most actions to occur farthest away from the center. If your buttons are top-right, my order would be [Cancel][Save]

Matthew Jones
+6  A: 

Follow the principle of least astonishment: do it the Windows way ([Save] [Cancel]) unless you have reason to believe that Mac users make up a greater portion of your user base.

phenry
This seems pretty unusual. Are there many Windows forms that have the Cancel button at the top-right?
Bennett McElwee
+2  A: 

Instinctively I always put the Save button as the rightmost element.

I think there are other things to consider. Primarily whether a Cancel button is actually needed, or whether another element (such as a breadcrumb trail pointing to the previous page) might be more appropriate.

Edit: http://www.lukew.com/resources/articles/web_forms.html - The section 'Primary and Secondary Actions' shows how visual weighting can be used to good effect as well.

NathanGaskin
+1  A: 

Familiarity is often more important than being objectively correct, since things that are unfamiliar are often, by default, less usable.

People use their Windows PC or their Mac more than your app or website. So if I were in your shoes, I'd pick the order which you think will be familiar to the users you care most about. If it's a mostly-mac audience, do it the mac way. If mostly PC audience, do it the PC way.

Justin Grant
I guess one thing I could do is detect User Agent and for Safari users push it one way using CSS and another for non-Safari users though that may be volatile.
Nissan Fan
@Nissan, don't make it different in different browsers. That would be very confusing for users who switch browsers.
tster
+1  A: 

Why do you need a cancel button at all?

On a web form, the user can almost always cancel through some other action. Putting "Cancel" near "Save" is creating a situation where the user has a good chance of firing the ejection seat when all they want to do is save.

Alex Feinman
I disagree with the first part, but the second part is spot on. I've thought about using larger buttons for commits than Cancels, but it just looks outright ugly.
Nissan Fan
+1  A: 

For all the heated arguments this issue can generate, it doesn’t seem to make much difference in actual human performance. The advantages and disadvantages of each work out to a wash. Users appear equally likely to expect Cancel on either the left or right in web forms. There appears to be a bias to favor Cancel on the left if the buttons are widely separated, but you don’t want to do that since putting the Execute button the far right is associated with slow responses and high error rates on web forms.

I’d say the most important thing is to be internally consistent in you app, and be sure Cancel is always labeled “Cancel” (not, say, “Return” like I saw in one web app). Otherwise, put the buttons next to each other and near the last field the user will look at (which is probably not in the upper right of the form).

And don’t worry about it too much.

Michael Zuschlag
A: 

On a normal form, Save should be under the form fields. Cancel should be to the left or right of Save, but not too close to avoid tragic mistakes. Luke W's Web Application Form Design page has some illuminating diagrams.

Your form is unusual in that you want the buttons to be at the top. In this case I'd need to know what the page looks like and how it will be used. But since you're already breaking any flow between form fields and Save, I suspect Save should be on the right to support the natural left-to-right path.

(Windows and Mac have differing standards for button placement on dialog boxes, and they both have the buttons at the bottom. These standards do not apply to web pages.)

Bennett McElwee