RedUX : Cards versus Table : UX Patterns
A recent query at work, got me to thinking about how to best present large volumes of data to users. We were re-designing a web page with tabular data so large, it required scrolling in both directions to view all rows and columns.
Opinions were freely provided…
There were some who proposed tabular presentation and others who proposed card style presentation. Being quite opinionated about what makes for a good User eXperience (UX), I internally picked my winner, and began propping up my supporting arguments. I believed in my chosen champion, but I found it a challenge to vocalize the pros and cons of each.
I am not an unreasonable man…
Afterwards, I decided to put a little more research behind my choice. I’m always interested in putting some data behind my beliefs, and often I will publish a summary of my research. This is one of those times.
A Google result or two later, and I landed on a wonderful post with some great answers. I give full credit to the original posters/commenters, and can only take credit for repackaging their thoughts into a form that more closely relates to my situation. The article is linked at the end.
First up… Cards
( A couple of examples below, then reasons following…)
Images : These and other “tall” elements will call for a card layout, as the remaining items can stack in next to them, filling the remaining real-estate efficiently.
Time per Record : Is the user considering all the data for a record, or looking for only one or two bits of data per record. Considering all the data favors a card where the data is all available in a smaller area, looking for a bit or two of data favors the table.
Impact: Custom formatting for data in each record is easier in a card format. Large text, images, and conditional color coding are more appropriate in card format. That is harder to do in grid, and visually uncomfortable for the viewer.
Long Text : Card format enables you to display long text in a much more readable format. In a grid, unpredictable long text is wasteful with width.
Next up… Tables
( Pretty sure we all know what a table looks like, so on to the reasons. )
Sorting/Filtering : Since data is neatly kept in columns for tables, column-based sorting and filtering is easier and more suitable.
Multiple Selection : Does the user want to compare/copy/delete multiple records at once? A grid is easier for this as similar data is aligned and easily visually tracked by the eye.
Data Comparison : Tabular format works better because it enables vertical scanning (i.e. find the lowest price). In the card format comparison requires more effort, because data are mixed and the eye must travel over unrelated data.
Finally… Some other considerations…
Domain : Is the user expecting to see one or the other? e-Commerce often presents via cards, while business often presents in tabular. ( This is also a negative, as often business users suffer from “The Excel Barrier”. )
Real Estate : Can you fit it all on one screen? This may call for tables, cards, or a mix. One of my personal UX goals is to get the user to their answer, without scrolling, and without popups.
Check out the link below, there is more info there than what I have paraphrased here.
