The SpoolCast with Jared Spool

The SpoolCast has been bringing UX learning to designers’ ears around the world since 2005. Dozens and dozens of hours of Jared Spool interviewing some of the greatest minds in design are available for you to explore.

Episode #92 Moving Beyond Static Forms with Luke Wroblewski

February 11, 2010  ·  35 minutes

Listen Now

Download the MP3

The world's foremost authority on web forms is Luke Wroblewski, author of the heralded book, Web Form Design. It's no coincidence that we lean on Luke often to join us at events like our upcoming Web App Masters Tour. Jared Spool sat down with Luke to discuss what's been happening with web forms since his book came out. It winds up there have been some interesting developments recently.

Show Notes

Web forms are the mouth that feeds most web apps. There's no way around that. Yet, few people are thinking about how to make one of the more unpleasant parts of the web more pleasant. The world's foremost authority on web forms is Luke Wroblewski, author of the heralded book, Web Form Design. It's no coincidence that we lean on Luke often to join us at events like our upcoming Web App Masters Tour.

Jared Spool sat down with Luke to discuss what's been happening with web forms since his book came out. It winds up there have been some interesting developments recently.

The first trend Jared and Luke discuss is new ways of styling forms to make them less intimidating. Perhaps the most popular form to employ a friendly and unusual form design comes from our good friend Jeremy Keith and his innovative site for finding and listening to MP3 files, HuffDuffer. Jeremy's Huffduffer signup form is unusual to say the least. If you've been a parent or child in the U.S. since the 1960s, you may think the form's design strongly resembles that of a Mad Lib.

In general, anything that reduces the stress of filling in a web form, Luke likes:

Even though Jeremy's form on Huffduffer looks like a piece of narrative, Mad Libs-style prose, underneath the surface it's all real input fields. It uses what they call progressive enhancement, which is the JavaScript technique where you do this baseline HTML and then gradually layer more advanced functionality. So his form will work on a real old browser. It'll allow people to tab between the fields like they do on a regular form. It'll allow them to put their cursor into every field and type in there. It's coded in a way so that it actually has labels so screen readers can use it. It has a kind of primary action at the moment, that once you get through the whole thing you can submit. It does actual error checking, and so on and so forth. So even though it's this example of rethinking the format of a web forum, it's still keeping true to things that keep web forms work online. It's not breaking them, it's not forcing people to really shift their mindset. And I think that's a very interesting direction I'm seeing across the web and in many places. It's people building on what makes web forms tick, but using new rich technologies, new more interactive format, kind of maybe persuasive design, if you will, to make filling in those important web forms less painful.

However, the visual affordances can make or break the success of the form. Since most web forms haven't changed since 1996, people have expectations. People succeed with Jeremy's form because it's obvious. But poor visual design can ruin a form, as well.

Luke recounts an experience he had at Yahoo! that exemplifies this point:

We had a directory page for the podcasts, and […] at the top of the page we had this input field that was open, which allowed people to tag that podcast episode with whatever terms they wanted. And because people saw that input field and it was towards the top of the page, they immediately thought "search field," and they would run search queries in there. […] it's that sort of muscle memory aspect of, "This looks like a search field because it's up at the top of the page and it looks like an input field. I know what that is. Let me just go ahead and start using it."

There a number of ways that you can validate information that someone enters into your web form, on the fly. When done correctly, this really helps people get through long forms with less frustration. However, if you're too clever with your validation, you can make the experience even more frustrating than it would have been without your "help". Luke provides us with several examples in the podcast. Tune in to hear his advice on how to help and not hinder your users.