|
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:
- 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.)
- 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.
- 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!
- Tutorial written by Shreedhan
|
