Web Form Design Blog

On Thursday November 13, 2008, I’ll be presenting an online session about Modern Web Form Design as part of the Future Practice User Experience Webinar series.

These 60-minute webinars are available as live classes, and then are made available in a recorded, edited format. Tickets include a copy of my new book, Web Form Design: Filling in the Blanks in both DRM-free digital and four-color paperback editions.

If you’re interested in attending, feel free to use my discount code (LUKEWBNR) to receive 20% off registration.

Event Details
Thursday, November 13 (1-2pm EST)
About Future Practice Webinars
Registration Information

Official Description
The Web has been transformed by the recent proliferation of rich interactions and social applications. But the workhorses of the online world, Web forms, have been slow to evolve with these changes. As brokers of crucial online interactions like e-commerce checkout and registration, forms bridge the gap between people, their information, and your product or service. As a result, Web form design matters. But web forms aren’t keeping up.

Building on topics in his top-selling book, Web Form Design: Filling in the Blanks, Luke Wroblewski will walk you through the latest applications of rich Web form interactions (made possible by dynamic technologies like Ajax) including: flexible inputs, dynamic help systems, inline validation, selection dependent inputs, and more. He’ll also outline how gradual engagement approaches to form design can create compelling new user experiences for a wide variety of Web applications and services. Learn how these modern approaches to Web form design can enhance your sites!

List boxes can act as a set of radio buttons (allowing people to select exactly one choice from a set of mutually exclusive options) or as a set of checkboxes (allowing people to select any number of choices from a list of options). List boxes can be configured to show more options than a drop-down menu while still taking up less screen real estate than a list of radio buttons or checkboxes. Despite these advantages, the dual nature of list boxes (mutually exclusive single selection or multiple selection) tends to cause problems for many people. As a result, list boxes are rarely used in Web forms.

On Functioning Form, I discuss an alternative solution for selecting multiple options within a form: Alternate Select Multiple.

On the Interaction Design Association (IxDA) discussion list, Erin Walsh shared some interesting insights on marking Required vs. Optional form fields.

“We recently did prototype testing on several search forms with a mixture of required and optional fields. On the team we were split on the best approach, so we tried to distinct methods: one with optional spelled out, the other with those fields having a different visual indicator. Though the sample size was limited, the “Optional” won hands-down. Remarkably, some participants even commented on how much they liked that it said “optional right there”. I know our UI team was not thrilled, but it was extremely advantageous to spell it out rather than use an icon or other visual indicators.”

–Marking Required vs. Optional form fields, IxDA Discussion list

Several new reviews for Web Form Design have been published:

• Review in Digital Web Magazine; August, 2008. Reviewed by Matthew Pennell.
  “Web Form Design is that most curious of web-dev books—one without a single line of code within its pages. Instead, we are treated to a masterclass in design theory, and the year’s first essential purchase.”
• Review in Adaptive Path; September, 2008. Reviewed by Dan Saffer.
  “Filled with practical advice told in an engaging manner. I can’t imagine any serious web interaction designer not having it on her bookshelf.”
• Review in Pure Visibility; August 2008. Reviewed by Mike Beasley
  “This one definitely has a place on the Pure Visibility bookshelf.”
• Review in Eddie Welker’s blog; August 2008.
  “Web Form Design is written well enough so that it can be easily read within a few hours. However, it’s real place is beside you the next time that you have to design or write a form, so that you will be able to make intelligent design decisions, rather than just best guesses.”
• Review in Alec Cochrane’s blog; August 2008.
  “It is a very practical book on the all the intricacies of designing and building forms for the web environment. And to be quite frank, I didn’t even realise that there was so much to know about.”
• Review in Ben Nadel’s blog; August 2008.
  “In short, this book is jam-packed with valuable information. I am positive that there is far too much for me to absorb in one sitting; surely, this book will become and often-used reference book in my library.”

In Web From Design, I advocated ways to get people engaged and interested in Web applications and services without requiring an explicit sign-up form. In many cases, registration is an obstacle that prevents people from exploring and engaging with an application.

Since then, several people have asked what the impact of removing registration would be on content quantity (does removing sign-up forms increase participation) and content quality (will quality go down if registration is not required). Not too long ago, the community news site, Topix published details behind their experience killing sign-up forms.

The results?

• Since removing registration, volume has exploded and passed a quarter-of-a-million aggregate posts
• And the quality of posts? The post kill-rate (removal) actually dropped -hovering below 2%. This is less than half of the number incurred when registration was in place.

  Check out the full details on the Topix blog.

On his blog, Kean Richmond posted a review of Web Form Design:

“Personally I could not recommend this book enough, although I have yet to put any of the ideas I’ve learnt to practical use I will soon be redesigning and rebuilding an ecommerce site. In the book it talks a little about how effective even the smallest changes to a web form can be to the completion figures of that form, so with that in mind I fully expect to be able to provide our client with an updated site that will much improve the user experience and also their profits.”

Thanks Kean!

Marcello Calbucci recently shared some details behind the design of the Sampa sign up form. Sampa is a free Web site service that requires users to register before they set up a site and saw a 10% increase in sign-ups with one change: removing CAPTCHA.

• The Sampa sign in form has been through 4 or 5 different versions
• At one point Sampa asked about 15 questions
• ampa A/B tested several sign up form scenarios over the last 2 years to determine the right combination that yields maximum conversion and retention
• CAPTCHA was used to prevent automated bots from creating hundreds of thousands of fake accounts
• Sampa removed CAPTCHA 99% of the time through a set of tests and rules
• The result: 9.2% improvement on our conversion rate

For more details check out the article by Marcello.

Recently Smashing Magazine surveyed the landscape of sign-up forms by looking at patterns in 100 popular Web destinations and their registration forms . The data they extracted is a catalog of existing practices and as a result should not be considered design recommendations. However, it is interesting to see these trends and ultimately if they change over time.

Complete articles on Smashing Magazine:

• Sign-Up Form Patterns: Part One
• Sign-Up Form Patterns: Part Two

On Boxes & Arrows, Will Evans posted a detailed review of Web Form Design:

“What is likely to win the most converts, though, is the joy Wroblewski takes in designing. This impression becomes clear as you page through the book. He isn’t just an ardent evangelizer, following the rituals of going to conferences selling snake oil. He’s been there in the trenches, just like you; he’s done this a hundred, maybe a thousand times. He’s tested these ideas and provides a framework for you to use from day one. Half the battle in good form design is defending your decisions to stakeholders. This is your air cover, so call it in!”

Continue Reading…

On the Goodreads site, Marty DeAngelo posted a detailed review of Web Form Design:

“Good or bad, there aren’t many books that I can use for my job that I go through quickly. There’s just something about a limit to my absorption of information from these books that makes me take my time to get through them. However, that was not a problem with this book. Chock full of good information, Wroblewski manages to make it a quick, easy and yet informative read that only took me 2 days cover-to-cover.
(more…)