Summary: Locking headers and allowing users to select a subset of data according to their needs make large data tables usable on mobile devices.
Displaying big data on a small screen is a daunting challenge. How do we make a large amount of data fit on a small screen? Other than limiting the number of rows or columns of data, what other options are available to display tables on small screens? What does a usable table look like on mobile?
(The general problem of having more data than fits on the screen is not specific to mobile: information-visualization researchers have struggled for years with the topic of showing data that has more columns (or rows) that can fit on the user’s screen — be it a large monitor, an array of monitors, or a small mobile display. However, the smaller the screen, the more likely that we’ll get into trouble with any given dataset and will need to design carefully to minimize usability problems.)
In our article on comparison tables, we covered key elements in presenting data, such as the need for consistency of content and presenting meaningful attributes to users. Both are equally, if not even more important for mobile tables, due to the small amount of data visible at one time. You must first create a usable table for a large screen before translating it to a small one. The need to make a table work on a smaller screen may be a good reason, excuse, or impetus to reevaluate the content and attributes in your table, regardless of screen size, and to improve content for all users.
The number of columns that fit on a mobile screen without scrolling will depend on the width of those columns. Items need to be legible without requiring the user to zoom in.
For complex or wordy entries, such as those in comparison tables, only 2 columns may fit legibly on a narrow mobile screen. For a number-heavy table, narrower columns may work, allowing more columns to be visible.
The National Rugby League’s player statistics were numeric and allowed 11 columns to be displayed on the screen without horizontal scrolling. Note that this was accomplished by using only the logo of the opposing team in the first column and the abbreviation for the statistics in the column headings, which will be a problem for users unfamiliar with this shorthand. That said, only rugby fanatics are likely to be interested in such detailed player stats in the first place.
Rotating the phone allows more columns of information to be visible at once. However, what you gain in column space, you lose in row space. In addition, it can be an annoyance to users if you dictate how they must hold their phone. Carefully consider if the payoff of gaining width balances the downside of annoying the user and losing space for data rows.
To compare credit cards on Citi.com, users needed to follow the instruction, Rotate your device to continue using the compare credit card feature*. Once the phone was rotated, most of the screen height was dedicated to large images of the credit card, which locked in place as the user scrolled, leaving only very little space for the comparison-table data. (This is a classic example of the need to reconsider the use of images in the mobile version of a website: while credit-card photos might be good column headers for desktop users, they should be suppressed or made smaller for mobile users, who may be better off with name-only column headers.)*
For any table that fills more than a single vertical screen, sticky column headers help users know what they are looking at. Without sticky headers, it is easy to lose the context of what the table is displaying.
Left: This comparison table from BestBuy.com did not lock either column or row headings in place, making it harder to understand the data in the table. Right: The screenshot shows the table scrolled, with no labels visible.
When data doesn’t fit the width of a portrait-view mobile screen, users may need to scroll horizontally to see the full information. (While horizontal scrolling in general is nasty for desktop and mobile users, it’s somewhat acceptable for large tables on mobile screens.)
However, for such scrolling to work, it must be apparent that there is more data beyond the horizontal fold. Like for carousels, arrows or cut-off elements convey this information best. Dots are sometimes used, but are typically harder for users to notice and understand than arrows or cut-off elements.