Book recommendation: Web Form Design: Filling in the Blanks by Wroblewski

Brian Dillard, Monday, December 22, 2008 @ 4:15 pm

Usability and design guru Luke Wroblewski knows that web forms suck. More importantly, he knows why - and how to make them suck less.

For the past few years, the Yahoo! product design exec has been presenting his ongoing research into the humble HTML form at conferences and on his blog, Functioning Form. I attended Wroblewski's presentation at An Event Apart Chicago 2007 and came away super-impressed. His persuasive mixture of case studies, existing research and newly commissioned usability studies helped shed light on the patterns and anti-patterns that determine whether users successfully complete your forms or give up in disgust.

All of Wroblewski's preparation came to fruition earlier this year when he published "Web Form Design: Filling in the Blanks" (Rosenfeld Media). After finally taking the time to read the book cover to cover, I'm mad at myself for waiting so long.

Written in clear, neutral prose and bolstered by numerous real-world examples, "Web Form Design" mixes low-level implementation advice with high-level analysis of the role forms play in ecommerce and Web 2.0. As the author himself puts it:

Web forms are often the last and most important mile in a long journey. Despite their importance, the design of forms is often poorly thought out and conceived. Your organization may have already invested heavily in opening a relationship with its customers through high-quality marketing, site design, and search engine optimization. But now it is time to "close the deal" by making sure those customers can complete your forms."

To that end, Wroblewski divides his examination of web form construction into three sections: "Form Structure," "Form Elements" and "Form Interaction." The first provides the theoretical underpinnings, while the second and third provide nuts-and-bolts advice. Sidebars from additional experts provide complementary viewpoints or delve further than the main text into technical details. Individual topics include the following:

• the proper visual treatment and interaction design of error and success messages.
• the breakdown of long forms into individual pages.
• the optimal amount of spacing between form fields and labels.
• the use of subtle graphical design elements to group related inputs logically without generating too much visual noise.
• the proper use of color, contrast and icons in error, success and help messages.
• the best ways to offer contextual help messages.
• the use of intelligent defaults in some situations and the improved usability of default-free inputs in other situations.
• the proper use of top-, left- or right-aligned form labels depending on context and form length.
• the elimination of unnecessary form fields.
• the proper placement and design of marketing questions and other optional form fields.

While examining these topics in detail, Wroblewski always assesses the relative strengths and weaknesses of a wide range of solutions. He offers an impressive amount of usability data, including detailed eye-tracking studies and form completion statistics conducted and compiled especially for the book.

In many cases, the author stresses that context determines the best solution to any given user-input scenario. Readers looking for one-size-fits-all solutions may come away disappointed. But I believe Wroblewski succeeds in his goal of forcing readers to think as deeply about the design of web forms as they do about other parts of their applications.

Among the many design patterns Wroblewski evaluates, many draw upon the interaction conventions of Ajax and Web 2.0. Autosuggest, visual transitions, inline validation and dynamic hide/show behaviors all play their part in the book's suggested solutions. Yet the author's viewpoint is always that of usability and consumer satisfaction; bells and whistles are but means to an end. In one example, Wroblewski points out that popup date pickers on travel websites were originally triggered only by explicit user interaction; it was only after their use had redefined user expectations that they began to auto-launch upon focus of the relevant form fields.

The book takes a deliberately non-technical approach to the material. Wroblewski assumes at least a basic familiarity with the HTML elements that make up web forms, but this isn't a book about markup, CSS or JavaScript. Instead of showing how to code a set of selection-dependent inputs using Ajax or stylesheet mojo, Wroblewski focuses on the information architecture, interaction design and usability of such components. The result is a book as useful to product managers and business decision-makers as it is to back-end programmers, UI engineers and designers.

"Web Form Design: Filling in the Blanks" is available in paperback or PDF format from the publisher. Wroblewski, proprietor of LukeW Interface Designs, previously published "Site Seeing: A Visual Approach to Web Usability" (Wiley, 2002).

Update: You can now purchase this book directly from the publisher for 10% off.

agile ajax

Comments: 1 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. [...] Media contacted me after I published my review of Luke Wroblewski’s “Web Form Design: Filling in the Blanks.” They offered Agile Ajax readers 10% off “Web Form Design” or any other purchase at [...]

   Pingback by Agile Ajax » Receive 10% off Web Form Design: Filling in the Blanks by Luke Wroblewski » Pathfinder Development, Monday, December 29, 2008 @ 10:41 am

Leave a comment