The mobile form factor requires us to evaluate what information is most important to display. Here are some common table display patterns for mobile.
- Avoid using dark gridlines and vertical dividers.
- Left align text and right align numbers.
- Don’t overload the screen.
- Consider an alternate pattern if there is too much information to fit on a single screen.
- For headerless table, use only three rows of information maximum per fat row. Use smaller and/or lighter font for less important details.
- For grouped rows, visually differentiate the summary rows from the other rows in the table.
- For tables with visual indicators, choose visual indicators that are immediately recognizable; avoid gratuitous icon use.
TYPE 1 : Basic table
TYPE 2 : Headerless table
The headerless table is characterized by fat rows displaying multiple variables about an object, and no column labels. It is common practice to make the row identifier a larger font and display the details in a smaller font.
TYPE 3 : Grouped rows
Row grouping can make a table’s data easier to digest. The row groupings might act as section headers, like transactions grouped by date in the Mint example, or as subsection summaries, like the yellow total rows in the MicroStrategy Mobile example.
TYPE 4 : Cascading lists
iOS refers to this as a Table View, a UI element that “presents data in a single-column list of multiple rows.” DropBox uses this pattern for their secondary navigation within the DropBox tab.
TYPE 5 : Fixed column
For larger tables, the fixed column pattern may be a viable solution. In this example from Roambi, the leftmost column is frozen and the rest of the columns scroll. Fidelity uses fixed columns on the left and right with scrolling content in the center, but this design is harder to navigate than Roambi’s, since there is a smaller target for swiping.
TYPE 6 : Overview plus data
The Overview plus Data pattern refers to a roll-up or summary of the table’s content displayed above the individual rows of data.
TYPE 7 : Table with visual indicators
Sparklines and icons can enhance a table’s information display, making it easier to hone in on specific items of interest. Choose visual indicators that are immediately recognizable; avoid gratuitous icon use.