Mobile Design Pattern Gallery, 2nd Edition

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.

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 & Accordance: 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

Table of contents

1. Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps
2. Foreword
3. Preface
   1. Intended Audience for This Book
   2. Safari® Books Online
   3. How to Contact Us
   4. Acknowledgments
   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
         1. Side Drawer
            1. Emerging Pattern
            1. Page Swiping
            2. Scrolling Tabs
               1. Accordion
               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
                  1. Basic Table
                  2. Headerless Table
                  3. Fixed Column
                  4. Overview plus Data
                  5. Grouped Rows
                  6. Table with Visual Indicators
                  7. Editable Table
                  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
                     1. Onscreen Sort
                     2. Sort Overlay
                     3. Sort Form
                     1. Onscreen Filter
                     2. Filter Overlay
                     3. Filter Form
                     4. Filter Drawer
                     5. Gesture-Based Filtering
                     1. Toolbar
                        1. iOS
                        2. Android
                        3. Windows Phone
                        4. OS-Neutral Pattern: Contextual Toolbar
                        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
                        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
                           1. Phoster Compared to Creative Studio
                           2. Dooo Compared to Todoist
                           3. Buy Me a Pie! Compared to OneNote
                           4. Clipchat Compared to Kik
                           1. NBC News Compared to Flipboard
                           2. Noom Compared to DailyBurn Tracker
                           1. Tips
                           2. Persistent Invitations
                           3. Discoverable Invitations
                           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
                              1. Social Registration
                                 1. MapMyFitness Compared to We Heart It
                                 1. Feedback Patterns
                                    1. Error Messages
                                    2. Confirmation
                                    3. System Status
                                    1. Tap
                                    2. Swipe/Flick
                                    3. Drag
                                    1. How-Tos
                                    2. User Guide/Help System
                                    3. FAQs
                                    4. Feature Tours
                                    5. Tutorials
                                    6. Contextual Help
                                    7. Capture Feedback
                                    1. Novel Notions
                                    2. Needless Complexity
                                    3. Metaphor Mismatch
                                       1. Control Mismatch
                                       2. Icon Mismatch
                                       3. Gesture Mismatch
                                       4. Mental Model Mismatch
                                       Show and hide more

                                       Product information

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

                                       You might also like

                                       Check it out now on O’Reilly

                                       Dive in for free with a 10-day trial of the O’Reilly learning platform—then explore all the other resources our members count on to build skills and solve problems every day.