A troubled form

This form is worse than bland — it's downright unattractive. Six different techniques will improve its returns.

 

Above: This form is functional, but unappealing. Let’s do something about that.

1. Create structure with type.

Typography is an easy and effective way to improve a form right off the bat.

• Typography is easy on bandwidth, unless you go crazy with online fonts. Think before you load.
• Create a hierarchy with font size and weight. Limit your hierarchy to three levels.
• Sans-serifs are generally cleaner than serifs. They hint at everything being a little simpler.

 

Above: We enlarged text selected pieces of text — namely, headings — to grab attention before people begin the chore of entering their information. Instead getting mired down by field after field, a quick overview tells people "this is what you're in for."

Subheads, about 75% as large as the main title, suggest that this isn't one long form, but two easy-to-manage parts of the same process. We also removed the fieldsets which organize content areas, but are less necessary when typography provides better visual cues.

2. Call attention to a few key points with color.

It doesn't take much. In fact, the less color you use, the more impact it has.

• Brighten the main submit button
• Autofocus the first field to get people started. Highlight required fields

 

3. Consider your field sizes.

To paraphrase a saying, is this space really necessary? It's rare to see certain fields — like names, usernames or passwords — need as much space as this form provides.

 

Above: Reducing the fields' sizes implies that users don’t need to enter lots of text. We align fields and labels along a single vertical axis to subtly emphasize “keep going down the fields.”

4. Guide users step by step

If your form has many parts, try showing one part at a time, either with JavaScript to show/hide each part in turn or by loading different pages from the web server. People often respond better to focused pages, and can feel the urge to finish what they start, so only show them a few things at a time. Remember to indicate where they are at each step and how much more they have to go.

As an added benefit, you'll capture a few bits at a time — so if they give up at least you haven't lost everything.

5. Underscore the benefits with copywriting

Remind people that filling out the form has a definite benefit.

• "Fill out our survey for a chance to win."
• "Enter your information to join the community."
• "Please donate. In five minutes, you'll help make the world a better place."
• And importantly: "We will not share your personal information" or words to that effect. Build trust!

6. Reward users at the end.

The "thank you" page is an often-overlooked step in the form. After all, once you have their data, why shouldn’t you continue to spend time interacting with those who fill it out?

Chances are, you're not done. Building rapport with your customers doesn't end with getting their name and email address. Start to make them feel valued with a surprisingly complete "thank you" page — and maybe give them a reason to keep interacting with your business.

---