Designing a Web Form: 10 Tips for Creating Quality, Easy-to-Use Forms
Why You Should Pay Attention While Designing a Web Form
If you have been using the Internet since the late 90s, you probably remember signing up for Yahoo or Hotmail by filling out a lengthy form and then hitting the submit button just to find that the user name already exists. After two or three (or more) attempts, you would get lucky enough to finally create an account. The relief from finally completing the ordeal just can’t be described by words.
Things have changed a lot since the late 90s. Technologies like AJAX make our online life a lot easier. Today, filling out a similar form that took quite a while can be done in less than a minute. As a developer, you should be aware of certain guidelines that will help you in designing a web form that is easy for the user to fill out.
Image Credit: Wikipedia
Designing a Web Form: Top 10 Tips
1. Fonts: Fonts like Times New Roman, Arial, etc. are widely used. But it is good to experiment with new fonts, too. The current trend is to use bigger fonts. But don’t use fonts so big that the user gets tired and frustrated from scrolling up and down the form.
2. Highlight Required Fields: In a form, certain details like first name, last name, email ID and password are mandatory. Other fields like age, state, district, etc. might be optional. Let the user know which fields are mandatory and which fields are optional so that he does not waste their time filling out unwanted details while signing up.
3. Labels: When a user is filling out a form, he should know which textbox or input element stands for which field. In three words or less, mention what the input control is for. Examples: First Name, Last Name, Date of Birth, and so forth.
4. Number of Fields: When a user signs up for an account, all that you need to prompt him for is his email id, password and user name. A user will already have several user IDs and passwords to remember. Don’t make his life hectic by asking details about their family and pets. The faster the form completion process, the better the experience.
5. Hints for Input Formats: When a user clicks on a text box or radio button, highlight it so that he knows which field he is entering data in. For fields like password, if you want people to use an alpha-numeric password, please let them know by providing a suggestion so that they get a clear picture how the password should be. Same goes for other fields like Name, Date of Birth, etc.
6. Instant Feedback: When someone enters a user name (or some similar field that should not be duplicated) that he wishes to use, immediately provide him with feedback to let know if that name is available or not. Don’t let him finish signing up and hit Submit, only to then be told that another user name is needed. This is very irritating.
7. Client Side JavaScript: As a developer and as an owner of a website you really wouldn’t want the user to enter his age as “abc”, name as “123”, and so on. Use client side JavaScript and validate the form right away. This will prevent the user from submitting his form and coming back and changing the data once more.
8. Easy to Understand Error Messages: Even after following so many guidelines, errors do happen. When you let the user know what error he has committed, please use simple terms so the problem is easily fixed.
9. Submit Button: The Submit button is a thing of the past. Instead, use buttons that read Create an Account, Sign Up, Show Me My Account, etc.
10. Be Creative: Be creative and use your own ideas. But, when you design something, try to see it from a third person’s point of view as well. People always like good designs—as long as the “design” doesn’t overcomplicate the process.
Inspirations and References
Now that you know how an ideal form should be, here are some websites that have simple forms with a brilliant approach.
See how simple they are and yet get all the details that they need. In case you need more help in designing a web form, visit the following sites.
Wufoo lets you create wonderful forms for your website. Do check it out if you are in need of a quick solution when designing a web form.
Web form factory helps you with the PHP code needed to send data to the database. Web form factory can be used after you have designed the form in HTML after adding scripts, styles and images.
