Stacked List: The Best Way to Fit Tables on Mobile Screens

New UX pattern for mobile tables

Viewing a table on a mobile screen isn’t a pleasant user experience. Users have to scroll vertically and horizontally to view the rows and columns of data. This dual-axis scrolling creates confusion and increases task time.

You cannot shrink a wide desktop table to get it to fit on a mobile screen. Instead, you must rethink the table design and come up with a more space-efficient pattern. A stacked list is the best UX pattern for mobile tables because it saves users time and effort from excessive scrolling and confusion.

Space efficiency is essential to fitting a table on a mobile screen. To demonstrate how efficient a stacked list is, here’s a desktop table with five data columns. A stacked list can fit all five in a compact space.

As you can see, all the data from the five columns fit neatly in rows. The stacked list excludes the column header labels because users don’t need them to discern what the data represents. They can intuitively interpret what they mean by how they’re stacked and visually treated.