A few of us at GS Design had the opportunity to attend An Event Apart, a conference for Web developers with a focus on best practices in Website development. One of the many speakers there was Luke Wroblewski. Luke’s experience was in Web form development for companies like eBay, Yahoo!, and others.
The big take-away was that forms require a lot of work to do right. A completed form starts a conversation, and a good form experience can make the difference between connecting with a new site visitor – or turning them away forever. Here’s the business reason from Wroblewski’s book Web Form Design: Form redesigns have been shown to result in a 10-40% increase in completion rates.
What makes for a good form? This is a subject on which books have been written, but here are a few basics:
The Path to Completion is Clear
People. Don’t. Read. Websites. They scan them. The eye wants to follow a straight path. Forms should guide the eye from top to bottom with as little unnecessary wandering as possible. The key phrase here is “unnecessary wandering.”
There are some field patterns that our eyes have become accustomed to that might seem to break the “straight path from top to bottom” pattern. For example, putting “city, state, ZIP” in a single line leading the eye left to right instead of top to bottom might seem to violate this rule. But we are familiar with that address pattern on postal mail. Sometimes the familiar experience is the best choice.
Gather Only What is Necessary
Form design by committee is doomed to failure. What starts as a simple e-newsletter sign-up form with only an e-mail address required can balloon into something that will drive away potential subscribers. A big, intimidating form will make site visitors quickly think, “I have better things to do.” Just like in our offline relationships, the information we share about ourselves is a graduated process. There are just some things you don’t ask on a first date.
Distractions are Removed
Notice how Amazon.com’s pages become less “noisy” when you’re entering the final checkout. All of the “90% buy the item featured on this page“-type content is removed. A shopper actually has to go out of his/her way to leave the shopping experience as an encouragement to complete the form – and the sale.
Give Immediate Feedback on Progress
Thanks to AJAX techniques, rich real-time interactions with the Web browser are possible without full page reloads. In the case of forms, field validations can take place on a keystroke-by-keystroke basis, guiding the site visitor toward a successful validated form the first time without the iterative submit-form/fix-errors/repeat-as-often-as-necessary pattern in years past.
All said, good form design is not easy. At GS Design, we have found that a well-designed and developed functional form can take many times longer to design and develop than a static form-less page. But such forms are the business end of the Web. The time taken is well worth it if it establishes connections with site visitors.
This is a huge subject! In the months to come, I hope to showcase some specific examples of Good Form(s) and the thinking behind them. What constitutes a good form is more a matter of philosophy versus a hard bullet-point list of commandments.
