Eight Rules for Effective Web Forms
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.
Here are a few standard form layouts that you should use as a starting point for more creative designs:
Left-Aligned Labels With Vertically Stacked Fields
This form features left-aligned labels with neatly ordered fields stacked on top of one another. This gives the eye an easy-to-follow path down the form, which is especially helpful if you're asking questions users may not be familiar with. Because they're able to read down the list of questions without the visual interruption of an input field, they'll be able to concentrate more on what you're asking. This layout does tend to make for longer form completion times because of the amount of time it takes for the eye to move from the label to the input field.
Right-Aligned Labels With Vertically Stacked Fields
Right-aligning your labels can help make them easier to distinguish and quicker to read, and also eliminates awkward spaces between labels and input fields. However, this can be harder to read. It also looks jagged, which can be a bit unattractive.
Top-Aligned Labels
Top-aligned labels like these make for a form that's quicker and easier to fill out because the eye doesn't have to move as far between the label and the input field. This type of layout also gives you the freedom to place related fields next to each other, which can save space.
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. This form, which asks for information in order to provide a quote for printing services, is a good example of a form that effectively uses descriptions:
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?"
Keeping this in mind, instead of prompting your user with the label "Full Name," try something a little more personable, like, "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.
And that's it! Keep these rules in mind when designing your next Web form, and you may be surprised at the quantity and quality of feedback you receive as a result.
Labels: Web Design
3 Comments:
Good guide post its helps a lot to looks your web better.
Thanks for a interesting guide share post.
i like this blog.
Very Good Post :P
Logi Koncept Inc - Web Designing, Development, Human Resoureces
I like to subscribe this blog then plz give me detail procedure kindly inform me when you have update this blog in future.
Post a Comment
Subscribe to Post Comments [Atom]
<< Home