Presenting data in a grid form versus a tabled form

Question

Is there a general rule when displaying data in a grid form versus a simple tabled list? Since modern screens tend to be wider now, it makes more sense to me to start utilizing grids instead of normal lists. Do grids face any UX downfalls, since they could be harder to scan or read?

Here is a sample grid layout that I am considering using for a project I am currently working on.

My alternative table would look something similar to this (using Bootstrap's .list-group):

Alternatively, I can add a preference to choose between a grid and a list layout, but I just don't want there to be an overwhelming list of options for the user.

Answer 1

Online shops often use a grid layout to present their products. According to fact finder, in the list view attention decreases from top to bottom while in the grid view attention is spread more evenly. So even products that are relatively far down on the page are likely to be viewed.

However, your application is for device maintenance and apparently it is not the main goal to make the user looking at as many devices as possible. Instead, it seems that faulty or offline devices should be detected quickly. If you use a list view and group the offline/faulty devices at the top of the list, you are on the safe side. In the grid view, you can group the devices as well, but I do not think that you gain anything in functionality.

Furthermore, if you want to allow the user to sort the devices by different criteria, the grid view can be confusing as the reading direction is then not clear for the user.

Answer 2

As in all design, context and content should drive presentation. The grid format could work well on mobile, when you need to reduce the content displayed, and the table format could work well on desktop/tablet, to give additional information. If you're going to have actions for each item, then I think the table view is better, as it's easier to tick off actions when they're all aligned vertically.

One side note, I'd call them table and card view, as grid and table are interchangeable terms to developers.

Answer 3

The grid view might be a good solution for your case if you implement a simple filter with options like-'online','offline','device with fault' etc, I think. If you think the target audiences are more likely to view it on larger screens then the grid view might be a good option in terms of utilising space. On the other hand, on smaller screens the table is more suitable, I believe.