Web Form Design: Filling in the Blanks

webformdesign_cover.jpg

I hate forms. Germany is full of bureaucrats that love them, but their forms are amongst some of the most poorly designed I have ever encountered. The ones lying under the book in the picture above have been sitting on my desk for a year waiting to find someone who can understand them. A year! What a sad indictment – whoever designed those should be weeping right now.

By rights a whole book devoted to Web Form Design: Filling in the Blanks should be as interesting as watching paint dry, but instead Luke Wroblewski has written on of the best books on user experience and web usability that I have read for some time. It deserves a place on every user experience or web designer’s bookshelf right next to Steve Krug’s classic Don’t Make Me Think: A Common Sense Approach to Web Usability.

Web Form Design is written from a position of sympathy with everyone who has had to struggle through a bad form, and that is pretty much all of us. Wroblewski lays out his stall right from the outset:

Forms suck. If you don’t believe me, try to find people who like filling them in. You may turn up an accountant who gets a rush when wrapping up a client’s tax return or perhaps a desk clerk who loves to tidy up office payroll. But for most of us, forms are just an annoyance. What we want to do is to vote, apply for a job, buy a book online, join a group, or get a rebate back from a recent purchase. Forms just stand in our way.

What makes this book so engaging is Wroblewski’s insight that forms are the social interaction part of any web experience. Forms are conversations between us and the company whose web site we are on. When we go to a real-life shop, we are usually greeted by an assistent or have some kind of social interaction whilst paying for our shopping, even if it is just “have a nice day” or “thank you”. Or we might have a pleasant interaction when unpacking a product:

apple_unboxing.jpg

“Unpacking a new Apple MacBook Pro is a tactile, engaging experience that reflects the quality of the product inside.”

Forms are everywhere online. Whether it is a simple log-in, a purchasing or sign-up process or an online application, you can’t escape them. Wroblewski argues that many web forms are like a stranger coming up to and demanding to know your all your personal and bank details without so much as a “Hello”. When something goes wrong, the worst of them just leave you in the lurch and even the some of the best of them stare at you with an accusing error message without any hint of what to do about it. Even taking a few hints from Web Form Design could save us all from that unpleasantness and frustration.

To tackle the subject, the book is divided into three sections:

Form Structure describes how to go about designing and organising forms that help people complete them and their goals, which is actually what they want to complete, not the form itself. This also includes the practical tasks of trying to manage vying needs of marketing, business and usability requirements as well as deciding if you even need a form at all.

webformdesign_ebay.jpg

“In the eBay registration redesign, customer support, usability findings, and site tracking data were used to illustrate major issues. The entire flow was mapped out page by page with site click-through data that illustrated user drop-off and best practice analysis.”

Form Elements covers the nitty gritty of labels, alignments, input fields, actions, and messaging, such as help, errors and success. Throughout this and the other sections there are plenty of clear examples and best-practice approaches on hand.

webformdesign_alignment.jpg

Some of the pros and cons of right-aligned labels.

Form Interaction focusses on the process of filling in forms and covers issues such as auto-validation, input types and how to engage people in the process from a human point of view, not an “inside-out” point of view of the company or the developers.

The above descriptions of the sections makes it sound rather dull, because forms are dull. But don’t be misled by that because Wroblewski really brings the user experience to life as he works through the examples as well as case-studies and perspectives from other designers. It all is this attention to detail that makes all the difference.

One case study from Jared Spool describes how a simple change made an enormous difference to an online store that had previously forced shoppers to register before checkout:

“The designers fixed the problem simply. They took away the Register button. In its place, they put a Continue button with a simple message: “You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.”

The results: The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000.”

Web Form Design is not about Wroblewski making a dull subject interesting, instead he shows that forms are, in fact, central to the user experience and can be painless at the very least and sometimes even engaging and entertaining when done well. His clear and readable writing style is displayed in an equal clarity by Susan Honeywell’s crisp design of the book.

webfromdesign_chapter.gif

Rosenfeld Media’s founder and publisher is Louis Rosenfeld, who wrote Information Architecture for the World Wide Web. As a user experience guy himself, he has made sure to make his books as accessible as possible, which is an additional treat. Along with the book’s web site, almost all of the images and diagrams are available on Flickr under a Creative Commons licence.

So, who is this book for? Interaction, user-experience designers and usability folks for sure, but it’s the kind of book that everyone from CEOs and marketing departments through to developers and project managers and German government departments should read.

Eric Meyer sums it up best on the back cover:

‘If I could only send a copy of Web Form Design to the designer of every web form that’s frustrated me, I’d go bankrupt from the shipping charges alone. Please. Stop the pain. Read this book now.’

Rating: ★★★★½ 

You can support The Designer’s Review of Books by buying Web Form Design from Amazon.com or our store, but you can also buy a physical copy or a DRM-free digital edition (thoughtfully tweaked for ease of on-screen reading and printing) direct from Rosenfeld Media. You don’t need to feel guilty and if you use the code DROB, you’ll also get a 15% discount.

About the author

Andy Polaine

View all posts

14 Comments

  • Ben – yes it’s a simple but brilliant insight. Forms are an afterthought in most web design books and projects. I think because they’re often dull they don’t get much attention either, but Luke brings that conversation idea to life.

    Giorgio – I don’t know of anything directly, but have a search of the IxDA discussion list archives. I seem to remember some talk about this recently when someone asked the same question: http://www.ixda.org/search.php?tag=paper+forms

  • I also enjoyed Luke’s book and was honoured to be asked to contribute a ‘Perspective’ to it. We recommended it in our book.

    If you’re interested in paper forms, you’ll find that many of the ideas in our book work just as well for paper. I’ve put a page on our web site that explains which chapters are relevant to paper: http://formsthatwork.editme.com/Paper

    Best Caroline

  • Caroline – yes, that was my thought too, nice to see you putting that info online. When you think of forms as conversations, you can easily see why people feel so shut of them when dealing with banks and government departments. I have seen so real improvements in this area when I visit the UK, some of it driven by service designers like Live|Work.

    But here in Germany forms are a disaster – I think they are still perceived to need to be utterly plain because they are formal, “serious” documents. The language used in them is very different from daily German too – even my German wife and German teacher don’t understand what they are asking for, which makes it doubly hard, if not impossible for a foreigner.

    The upshot of this is that they have a whole system set up to help people fill the things in – you have to go down to the department and sit with someone who takes you through and they are fully aware that their forms are awful. It’s such an enormous waste of time and money for all involved that could be solved with some judicious design.

  • Ha! I’m working on a fresh form today and it’s a tedious task. It seems a simple task at first glance, but to make sure that you have just the right amount of fields and making sure readability is not an issue makes it a challenge!

    Forms can suck, but it’s my job (and anyone else involved in design and development of forms) to make the simple task of getting in touch with someone painless. Nowadays I choose to contact people simply through email, I hate forms.

    Diane Zerr’s last blog post..Lomo Walls at MoMA

  • Diane – they don’t need to suck though. In fact, like a lot of good design, when they’re done well you don’t even think about them that much. The last part of the book is all about getting rid of forms and gradual engagement – that is, you draw people into what activity they are wanting to do on your site by just letting them do it and automatically creating a profile that they can edit and fill-in later. Quite a few of the better web apps work this way, but many don’t still. I think we’ll see a shift away from a lot of forms as we know it. I hope so, at least.

  • Hello, its nice to read this article. This Forms are very important for the idea exchange between the owner and the user. So forms are playing a vital role in keeping the relationship between the owner and the user. Thank You.

  • I red a book on this topic, something like ‘designing beautiful forms’ from sitepoint. but the art of form design goes beyond books. there are lots of tricks for that, because the form element is a complex one.

  • Ditto! Forms suck. But they are able to open up the avenues of communication in very effective and efficient ways. Maybe that’s the reason why, no matter how many people hate them so much, they’re still here. 🙂

  • I came across this book about more a year ago and thougt – this is a must have (as a german who suffers a lot just because the annual tax declaration). Today I searched for it again and found your review, so it’s ordered now!

    @Giorgio There is a beautiful german book about designing Forms for Print – meanwhile translated into english: »The Form Book« http://www.formulare-gestalten.de/en/index.html I hate forms, but I love this book and since I red it, I love to design them.

    ps.: I forgot to fill out the captcha in the comment-form and hat to fill out »name« »e-mail« and »website« twice 😉 the irony of life…