Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Form length

From: Web Form Design Best Practices

Video: Form length

As we've seen, web forms sit at the intersection of business, community, information management, and more. As a result, the details of their design really matter. So in order to examine those details, let's start by looking at form organization. One of the biggest questions in form organization is around length. Let me illustrate that by looking at the Boingo form we saw earlier. The Boingo form I filled out when I was at the airport looked a little like this: There's a Required Information section at the top; Credit Card Information following that; an Account Section; and then a Terms and Agreement.

Form length

As we've seen, web forms sit at the intersection of business, community, information management, and more. As a result, the details of their design really matter. So in order to examine those details, let's start by looking at form organization. One of the biggest questions in form organization is around length. Let me illustrate that by looking at the Boingo form we saw earlier. The Boingo form I filled out when I was at the airport looked a little like this: There's a Required Information section at the top; Credit Card Information following that; an Account Section; and then a Terms and Agreement.

Boingo however, recently redesigned their form, and they went from a single-page solution, to a multi-page solution. Here I'm showing you step 1 where you Select the Plan. Of course, there's step 2, Setting Up Your Account and it feels like Boingo has actually added a significant amount more input fields to this section. Before we get to section 3, let's take a step back. This illustrates, as I mentioned, a common question about Web form organization. Is it better to put all my content on a single web page, or across multiple web pages? And if we are using multiple web pages, what's actually the right length? Well, in order to dig into some answers, we did some testing.

In fact, we brought in about 24 participants and we ran them through standard usability and eye tracking metrics. We took the same form and we tried a few variations. One, we broke it up across multiple pages, 1, 2, 3. We then took all the same input fields and put them on one long page. Then we tried some dynamic solutions where we used expandable and collapsible sections on a single page, again, containing the same information. So what did we learn? All four versions delivered a 100% pass rate.

That means conversion didn't really change from a multiple Web page solution, a single Web page solution, or a dynamic inline form solution. It didn't really seem to impact things either way. So really, what does impact conversion? Well, let's look at a few case studies that helped to tell the tale. First up is a Quick Contact Us form. The big change here in A/B testing was going from an eleven-field Contact Us form down to a four field Contact Us form. When this happened, we saw 160% increase in the number of forms submitted and 120% increase in conversion ratio.

That's a pretty significant boost. And where do we change? Well, we removed actual requirements. We went from eleven fields down to four. Every question we forced people to consider means they need to parse it, determine the answer they want to input, and then actually provide it inside the affordance we give them. That's a lot of thinking and a little bit of time for each question. When we remove requirements, we actually are giving people the opportunity to get through things faster and easier. Additionally, the quality of submissions in this example didn't really change.

It turned out, some of the data that this form was asking; either wasn't required or wasn't being used. In fact, this is a pretty common situation. Many times we'll port over a legacy paper form or take a form that existed earlier without really examining each question. Does it have to be there? When we do take a critical look at every question, we can really boost conversion, as this next example illustrates. Here on Expedia's Purchase a Ticket form, there was an optional field called Company. Many people tripped up on this field not understanding where to apply to.

In fact, the ones that did; ultimately did not purchase a ticket. Expedia noticed this in testing and removed the feature. From that they got $12 million of profit overnight. Looking very judiciously at each of the details in their web form designs, Expedia found fifty to sixty of these kinds of things. That's a pretty big improvement. But it's not just actual removal of requirements that can make a difference in conversion. In fact, sometimes just a perception of requirements is enough. Looking at this case study, for a big- box retailer, we see that the original checkout form had two actions: Login or Register.

It was possible to purchase something on the site without creating an account, where you wouldn't know it from these two actions. When the actions were changed to: you do not need an account to buy, a huge change happened. That is, 45% increase in purchasing customers and $300 million in revenue per year, just from an alteration of the perception of requirements. It's not just perception of requirements. The actual indication of requirements can help a lot as well. In this rather simple case study, all that was changed was the word "optional" was added to Phone Number on a six-field contact us form.

The Phone Number field was always optional, but the indication of it wasn't as clear as it could be. When this change was made, the form had a 2x increase in conversion. The required Phone Number field actually turned out to have a 37% drop-off rate. Lots of people fell off, even though that field was not required. So as we've seen, actual requirements, perception of requirements, and the indication of requirements are all levers we have to pull when we look at boosting form conversion.

To illustrate this even further, let's look at an example of how a typical form gets made. Let's say we want our customers to be able to contact us online. Giving that requirement to a design team may result in the following form: Who is contacting us; how can we contact them; the message they're contacting us about; and ability to submit that message. Pretty simple. But now the Sales team finds out we have a means by which customers can contact us. So they quite quickly add Phone Number, Address, City. After all, they do want to follow up with these leads, (oh, and by the way, they need to make sure that this message gets routed to the appropriate salesperson so better ask them about the subject they're contacting us on.) From there, the engineering team finds out about the form and they quickly point out that the way we store usernames and addresses in the backend requires a number of additional fields.

The username needs to be split up into name and last name, and we have to have a more structured set of inputs for the address. Next up, marketing learns we're talking to consumers, and they say, hey, we need some demographic information here. Are they male or female, when were they born, oh, and by the way, I bet they want to opt in to our marketing emails? With all this information being collected, the Legal team quickly finds out and makes sure that an agreement to privacy policy and terms of service is included. So what's happened? Our simple little form has turned into a monstrosity.

Rather than just allowing people to quickly send us a message, we now have them jumping through hoops created by engineering, sales, marketing, and legal team. None of these teams themselves are wrong. In fact, they're looking out for the best interest of the company and taking their particular point of view to the form. The problem is, when somebody comes to this form they don't see all these details. What they see is the company that the form represents. They're looking at it from outside-in, whereas each of these departments is looking at it from inside-out. And that's the perspective change we have to make.

Our forms need to communicate with one voice out to our customers, not with the voice of a bunch of different groups. So the philosophy that Caroline Jarrett lays out in her Web Forms book is really applicable. She urges people to Keep, Cut and Postpone what's in their Web Forms. Keep means stick with the fields that you actually have to have. Cut means get rid of everything that's not entirely necessary. And Postpone indicates that there maybe a better time replace to ask some of your questions. Maybe it's not at the point of first contact.

Somebody just wants to send you a message, you may not need to route that to the appropriate salesperson just yet. That can be a series of follow-on questions. Applying this methodology to the Boingo form we saw earlier, can get us a significant reduction in the amount of steps. So instead of step one, step two, and step three, and all the fields we have therein, we can blow things down to a much simpler set of questions. When somebody wants to get online, they really need to tell us two things. One, how will they pay for it? And two, whether or not they actually need a receipt for it? You can see that represented in my redesign of the Boingo form.

First up, tell us how you're going to pay? Second up, give us your email address only if you want a receipt, much simpler, very streamlined, and easier. This sort of trimming is especially important on mobile. You can see again, Boingo has asked the same questions they have on a desktop now over a series of five pages. When the constraints of mobile devices are tight and providing text input is hard, the type of consolidation we did on the Boingo form was an even longer way on mobile devices, as you can see in this redesign example here.

Wrapping up on form length, it's really important to be succinct. Take the time to evaluate every question you're asking people in your Web forms. Every question you put in front of someone requires them to think about it, formulate an answer, and then put that answer into whatever input field of forms you've provided. Not only does that add up to time, it also adds up to mental load. On the topic of one page, multiple pages, or one really long page, if your form naturally breaks down into a few short topics, usually a single web page will do just fine.

If you find yourself with multiple topics each with a decent amount of questions, multiple web pages tend to do better. And lastly, if your form contains a large number of questions, but they're all very related around a single topic, one long web form usually will do best. Overall, managing form length is really about making sure you have the minimum amount of questions necessary, and not including things that don't need to be there.

Show transcript

This video is part of

Image for Web Form Design Best Practices
Web Form Design Best Practices

30 video lessons · 12739 viewers

Luke Wroblewski
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Form Design Best Practices.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.