I’ve been spending lots of time recently designing web forms for a number different sites. All the sites have a huge number of potential users – one of them already has over a million members. So it’s critical that these forms are designed as efficiently as possible, both from a business perspective and from a user’s perspective.

Initially I was agonising over positioning of labels, positioning of input fields, positioning of buttons, error handling and much more… Until I came across Luke Wroblewski’s excellent book: Web Form Design: Filling in the Blanks. For anyone working with web forms, there’s a wealth of useful advice, based on extensive user research.

Some of the useful tips include:

1. use labels above fields for fastest completion rates
2. only use a button on the form for the primary action
3. make all other actions links, to avoid user errors
4. align the primary action button with the left edge of the input fields above – eye tracking research has shown users follow the line of the left edge of input fields down the page

Personally I’d like to have seen some research into the predict address functionality that’s used across the UK i.e. user enters a post code and house number and the form completes the address. I’m not convinced it’s best practice, but it’s used everywhere here, partly to ensure valid addresses are captured.

Web forms might be an uninspiring subject to read about, but if designing them is part of your craft and you want to be a master craftsman or woman, you need to understand and justify exactly why you are designing them in a particular way. This book will enable you to do just that.

Web Form Design: Filling in the Blanks is published by the excellent Rosenfeld Media and is available as a physical book or as a PDF download.

P.S. Here’s a really good example of how not to design a web form (thanks Stuart).