Web Form Design: Filling in the Blanks

Online Event & Discount Code: Modern Web Form Design

2008-10-31T03:29:25Z

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!

Alternative List Box UI

2008-09-15T00:43:35Z

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.

Marking Required vs. Optional form fields

2008-09-09T04:09:00Z

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

Recent Reviews

2008-09-06T04:06:03Z

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

Impact of Removing Registration

2008-08-12T04:59:50Z

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.

Kean Richmond Review

2008-07-23T01:59:18Z

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!

10% Sign up Improvement with one Change

2008-07-20T01:57:13Z

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.

Boxes & Arrows Review

2008-07-11T18:57:04Z

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!"

Goodreads Review

2008-07-09T16:42:37Z

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.

For anyone that works on the web, forms are going to be something you deal with at one time or another. Usually, it's an experience in trying to get a form to do what YOU want it to do without regard to what the customer really wants or needs. However, I've been working on a bunch of projects recently where I really need to consider what the customer wants because one of our main goals is to get users to register, and I know how fickle they are when it comes to signing up for things. So, this book was not only interesting but very timely.

The best thing about the book is how well written it is. It's fairly simplistic in getting its point across, using a lot of illustrations to really drive home the points that the author is trying to get across. His tone and personality really mesh with how the book is presented, making it almost conversational as he explains some of the major concepts and then delves deeper into the best ways to develop and present forms.

Each chapter is relatively short (about 8 - 21 pages), but chock full of good advice. The succession will also help people trying to make their forms better work their way into more and more elaborate ways of creating 'bulletproof' forms. While you won't get as far in-depth as you might need on any given topic (I wanted to know more about error messaging, a personal anathema right now) or much about the coding of the pages, the principals and direction are dead on.

As I said, the language and personality Wroblewski - whose credentials include former Lead Usability Designer at eBay, founding member of Interaction Design Association (IxDA) and current "Senior Principal of Product Ideation and Design" at Yahoo! - create a more approachable presentation than you might think from someone who is one of the leaders in usable design. Less teacher and expert-on-high and more friendly "have a beer and chat" usability guru, I found it easy to get sucked into one chapter and not look back until 3 chapters later.

The examples he uses are also top-notch. Granted, he has a great body of work to pull from, but he does a great job of using examples from a breadth of industries and user types -- everything from Fortune 500 banks to e-commerce to new Web 2.0 social networks are represented, showing that good form design isn't for any single audience. The illustrations are also well-placed in showing principles and comparisons between different methods, adding to the ease with which someone can learn how to build the better form.

His information comes from more than just his own experiences, though. Several key studies provide relevant data that give credence to the ideas presented here. He's not afraid to say, 'It depends' when it does or to say that while something might be a bad idea for the most part (and here's way), that you couldn't make it work in some limited situation. He offers what seems to be the best way to accomplish certain things within a form, without putting his own personal feelings into it (well, for the most part - and when he does, it's always in a humorous manner).

And this is a book that anyone can use - not overlay-laden with technical terms, it's instead a thorough but amazingly understandable set of observations, suggestions and instructions on how to make the forms you are creating eminently more usable for all those involved - but most especially for the customers or visitors of the sites we're building. I needed it to answer a couple specific questions I had, but it quickly opened up other paths and solutions for me I wasn't yet considering.

At this point, I have to say that this is probably one of the best UX books I've read. It might not be as thorough and ground-breaking as Saffer's "Designing for Interaction" or Zeldman's "Designing with Web Standards", but for the specificity of the topic, it really does a great job a covering all of the bases and giving real-world, actionable examples and guidance. A great buy - and I think that if you , you also get a PDF version (great because it's searchable."

-By Marty DeAngelo from Goodreads

Smart Defaults in Registration & Travel Booking Forms

2008-06-27T00:32:00Z

On Functioning Form, I discuss smart defaults (selections put in place that provide answers to questions for you) in registration & travel booking forms. Check out the full articles:

Smart Defaults in Registration Forms
When electing to join the Naymz site from an email invitation, you only need to select a password. Your name and email address have been filled in for you...

Smart Defaults in Travel Booking Forms
Now last I checked, the majority of people booking flights online are adults and they generally intend to travel on the flight they book...

International Address Fields in Web Forms

2008-06-09T18:05:04Z

Since publishing Web Form Design, one of the most frequent questions I've gotten about online forms is “How do I deal with international addresses?” So for my Communication Design column in UXmatters this month, I outlined many of the international address variations designers need to consider and a few solutions to the problem.

Check out the article at UXmatters:
International Address Fields in Web Forms

Labels Within Inputs

2008-06-07T04:11:06Z

On Functioning Form, I discuss the considerations behind combining labels and input fields into a single user interface element using an example from LinkedIn. Check out the full article: Web Form Design: Labels Within Inputs

Now on sale!

2008-05-05T03:16:50Z

Luke Wroblewski's Web Form Design: Filling in the Blanks is now available for purchase! Buy directly from Rosenfeld Media and pay US$36 for the paperback and digital editions, US$19 for digital only.

The paperback is 244 pages with high quality paper stock, a sewn binding, and a full color interior. At 6"x9", it'll be easy to stuff in your carry-on bag for reading during the flight to your next client meeting. And of course, the digital edition (373 pages) is pretty easy to take along too; in fact, it's been designed, tested, and optimized for on-screen use. Both editions are graced with 216 illustrations, which we've made available for you via Flickr to peruse, download, and use in your own presentations.

We're quite thrilled with Luke's work—from his original research to volume of practical advice he's managed to cram into this book. We hope you'll enjoy it as much as we have.

Update on the book's launch

2008-05-02T20:49:33Z

Update, 1pm ET May 3: Oh so close, but we'd prefer to get everything with our digital edition just right before launching. We're hoping to have it done tonight! Stay tuned here for more updates.

Well, we're still shooting for Web Form Design to go on sale here at the Rosenfeld Media site today. But as of a few moments ago, the book has shown up in Amazon, and you can purchase it there.

But wait! Before you order from Amazon, there is a better way to get the book. It's right here, at our site. Better for you in that you'll receive the paperback and the digital edition, designed and tested for on-screen use, for the same US$36 that you'd pay Amazon for the paperback alone. Better for us too: when you buy direct, you're supporting a small, independent, and highly responsive publishing house. Either way, your order will ship from the same warehouse in Ypsilanti, Michigan, USA. So if you can wait just a little bit longer, please do; we'd appreciate it.

One last note: Rosenfeld Media books are not available through bricks-and-mortar retailers. So save some gas and order from the comfort of your own computer.

Images and updates galore

2008-05-01T14:13:49Z

Hi, Luke's publisher here with some quick updates:

All 218 images from Web Form Design, including the front and back covers, are now available for download under a Creative Commons license. Check them out in Flickr.
We've also made book cover "badges" with embeddable code available.
Most importantly, the book itself is, as I type, on its way to the warehouse. It will go on sale this evening (ET) or tomorrow. We're very excited and hope you will be too!