O'Reilly logo

Mobile Design Pattern Gallery, Color Edition by Theresa Neil

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required