7 Steps to Useable Forms
About the Author
Keith Reichley
Keith is an experienced Web developer, technical writer, seminar presenter and owner/developer of WEBtheJOINT.com, a Web resource center for small business. Most of Keith's technical efforts these days are spent in the cause of furthuring user-friendly, easily navigable and maintainable Internet/intranet sites.
By: Keith Reichley
September 7th, 2001
Ever the dutiful husband, I used to veg on the couch with my pregnant wife as we watched the most relaxing show in television history: "The Joy of Painting" hosted by the late Bob Ross on PBS. The ease with which he could knock off a landscape painting in twenty minutes made this the perfect Saturday morning fare for people not in a hurry to be anywhere. Every painting, if memory serves, had at least one happy little cloud in it. Each week Bob would say, "I feel a happy little cloud coming on, don't you?" We sure did.
Now, shift to the harsher reality of the Internet. Think of your Website as one of Bob's landscape paintings. You've got a great navigation scheme in the foreground, and a wealth of valuable and well-written content in the background. Pretty. But what about your site's forms? Are they "happy little forms", or are they obstacles that drive away potential customers because they're confusing, obtrusive, lengthy and unresponsive?
Follow these 7 steps to make your forms - and your users - happy:
1) Get to the Point
You may be asking for too much information. Users are reluctant to volunteer information, especially if what you're asking for seems irrelevant. For example, if you have a newsletter sign-up form, users will usually feel comfortable enough to provide their email address, but probably not their street address, age, and gender. If you do ask for extra information, clearly indicate why you're asking for it and what you intend to do with it.
Don't force users to scroll down to the first input field. I've seen forms whose input fields are buried under a scroll or two of introductory text. If you really need a short novel to help your visitor understand the form, consider placing it below all the input fields. An anchor link at the top of the form can take a visitor to the text as needed.
2) Provide Field Focus
This easy "nice-to-have" puts the cursor directly into the first input field (first_name) when the form is displayed. Use the BODY onLoad event, you can save your visitors a click of the mouse:
<BODY onLoad="document.forms[0].first_name.focus();">
3) Add Help Information
Sure, fields labeled "First Name" and "Last Name" don't need much of an introduction, but less obvious and more obscure fields might. Also, it wouldn't hurt to provide some direction in situations where formatting is an issue. For example, for a date field you might prompt the user with the desired date format:
<INPUT ...
onFocus="window.status='Enter date in MM/DD/YY format'"
onBlur="window.status=''">
The onFocus and onBlur attributes in your <INPUT> tag will display and remove, respectively, your helpful hints in the browser's status bar.
Another and probably more visible method of providing field-level help information is to "pre-fill" the value of the INPUT or TEXTAREA element:
<INPUT ... value="- Help info goes here -"
onClick="document.forms[0].first_name.value='';">
When the visitor clicks into the INPUT box, your default value disappears and the visitor is ready to type.
4) Use Tables for Alignment
Another way to increase the usability of a form is to align the form's elements in a two-column non-bordered table -- the labels in the first column with the input boxes, selects, and checkboxes etc. in the second column.
5) Control Input Field Size
Provide visual clues in terms of expected response from users by varying the width of the input fields. For example, for a "middle initial" field, you would replace the default wide input box with a much smaller one by adding the SIZE attribute:
<INPUT TYPE=TEXT NAME=middleinitial SIZE=1 MAXLENGTH=1>
Add the MAXLENGTH attribute if you want some control over the amount of text that can be entered into the box.
For textareas (larger multi-line input boxes) use the ROWS and COLS attributes to control the size of the display:
<TEXTAREA NAME=comments ROWS=3 COLS=40></TEXTAREA>
Be sure to test these settings in various browsers. IE and Netscape render them differently.
6) Provide a Clear Confirmation Message
What does the visitor see after the form is submitted? At a minimum you should clearly confirm that the form has been received - send them to a receipt message display on a Web page. You should also tell them what happens next - "Your feedback will be answered within two business days", or "Your order will be processed within 72 hours". While you're at it, provide clear and prominent navigation to guide them to other logical destinations.
Depending on the purpose of the form, sending an email confirmation can also be a real service to the submitter. In your email, restate your confirmation message along with the data that the visitor submitted. For example, for an order form, include in the email the product, price and shipping information that the customer has submitted.
7) Beyond Happy Little Forms
This is a bonus for all the work you've done in steps 1-6 to optimize your forms. Tired of the same old look for INPUT and TEXTAREAs? Add some color, change borders and get crazy by applying a style sheet to your form elements.
<style>
input, textarea, select {
font-family: Arial, sans serif;
font-size: 20pt;
color: #ffffff;
background-color: #000000;
border-width: medium;
border-style: ridge;
border-color: #00FF00;
}
</style>
As a Web professional, I don't generally recommend this kind of tomfoolery, but if your site's a fun thing where color and wackiness abound, go for it. Just don't tell self-appointed usability sheriff Jakob Nielsen that you got this from me. I'll never hear the end of it.
...and may happy little forms dot the skies of your Website!