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 3. Tables & Lists

image with no caption

Patterns: Basic Table, Headerless Tables, Grouped Rows, Fixed Column, Cascading Lists, Editable Tables, Tables with Visual Indicators. Overview plus Data

Many of our clients have enterprise applications or robust productivity tools that usually include tables packed full of data. Envision a table with dozens of columns that scrolls horizontally and vertically. They want to know how we’re going to get those tables in their mobile app. Well, we’re not. At least not in the same way we do on the Web. But the good news is that the mobile form factor gives us an opportunity to reevaluate which information is most important to display.

For example, a long table of student test results might be better represented as a chart that you could drill into to see all students who scored in a certain band of the bell curve:

Redesigned table

Figure 3-1. Redesigned table

And we can provide an alternate view of the information using a Headerless Table with Dynamic Search for quickly accessing a specific student’s results:

Alternate view to the bell curve chart

Figure 3-2. Alternate view to the bell curve chart

Once you’ve identified the key data your app needs to display, check out these table patterns for inspiration:

Figure 3-3. Table patterns ...

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