A More Efficient Way to Display Data Tables

UX Movement
7 min readNov 25, 2020

Tables are one of the most popular ways to display data. They’re effective at providing structure and organization to data, but they’re difficult to scan. Users often have trouble differentiating various data types at a glance. They have to read each column header title to do so, but this requires extra cognitive effort.

Here’s a data table of six records with eight different fields in the header. When looking up a specific data value, users will scan the record identity by going down the first column. Then their eyes have to scan across the row to find that value. As they do, they have to fixate on each value to determine if it’s the one. If a particular data type isn’t clear, their eyes have to scan upwards to the column header title to verify it.

This is a lot of work and a slow process for looking up a single value. It requires users to make many fixations and saccades as they scan. The cognitive effort magnifies for tables that contain a large number of records and fields.

From Data Tables to Data Cards

A more efficient way to scan tables is differentiation through visual recognition. Instead of reading text, users only need to look at the data’s appearance. From appearance alone, they can identify the data type. Not only that, but they can also differentiate primary and secondary values for quicker recognition. All this is achieved by transforming data tables into data cards.

Data cards can cut the number of saccades and fixations down. All the data values will remain the same, but they’ll take a different appearance. There’s now a hierarchy based on data type.

The eyes don’t need to travel long saccades to get to their target. They also don’t need to fixate on irrelevant data as they scan. Nor do they have to scan upward to the column header to verify a field. Once users find the record ID, they’ll spot the value they’re looking for at a glance. This differentiation utilizes human visual recognition capabilities instead of information processing.

Salient Record IDs

--

--

UX Movement

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience. https://uxmovement.substack.com