Chapter 2. Forms

image with no caption

Patterns: Sign In, Registration, Checkout, Calculate, Search Criteria, Multi-step, Long Form

Most web applications rely extensively on forms for data entry and configuration. And although we have compelling research and design strategies for basic form design, there are still horrible forms all over the Web. Since there is usually no alternative, we muddle through them to buy merchandise, submit applications, or answer surveys.

Many distinct visual elements on this form get in the way of seeing the questions the form is asking. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

Figure 2-1. Many distinct visual elements on this form get in the way of seeing the questions the form is asking. Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

Mobile forms, with reduced screen size and restricted input devices, have even less leeway for bad design. Before designing any forms, I highly recommend brushing up on the basics with:

  • Filling in the Blanks: Web Form Design, by Luke Wroblewski(Rosenthal Media)

  • Forms on Mobile Devices: Modern Solutions, by Luke Wroblewski(Smashing Magazine)

  • Mobile Form Design Strategies, by Chui Chui Tan (UX Booth)

The following form design patterns can supplement the information in these books and articles:

Form patterns

Figure 2-2. Form patterns

Sign In

Sign In forms should have a ...

Get Mobile Design Pattern Gallery, Color Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.