Many web forms have two buttons at the bottom of the page: Submit and Cancel (or their equivalents). A user who accidentally clicks Cancel when she meant to click Submit could unintentionally lose all her form data—frustrating for any user.

In an online discussion on this topic, a poster suggested that the primary action should still have a button, but the secondary should be changed to something completely different, like a link, to avoid this type of confusion.

Would this reduce the number of times users click something they don’t mean to click? Possibly, although as mentioned in The Problem of Proximity, I still accidentally clicked the option I didn’t want out of a button and link pair because they were close together.

The trouble is that changing one button to a link introduces a new set of problems. When we mentally process elements on a page, we tend to see things in terms of their functions or category. Buttons at the bottom of a form to fall into the category of “possible actions I can take on this page.” When one option appears as a button but the other appears as a link, it looks like the two options are not in the same category. In addition, hyperlinks have a semantic meaning: they are supposed to link to related information. The fact that they can be scripted to behave like buttons doesn’t mean that it makes sense, or that doing so provides a good user experience.

As an analogy, consider the confusion that would result at a traffic intersection if the stop signal were a red light, but the go signal were a green sign. Stop and Go are possible actions at an intersection, and drivers expect them to be different variations on the same type of control: a red light or a green light.

And there are times I do want to take the secondary action. In that case, I don’t want the option to look drastically different. I want to be able to tell at a glance that it’s one of the possible actions I can take on this page.

Here’s a real-life example from familysearch.org. When I create a source, I see a bright blue button labeled Save at the bottom of the page. Next to it are two other options presented as links. For quite a while, I didn’t even realize those options were there because my eye was drawn to the large blue Save button and I subconsciously ignored the things-that-are-not-buttons when considering actions to take on this page.

But even later, when I realized that the Save and Attach option was available and would save me time, I still found myself forgetting to click it because it didn’t grab my attention and didn’t look like a button. I had to force myself to create the habit of clicking something that didn’t look like it should be clicked to process the form—definitely not an optimal user experience.

Google did a good job with their Insert Image dialog box. The primary button is clearly highlighted, but the secondary option is still the same type of control: a button.

In other words, they’re both apples. There’s no need to make one look like an orange, especially when it’s confusing to the user.