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.
We see so many forms on the web, that sometimes just changing how a form looks can make things more approachable. Mad Libs forms do just that. As you can see on the site Huffduffer, this form looks like the kids' game Mad Libs where there is a series of empty fields that people filled in and created humorous conversations as a result. On Huffduffer though, this same technique is being used to let people join the service. Let's see it in action. As you go into the form, you can fill in your username, your password, e-mail address.
Note that you can still tab to this form as you can with a traditional form. It all works. You can also click on the labels inside the paragraphs of text to jump to any particular input field; once again, keeping with mouth behaviors that people expect in other places. Yet, the layout of this form makes it a lot more approachable. It doesn't feel like the typical web form you encounter everywhere else, and the result is, well, let's just say it's kind of satisfying. To quote Jeremy, owner of Huffduffer, it turns out that people that use the form actually love it.
He has received bucket loads of Twitter messages and e-mails telling them how much people actually enjoyed the sign-up process. Let me pause for a second and restate that. How much they actually enjoyed the sign-up process? When was the last time anybody actually enjoyed filling in a web form? So this technique is out there and a number of people have tried it in different places to some interesting results. The site vast.com recently implemented a Mad Libs form in their testing. They have a form where someone can contact the car dealer to let them know that they're interested in purchasing a vehicle.
This is what the form used to look like; pretty typical, first name, last name, street address. When they redesigned to more of a Mad Libs form, they made it a bit more approachable; feels more like a letter, a narrative if you will. We're going to be sending this information to a Buick dealer, we're telling them who we are, which car we're interested in, and we have the option to personalize the message. In a series of AB testing, vast.com showed that conversion with the new Mad Libs style design actually increased 25-40%. Now, that's a pretty big deal, and as a result we saw a lot more interest in this form style structure.
Before we get ahead of ourselves though, I don't think Mad Libs style forms are applicable everywhere, they make sense where things feel conversational. When you're contacting a dealer about a car, it makes sense to pet it as a letter or a note. Hey, I am Luke, I'd like to find out more about this vehicle. In other situations, it doesn't make much sense. So let's see where Mad Libs forms have been applied and where potentially they could be problematic. Here on the contact form for the Boston Web Studio, once again a Mad Libs form feels appropriate. Hi there, My name is, my email address, and I'd like to send this wonderful message. Feels right.
Once you get into a bit more extended text, maybe it's not as appropriate. When applying for a beta for a VaultPress, there is a lot of form fields you need to pick out of the text. These aren't the short kind of interactions we saw in Huffduffer and the Boston Web Studio; it's a bit more involved. There is also no question of how these things get laid out. The Bingo Card Creator did a real quick test where they swapped out their form which is traditional on the left, with a little Mad Libs style paragraph. The problem here is the simple two field form had a real clear path to completion in the left.
When they inserted the text, and broke it up with Mad Libs style interactions, that path to completion got lost. In this testing, the Bingo Card Creator folks saw that the standard form had a 27% conversion rate, and the Mad Libs style form had a 21% conversion rate. So there is actually a drop in the conversion. I think that actually makes sense because the layout on the right is much harder to parse. There hasn't been a lot of time and attention spent to making Mad Libs work. When you do this approach, don't simply take your form and turn it into a block of paragraph without really thinking through the details of design.
Likely, that will actually make things worse, not better. To wrap up how we can think about Mad Libs style forms, they're pretty appropriate for conversational interactions. When we want to loosen the room, and remove some tension, this isn't a web form, this is actually an introduction. It's you saying the hi to us and signing up or joining a new service. This can really reduce anxiety. If you're going to use a Mad Libs style form, be aware that it actually is breaking clear scan lines. So long forms, probably not appropriate, and when you do lay things out, make sure there is an appropriate line length between each of the input fields inside the Mad Libs style form, so people can make their way through it.
Last but not least, make sure the form is accessible. As we saw in Jeremy's Huffduffer example, you could still tab through each input field. You could actually click on each label in the text and move to the appropriate input field associated with that label. This is how standard forms work. This is how a Mad Libs style form should work as well.
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.