de-emphasizing cancel

Question

Is it a good idea to de-emphasize the cancel button?

^{download bmml source – Wireframes created with Balsamiq Mockups}

vs.

^{download bmml source}

Answer 1

Jakob Nielsen said that removing the Reset (or cancel) button helps usability most of the time:

Because Back is such a strong behavior on the Web, it is usually not necessary to offer explicit Cancel buttons. If the user asks for something but doesn't want it, then you can be sure that it's Back button time.

Offer a Cancel button when users may fear that they have committed to something they want to avoid. Having an explicit way to Cancel provides an extra feeling of safety that is not afforded by simply leaving.

Some questions here too: Is it not advisable to have a visible cancel option when performing a action such as delete,

In what sense do your users need to be able to cancel? If they could just "cancel" by hitting the back button, that would be my advice.

If you need to have the cancel button, I think de-emphasizing it and making it just a text link is the way to go. That way the users will focus on the Save button, which moves them forward in the process, and the default action is obvious. If this were an e-commerce process, you'd want to move users forward through the conversion process rather than giving the backwards option (or the getting out option) equal weight. Having these buttons in the "Save - Cancel" order matches Windows' order (7, at least; not sure about 8), so it feels a bit more natural.

Answer 2

I'll go somewhat against the general flow here and say that it depends on the situation that you are using them in. Remember that de-emphasising the cancel button is in effect making whatever other option that is presented the default. So it is more a question of whether it is a better choice to make that the default or not.

If you are asking something trivial with no large consequences, then de-emphasising the cancel button is a good choice.Also when the cancel button is asked as part of a flow of many parts, such as a multi-part form, then it also makes a lot of sense.

In fact, in many situations where you could use a de-emphasised signup button, you should question whether you even need the cancel button in the first place.

However, when the cancel button is there to protect against an action with critical consequences, you should not only not de-emphasise it, but you should make it the default. When the cancel button appears as part of a prompt. Imagine the following prompt, and then think about it.

Are you sure that you want to delete your account? All data will be permanently lost.

Answer 3

Yes, you should de-emphasize the cancel button (resp. style it differently).

No, you shouldn't make it look like a link.

I think styling it as a link gives a false impression. Some might think they could open that "link" in a tab. Some looking for a way to cancel the input might not recognize that "link" because they are looking for a button. And it's simply not consistent.

You should use a different way to de-emphasize it, for example:

• by size:
  • make it smaller (in height/width and/or font size)
• by color:
  • make it colorless while giving the submit form a color
  • color the submit button in green and the cancel button in red
• by position:
  • position them not directly next to each other (I do not prefer this as you might still easily confuse with them)
• by symbolism:
  • adding a checkmark symbol (or similar) to the submit button and nothing to cancel button

Another way (but never saw it before anywhere) might be to require two clicks on the cancel button before it cancels the form. After the first click the label/button text changes to something like "Do you really want to cancel? All your entered data will be lost.". Someone having the wish to explicitly cancel a form will probably pay attention if this action succeeds and therefor notice the "click again" confirmation.

Answer 4

I agree with David's answer.

If you must have a Cancel button visible, a link would certainly reduce it's hierarchy. However if it doesn't follow your style guide, you can have two button, just have the "Save" button in green for example, while the cancel in light gray (or a slight difference from it's background).