h10

Clear forms at a glance

Site Genre: Pattern Group h

magnify imageFigureH10.1 By setting the goal of a form at the beginning, creating an easy-to-read layout, and making separate subsections, each with their own purpose, you make it more likely that visitors will spend the time filling out all the fields requested.

Background

Whether you’re collecting information to provide a QUICK-FLOW CHECKOUT (F1) on a PERSONAL E-COMMERCE (A1) site, identifying customer preferences for a NEWS MOSAIC (A2), or configuring a WEB APP THAT WORKS (A10), forms are essential parts of almost every site. They provide site operators with information about customers, and ideally they also help give customers the information they need, directly or indirectly.

Close

PROBLEM

Forms can be tedious and frustrating to complete, especially when they’re long or difficult to understand.

buy the book to find out more

SOLUTION

magnify image FigureH10.4 Clear forms make the purpose for collecting each data item obvious, simplify data entry, and automatically validate the data, if possible, while also communicating how the customer benefits by filling out the form.

Provide a payoff for the form by specifying what customers will receive if they supply their information. Choose label names carefully, using familiar language and abbreviations, and then test the labels. Place labels beside, above, or below input boxes, but make sure the labels are visually associated with their fields. Help people input data that needs to be specially formatted by automatically skipping from field to field or formatting the data for them. Keep forms short, or split longer forms into multiple pages with a progress bar, or into clear sections on one page. Provide simple instructions, as well as examples that clear when the customer types. Reduce the amount of typing required of customers by using predictive input. Provide intelligent error handling by reloading the page with all information intact, by calling out problems at the top of the page, and by providing instructions next to each problem.

Other Patterns to Consider

Use a GRID LAYOUT (I1) to keep all the form elements in alignment. If you can’t keep everything ABOVE THE FOLD (I2), include an ACTION BUTTON (K4) in the same box as the form elements. Use PREDICTIVE INPUT (H11) and DRILL-DOWN OPTIONS (H12) to help customers fill out fields more quickly, if the list of options is long but not unlimited. Ensure that your form design is PREVENTING ERRORS (K12) by carefully designing and testing the forms. When errors do occur, present MEANINGFUL ERROR MESSAGES (K13).

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEBSITE

You must be logged in to post a comment.