Web Usability: Save and Cancel … or … Cancel and Save?

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.

Save Dialog when User Cancel

I need to save a file from different locations in my application, so I created a sub for that; everything work just fine, except when a user clicks cancel when the save dialog shows up; if user clicks

MFMailComposeViewController save/delete/cancel

I have added MFMailComposeViewController to my application. In the MFMailComposeViewController there is a button at the top of left side name Cancel. When i click the cancel button it shows an UIActio

jquery dialog save cancel button styling

I am using jquery ui dialogs in my application. How do I style the Save and Cancel buttons differently in a jquery dialog? So Save is more appealing than the Cancel. I could use a hyper link f

Save and cancel button posting the form

I am having 2 buttons namely Save and Cancel on my Profile.cshtml. Now my method is something like: [HttpPost] public ActionResult Profile() { //code.. } This save the records into database. But prob

Change default arrangement of Save and Cancel buttons in SaveFileDialog

I m coding in c# and I want to change the default arrangement of ‘Save’ and ‘Cancel’ buttons in SaveFileDialog. The default arrangement is that the ‘Save’ button is above the ‘Cancel’ button. What I w

Entity Framework 4 Save and Cancel

I’m currently testing the entity framework 4 for a simple app I wish to build. I’ve searched high and low for the answer to this without any luck!! My question is how do you save and cancel changes on

Always visible save / cancel elements inside DIV?

I’m rendering DIV elements as rows. The edit template for this form is quite long. I have a small save and cancel button on the top left of the edit template DIV. I would like the command buttons to b

Cancel saving model when using pre_save in django

I have a model: class A(models.Model): number = models.IntegerField() But when I call A.save(), I want to ensure that number is a prime (or other conditions), or the save instruction should be cancel

Save,Cancel Button Not working in joomla 2.5

I have change something in joomla contact component,basically i d’nt want the editor in contact component instead of this i want to place something,when i have remove the editor,the save,cancel button

Removing save,cancel options while pressing previous button blackberry

Whenever i press the Back or previous button on the blackberry simulator everytime it asks whether to save cancel or discard? I don’t want that to be shown at all .Please anybody help me to remove tha

Answers

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.

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]

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.

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.

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.

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.

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.

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.)

The key here is that we are talking “web” usability. To that point, I think it is pretty clear that the principal of least astonishment referenced in the accepted answer would suggest that right is the forward action (save) and left is the backwards action (cancel), and not what the accepted answer suggests.

The web browser is the user interface web users are most accustomed to, and 15+ years of web browsing has made it pretty clear that the back button is to the left of the forward button. It also jives with the left to right based languages that the web was initially developed for. The right is where you are going, the left is where you have been.

Even in general computer vernacular, a forward slash, /, leans right while a back slash, /, leans left.

The windows UI is the outlier here, and I think it is a poor decision to base your UI design on Microsoft’s precedence.

I might point out that your top right corner positioning of the two buttons is non-standard, but I don’t think it bears on the ordering of the buttons themselves.