In recent months, I’ve been working on refining the design recommendations in Web Form Design Best Practices through actual usage data. To that end, I’ve had the pleasure of working with London-based usability firm Etre on several eye-tracking and usability studies focused on specific aspects of Web form design. One of these tests focused on the distinction between primary and secondary actions.
In order to assess which design considerations are most pertinent for primary and secondary actions, we tested six variations on 23 people using eye-tracking and usability metrics. We just published the results of this testing in the following article:
Primary & Secondary Actions in Web Forms (published August 25 2007)
Additional Web form design eye-tracking and usability research will be made available exclusively in Web Form Design Best Practices.
Caroline Jarrett has been writing about forms for a number of years. In her column on Usabilitynews.com and her site Forms That Work. Here’s a small sampling of some of her extensive writings on the subject of forms:
- Designing usable forms: the three-layer model of the form (pdf format, 172Kb)
- Should I use a drop-down? Four steps for choosing form elements on the Web (pdf format, 58Kb)
- Two-column Forms are best Avoided (March 2006)
- Colons at the end of labels? (May 2006)
- Long Forms: Scroll or Tab? (April 2005)
Caroline has agreed to lend her expertise to my upcoming book and will be writing a “perspective” on putting people before pixels when designing Web forms. Really looking forward to Caroline’s insight!
User Interface Engineering (UIE) recently republished my article on Web Application Form Design. It was this article (originally written in January 2005) that kicked of my writing about forms and ultimately led to this upcoming book. UIE was also responsible for getting me to pull together what I knew about form design when they invited me to speak at their Web Application Summit in January of 2006.
So it was with great pleasure that I asked Jared Spool (UIE founder & principal) to write up his thoughts on why form design matters. Luckily he agreed and will be authoring a “perspective” for my upcoming book. Thanks, Jared.
As a number of people have asked about form development best practices in the comments on this site. I thought it would be useful to include Aaron Gustafson’s Learning to Love Forms talk from WebVisions 2007 (embedded below). The big news is that Aaron has agreed to lend his expertise to my upcoming book and will be writing a “perspective” on Web form development best practices. Really looking forward to Aaron’s contribution!
Ram Yoga recently pointed me to project ELMER: a set of Web form guidelines developed for the public sector in Norway. ELMER outlines a common framework for page layout and form interactions and Norway is one of few countries with a coherent set of rules for public forms online.
The ELMER Web form guidelines (in English) (PDF 1 MB):
From the preface:
“Simplification of public forms is important to improve communication between the users and the public sector. The proceeding transition to electronic reporting may be an important simplification measure for the respondents, but only if the Internet-based solutions are felt to be more user friendly than the old paper versions. By applying good pedagogical principles, electronic forms may also ensure a better understanding of the task, better control of the data before submission, and by that even better response quality and more efficient processing by the relevant authority.”
UXmatters just published my new article on Dynamic Help in Web Forms which surveys a number of automatic and user-activated Help systems designed to assist the completion of forms. From the synposis:
“…there are many types of forms that require lots of obscure data, use unique formats, or have input restrictions. In such cases, the amount of Help text necessary for each input field could quickly overwhelm a form, making it appear quite intimidating or complex. For forms like this, it might make sense to consider using dynamic contextual Help. As various Help systems have emerged online, I’ve started to catalogue the different types I’ve come across.”
Check out the full article on UXmatters and if you have any additional examples or insights about how well dynamic Help performs in Web forms -let me know!
Hope to see some of you there!
The talk will feature a lot of topics from my upcoming book including: label alignment, required form filed, input field sizes, content grouping, primary & secondary actions, help text & tips, dyanmic help systems, inline validation, error messages, progress indicators, success messaging, progressive disclosure, gradual engagement, tabbing, flexible data inputs, smart defaults, paths to completion, selection dependent inputs, and more…
If you’re at the Technical Communication Summit next week and are interested in meeting up to talk forms (or anything else that interests), Let me know.
I’m at WebVisions 2007 where Aaron Gustafson just gave a great talk outlining many of the building blocks required to develop effective forms with a strong focus on valid and efficient XHTML and CSS code. I’ve posted my notes at Functioning Form for those interested in the development side of Web Form Best Practices:
Aaron is a member of the Web Standards Project (WaSP) and the Guild of Accessible Web Designers (GAWDS). He also serves as Technical Editor for A List Apart, is a contributing writer for Digital Web Magazine. In his WebVisions 2007 session, he explored forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling.
Welcome to the working site for my upcoming Web Form Design Best Practices book. (That’s a working title too!). I’m looking forward to sharing ideas, research, and design considerations with everyone here over the coming months as I write the book.
So why write a book about form design? If you are in online retail, your goal is to sell things. But standing in the way of your products and your customers is a checkout form. If you are developing social software or open peer productions systems, your goal is to grow your community. Standing in between you and community members is a form. If you’ve built a productivity based Web application, forms enable key interactions that let people create and manage content. So in commerce, customer aquisition, and online productivity -forms play a pivotal role. As a result, form design matters.
Of course no one likes filling forms. People simply want to get the product you are selling, to socialize, or to get their work done. From their perspective forms just get in the way.
Understanding the principles of form design gives you the ability to minimze pain for people and maximize business success. It’s my hope Web Form Design Best Practices provides that understanding. On this site, I’ll be discussing how. Hope you’ll join me!