Creative Direction | Lesson #51
Streamline Forms for More Follow-through
Learn to design forms and encourage users to fill them out.
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
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.
About the instructor
Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.