Mobile Design Pattern Gallery, Color Edition

Chapter 3. Tables & Lists

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:

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:

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