Tabular vs Card-based presentation, which is better for lots of data?

Question

Basically, we have a long list of stuff that has, on its on, a lot of details. We are wondering whether to use a table or put each set in a rectangular card format. See below:

On one hand, the table will be easier to look at (for an overview) but the card version can contain more stuff about the item.

See below for a real-life example (Goodreads (top) or Amazon (bottom)):

What would be better if we really have a lot of data for each item?

Answer 1

Adding to @DesignerAnalyst's answer. Here are some parameters you may want to consider before selecting the metaphor,

• Amount of data for each record: If the data includes text, images, actions then a card layout will help the user to read more easily.
• Time spent on each record: It basically correlated with the data you are showing. If user spends time thinking about each record a card might be more valuable. But an overview of many items is what table is for.
• Sorting & Filtering: Since data is neatly kept in columns for grid layout, column level filtering is easier for grid layout. So if user wants to quickly rummage through a huge dataset a grid is more suitable.
• Multiple selection: Does the user work on multiple records at the same time? Like selecting many to copy, move, delete etc. In such scenario grid is more helpful than cards.
• Flexibility: If user want to change the column options or want to tweak the way the data is displayed it is much easier to do so in grid layout, where the change is data parameters are less likely to disturb the view.
• Domain: Users mental model is suited for what kind of data. Users know Amazon and expect cards or thumbnail view in E-commerce, whereas the same user might expect long grid while visiting Gmail.
• Real Estate Availability: Business consideration to show X number of records in one screen will also impact the choice of metaphor
• Impact: A direct visual impact for each record can be achieved in cards with thumbnails or specific formatting to certain parameters of the record. That is harder to do in grid.

These parameters might help in selection. Also, no one is stopping you to offer both the views and give the choice to the user to toggle between them. This might also depend on user roles. As an example, a consumer might want to see a card layout in E-commerce site where as an Admin obviously will prefer a quick grid view to skim through the available products.

Answer 2

Quantity alone cannot determine the decision. The decision of tabular Vs card format depends also from the use cases, the purpose of the site and the type of data. I outline below advantages and disadvantages of the two formats :

• Comparison is very easy in the tabular format because it enables vertical scanning (i.e. find the lowest price). In the card format comparison requires more effort, because data are mixed.
• Long free text is very difficult to read in the tabular format and also increases the row width. Card format enables you to display text in a much more readable format.
• Too many columns in the tabular format creates long horizontal scrolling, which is very confusing and in-efficient. Card format may eliminate horizontal scrolling completely.
• Images are very difficult to display in tabular format, you have to create very small thumbnails. For e-commerce sites product image size is very important, small images can reduce sales. The card format does not have this limitation.
• Labels in the card format are repeated for every row, which creates more clutter.

Answer 3

I worked on similar problems on my previous project. The real estate is a big challenge as you will always want to give user everything on first glance. But this is not feasible.

First, decide which content is most important. Make a hierarchy. Place all content on their respective hierarchy.

Use pop-up modal dialog to display extra information which is long text or paragraphs.

Best way to decide what to place on top is filters. Whatever qualified as filter keys should be placed on the first page then based on granularity place it on second and third level of design.

Check out kendo UI grids which have awesome aggregate function which can aggregate column into tabular data with higher or lower granularity.

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

I prefer second design where you give user all important details at first so he can take an informed decision for further process. But, it all depends on your requirement at the moment.

Answer 4

If all row sets have a universal columns split and sorting, you definitely don't want to break that vertical that is created by users sorting out the data in one column (fig 1).

And vice versa, if the sets have a different vertical columns, then it's better to split them visually not to confuse the reader (fig 2).

VS

NB: this being said, I'm confused by the examples you are showing… this is not data and it's not a data table.

I assume your question is more about whether to have column titles — the only difference between two examples you are showing. If that is the case, you only need column titles if there is sorting by column name. Sorting is a way of reorder the information in the column and it can be in any kind of order — ascending-descending, price high to low and vice versa, date, titles in alphabetic order etc.