“Three point five pages.” It’s my usual answer when someone asks me “how long should my web form be?” And believe it or not, many people ask. It may be the most common web form design question I get asked. So I’m not exactly ecstatic that my tongue–in–cheek answer mostly draws blank stares and very few laughs. You see, it turns out this is a topic that many people take quite seriously.

And take it seriously they should. Web forms are the linchpins of most online businesses and applications. Whether they are responsible for checkout on e-commerce sites, communication on social applications, or any kind of data entry on the web, forms allow people to complete important tasks. And web form design details can have a big influence on how successful, efficient, and happy people feel about the process. Especially details like form length.

I often get asked how long web forms should be because web designers and developers want to know:

• Do one–page forms convert better than multiple page forms?
• Will breaking up a long form across several pages simplify the process of completing a form?
• What about rich interactions that manage multiple sections of a form on a single page?

Let me level with you up front. There is no magic number like “three point five” that will work in all cases. Your audience, their intentions, your systems, your policies, and more, will ultimately define the solution that’s right for your product. But you can arm yourself with informed design solutions so that when the time comes, you can pick the right answer for your specific situation.

One such solution is accordion forms.

Accordion Forms

Accordion forms use dynamic interactions on a single web page to hide and reveal sections of related questions as people go through the process of completing a form. This allows people to focus their attention on one set of questions at a time without requiring them to navigate between different web pages.

Accordion forms have the potential to be really effective because, in general, hiding irrelevant form controls from people until they need them results in forms that are easy on the eyes (i.e., less distracting) and they can be completed quickly. Couple that with the time saved on page reloads and getting people orientated on new pages, and accordion forms begin to look like an interesting solution for helping people complete lengthy forms on a single page.

To illustrate the difference between a typical multi–page form and an accordion form, we need look no further than the Apple store’s recent checkout redesign. Apple’s previous checkout process used several different web pages to capture customer, shipping, payment, and account information.

Apple’s redesigned checkout process dropped multiple pages in favor of a single accordion form that reveals one set of questions to customers at a time. As you can see in the video below, people are first asked about their shipping information. Once complete, this section slides up revealing questions about payment options. Once payment details are entered, the account information questions are revealed, and so on, until the form is complete.

Putting it to the test

To better understand how accordion forms influence conversion and usability, I worked with Etre, a London–based usability firm, to test 24 average users (ranging in age from 19 to 48) on four variations of a typical e-commerce checkout form. We asked people to complete a purchase by entering information about themselves, their shipping address, and their payment information. This is essentially the same information that Apple’s checkout process requires, without the additional step of creating an account.

The control version of our four forms separated the questions people had to answer across multiple pages. We also tested a version with all the questions on a single web page, and two versions of an accordion form that revealed additional sets of questions as people completed the prior set. One of our accordion forms required people to click on section headers to expand each set of questions on the form. The other made use of a continue button within each section that, when clicked, automatically expanded the next section and collapsed the previous one.

For each variation, we measured success rates, error rates, completion times, satisfaction ratings, and standard eye–tracking metrics. We presented each form randomly to minimize familiarity bias.

But enough setup—what did we learn?

Constant conversion

Let me give you the good news up front. Each of the forms we tested had a 100% pass rate. That’s not all that surprising when you consider the task we gave our participants was familiar to them since each participant we tested had been using the internet regularly for more than three years.

This tells us that simply porting the same questions you have on one long web page or across several web pages into an accordion form isn’t likely to increase conversion—at least, not for common tasks like e-commerce checkout.

The flip side of this, of course, is that accordion forms aren’t likely to negatively influence conversion either. When you consider that most innovative user interface solutions typically have an adverse influence on conversion rates until people get used to them, this is an important finding. Accordion forms don’t seem to have this effect. They might not move the needle dramatically upward but they aren’t likely to tank your conversion rates either.

At this point, I should pause and remind you that we tested 24 people on our generic e-commerce forms. To really test conversion, nothing beats testing your actual audience on your actual site.

Need for speed

Where we did see a noticeable difference between accordion forms and the single page and multiple page forms we tested was in completion speed. People were fastest with the button–based accordion form we tested (option D in Figure 2 above). Surprisingly, about ten seconds faster than even the single page form (option B).

While completion speed may not be paramount for e-commerce, there are plenty of other situations online where quickness matters. Online auctions or exchanges come to mind, where the failure to act quickly could result in a lost opportunity. Accordion forms just might fit the bill in these situations.

Accordion around

The primary difference between the two accordion forms we tested was in how people made their way between the different sections. Version C (Figure 3) required people to click on the header of each new section to expand the content within it. In this layout, a final action to complete the entire form was always visible.

Version D (Figure 4) instead required people to click on a primary action button within each section of the form. Selecting this action would collapse the currently open set of questions and expand the next set (which also contained a primary action within it that moved people forward).

In our testing, very few people thought to interact with the headers as they made their way through our forms. The vast majority of our participants quickly gravitated to the primary action buttons and clicked them to move on. Even our explicit labeling of the form’s final action (in Figure 3) button as “Make payment and complete order” didn’t help. People selected this action to move forward even though they had not yet entered any payment information. This, of course, resulted in some unintended errors.

The lesson here is that even when innovating, you should try to embrace conventions. Though accordion forms may be new to many people, clicking on a visually prominent button to complete a web form is not. The form design in Figure 4 builds on this existing behavior by expanding the next section when someone clicks on the primary action on the form.

The form design in Figure 3 breaks with this behavior by forcing people to interact with non–standard form controls like section headers. This requirement made accordion forms feel foreign and complex to people instead of familiar and easy.

Being accessible

While our user testing didn’t specifically target people with disabilities, access for everyone is an important design consideration. Single and multiple page forms, when properly implemented, are familiar models that keyboard–only and assistive technology users can usually handle. Accordion forms, however, may be different story. Luckily support for WAI-ARIA, which allows complex controls such as accordions to be properly expressed, is growing quickly (it is being baked into HTML5) and may ultimately make accordion forms more accessible.

More to learn

Our quick test seems to indicate that accordion forms may have an interesting future online. They can bring multiple page forms together into a single set of dynamic interactions that—when designed well—don’t negatively influence conversion rates but do reduce time to completion. Of course, there’s a lot more to explore about where, when, and how we should use accordion forms. But consider this design solution a quiver in your bow—ready to use when the right situation arises.

Thanks

I’d like to thank Etre for all their work scripting, running, and reporting on this study.

Translations:
Italian (italianalistapart.com)