Luke Wroblewski has been working on
customer experience design for over a decade. His take on web forms caught our
attention last month, when he posted some conversion results from a new
(to me) take on forms. They’re “Mad Libs” style forms, with fill in the blank style fields that encourage
engagement and take some of the guesswork out of consumer interaction with a
website or brand online. You’re likely to see some up on Econsultancy
in the near future.
Wroblewksi is currently chief design
architect at Yahoo! Inc., and publishes Functioning Form, a leading
online publication for digital product design. He’s also a co-founder
and former Board member of the Interaction Design Association (IxDA).
He is also the author of two popular Web design books: Web Form Design
(2008) and Site-Seeing: A Visual Approach to Web Usability (2002). (Econsultancy readers can get a 20% discount on Web Form Design of those if you go here and use this code: MIX.)
caught up with him to talk about some of the common misconceptions and
errors that he encounters in form design, and what can be done about them.
What is your approach to digital forms?
They are the lynchpin that makes everything that’s important on the web tick — for social software, commerce, anytime you want to send a comment. In most spaces, when it comes time to create forms, people aren’t thinking about it. But there are lots of things you can do to optimize forms and make things better for people.
How did you come across the Mad Libs format?
I didn’t create them, but they popped up in a couple places. The first place I saw it was on Huffduffer. I’m not sure what prompted him to do it. That conversational tone can help a lot.
Mad Libs is a example, but it’s not appropriate for every context. We
had seen a lot of qualitative feedback that it was a presentation format that
people responded to well. These things were more inviting and engaging. It also gets rid of the negative association with filling out a web form.
What about giving multiple choices rather than fill in the blank?
Smart defaults can always be used well. If you can provide an answer as a default choice that aligns with what 80% of people want to do, then that’s great. There are different ways to manage default choices. You can have them explicitly set and make it harder to change, or it can be simple as a default value in a radio button set or a drop down.
Smart defaults go a long way. There’s a book by Barry Schwartz called “Paradox of Choice,” that talks about the impact of choice. In one E.U. country, the default choice for organ donors is on, and 80% are organ donors. In the U.S. the default is off, and less than 20% are organ donors. There’s a big difference in whether that bit is slipped on or off.
Do consumer habits get in the way of good forms?
There are a lot of things in web forms that are artifacts of a database. If you look at the typical database, it’s basically name and value pairs. When it came time to have people add values into the database, they just output the name value pairs. That’s kind of where web forms come from. That database structure has introduced a lot of practices online that are counter-human and pro-database.
For example, when people write their credit card info, they’ll put dashes or spaces so it’s a bit more legible, but they’ll get an error on the form because it’s not structured to accept that info. A second example is online passwords. People can’t see what they’ve input because of these little black dots. Ninety-nine percent of the time, no one’s looking over your shoulder trying to look at your password when you type it in. All it’s doing is preventing people from seeing what they typed. The use case is even worse on mobile phones, where you hold the phone in front of your face. And still all you’re getting is these little black dots.
But when you do things to make the usability better, like expose passwords, people have this expectation that the black dots made it secure. It’s a negative experience that people got used to that they now think protects them.
Now we have scripts that let you enter a phone number with spaces and dashes. And you can strip it out and get the phone number. But when people encounter an open field, they get confused. It’s sort of silly. Just put in the right phone number. But these years of restrictive formatting have created the expectation that people have to do things according to the set rules.
Over time, I think that people can adjust. Also small things that ease the transition, like a “show my password” link, are a benefit, because the user feels in control.
What other design elements trip people up in form design?
A lot of things. People always think more about their product and service than any user ever will. There’s a tendency to over-think what people are going to do when they encounter a web form. The first thing people do is find the thing that looks like an input field and start typing. They don’t want to fill in the form, they want what’s on the other side. The same thing happens with search. If something’s at the top of the page, a lot of people are going to assume its a search box.
Is it worth trying to change consumer behavior?
The analogy I always use for people is that there’s two ways you can change the course of a moving train. You can try to change existing behavior. You can try to get in front of it and push it to a different side, or you can get ahead of it and lay tracks so that when it gets to you, it goes in the direction you want it to go. The latter works a lot better.
There are a lot of people who design web forms and put the ‘Submit’ button right next to the ‘Cancel’ button. This goes back to that metaphor. We did some testing around where you put primary versus secondary actions on a form. Primary lets you complete an action. Secondary allows you to go back, edit or cancel. When people get into the flow of moving down, if you position the primary action to the left, and secondary to the right, people will erroneously press cancel. Generally, six out of 23 people make that mistake.
If you drop people off in a different place, then you’ll get rid of those errors. It boils down to having an understanding of people’s behaviors. You can align your objectives to what they want as opposed to fighting their behaviors.
What’s the best way to figure out what people want?
There’s all sorts of data you can get your hands on. Ideally I like to have a qualitative and quantitative sense. Those two things don’t have to be expensive. For qualitative, you can literally talk to three to five people and have them walk you through what they’re thinking as they view the user interface and you’ll have it right there. Just grab someone you think is likely to use it. To get a quantitative sense, there are so many analytics tools online. Like Google Web Optimizer — you can insert some Java script and find out what people are doing on a site. You can go much more robustly than that, track customer service, or see where drop off rates are. But the bottom line is that having a little bit of info helps you make informed design decisions as opposed to subjective design decisions.
What about mobile?
For years, the mantra of anyone doing mobile design was that text entry on mobile entry sucks, so minimize the use of forms as much as possible. Which means minimize input on mobile phones, which is a huge, huge missed opportunity. But people text like crazy. They’re typing on their phones just fine. Anyway, often constraints breed innovation, which I’ve written about recently.
But newer mobile devices are even more capable of getting input. They have a built in camera, many know your orientation. The conversation has to shift from “avoid getting people to enter stuff,” to “Hey – this may be an even better medium.”
You have your phone on you all the time. Wherever you are when the moment strikes, you can do something. Also, the iPhone introduced a whole bunch of new interactions for forms. There’s a big view of what you’re typing in. They’ve created a form assistent wizard. The virtual keyboard changes what you see based on the kind of input you’re entering. Little things like that have enhanced the standard input process people have to go through.
What are you working on next?
I’m very interested in capabilities that these sensor rich devices mean — for both collecting and utilizing information. I think we’ll see some of those capabilities make it to other devices. As digital devices have more use cases in your lives, they have richer capabilities to both get input and output from them, the kinds of things we’re going to do are going to change drastically. And that’s very, very exciting.