Designing User-Friendly Forms Tutorial Author - Shreedhan (http://forums.biorust.com/member.php?userid=9699)

Computers were designed to take burden off of the human mind, and we expect them to work properly. Being the user-conscious designers that we are, our job is to make it make it simple for people to interact with our website.  This tutorial describes key principles for effective design of user-friendly data entry forms.  Most of these are very simple, but it is often the simple things that we overlook.  No specific programming language is used for any of the suggestions below, so you should be able to relate the information to almost any programming language.


Using the Right Field
I have come across many sites which don't know how to use fields — but who can blame them? With so many choices between inputs, they can be all too complicated. I will guide you through the ones which cause the most confusion:

• Use radio buttons when options are mutually exclusive; i.e. when you can't select both options, e.g. Gender.
• Checkboxes should be used when the user can select as many or as little (including zero) choices as they want. This is commonly seen when subscribing to various newsletters.
• A single checkbox should be used when the user has a choice of a Boolean value, e.g. on and off.

That should help you get the basic concept of good form design.

Now comes the more tricky part of deciding where to use drop–down instead of radio buttons — after all, they do the same job. The only advice I can give is do what looks right to you. There comes a point where radio button after radio button is just too confusing for the user. As a guide I generally stick to a 5–button maximum before I change to the ol’ drop–down list.


Basic guidelines
There are some basic rules when designing a form that will make the life of the user that much easier.

• Use Subheadings — to separate sections of your forms, this will make it easier to scan through the choices and make them easier to understand.
• Design your lists vertically — as this makes it easier for the user to see varying choices and make a decision. Basically, do not put all of your radio buttons one after the other; use a new line for each choice.
• The “other” option — helps people who are in a gray area with the choices provided. If it seems like there is an endless list, type in the ones which are most obvious to the majority but always add an “other” option, supplemented by a textbox.

• Provide a default — option for radio buttons and drop–down lists. By definition these inputs require at least one option to be selected.
• Use positive wording — rather than negatives. For example use “Yes, I would like to receive your monthly newsletter” next to a checkbox rather than “No, I would not like to receive your monthly newsletter”. The reason behind this is because the user associates the checked state with a yes or no response.
   

Get rid of useless fields
The user doesn't want to be swamped with fields that even you don't care about. So, it's up to you to select which fields you need. To do this, just ask yourself the following questions.

• Is this piece of information valuable to us?
• Is this piece of information necessary to allow the user to proceed?

You need to answer those questions for each field you have. You will have noticed how major forums have adopted this when you register. There used to be a time where it was “the thing to do” to have fields up to infinity which there user could fill in. They then realised knowing users' favourite colour or animal wasn't necessary, so now all you see is username, password and e–mail fields, because that's all they really need.  The rest can be filled in at another time at their leisure, and if they so desire.


Make required fields clear
Sure, error messages show the user that they missed a mandatory field, but it shouldn't be because the user couldn't tell what was mandatory and what wasn't. It has become the standard to add little asterisk and add a “* indicates a required field” footnote at the end of the form. I believe that we can achieve a better result with some minor changes. By using bold and italics we can make it clearer as to which fields are required. Also by placing “Mandatory fields are bolded” message just above the first input, it will ensure that user sees it and complies.


Use error messages that actually tell you what's wrong
If you're like me and are prone to mistakes, you've probably seen the generic “You missed a required field” error message one too many times. These types of error messages don't give the user any actual information apart from “You've done something wrong” — it doesn't provide information on how to fix this error. This is why you should deviate from the generic message to give a detailed description of the problem, e.g. “You left the name field blank, please go back and fill it in.”

If it's an error on your end then replace cryptic messages such as “Payment Error: CODE 15” with “Sorry, there seems to be a problem with our system. You have not been charged, please try again later.” A Code 15 may mean something to the technicians on the 3rd floor but to a consumer it means nothing, so they'll just end up getting confused and most likely head over to your competitor's site.

By using some simple CSS you can differentiate the erroneous field to all the rest. This will avoid the user having to search through the whole form bit by bit to identify where the problem lies.


Don't clear the form
This is related to error messages. After you've given the user the bad news, you don't want to send them back to a blank form when they only need to correct one field. The only exception is blank password fields; apart from that all data the user previously entered should remain intact.


Text Formatting
Phone numbers can be entered in several ways:

• (08000) 000 000
• 08000 000000
• (08000).000.000

It all depends on which way the user is used to entering the data. There are three ways to solve this problem:

1. Tell the user how you require the data to be entered along with an example, e.g. “Phone Number (excl. spaces and punctuation) e.g. 0800000000”. (Of course you shouldn't put this hefty chunk of text as the label of the field.)
2. Provide separate textboxes for each part of the phone number. In the UK we generally separate phone numbers into two parts so you'd have one textbox for the 5–digit area code and one 6–digit textbox for the second part.
3. Use PHP or a similar language to strip the field of punctuation and spaces

Easy, easier, easiest
Now that have learned these concepts you can go and apply them to your forms and spread the word — your visitors will thank you!