If you’re looking to collect information from your users, there isn’t a much easier or more straightforward method than a Web form. If designed well, Web forms provide valuable information; if not, they may scare users away. With this in mind, here are a few key tenets of Web form design that every designer should know.
1. Build Conservatively and Design With a Purpose
Let’s face it: No one likes spending a long time filling out a form. Keep it short and simple and eliminate elements that aren’t absolutely necessary or that don’t offer a tangible benefit. Make sure every part of your form is pulling its weight, and your users will thank you.
The structure of your form should serve just as much of a functional purpose as its elements. When laying out your form, keep in mind that, at least in the Western world, people read from top to bottom and left to right. They also often use the Tab key to move around the form. Your design should reflect this through intuitive labeling and natural placement of elements. And, of course, your form should never look scattered or haphazard — make sure everything is evenly spaced and neatly arranged.
2. Tailor Your Form to the Situation
Every form you make should be tailored to the specific situation it addresses. When you’re planning the design of your form, ask yourself the following questions: What are you asking? Why? What does your Web design look like with and without the form? Is the form something users want to fill out, or is it something they’re required to fill out? Your answers to these questions should help dictate the layout and content of your form.
3. Use What You Need
When deciding whether to add an element to your form, ask yourself if you could do without it. If the answer is “yes,” don’t use it.
One element that’s almost always unnecessary is the Reset button. These relics still make an appearance now and then, but they should be avoided. Think about it: When you want to change information on a form, it doesn’t matter if the field is already filled out or not, so why would you even need to erase all the information? The only thing the Reset button is good for is accidentally clearing all the information your user just entered and aggravating them enough that they’ll go somewhere else instead of taking the effort to fill out the form again.
4. Use Short, Clean Descriptions When Necessary
You may need to explain why you are collecting certain information on your form, especially when users are loathe to share it, like with phone numbers or e-mail addresses. This not only helps reduce user confusion, but also ensures that the data is accurate and correctly formatted.
Any descriptions and comments should be clean and concise. You may also want to format them with different colors, sizes, or styles to help set them apart. Just be sure not to overdo it — after all, you don’t want your descriptions to look tacky or drown out the rest of your form.
5. Be the First to Communicate
Make sure the wording in your form is friendly and user oriented. Here’s a simple trick for writing conversational copy: Pretend you’re actually talking with your user.
If you want to know someone’s name, you aren’t going to stare them in the eyes with a rigid expression and demand, “Full name.” That would just be creepy. If you were looking to garner a positive response from this person, you would instead open with a smile and say, “Hi, what’s your name?”
6. Divide the Form Into Bite-Sized Sections
Communication involves the exchange of ideas in small, manageable sections. You introduce yourself, and the other person does the same. You mention what you do for a living, and the other person has a comment or question. You remark back, or answer, and this prompts another response. In a good conversation, the information is a steady, back-and-forth flow.
A form, being another method of communication, should be the same way. You may be asking for quite a bit of information, but that doesn’t mean you have to throw it all at the user in a huge block. Try using horizontal rules, colored bars, meaningful images, or headings that match the design of your site to separate the information into small, easily understood chunks. If all else fails, spread your form out across multiple pages and add a progress bar across the top so users know about how much they have left.
7. Include Meaningful Contextual Error Messages
Your error messages should be helpful and clear. Specify in the message which field caused the error, and highlight the label and/or the field itself. After all, no one likes hunting through a form for an elusive field they overlooked the first time around.
8. Release the User
When the user clicks the Submit button, they think they’re done, and they’re ready to move on. They’re basically saying, “Here’s the info you wanted. Talk to you later!”
In a real conversation, you’d give them a wave, say, “Bye,” and walk off, or give them some other way of acknowledging that the communication is done. Your form should be no different. Have your form programmed so it sends the user to a custom page that tells them something like, “Thank you for your submission! You’ll be hearing from us shortly.” There should also be a link back to the main page of your Website.
Share on Facebook
