HTML & CSS Direct Study

Designing Web Forms

• Choose the right field -- Depending on the data that you are trying to receive from the users it is very important to choose the correct type of field. Radio buttons can be used when only one choice can be selected. A user cannot select multiple buttons. Check boxes when a user has the option to select multiple choices (including zero or one). Drop down boxes are great for having a lot of different options, but the user only selects one (list of states or country).
  
• Field Length -- When you provide a user with an area to type text (e.g. Name fields, comment fields, home address, or emails) make sure to provide them with plenty of space. If the space is too short users will not be able to correctly enter the information. Also, make sure the the box is large enough to see all of the text they are typing so that the user can read the entered information.
  
• Mandatory Fields -- When creating forms make sure that you do not ask users for unnecessary information. What are you going to gain from each piece of information that they give you? If you gain nothing then do not include it. Furthermore, when you are deciding which fields are mandatory ensure that if the information is not crucial to completing the current transaction to not force the users to provide it and give them a choice.
  
• Descriptive Labels -- Each information field should have some type of label that explains to the users the information wanted. If fields are placed without labels the users would not enter valuable data and get easily confused on which information they are being asked to provide.
  
• Formatting -- Let the computer do the automatic formatting. This way the user can only enter in information the correctly fits that format. This can help solve data errors as well as incomplete data.
  
• Error Messages -- If there is an error in the data that the user has supplied it is important to tell them which part of the information is incorrect. Do not just keep returning them to the form without giving the correct feedback on information. By correctly giving good error messages problems can be troubleshooted much more easily.
• Wording -- It is important to use active and positive words in your check boxes and radio buttons. This will not only give a positive overall image to your site, but keep customers upbeat and understanding of the process. Layout of fields is as important as wording. Make sure to break up different fields by subheadings or groupings. Using both of these techniques will ensure that fields are identifiable and users know which information they are agreeing to provide.
  
• List Presentation -- When presenting a list of choices try to list them in a vertical fashion. This will clearly show which choice goes with which bubble. In a horizontal instance the bubbles and options can become very confusing on which go together.
  

• Clean, Simple Solutions -- Keep forms short and simple. Users will often become overwhelmed and skim through information or even not fill it out at all. Simple forms can be user friendly and quick. Allowing you to get the correct information and the user to not waste time.
  
• Be Creative -- As IT Professionals we have all seen a billion dull, boring forms. Add something to your form that makes it interesting, furthermore this will create and overall "difference" about your site. Some creative options could involve: Flash, short puzzles, side bars, images, and colorful forms.
  
• Use Illustrations -- Use appropriate images this will brighten up your form, while also making the user feel that the form is useful and making the form more comfortable.
  
• More Functions -- By adding functions such as font styles, links, or picture add ins you can let you users be creative and provide more feedback. They are likely to provide relevant feedback if you give them the resources to use correctly.
  
• Icons -- Use Icons as click-able buttons. By placing icons on buttons such as submit, reset, comment, or other functions. This will have these options stand out, therefore having a higher likely hood of being used by users correctly.