The other day, this article got sent around Microsoft. Then I saw it on Digg. And then again on Ajaxian. And I couldn’t let this article have such a surge of popularity without a response, because the conclusion is flawed.

I encourage you to read the article for yourself. Basically it discusses the “Submit” and “Cancel” buttons at the end of web forms. Wroblewski classifies “Submit” as the primary action and “Cancel” as the secondary action, and argues that the secondary action should be absent from forms all together, or at least differentiated so that the secondary action receives less prominence on the page. He claims this makes the user experience “better, ” which, according to the article, is measured by fewer errors (i.e., hitting “Cancel” when you mean to hit “Submit”).

So let’s look at the study. He looked at 6 submit/cancel varieties. If you want to see visuals of the 6 choices, check his article or the Ajaxian article, but I’ve whipped up basic examples of what he tested below:

  1. Choice A: Size/Style Distinction
    A form screen shot with the submit and cancel buttons left aligned.  Submit is to the left of cancel.  Submit appears as a button and cancel appears as a link.
  2. Choice B: Standard-Left
    A form screen shot with the submit and cancel buttons left aligned.  Submit is to the left of cancel.
  3. Choice C: Color Distinction
    A form screen shot with the submit and cancel buttons left aligned.  Submit is to the left of cancel.  Submit appears as a blue button and cancel appears as a gray button.
  4. Choice D: Standard-Right
    A form screen shot with the submit and cancel buttons right aligned.  Submit is to the left of cancel.
  5. Choice E: Mac-Style + Large Space
    A form screen shot with the submit button right-aligned and the cancel button left-aligned.
  6. Choice F: Standard-Center
    A form screen shot with the submit and cancel buttons middle aligned.  Submit is to the left of cancel.

Ultimately, it’s Wroblewski’s goal to prove to you that Choice A and Choice C were “better” than Choice B, which is apparent in his summary: “When choosing between primary and secondary actions, visual distinctions are a useful method for helping people make good choices.” But look at what his study actually said:

  1. Choice A and Choice C each had exactly the same error rate as Choice B (0%).
  2. Choice B was actually faster than either Choice A or Choice C because people didn’t have to sit and think about why there were two different-looking things at the bottom of the form.
    (And did you catch the last line of the article? “The less time people have to spend on your forms, the happier they will be.”)

Yes, it’s true that people said they felt more comfortable with being forced to stop and think about which selection they made, since they could “quite easily have selected the wrong one, ” but remember: Humans are inherently bad at introspection. So asking, “Hey, can you go back and tell me about why you took longer?” won’t result in meaningful data.

And for that matter, what does that quote even mean? Of course you could have easily selected the wrong one, it’s a button right next to the other one! It’s true for all menus and buttons in the world of UI Design!!

But did you select the wrong button? According to the research, it wasn’t even an issue.

So even if, upon being forced to think about submitting the information on a form, users feel better about pausing, the pause is simply unnecessary. In the grand scheme of things, Option B was the better choice according to the study, which undermines Wroblewski’s conclusion (and in my mind, his upcoming book).

The designer side of me dislikes this conclusion, to be honest. I really like the color distinction model in Option C quite a bit. I think it’s stylish, and it reflects the underlying actions quite well. In fact, I may still use it in future designs despite these usability findings, because I’m willing to trade off the speed that comes with similarity in button design.

But Wroblewski has focused on the inaccurate, subjective accounts of the participants and ignored his own data in coming to his conclusion. Take it to heart as an important lesson: Despite usability’s recent upswing in popularity in the public sphere, not all usability is accurate. Read with critical eyes.

Be Sociable, Share!

Average Rating: 5 out of 5 based on 269 user reviews.

The conversation continues...

  1. On September 11th, 2007 at 5:12 am, Eric said:

    Good eye Z. The study’s conclusions are indeed flawed. I also think one reason that option E might have failed is because, not only were the placements of the buttons different, but they were in reverse order from the other 5. But this reverse ordering wasn’t explored at all. Furthermore, how can you attempt to make any valid generalizations when you don’t have a big enough sample to distinguish between designs? I also like option C, but I think its effect is limited with only two options. Maybe if there were several secondary options presented, the one different colored button would stick out. Who knows. You’d probably have to do an actual scientific study to find out.

  2. On September 11th, 2007 at 5:33 pm, zsz said:

    @Kayre… haha, thanks!! Round here I’m called a “tweener” – but I always like being called a designer. :)

  3. On September 11th, 2007 at 5:05 pm, Kayre said:

    “I really like the color distinction model in Option C quite a bit. I think it’s stylish, and it reflects the underlying actions quite well. In fact, I may still use it in future designs despite these usability findings, because I’m willing to trade off the speed that comes with similarity in button design.”

    wow. you really ARE a designer! =Þ

  4. On September 12th, 2007 at 4:34 pm, Tracy said:

    But why even have an option? If you’re not going to submit the form, wouldn’t most people just abandon the page?

    Is it better useability to offer the “Never Mind” or Cancel option?

What do you think?