Viewers: in countries Watching now:
In this course, interaction designer Luke Wroblewski shows how to create web forms that encourage visitors to enter information and covers ways to capture input without the use of forms. The course covers boosting conversion rates and customer satisfaction, organizing the structure of forms, aligning and grouping form elements, assigning the correct input field types, validating input, and handling data entry errors. The last chapter highlights alternatives to static forms, such as using dynamic inline forms, using web services, and leveraging device capabilities, which can be used to gather additional information or replace a traditional form altogether.
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.
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.
There are currently no FAQs about Web Form Design Best Practices.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.