SpoolCast: Moving Beyond Static Forms with Luke Wroblewski

Brian Christiansen

February 11th, 2010

Duration: 35m | 16 MB
Recorded: January, 2010
Brian Christiansen, UIE Podcast Producer
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]
[ Transcript Available ]


Luke Wroblewski

Luke Wroblewski

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.

The UIE Web App Tour

Clearly you can see we’re excited to have Luke join us for our 2010 Web App Masters Tour, with his presentation, Input: Moving Beyond Static Web Forms. We’re pleased that you’ll be able to see Luke in all four tour cities, San Diego, Minneapolis, Philadelphia and Seattle. He’ll have all sorts of concrete advice you can act on immediately.

5 Responses to “SpoolCast: Moving Beyond Static Forms with Luke Wroblewski”

  1. Coley Says:

    Great to hear from Luke on what’s going on with web forms these days.

    Incidentally, I have a contact form on my old company’s site. It’s a bit different than Jeremy’s Huffduffer signup in that it takes the Mad Lib style more literally, but this form was sort of a fun attempt at making contacting the company entertaining. http://rareedge.com/contact/ Reading the incoming messages from prospective clients were a lot more fun to read, too 🙂 Some folks got really creative!!

  2. Friendly first impressions – Flakes Says:

    […] almost conversational, as easy and intuitive as writing on a sheet of paper. Luke Wroblewski in a UIE Spoolcast points to the Huffduffer signup form as an […]

  3. Email verification – is your call-to-action strong enough?- 90 Percent of Everything Says:

    […] This is something that Luke Wroblewski refers to as being like “muscle memory”. He goes on to explain (transcribed from a podcast): “… Time and time again, […] people try to preface a web […]

  4. Стоит ли нам использовать повествовательные веб-формы? — UX Fox — дизайнеру интерфейсов Says:

    […] Яредом Спулом и гуру дизайна форм Люком Вроблевски, повествовательные формы (в оригинале Mad Libs) стали очень популярными. Давайте […]

  5. FutureBit : Стоит ли нам использовать повествовательные веб-формы? Says:

    […] Яредом Спулом и гуру дизайна форм Люком Вроблевски, повествовательные формы (в оригинале Mad Libs) стали очень популярными. Давайте […]

Add a Comment