Guidelines for Designing Web Forms
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
One of the most common questions I get asked when speaking or teaching about Web design is, "What's the best way to design Web forms?" The full answer to that question is much larger in scope than this article. However, some key distinctions can be summarized in a few pages to help you design Web forms more effectively, like the form in Figure 1.
)
Figure 1 Combine the guidelines in this article to present the most
intuitive and attractive form possible.
Below is a summary of what's covered in this article:
"Plan First, Design Second"—You'll begin by reviewing the questions you should ask yourself (and also your team, your clients, and so on) before creating any mockups or designs.
"Explain and Reassure"—This section covers important information that the user should see before filling out the form.
"Collect Data Efficiently"—This section discusses the use of form elements to allow the user to complete the form as quickly and easily as possible. You'll read about grouping elements logically, using single- and multiple-page forms, eliminating retyping, prefilling predictable answers, and validating data on the client side.
"Functional Forms with Visual Appeal"—The visual layout of a form is a big factor in how effective it will be. This section takes a look at a number of issues related to form elements: grouping, placement, spacing, and tab order. We'll also look at how to use a progress indicator.
"Validating Data Nicely"—Users will make mistakes when filling out a form; it's just human nature. This section provides examples of common error messages and tells how you can improve those so that you don't unintentionally upset your customers.
"After the Form Is Complete"—After the Submit button is clicked, you'll want to present the user with some type of message—sometimes more than that. This section discusses that what you say after the form is complete.
NOTE
This article assumes that you have basic Web design/development skills. If you've built a basic Web form, you'll be able to follow along just fine.
Plan First, Design Second
Before you begin designing or building anything, you need to be clear on exactly what needs to be built. A complete planning stage includes more than just design considerations, but that's the area we'll focus on here. As a designer, here's what you need to know about the form:
What unmet need(s) will the form fulfill?
What does the user want to accomplish when using this form?
Exactly what information needs to be collected to meet these needs?
What types of browsers does the target audience use?
What's the target audience's level of experience using Web forms?
Having clear answers to the first three questions will save you major headaches down the road. Whenever you (or anyone else) questions why something is designed or developed a certain way, you can go back to the answers to those three questions and determine whether you're still on the right path or whether you need to steer back on course.
Knowing what type of browser the user has is important because it helps you determine the technology you'll use for presentation (for example, layers or tables, or both). In addition, the type(s) of browser(s) your form needs to work in affect how you validate the form; for older browsers, you may not be able to use client-side JavaScript, so server-side scripting via PHP, ColdFusion, or ASP might be necessary.
The user's level of expertise will help you determine how to present information. You don't have to explain how to select multiple items from a list box to seasoned computer users. For beginners, you'll need to explain that they need to hold down the Ctrl or Shift keys (for Windows users) and then click each item.