Pagination in Web Forms | Evaluating the Effectiveness of Web Forms

Look for Natural Groupings

“When you’re considering the possibility of breaking a long Web form into multiple pages, the most salient question is: What are the logical groupings for the fields in the form?” replies Pabini. “Before deciding whether to break the form into multiple pages, you must first determine what those logical groupings are. You need to discern the meaningful relationships between the fields—as well as their natural order and their degree of interrelatedness—and group the fields in a way that is appropriate to a user’s task.

“Creating these groups is the first step toward considering your presentation options, which include progressive disclosure within a single page, tabs, or multiple pages. If you decide that it makes sense to present a form across multiple pages, your logical groupings of fields will suggest natural breaks between pages.”

“The form itself should dictate whether a multipage approach is a good idea,” explains Jessica. “Look for groups of questions that belong together and natural divisions between pages. For example, in a loan application, you might collect identifying information on one page and financial information on the next.”

Caroline suggests that you consider the following questions when deciding whether and how to break a form into multiple pages:

• “Do the questions on the form create a natural process with steps? For example, are you designing an ecommerce form where a user chooses an item, says where she wants it delivered, then pays for it? Three steps in the process; three pages to the form.
• Do the questions fall into natural groups, though not a process? For example, a job application form might ask for contact details, job history, educational history, references, and a statement of why you are right for the job. Users might want to fill in the sections in any order, but they do fall rather naturally into five groups. This suggests creating a five-page form, with a summary menu that lets users complete the pages in any order.
• Is there any advantage to users in reviewing all the questions before my book with Gerry Gaffney, Forms that Work: Designing Web Forms for Usability, we call these gathered answers. This requirement might suggest an easy-to-print, single-page form layout, so users can easily look at all the questions ahead of time.
• Can you get users to group questions together, in the same way you might do a card sort to help you organize the information architecture for a Web site?”

Designing Multipage Forms

“If a form is longer than two or three screenfuls or you can fairly readily group its questions, I’d look at splitting it into multiple pages,” recommends Gerry. “It’s important that groups are clear, to avoid confusion. For example, you wouldn’t want to ask for a phone number on one page and an email address on another. People expect you to ask for all contact or address details at the same time. It’s always a good idea to think about what similar forms people may have encountered in the past, as these tend to set their expectations.”

“Splitting a form over multiple pages may also help with both usability and accessibility, because you can ask questions on earlier pages to determine what content to serve on later pages,” says Jessica. “In this way, you can allow conditional questions without any need for client-side scripting—for example, in JavaScript—making the form more accessible to those who are using screen readers or have scripting turned off.”

“Will it be important to users to be able to print out the pages of a form before filling it in?” asks Caroline. “This might seem unusual now, but can still happen if, for example, a user has to get answers from other family members or someone who works out and about—what we call third-party answers in Forms that Work. In this case, make sure the pages align in size with the paper on which they’ll print the pages.”

“If you’re going to spread a form over multiple pages, I’ve found somewhere between three and seven pages works well,” suggests Jessica. “Less than three, and it might be more efficient to just have one page; more than 7, and the process can start to feel too long and overwhelming. And don’t forget to include a progress indicator.”

“I’d certainly be reluctant to create a very long form—say, more than three pages or so,” cautions Gerry. “It’s easy for users to lose their place in a long form, and it’s hard to present errors—particularly when there are multiple errors—in an elegant and clearly apparent fashion. If you do split a form into several pages, you should almost always include a progress indicator, so people know how far they’ve gotten in the process and how much they have left to do.”

Evaluating the Effectiveness of Web Forms

Q: What are the best ways to test a Web form’s effectiveness? What if our company is short on time or has little money available for testing?—from a UXmatters reader

What Does Effective Mean?

“There are a few interpretations of effectiveness, and the answer depends on what, precisely, the questioner means,” replies Gerry. “For example, effectiveness from a business perspective might mean the accuracy of the data a form collects, the cost per completed form, or many other measures. Assuming the questioner’s focus is on UX, this question is probably essentially about usability, and the answer to that is fairly simple—the best way to test a form’s usability is to have representative users complete the form.”

“Every project should start with a clear description of its goals, as well as ways to assess whether it has met those goals. Form design is no different,” asserts Jessica. “A form is just a tool for collecting information that an organization needs to get something done. The effectiveness of a form, therefore, comes down to how well it supports those end goals.”

“The primary goal for every Web form is that users actually complete it,” declares Pabini. “Achieving this goal requires that completing the form be as quick and easy as possible, so users are both willing to and can successfully complete it. Defining rational business requirements for forms and designing usable forms are means to that end.

“Effective Web forms can have a huge, positive impact on business results. Of course, ineffective forms often have the opposite effect. As Jared Spool described in his UIE article, ‘The $300 Million Button,’ removing the Register button from a login form that obstructed a checkout process funnel on an ecommerce site and replacing it with a Continue button resulted in a $300-million-per-year increase in sales.”

Some Best Practices for Form Design

Mike offers the following guidelines for designing usable Web forms:

“Overall guidelines for the design of Web forms:

• Collect and validate any information that is a disqualifier—such as This offer is not valid in Georgia—early in a form.
• Don’t collect any more information than you must. I know this seems obvious, but I have found that marketing folks like to collect lots of information—‘in case they ever need it.’ Remind them that anything that increases the length of a form deters users from completing the form.

“Field guidelines:

• Make it obvious what fields a user can fill in. A lot of Web 2.0 applications give fields the appearance of read-only fields until a user moves the focus to them. For example, try creating a calendar entry in Google Calendar. I think the rationale for doing this is that it makes the forms’ presentation cleaner. However, with forms, pretty should not trump functional.
• Make required fields obvious.
• Avoid unnecessary differences in vertical and horizontal alignment. For example, if two fields in a column should be about the same width, make them exactly the same width. There is an inverse correlation between the number of discontinuities in alignment and a form’s perceived ease of use.

“Data formats:

Be forgiving in what formats you accept—for example, a date field should accept Mar 1, 3/1, March 1, 01 March, March 1, 2010, March 1 2010, today, tomorrow, yesterday. Where you cannot be flexible, provide an example in, beside, or under a field.

“Validation and error handling:

• Validate each field when a user completes it. Don’t wait until the user has submitted the form, then send it back with a list of error messages.
• Make error messages explicit. What’s wrong, where, and how should the user have provided the data.”

“There are many established best practices for form design,” replies Jim. “A good book on the subject is Luke Wroblewski’s Web Form Design: Filling in the Blanks.” “In addition to Luke’s book, I recommend that you read Caroline and Gerry’s book, Forms that Work: Designing Web Forms for Usability,” says Pabini.

Testing Web Forms

“Following best practices can get you most of the way there in terms of form usability,” suggests Jim. “But there’s no better way to assess a form’s effectiveness than by conducting usability testing, with representative users filling out the form in a realistic situation. Even if you follow best practices, you won’t know how well the form works for your users until you test with them.”

Recruiting Participants

“It’s especially important that participants be representative of your audience and that the form-completion task you give them is relevant to them,” Jim continues. “If the participants are people who would actually complete the form in real life, you’ll learn whether the fields are understandable, whether users have the information they need to enter in the form, whether they feel comfortable providing the information, where they need contextual Help, and whether the form’s length and the effort of completing it is acceptable or cumbersome.”

“Aim any testing you do at identifying the finer points of a form’s design that may be helping or hindering the achievement of users’ goals,” says Jessica. “You should ideally conduct usability testing with a reasonably large sample of typical users, in a realistic setting. But if this is not possible, you can still achieve a lot from undertaking the next best thing: This could mean testing with family members, friends, or colleagues; testing with a smaller sample size, or testing with a remote observation tool rather than visiting users on site. It’s all about making informed compromises while you aim to get as close as possible to the real situation in which people actually use a form.”

“If you can’t afford to recruit representative users, you can still get some benefit from testing with others—such as people within your own organization. However, I’d urge caution with this approach, because you run the risk of getting an overly optimistic view of how easy a form is to use,” warns Gerry.

“To get useful feedback on a form’s design, you need to directly observe just a few users—but it’s critical that they are people who care about the topic of the form,” assert Cyd and Nate. “Participants who are invested in a task will tell you more about the form than all the world’s Web analytics combined, and the key factor in users’ engagement is their timeline. So make your recruiting do a little extra work for you. If you’re testing a signup form, recruit users who are signing up for your service right now, instead of users who just fit your demographic target.”

Conducting Test Sessions

“Once you find the right people, you can use any method you like to observe them,” continue Cyd and Nate. “Bring them in for in-person sessions, have them use a tool like OpenHallway or Loop¹¹, or observe their screens using Skype or GoToMeeting for a quick, free, remote session. Put people in front of the form who are actually interested in it, ask them to narrate their experience, shush, and listen.”

“Usability testing should look at all aspects of a form,” recommends Jessica. “I use a model that describes every form as consisting of four layers: questions and answers, flow, layout, and process. The best testing examines the effectiveness of each layer. For example, you can use cognitive interviewing to check whether users are interpreting questions as you had intended and the options for answers are appropriate for all situations.”

“Just do ordinary testing,” suggests Caroline. “Get anyone to fill in your form! Steve Krug’s ‘a morning a month’ method, which he’s described in his new book Rocket Surgery, works perfectly well.”

“Depending on the complexity of the form, you may want to divide your testing effort,” adds Gerry. “For example, testing an initial prototype, then a more fully fleshed-out version.”

Testing When You Are Short on Time or Money

“Even if you’re short on time or money for testing, it would still be helpful to conduct a few quick, informal tests,” answers Jim. “You don’t need an expensive set up. Go to your users or set up remote sessions with a phone call and Web conferencing software.”

“Don’t forget that you might have other means for establishing the effectiveness of your form besides usability testing,” offers Jessica. “If the form is already live, look at things like error rates, call-center queries, and Web analytics. Rarely can we do all the testing and analysis we would like. I would argue that, provided you use your findings carefully, any testing is better than none at all. A quick run-through of the form with a couple of friends of friends can yield invaluable information in a matter of days and result in a form that is much better than it would otherwise have been.”

“I often get asked what people can do if they are short of money for testing, and my answer is that a lack of money is often a good thing, in that it enables—even forces—you to be efficient,” responds Gerry. “For example, observing three or four users complete a form can provide a great amount of insight and help you identify problems that need to be fixed. Even testing with a single user is of value. In fact, I would point out that, if you are on a tight budget, testing is all the more important, because post-release fixes are the most expensive kind!” 

References

Jarrett, Caroline, and Gerry Gaffney. Forms that Work: Designing Web Forms for Usability. San Francisco: Morgan Kaufmann, 2008.

Krug, Steve. Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems. Berkeley: New Riders, 2010.

Spool, Jared. “The $300 Million Button.” User Interface Engineering, January 14, 2009. Retrieved March 12, 2010.

Wroblewski, Luke. Web Form Design: Filling in the Blanks. Brooklyn: Rosenfeld Media, 2008.