Group rows in a table

Question

It is very common to see tables on web applications nowadays but is not that simple to see tables with groups of rows.

I have a table which can have multiple groups of rows. Each group can have from 1 to 5 rows. Just imagine each row is a stop in an travel. Some travels can have only one destination and others more than one.

I've been told that using zebra colors to separate different row groups can be consider as chartJunk distracting the user more than helping them.

The other problem with grouping items by color is that it adds a question: do the blue rows mean something? Are they somehow related? They're not aside from their neighbors, but it does add some additional processing for the viewer.

I've done this two prototypes to compare the visual results, but the one with background colors seems much more clean and visually appealing to me.

Without zebra stripping

With group zebra stripping

Answer 1

You may want to adjust proximity of grouped rows so that they are closer together. This would also allow you to use horizontal rule that is not as harsh so users can better focus on the data.

Before:

After:

The difference is pretty subtle, but it's an important one. Rather than using artificial divider or colors, you are using 'physical' distance to group related items together.

You may want to fine-tune to exaggerate even more.

Answer 2

As I wrote in my comment, I don't think a zebra pattern is a good choice. It's used often for a purely visual reason, it's not accessible, and I think it's not easy to learn (i.e., only close inspection of the content allows to derive reasons for coloring).

More importantly, the example table you show contains a few columns which apply to the trip, and not to single stops (e.g., trip key, pickup, dropoff) - you end up with column which have entries per group, not per row. Whether that is a problem depends on how many single-stop trips you have and whether there is more data which needs space.

I'd explore the use of group header rows. It would allow a visualization of the groups (each group starts with a header row and a different usage of column space (e.g., pickup and dropoff in a group header are shown in the same column where the stop row shows location and times).

I see two possible problems with this solution, one general and one specific to your case. In general, it's harder to place column headers with group header rows. Depending on the data you have, it might be possible to have it stand for itself (everyone can identify an address, and the column header "Location" might not be needed) or to push the headers into the individual rows (instead of "Pickup" and "Dropoff" column headers maybe put "From 8ZI to 8ZI"). Finally, since your groups represent a sequence in time, moving information such as "dropoff" to a group header row might make it harder to understand.

Answer 3

You could use dynamic grouping in a grid. Essentially these related rows all collapse into one row. Visually, indentation or lines make the relationships clear, plus this allows for a more compact grid.

To get an idea of what I mean, here's a demo for a SmartClient grid that does this. And no, I'm not affiliated with the company.