You’ve spent dozens of hours and hundreds of dollars on building (or paying someone else to build) a new website, multi-platform advertising and product design. People are noticing. They’re visiting your site. They want to get in touch.
But can they?
When you think of your business that way, web forms become arguably the most important element of your website design. They facilitate a critical moment when a visitor decides they want something from you.
A smooth, digestible web form can increase conversion rates, make user interaction with your site easier and seamlessly capture contact information from your audience.
Web forms, really, are the connective tissue that bonds you with your most engaged audience. A well-designed form can reassure viewers that your brand is reliable and responsive.
That said, few people give forms the attention they deserve. To make things easier on you, we’re going to lay out the keys to successful website forms.
1. Don’t Make Them Longer Than They Need to Be
Keep your forms as short as possible by only asking for the most important information.
This serves two purposes: first, it makes the filling-out process as straightforward as possible; second, it gives confidence to users. If my postal code isn’t relevant, why should I offer it? You’ll find forms have a significantly higher conversion rate when they’re simplified, attractive and concise.
Spotify’s sign up form is a great example. They use white space for clarity and specific colors to guide users toward other login options (a big blue Facebook CTA, or Spotify’s green hyperlink text for pre-existing users). There’s also a clear opt-in for anyone who wants to make their information available to Spotify’s partners, implying your information will otherwise be kept securely within Spotify’s own database. The font is clean and the spacing is comfortable.
2. Communicate Information Clearly
Since when did asterisks become universal symbols for “required information?” Most computer-literate users will know what an asterisk indicates, but don’t assume everyone will.
If something is required, write it out, or indicate clearly at the top that asterisks denote required fields. If you require passwords to have at least one uppercase letter, one lowercase letter and one number, don’t let users find that out after they’ve typed it in—tell them upfront.
Burger King’s customer satisfaction survey is clear, on brand and fun to use, with dropdowns and a fluid character count that explains exactly how many characters you have to write out your comment.
One problem there: the asterisk clarification is written below the first asterisk. When I was filling it out to use as an example, I actually skipped the star rating to fill out the required parts, and only later got a red error message that I hadn’t given them a star ranking. That kind of illogical flow disrupts an otherwise smooth experience.
3. Focus on Flow and Logic
There’s an adage among web designers that forms should always be single columns. This is a good rule of thumb, but it’s worth noting that sometimes you can break that rule—related fields such as address, city and postal code could be laid out laterally, for example. But in those exceptional instances, the information should still flow intuitively.
But with the constant rise in mobile users, single columns remain the best option, particularly because introducing a second column might only confuse things. Would you read left-to-right across a row, or finish reading down one column and then move onto the next?
Consider this example, from Canadian videogame retailer EB Games.
While aspects of this form work well—they spell out their password requirements at the bottom, and the mandatory fields are marked by a disclaimer at the top—one would be forgiven for completing the left column before moving on to the right. There isn’t a clear flow, which clutters the screen and makes things possibly confusing.
Another aspect that trips up the flow is simply copy editing. Web designers have done the research, and found that using title casing—Making Every Word Start Capitalized—actually slows readers down. This works for article headlines, but you don’t want users tripping over your forms.
Worse still, as in the above EB Games example, is inconsistent grammar and spelling (“E-Mail address” right beside “Repeat Email Address”). It would be easier to have written “Email address,” or even simply “Email,” since the word “address” is implied here. Why bog down your own form?
4. Offer Clarity and Transparency
People are concerned about privacy, and for good reason. You can stand out from your competition by reassuring visitors about why you’re asking for certain sensitive information, and emphasizing your security measures—or linking to a page that does.
On Spotify’s signup form above, they clarify that users have the option to opt in to partner marketing emails. That creates an implicit sense of security. If you’re asking for credit card information, it’s worth adding a line to reassure customers what they’re in for.
This old form from MobileMe (a precursor to iCloud) offers a few reassuring words before asking for specific credit card information.
5. Make Error Messages Clear
Question: If you’re color blind, how would you know if a font turns red?
Answer: It’s a trick question; you shouldn’t be relying on one subtle change to inform users of an error. Consider using bold font, highlights or outlines in addition to classic bright red error.
As the folks at the Nielsen Norman Group have written, “The guidelines for creating effective error messages have been the same for 20 years.” Web form error messages should be unmistakably clear, instantly understandable, polite and constructive. People want to immediately want to know what they did wrong and how to fix it. The worst feeling is filling out a survey form for 10 minutes, only to realize that one answer is wrong and you now have to find where it is. Make it obvious.
If you can, do as much work for the user as possible. If their chosen password has no numbers and needs at least one, it’s far better to write “Your password must include at least one number” rather than “Your password does not comply with our guidelines” and make them guess why.
Web forms have come so far (and are so easy to create) that bad design is no longer an excuse. If anyone wants to get in touch with you—or pay you, or fill out a survey of yours, or anything—they should be able to as easily as possible, so you can focus on working off those leads as efficiently as possible.