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.)

I 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.

Meghan Keane

Published 18 March, 2010 by Meghan Keane

Based in New York, Meghan Keane is US Editor of Econsultancy. You can follow her on Twitter: @keanesian.

721 more posts from this author

You might be interested in

Comments (2)


Craig Sullivan, Customer Experience Manager at Belron International


At last - air time for forms.  I've learned a heck of a lot from Luke's books, his online video presentations and articles.  Forms are such a neglected part of the user experience and don't often get managed and improved in the same way as other site functions (as they usually integrate with mid or back end systems).

Some of the insurance and financial forms I've seen in this country are truly awful - these companies are simply leaking potential cash like a river.  Luke's example of the credit card issue is great.  I've seen similar effects with all sorts of fields (postcodes for example) where we need to get smarter about how we handle data in a usable way for consumers.  

What I'm trying to do is apply a lot of Luke's suggestions and work hard on smart defaults, intelligent validation, auto correction of errors and simplified form input.  Another thing that helped was a page-by-page leak model for each form step, to see where people leave the funnel or switch to other forms of engagement & contact.  The second bit is important because if you class an event as someone leaving the funnel, what if they phone?  What if they visit a contact form?  In many cases, not tracking the additional switches makes identifying forms behaviour difficult.  I might improve conversion rate but what am I doing to the other channels?

One thing that is going to help people is being able to take say, a batch of 250 people who enter forms data and use a product like Clicktale or Tealeaf to record the forms interactions.  When you review the data, you'll encounter a picture that usability testing alone might miss.  Postcodes are a great example here - you'll find people formatting it differently, swapping the number 1 and the L, 0 and 0 and so on.  Another common error is shifting the numbers, which gets you ! or " or £ characters in the postcode.

On one site, the cumulative effect of all these kinds of small errors was that  2.5% of interactions with one form per day, resulted in abandonment.  People get annoyed with stuff like this but the surprise for me is that few people measure forms interactions and errors.

If you look for these issues you can a/b test to prove your uplift when you've fixed 'em.  For sites with high traffic and forms, there could be 6 or 7 figure sums locked inside the traffic you've already got.


over 8 years ago


Margaret O'Donnell, Head of Digital at British Red Cross

Great article thanks! Luke's point about how form behaviour is driven by database needs not users' strikes a real chord with me. Can you imagine how annoying it is to have your *name* constantly rejected as being invalid? With a surname of O'Donnell, I'm continually forced to accommodate the issues raised by poorly coded forms. Many developers write poor validation routines and consider an apostrophe an illegal character so they either reject my surname as invalid or else strip the apostrophe out and don't tell me. Apart from the poor customer/user experience, this means I'm often not sure if a website I've registered with considers my name to be O'Donnell, ODonnell, O Donnell or O\Donnell. A classic experience of this recently was shopping with Ocado. I've been though the time consuming process of setting up a new account and shopping list, filled my basket and went to the checkout. Ocado had accepted my real name with apostrophe but then Verified by Visa wouldn't complete the transaction because they've stripped out the apostrophe and presumably the two versions of my name don't match. It's almost enough to send me offline! Has anyone got any ideas about how to get developers to engage with producing more usable forms? Not just the validation but also around the accessibility - if forms are designed for access technology users with logical groupings, clear labels and headings, status messages etc it's better for all your users.

over 8 years ago

Save or Cancel

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.