Here's a question for the group. We are setting up our dirty fields checks for a multi-page form. We are setting it to be triggered when the user tries to navigate away, close tab, etc. One case that came up is the case of cancel. I am of the opinion that if someone clicks on cancel, they are implicitly saying that they want to leave and abandon (not save) all of their work. So asking them "do you want to save" adds an extra (and extra-annoying) step. Members of my team, however, are concerned about the possiblity of users canceling out accidentally and losing their work. This is a fair concern, but I suspect that the number of folks who explicitly want to leave the page without saving and who, thus, would be annoyed by the extra dialog, would be much bigger than the group that accidentally hit 'cancel' accidentally. What do you all think?
2 Answers
A simpler solution would be just auto save the form data at regular intervals so that even if your users accidentally click out and then return they can continue using the form at the state they were at.
Smashing magazine has this nice solution on how you could ensure autosaves on forms - Auto-Save User’s Input In Your Forms With HTML5 And Sisyphus.js
However in the case of cancel since its an explicit instruction to abandon a form, asking a person to confirm it would annoy them even more and prevent them from leaving immediately which was their expected behavior. That said, design your from in such a way that cancel is not accidentally clicked while the user was trying to submit a form or go to the next page.
That said I strongly recommend reading this article on UX Movement which recommends against the cancel button on forms. To quote the article
Cancel buttons don’t belong on forms for a couple of reasons. One reason is that it gives users the opportunity to accidentally click on it when it’s mistaken for the Submit button. Removing the Cancel button completely removes the chances of this mistake happening.
A Cancel button may also communicate to users that the Back button doesn’t work on the form page. Of course, the Back button does work, but the Cancel button can give users the impression that the only way out of the form page is through the Cancel button.
Most users have a habit of relying on the Back button when they land on a page they don’t want. A form page should not change that. The Back button is what users are comfortable and familiar with. Because of that, maintaining that consistency on every page is important. Form pages should look and function like any other page. There’s no room for Cancel buttons on forms, but they do have a rightful place in other user interface situations. There are two situations where Cancel buttons are proper.
-
Thanks for the answer @Mervin. We are likely stuck with the cancel link at present, but the additional resources you shared will be good food for thought if we rethink the value of them on the page in the future.– Rath_ErMar 11, 2014 at 22:03
Cancel is really only needed if there's a strong reason to navigate back to where you came from. If that's needed, then I agree with you, there's (usually) no need for a 'are you sure?' type of annoyance.
If the concern is people accidentally selecting 'cancel' when they meant 'save' then this is perhaps a visual design challenge. Make sure there's no visual confusion between the two and that they aren't so close in proximity that stray clicks/taps are an issue.
