Site
Management
IndexRelated Article(s): |
Contributed by Steve
Print 
Email
Creating user friendly HTML forms
Forms are important web devices: they make us money on
ecommerce sites, enable user feedback, submit search queries and provide the
ability to enter information into web databases. Although form usability is one
of the easier tasks, it is also one of the most neglected.
Provided below are 7 simple techniques to help you design usable forms.
#1: Provide default form values
Default values keep your user from entering in fairly obvious information. If
your site caters to users in the United States, and you have a form that
requests the user's contact information, default the 'Country' value to 'United
States'. If you run an ecommerce site and store the names, addresses, phone
numbers, etc of all your users, default those particular values within your
forms to the respective value in your database if the user is logged in.
#2: Set the user's cursor to the first form field
One of the nicer things that you can do for your users is place the user's
cursor, automatically, in the form's first field. This prevents your user from
having to take their mouse and click within the first field.
Javascript's ONLOAD function provides the ability to place your user's cursor
within the respective form field. Consider the following code snippet:
<body onload="document.getElementById('firstfield').focus()">
The ONLOAD function is placed within the BODY tag of the HTML document. Change 'firstfield'
to the name of the first field within your form.
#3: Only ask for necessary information
The last thing users want to do is sit at your site filling in form information
that really doesn't relate to what they're doing. If you're designing a user
account creation form, for example, the user's place of birth probably doesn't
matter, nor is it relavent what the user's favorite color is. Of course, include
the fields that you need to know, but only those. Resist the urge to profile
your users. Even if you don't require unnecessary fields, they still clutter up
your feedback form. Keep these fields to a minimum.
#4: Validate, but do not over validate, your forms
Form validation is a must; it prevents those mischievous users from submitting
completely blank forms. It is perfectly acceptable to require names, email
address, phone numbers and the like, but it is quite easy to fall into the trap
of over validation.
For example, if users submit their phone numbers like this: 111.111.1111 instead
of like this: (111) 111,1111, who cares? Don't throw a form error because the
user doesn't format their numbers according to your various preferences.
Instead, either accept different formats for field values or write code to
reformat those fields on the fly (automatically) before submitting.
Similarly, credit card numbers are big business online. Have you ever
experienced an online business that requires credit card numbers to be provided
using the xxxx-xxxx-xxxx-xxxx format, instead of xxxxxxxxxxxxxxxx? Those forms
are poorly designed and exhibit below par usability. Let users format their data
as they like, within reason. Of course, your credit card validation needs to
ensure that 16 digits exist (not including dashes), but do not validate the mere
use of dashes.
#5: Size your textboxes according to expected value
If you are asking for an 8-digit password, do not display a textbox that spans
30 characters. Logically, users interpret the size of your textboxes to indicate
the expected size of the value. Use a textbox size that relates directly to the
size of the value, and use the maxlength attribute if values cannot exceed a
specific character threshold.
#6: Resist the use of the Reset button
Users get very little use out of the Reset button. Thus, they provide very
little utility and actually work to harm some hasty users. Imagine taking 15
minutes to fill out a feedback form, then accidently hit the Reset button
instead of the Submit button. Instantly, the last 15 minutes of your life has
been needlessly wasted. More likely than not, the user will not take the time to
supply the information again, and if they do, they do so under duress and are
more prone to silly mistakes. To avoid annoying your users, do not include a
reset button.
#7: Use labels to enhance form element "clickability"
The label tag makes it possible to click the label text of a form element
instead of the form element itself. For example, consider the following:
Instead of clicking on the radio button, try clicking on the text next to it.
The radio button next to the respective text becomes active. Here's the code:
<label for="Radio1">Radio Button #1</label>
<input type="radio" id="Radio1" name="myRadio">
<label for="Radio2">Radio Button #2</label>
<input type="radio" id="Radio2" name="myRadio">
Author: Steve : sdWorkPlace.com