Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Collect Data Efficiently
The goal of a form is to collect the necessary data as quickly and easily as possible. To accomplish this, consider the following:
Group elements by topic.
Determine whether a single page or multiple pages are necessary.
Make it easy for your users.
Use functional forms with visual appeal.
Let's take a closer look at each one.
Group Elements by Topic
To make the form as intuitive as possible, group the individual items that you need to collect, such as the following:
Contact information—First name, last name, address, city, state, ZIP code, Social Security number, and birth date. (This can also include company information, or company information can be separate.)
Billing information—Credit card number, expiration date, and billing address.
Newsletters—A list of every newsletter on your site that you would like a user to sign up for.
When you have more than one group on a single page, provide a visual separator between each group. Separators help break up the form into more "digestible chunks" for the user instead of a bunch of fields all pushed together. A separator can be as simple as additional space inserted between each section, a descriptive header (such as Contact Info or Billing Info) a horizontal line, or a decorative line and header to section off each area, as the Contact Info and Support Question groups are in Figure 2.
)
Figure 2 Visual separation is extremely important when collecting multiple
types of information.
Single-Page vs. Multiple-Page Forms
There's no hard and fast rule for deciding on a single-page or multipage form. If all that you're collecting is a user's name, email address, and which newsletters they want to subscribe to, you can probably fit that on one page.
When collecting one full screen of information from each group, or when you have more than three groups, you'll want to consider splitting the form over multiple pages.
A good example of when to use a multiple-page design is during new member registration. Below is a breakdown of what you would collect on each page:
Page 1: Introduction, explanation and reassurance, selection of username and password
Page 2: Contact information
Page 3: Billing information
Page 4: Newsletter signup
Page 5: Confirmation/change answers
Page 6: Success page (no data collected)
Can you imagine the frustration a user would feel if he spent 10 minutes filling out the first four pages of an application and his computer crashed, or your server went down temporarily? That user may decide to start over again, wait a while before reapplying, or assume that it's a problem with your server and visit your biggest competitor.
To avoid this, allow multiple-page forms to be completed over more than one session. In other words, store the data so that the user can close the browser partway through and come back later to complete it.
On the first screen, you can establish the username and password and then store it, to ensure that no one else can take it. Then, as the user fills out each subsequent page, you can store that data in a temporary table in a database.
When the form is complete, clicking the Submit button can run a process that pulls the data from the temp table, transfers it to the permanent table, and deletes the record from the temp table.
Yes, it's a bit of work, but it can definitely be worth it!
Make It Quick and Easy
You can get data from a user in a number of ways. Think of what they need to accomplish and how you can make it easier for your users. The three main ways you can do this are listed here:
Tell the user exactly what you want.
Eliminate the need to retype data whenever possible.
Prefill predictable answers.
Validate data on the client side, if possible.
Tell Them Exactly What You Want
On many occasions, I have visited a Web site that has requested my phone number. And on many occasions, I entered my phone number yet was told it was entered incorrectly. Why? Because the designers wanted the phone number in a particular format but didn't tell me.
If you want data in a specific format for database compatibility (or any other reason), make sure you tell the user before the data is entered. In the example of a telephone number, if you want it in the format (xxx) xxx-xxxx, put that next to the label. Another option is to use more than one text box, as shown in Figure 3.
)
Figure 3 Let your user know when you need data in a specific
format.
Eliminate Retyping Whenever Possible
Let's say that on the first page of a five-page form, you request a user's contact information, which includes address, city, state, and ZIP code. Later in the form you ask the user to provide billing information, which also consists of an address, city, state, and ZIP code. Take the time to write code that will store the contact information and display it to the user, along with a check box asking whether to use the same information for the billing info.
If the user clicks the check box, the contact info would populate the billing info form fields.
Yes, it requires more work for you, but it's much easier for the customer, and that's what you're after. This can also benefit you, though. Because so many people have the same address for their billing information, you can design your database so that it stores a value when the addresses are identical instead of using two sets of duplicate data every time.
The only time I can think of when retyping data seems acceptable is when collecting a password (if you think of others, e-mail me at tonyarguelles@netscape.net. This seems reasonable, considering that password fields don't display what is being typed; if the user mistyped it, he will become frustrated using the site or might be delayed in spending money on your site.
Prefill Predictable Answers
If your users will be entering a predictable answer, provide a multiselect list box or drop-down menu so all they have to do is select it. Common examples of when to implement this are when selecting the state or country of residence, as shown in Figure 4.
)
Figure 4 Prefill predictable answers to make it easier for the
user—and you.
Validate Data on the Client Side
To speed the form processing, validate your forms on the client side instead of the server side. Validating data on the client side is faster because it uses the local processor and data isn't being sent back and forth between the client and server.
You'll also benefit from client-side validation by having less traffic to your server, producing less workload on the processor, and reducing your total traffic. For large sites, this can affect hosting costs.