You are previewing Mobile Design Pattern Gallery, Color Edition.

Mobile Design Pattern Gallery, Color Edition

Cover of Mobile Design Pattern Gallery, Color Edition by Theresa Neil Published by O'Reilly Media, Inc.
  1. Mobile Design Pattern Gallery
  2. Foreword
  3. Preface
    1. Introduction
    2. Intended Audience for This Book
    3. Safari® Books Online
    4. How to Contact Us
    5. Acknowledgments
  4. 1. Navigation
    1. Primary Navigation Patterns
      1. Springboard
      2. List Menu
      3. Tabs
      4. Gallery
      5. Dashboard
      6. Metaphor
      7. Mega Menu
    2. Secondary Navigation
      1. Page Carousel
      2. Image Carousel
      3. Expanding List
  5. 2. Forms
    1. Sign In
    2. Registration
    3. Checkout
    4. Calculate
    5. Search Form
    6. Multi-Step
    7. Long Form
  6. 3. Tables & Lists
    1. Basic Table
    2. Headerless Table
    3. Fixed Column
    4. Overview plus Data
    5. Grouped Rows
    6. Cascading Lists
    7. Table with Visual Indicators
    8. Editable Table
  7. 4. Search, Sort & Filter
    1. Search
      1. Explicit Search
      2. Search with Auto-Complete
      3. Dynamic Search
      4. Scoped Search
      5. Saved and Recent Searches
      6. Search Form
      7. Search Results/View Results
    2. Sort Patterns
      1. Onscreen Sort
      2. Sort Order Selector
      3. Sort Form
    3. Filter
      1. Onscreen Filter
      2. Filter Drawer
      3. Filter Dialog
      4. Filter Form
  8. 5. Tools
    1. Toolbar
    2. Option Menu
    3. Call to Action Button
    4. Contextual Tools
    5. Inline Actions
    6. Multi-State Button
    7. Bulk Actions
  9. 6. Charts
    1. Chart with Filters
    2. Preview Window
    3. Overview plus Data
    4. Datapoint Details
    5. Drill Down
    6. Zoom
    7. Pivot Table
    8. Sparklines
  10. 7. Invitations
    1. Dialog
    2. Tip
    3. Tour
    4. Video Demo
    5. Transparency
    6. 1st Time Through
    7. Persistent
    8. Discoverable
  11. 8. Feedback & Affordance
    1. Feedback
    2. Error Messages
    3. Confirmation
    4. System Status
    5. Affordance
      1. Tap
      2. Flick
      3. Drag
  12. 9. Help
    1. How To
    2. Cheat Sheet
    3. Tour
  13. 10. Anti-Patterns
    1. Novel Notions Anti-Pattern
    2. Metaphor Mismatch Anti-Pattern
      1. Control Mismatch
      2. Icon Mismatch
      3. Mental Model Mismatch
    3. Idiot Box
    4. Chart Junk
    5. Oceans of Buttons
  14. A.
    1. Additional Resources
    2. Navigation
      1. Primary Navigation
      2. Secondary Navigation
    3. Forms
    4. Tables
    5. Search
    6. Sort Patterns
    7. Filter
    8. Tools
    9. Charts
    10. Invitations
    11. Feedback
    12. Affordance
    13. Help
  15. About the Author
  16. Copyright
O'Reilly logo

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

The best content for your career. Discover unlimited learning on demand for around $1/day.