Form Fail

The quality of form design, in general, on the web continues to be a huge source of frustration for users and an embarassment for all of us who are involved in designing and building sites.

Here is a payment page that I needed to traverse recently…

Firstly, as originally served:

Payment Page

And, here once I’d disabled CSS:

Payment Page - No CSS

It took me a few attempts to even work out what was happening. Initially I just assumed that the page had somehow not completely loaded.

Then I highlighted the area where the labels should be and realised that they were actually white text on a white background!

I’m guessing that in this case the design is incompetent rather than malicious.

Perhaps it works fine in Internet Explorer? Who knows.

I was determined, so worked it out.  But, I expect I’m an exception.

If they measured their conversion rates on this page, surely they would find that a significant number of people simply give up, unable to work it out.

So, you have to assume that they probably never bothered to measure.

Of course, none of the intelligent and experienced people who take the time to read this blog would ever make a mistake as outrageous as that. Would you?

You might be surprised …

Let me try and debunk some axioms of registration page design, and in the process highlight a simple mistake that I would guess many of you have made without even realising it (I can only say that with confidence because I’ve made it myself many times).

To start, a question… what is the difference between these two forms?

Form Fail - With Tick Box

Form A: with tick-box

Form Fail - Sans Tick Box

Form B: without tick-box

Which is easier to use?  Or, to ask the same question in a more measurable way: which would have a higher conversion rate?

As we’ll see there is evidence to suggest that Form B is a much better design.

So, why are registration pages like Form A nearly ubiquitous?

Here are some possible reasons I can think of (if there are others, please let me know)…

Legal reasons

In case it’s not obvious, I’m not a lawyer!

If there are any lawyers reading I’d be interested to get an informed opinion on this.

My guess is that it doesn’t make any material difference.

Just think about how this would sound in court: “But, your honour, they ticked the box when they registered!”. Yeah, right.

And, even so, at what cost this additional legal protection? How many fewer registrations can you afford before it’s worth taking the risk?

Because everybody else does

This is probably getting closer to the major reason for the ubiquity.

And, there is something to be said for consistency. But, surely only when it doesn’t hurt!  Lemmings!

Just because everybody else does something, that doesn’t excuse us from measuring and understanding the impact of our design decisions.

How hard is it to tick a box?

Now we’re getting to the interesting bit…

I was recently talking to Nigel about some of the work he did on improving the StarNow registration page. This is the first example I’d come across where somebody had actually taken the time to measure specifically where people were failing on this sort of registration form.

It turned out, in their case, that 27.9% of people didn’t tick the box the first time, and as a result got a validation error. What’s more this only compounded other problems. When the tick box validation error was displayed the password fields were reset (as is common, unless you explicitly set these values when the page is returned, which is frowned upon by security types). So, of course, many people would read the error message, scroll down and tick the box, only to find that the form still didn’t submit successfully as they also needed to re-enter the password.

Does this sound familiar? I know I’ve been through this exact dance myself many times, and I consider myself a pretty savvy web user.

Overall they found that over 34% of people who attempted to complete the page (i.e. pushed the submit button at least once) abandoned the site without successfully completing their registration process.

By making simple changes they decreased this to 17%. That’s a staggering 26% improvement!

So, some suggestions:

  1. Ditch the tick-box from your registration page.
  2. If your lawyer complains ask them to justify the cost, which you will now be able to quantify.
  3. Re-populate password fields on post-back. Or, if you’re not comfortable doing that for security reasons, at least highlight the fields that people will need to re-enter to avoid further error messages.
  4. Most importantly: take the time to measure and understand exactly where people are failing on your site, then do something about it!

10 thoughts on “Form Fail”

  1. Hi Rowan,

    Nice CSS-mangling example :)

    I wouldn’t suggest refilling the password boxes, as a simple View-Source will show the password to someone with access to your machine.

    However, as well as highlighting the password text boxes, you could also consider editing any validation messages to remind the user to re-enter the password: e.g. “Please accept the terms and conditions, and re-enter your password to continue”, or you could even change your form to only ask for the missing information on the second submit.


    1. You’re right, of course.

      But, why would they need to view the source when they could just get the password from the post-it on the monitor?


  2. Every online form designer/developer should read this book by Luke Wroblewski

    Personally I’m a huge fan of placing form labels ABOVE the input boxes – usability tests I’ve observed have shown this to be far more effective (way lower error rates).

    Although the Fly Buys website has the horrid ‘Terms & Conditions’ checkbox you mentioned, and is overly long, it is otherwise good form design. Check-out the error validation messages which wrap around the form field in question.

  3. I’ve tried to get rid of tick boxes and yes, it’s hard (but not impossible) to get ‘legal’ to agree on a change like that *le sigh*.

    They see it as a digital equivalent of a signature (although I don’t see how clicking a checkbox is so different to clicking a button)

    You might have seen this before, but it always gives me a laugh:

    “How to get your cat to agree to end user license agreements”

    1. Matt, I hadn’t seen that cat post, but it’s brilliant.

      Even better, the legal opinion that is linked at the end, with this (which basically supports what I proposed in the post)…

      More important than the specific facts and result of the hypothetical case involving Simba the agreeable cat, are the fundamental principles that support virtually universal recognition that online agreements, provided they are presented properly, are generally enforceable, even in the absence of express assent — a significant legal foundation upon which our Internet economy depends.

  4. The legal argument is that by actively ticking something you cannot claim you weren’t aware of the requirement. Otherwise, you could claim “I never knew. I didn’t agree to that…had I known I would never have signed up”.

    Your argument – “hope you don’t get sued” is a scary prospect for a company. If you do get sued then even if you win the legal costs could be staggering. And you’ll be forced to change it to a tick box in the end.

    More scary is the prospect of a class action suit by thousands of customers.

    In this case, I am resigned to accepting the pragmatic reality that a few litigious a-holes ruin it for the decent and reasonable among us.

    I pick my battles, and this is one instance where I’m willing to accept defeat.

    1. Thanks for your comment Phil.

      For me picking battles is all about weighing up risk vs reward.

      Leaving out the tick box isn’t about hoping you don’t get sued. It’s about understanding exactly how much legal protection the tick box is actually providing (my argument: probably not much) and balancing that against the benefits in terms of increased registrations (my argument: you don’t really know this until you measure it – but for StarNow this was a staggering 26%).

      The questions that should be asked about the tick box:

      Lawyer: “What is the additional risk?” (i.e. over and above the existing risks) Developer: “What is the additional cost?” (i.e. in terms of abandoned registrations)

      For most businesses the thought of so many prospective customers never making it through the registration process should be much more scary than the risk of possible litigation.

  5. Using JavaScript to validate a form I imagine would be quite an affective implementation and time saver for the user, considering how long it takes to post back a form and load the whole page again.

    I like how Travel Bug does it on the post comment form:

  6. yes i agree, user should be making as little clicks and typings as possible through regro and purchase…

    if they make me wait more than 3 mins in the check out line in supermarket, i would hire someone to do the shopping for me….

    people really hate waiting & typing stuff into browser…really, i’ve seen computer rage from 14 all-the-way-to 65 years old.

    and for the older users [i taught 2 of them how to use internet], always ask me: why do i have to put in a user name and password ***every single time!!***


    so… i’m now having 2 buttoms under login box…
    [login] and [always login]?, the **always login**has a ? beside it, it’s a tool tip explains auto login also a warning of “please log out if you are using public computer”, both buttons has a tooltip also and different colour.

    and re-login window should be using light-boxes, instead of waiting for new page to load.

    for people over 50s, most have some difficulty with their hands.

    In last company i worked for, at least 50% of users from 45 upwards perfer phone order to avoid typing…or online ordering.

    most business people can’t be bothered ordering online, because there’r too many clicks… so they just emailed or MSN or skyped…

    the “next page” or “1, 2, 3…” button actually are too small or annoying..anything that takes user’s attention away has little aesthetic value.

Comments are closed.