Mobile Design Pattern Gallery, 2nd Edition

Mobile Design Pattern Gallery, 2nd Edition

by Theresa Neil
Released May 2014
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449363635

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

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from O’Reilly and nearly 200 trusted publishing partners.

Buy on Amazon Buy on ebooks.com
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—and no need to. This handy reference provides more than 90 mobile app design patterns, illustrated by 1,000 screenshots from current Android, iOS, and Windows Phone apps.

Much has changed since this book’s first edition. Mobile OSes have become increasingly different, driving their own design conventions and patterns, and many designers have embraced mobile-centric thinking. In this edition, user experience professional Theresa Neil walks product managers, designers, and developers through design patterns in 11 categories:

  • Navigation: get patterns for primary and secondary navigation
  • Forms: break industry-wide habits of bad form design
  • Tables: 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
  • Tutorials & Invitations: invite users to get started and discover features
  • Social: help users connect and become part of the group
  • Feedback & Affordance: provide users with timely feedback
  • Help: integrate help pages into a smaller form factor
  • Anti-Patterns: what not to do when designing a mobile app

Publisher resources

View/Submit Errata

Table of contents

  1. Foreword
  2. Preface
    1. Intended Audience for This Book
    2. O’Reilly Safari
    3. How to Contact Us
    4. Acknowledgments
  3. 1. Navigation
    1. Primary Navigation Patterns, Persistent
      1. Springboard
      2. Cards
      3. List Menu
      4. Dashboard
      5. Gallery
      6. Tab Menu
        1. iOS
        2. Android
        3. Windows Phone
        4. Emerging Patterns
      7. Skeuomorphic
    2. Primary Navigation Patterns, Transient
      1. Side Drawer
        1. Emerging Pattern
      2. Toggle Menu
      3. Pie Menu
    3. Secondary Navigation Patterns
      1. Page Swiping
      2. Scrolling Tabs
        1. Accordion
  4. 2. Forms
    1. Sign In
    2. Registration
    3. Registration with Personalization
    4. Multi-Step
    5. Checkout
      1. Tip #1: Include Sign In, Register, and Guest Options
      2. Tip #2: Streamline the Flow
      3. Tip #3: Provide Time-Saving Shortcuts
      4. Tip #4: Offer Express Checkout
      5. Tip #5: Forget the Web
    6. Calculator Forms
    7. Search Forms
    8. Long Forms
  5. 3. Tables
    1. Basic Table
    2. Headerless Table
    3. Fixed Column
    4. Overview plus Data
    5. Grouped Rows
    6. Table with Visual Indicators
    7. Editable Table
  6. 4. Search, Sort, and Filter
    1. Search Patterns
      1. Implicit Search
      2. Explicit Search
      3. Search with Auto-Complete
      4. Dynamic Search
      5. Scoped Search
      6. Saved, Recent, and Popular Search
      7. Search Form
      8. Search Results/View Results
    2. Sort Patterns
      1. Onscreen Sort
      2. Sort Overlay
      3. Sort Form
    3. Filter Patterns
      1. Onscreen Filter
      2. Filter Overlay
      3. Filter Form
      4. Filter Drawer
      5. Gesture-Based Filtering
  7. 5. Tools
    1. Toolbar
      1. iOS
      2. Android
      3. Windows Phone
      4. OS-Neutral Pattern: Contextual Toolbar
    2. Toolbox
    3. Call to Action Button
    4. Inline Actions
    5. Multi-State Button
    6. Contextual Tools
    7. Bulk Actions
    8. Lock Screen Controls
  8. 6. Charts
    1. Chart with Filters
    2. Interactive Timeline
    3. Data Point Details
    4. Drill Down
    5. Overview plus Data
    6. Interactive Preview
    7. Dashboard
    8. Zoom
    9. Sparklines
    10. Integrated Legend
    11. Thresholds
    12. Pivot Table
    13. Pulling It All Together
  9. 7. Tutorials and Invitations
    1. Tutorial Rules
    2. Rule #1: Use Less Text
      1. Ness Compared to Foodspotting
      2. Boomerang Compared to Mailbox
      3. DigiCal Compared to Fantastical
      4. Catch Compared to Clear
      5. SlideStory Compared to Vine
    3. Rule #2: No Frontloading
      1. Phoster Compared to Creative Studio
      2. Dooo Compared to Todoist
      3. Buy Me a Pie! Compared to OneNote
      4. Clipchat Compared to Kik
    4. Rule #3: Make It Rewarding
      1. NBC News Compared to Flipboard
      2. Noom Compared to DailyBurn Tracker
    5. Rule #4: Reinforce Learning Through Use
    6. Rule #5: Listen to Your Users
    7. Invitation Patterns
      1. Tips
      2. Persistent Invitations
      3. Discoverable Invitations
    8. Chapter Extra: Invitations—Rolling Out the Welcome Mat
      1. Iterating on the Welcome Experience
        1. Concept #1: Direct Immersion
        2. Concept #2: Tour
        3. Concept #3: Multi-Step Transparency
        4. Concept #4: Single-Step Transparency
        5. Concept #5: Tip
      2. Summary
  10. 8. Social Patterns
    1. Social Registration
      1. MapMyFitness Compared to We Heart It
    2. Connecting
    3. Following
    4. Profiles
    5. Groups
    6. Gamification
  11. 9. Feedback and Affordance
    1. Feedback Patterns
      1. Error Messages
      2. Confirmation
      3. System Status
    2. Affordance
      1. Tap
      2. Swipe/Flick
      3. Drag
  12. 10. Help
    1. How-Tos
    2. User Guide/Help System
    3. FAQs
    4. Feature Tours
    5. Tutorials
    6. Contextual Help
    7. Capture Feedback
  13. 11. Anti-Patterns
    1. Novel Notions
    2. Needless Complexity
    3. Metaphor Mismatch
      1. Control Mismatch
      2. Icon Mismatch
      3. Gesture Mismatch
      4. Mental Model Mismatch
    4. Idiot Boxes
    5. Chart Junk
    6. Oceans of Buttons
    7. Square Peg, Round Hole
    8. Chapter Extra: Let Them Pee—Avoiding the Sign-Up/Sign-In Mobile Anti-Pattern
  14. A. Additional Resources
  15. Index
  16. About the Author
  17. Copyright

Product information

  • Title: Mobile Design Pattern Gallery, 2nd Edition
  • Author(s): Theresa Neil
  • Release date: May 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449363635