Mobile Design Pattern Gallery

Mobile Design Pattern Gallery

by Theresa Neil
Released March 2012
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449318925

Read it now on the O’Reilly learning platform with a 10-day free trial.

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

Start your free trial

Book description

When you’re under pressure to produce a well designed, easy-to-navigate mobile app, there’s no time to reinvent the wheel. This concise book provides a handy reference to 70 mobile app design patterns, illustrated by more than 400 screenshots from current iOS, Android, BlackBerry, WebOS, Windows Mobile, and Symbian apps.

User experience professional Theresa Neil (Designing Web Interfaces) walks you through design patterns in 10 separate categories, including anti-patterns. Whether you’re designing a simple iPhone application or one that’s meant to work for every popular mobile OS on the market, these patterns provide solutions to common design challenges. This print edition is in full color.

Pattern categories include:

  • Navigation: get patterns for primary and secondary navigation
  • Forms: break the industry-wide habits of bad form design
  • Tables and lists: display only the most important information
  • Search, sort, and filter: make these functions easy to use
  • Tools: create the illusion of direct interaction
  • Charts: learn best practices for basic chart design
  • Invitations: invite users to get started and discover features
  • Help: integrate help pages into a smaller form factor
"It’s a super handy catalog that I can flip to for ideas."

—Bill Scott, Senior Director of Web Development at PayPal"Looks fantastic."

—Erin Malone, Partner at Tangible UX"Just a quick thanks to express my sheer gratitude for this pub, it has been a guide for me reworking a design for an app already in production!"

—Agatha June, UX designer

Publisher resources

View/Submit Errata

Table of contents

  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

Product information

  • Title: Mobile Design Pattern Gallery
  • Author(s): Theresa Neil
  • Release date: March 2012
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449318925