Last week, I asked you to review and comment on how you would optimize this beautifully designed, but non-optimized form:

The three most common form design problems:

  1. Forms that fail to reduce fear
  2. Forms that fail to build trust and credibility
  3. Forms that fail to reinforce benefits

Unfortunately, this form page suffers from all three issues. Whenever we look at optimizing forms we should review each of the 7 form factors that affect form conversion:

  1. Size – the form looks like it will take to long because of the number of fields, and the non-unified fields running across the screen not just top down.
  2. Fields – the form asks for sensitive information like social security number and has extra fields for added family members. By the way, they do a great job with format suggestions in each field.
  3. Labels – are on top of the form fields and also there are labels that raise flags like “redemption code”
  4. Benefits – there is no list of benefits on this page
  5. Prominence – the form takes up the whole page, but individual elements are most prominent such as the $14.95 per month
  6. Call to action – “continue” is not a great call to action because it provides no sense of how many additional steps are required. The button does stand out though, but next to language which doesn’t inspire confidence – like “Current amount owed.”. No one likes to owe anything. They also offer the option to call an “855” number but few people know that that is a toll free number.
  7. Confidence building – There are no point of action assurances around providing your personal information or who the company is who is protecting your data other than a BBB logo below the fold. They do have the little question mark tool tips next to each field.

Now that we know the issues, how should they be optimized.

Paul Boomer points out the one issue that is hardest to overcome:

There are many things that could change but the single most cognitive friction is between the “$14.95 per Month/After 30-day free trial” in the new member section and the “Current Amount Owed: $14.95″ near the continue button which also has a “After 30-day free trial” below it. The mixed signals certainly gives me a reason not to continue.

You can’t set a price without establishing the value and their is no reinforcement of the value for the offer.
Adam Alter really wanted us to clear up the offer and add some confidence building elements and improve the call to action:
While suggestions would just be for testing, some things I’d consider testing:

-”Additional Member” adds a lot of clutter for those signing up alone. I’d try a plus box with “Click to add another member” then expand it. That is, if the data shows a significant solo signups.

-I’d switch the emphasis of $14.95 in the box and 30-day free trial under by trying them in the other order. “30-day free trial” and under that, “$14.95 per month after”, if they’re not charged $14.95 until after the 30 days and can cancel without paying during the trial.

-I realize this is a company based on security, but never hurts to test a pic of a lock next to a field that may be concerning, like the SSN block

-I’d also consider trying a call to action or carrot/reminder by the continue button in regards to what the consumer is looking for. “You’re 1 step away from blah blah blah” or “click and let us get to work on protecting you!”

Adding the lock thing on forms is especially important today with the increasing use of mobile browsers, since they don’t display that they are secure on their own.

yoshi points out that he wants to simplify the flow:

Item 1 should be register here, then combine 1/2 into one, terms below it and a separate link for everything else. POW!

As Xavier Colomés, a current MarketMotive student points out that there really aren’t 3 steps here:

The problem here is that the form is telling you “we’ll be here for a while”. To make it look like a much easier step-by-step process i would:
1 Split it in 2 steps. Step 3 “Terms and Conditions” is not an step, but a checkbox close to the “submit button”.
2 Remove the “Additional members” forms, and add a link “Add additional member” then this click would show up the inline form.
3 This for is asking for sensitive data. i would add some area where “why we ask you this info” is added.

The form really does look like it will take forever, and that is what happens when you place form fields side by side instead of top -down.
Mark@ Make Them Click hit on all 7 form design issues:

1: Simplify it
Well, the form just looks intimidating, seems like a lot of boxes to fill. For a start I’d look at simplifying it.

2: Split the three numbered sections
Maybe they could split the three numbered sections into three separate pages or even make it interactive so that once you complete one section, the next one becomes available. I know that adds more steps, so they should test it, but as I said the current design looks overwhelming.

3: Remove Additional Member Fields
I’m not sure the “Additional member” fields even need to be there. I have no idea what the product is, but this seems more of a sales tactic than an enrollment one. (They can always add additional members later.)

4: Remove the Intro Paragraph
I’d also question the need for the intro para at the top. If prospects have come to the site and chose to go to the Enrollment page, then you’d think they know where they are, what the site is about and what enrollment means. I really don’t think they need to be told again.

5: Reduce Lateral and Vertical Movement:
The form demands too much lateral and vertical eye movement .I have to move across the page to find and fill in all the fields and then I have to move down further to fill in more and move laterally again. Because of the sheer size of the form this definitely creates tension.

6: Subdue the Price Box
At the moment the price box is the most prominent thing on the page. This means the prospect is already focused on price rather than enrolling or what the benefit is. I’m guessing that enrollment is the primary goal of this page, so I’d subdue the price’s prominence. Again, if they’ve got this far, they probably already know what the price and the deal is.

7: Reinforce the Benefit
Somewhere on this page I’d actually re-enforce what they are actually getting. At the moment there’s nothing.

Noranshinnawy shared her top 3 picks for optimization:

– I would have a really hard time entering my social security number when I don’t see any point of action assurances.

– No need to have the form appear longer by having fields for additional members. How about a “Add a member” button that expands? That would be better than giving me 2 and the option to “remove” them.

– I like seeing the numbering of the form sections horizontally at the top, not vertically. It makes it appear to be more concise and I don’t have to scroll all the way down to see the end of the form.

Brian Schmitt who just finished up the self-paced Conversion Optimization course at MarketMotive really broke things down:

First thing my eye tells me is, wait. Where do I go first? I see a step “1″, but wow there’s a lot to do in step 1. My eyes skip step 1 and go to the gray area below it and are overwhelmed with fields and fall on the $14.95 per month text.

No one’s reading the top paragraph. Replace it with a single headline, “Get ready to breeze through security lines with your AllClear ID free trial.” Remind me why I’m giving you all my information.

I would make the Primary Account Holder’s information area all the same background color. If they want to offset it from the background of the entire page then make the area around the name the same gray.

Take the fields all into a single vertical column. Darting back and forth across the page with fields that are different lengths causes lots of eye confusion.

I would take the $14.95 per month text box and turn it into a confidence building badge on the side of the form. Then reverse the text in it. Make “30-day Free Trial” the large text, and “$14.95 per month after trial” the sub-text. I would also use this badge before users land on this page to create consistent scent. So visitors know they are following the right trail.

Bring the “Account Information” under step two under the Primary Account Holder’s info area.

I would paginate the form so after entering the primary account they have the option of clicking “Create Another Account Member” OR “Continue”.

Though I would not use the word “Continue” for the button text. I would let the user know what the next step is? Is there a credit card needed? If so it should be “Enter Payment Info” with a sub-text of “We will not charge your card until the 30 days have ended and we will send you a reminder email before we do.”

I would add a SSL Encryption confidence building badge, along with moving the BBB sticker up into the badge column running along the right side.

Get rid of the last blue text box “Current Amount Owed: $14.95″ and the sub-text under it. That’s stoping me from hitting continue. It should be a confidence builder, not a destroyer.

I might even put a small headline under the “Continue” button (after it’s improved of course) reinforcing why they are signing up, “Ready for Takeoff?” or something along these lines.

Naomi Niles, a talented designer shared:

Ooo, this one is a little tougher. I’ll take a stab at it.

Where it’s most jarring to me generally is the left-to-right direction of each of the areas on the form. It would be more natural if it was more top-down. Especially if you use the tab button on your keyboard to go to each field. If you click tab on one field, you might not know where it will end up next.

Also the left-to-right format causes a bit of overload. You feel that you must take in all of the information in each area before you can understand it enough to fill it out and that takes extra brain processing power.

Additionally, they could improve the number of input fields by joining some of them together. For example, if the “name” fields don’t need to be that way, it would be better to join them. This is also important because not everyone’s name follows the first, middle, last order. People from some other different cultures don’t follow that format.

Also, some of the labels are not directly above the fields and that could cause confusion. At the top, Relationship is not at all above the selection box and below on additional members it’s a little off too.

And, I’m not sure if this qualifies as a friction issue exactly, but it would be a good idea to indicate ssl security somewhere since they are asking for a social security number in one of the form fields.

Finally, a quick confirmation about the plan they are purchasing right on top of the continue button where the dollar amount button is would go a long way in assuring people that they picked the plan they want.

Theresa Baiocco really wants the value explained for the 4 modes of buyer personas:

The first thing that made me raise my eyebrows was the SSN: that’s pretty much the most personal piece of information you can ask a person for. Do they absolutely need it at this stage, or can they collect that later? If they MUST have it at this point, there has to be reassurance that the site is secure, and that the number won’t be shared.

Secondly, this page doesn’t consider the 4 different buyer personas. For example, a humanistic persona wants to see the people behind this company and the people they’ve helped. It would be worth testing the addition of a testimonial with a strong story about identify theft and how All Clear protects them. And the methodical persona wants to know the details of what he’s getting. Maybe this is all on other pages of the site, but it’s worth testing having it on the sign up page as well. The quick decision makers, the competitive and spontaneous personas, can’t skim the form quickly because the flow isn’t intuitive.

I agree with several of the comments above, as well:
– focus on benefits and how they’re relevant to the user
– emphasize the free trial, not the $14.95 cost
– replace the additional members fields with a plus sign, which allows people to add as many additional members as they want (currently, it seems they are limited to 2. What if they have more people in their family??). And what if they don’t have a redemption code? I assume the question mark next to that field explains what it is, but I wonder whether that’s like a coupon code, which practically tells people to leave the site to find one…
– terms and conditions is not a step
– reduce or eliminate the intro sentences and integrate the age requirement into the form, itself
– on step 2, what happens if that address has NOT been my primary address for 2 years? And why does that matter?
– what happens when I press the continue button? The text should be more descriptive so users know what to expect.
– the BBB logo should be more prominent, along with any other trust symbols that tell users that this is a reputable company that can be trusted with personal information — like an SSN!
– they should read Steve Krug’s book, Don’t Make Me Think, because there are too many areas that aren’t intuitive, and that make me wonder what they mean or what is going to happen

This is a great example of how professional design does not equate to persuasion! Thanks for putting it out there and generating good discussion fodder!

We have many  great points on how to optimize this beautiful but complex form. I am not sure if by tweaking it, it will reach the maximum opportunity for conversion. A rethinking of the process is in order.

I would break this up into a three step process of progressive disclosure. The first step would be designed to capture the lead. You can ask for things such as name, email address and phone number while making sure to reinforce the value of your offer. Once that information is gathered, you can ask for birthday, credit card and billing address to setup the account. Again at this step you still need to reinforce the benefits. Lastly, I would ask for social security information and additional members could be added at this step once they are already paying customers. This would be the activation step.

When designing forms take these points into your planning:

  1. Use a simple vertical layout and vertical aligned labels where possible
  2. If vertical aligned labels are not possible, use bold left-aligned labels
  3. When more than one field is placed on a line, ensure that they are designed to look like a single piece of information
  4. Emphasize the headers if you want users to read them
  5. If optional fields are needed, make them clear instead of using asterisks for mandatory fields
  6. Use single field for numbers or postcodes, allow input in various forms
  7. Let users focus on their task and avoid distractions
  8. Use real time feedback carefully
  9. If possible, place tips at the side of the relevant fields
  10. Provide users with a progress indicator showing them the steps involved to complete the form