2

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

enter image description here

With group zebra stripping

enter image description here

2
  • 1
    Especially the existence of purely visual zebra should keep you looking for another solution (your example might even be interpreted as a broken zebra pattern). Also, purely relying on color is hindering accessibility. Can you tell us more about the reason for grouping? Why are there no group header rows? Oct 13, 2015 at 12:49
  • @virtualnobi groups are trips. Each trip can have multiple stops / destinations. The user should be able to see which travels belong to the same trip.
    – Steve
    Oct 13, 2015 at 13:46

3 Answers 3

6

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: enter image description here

After: enter image description here

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.

1
  • Good point - this is important as well! Oct 15, 2015 at 5:21
3

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.

1

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.

2
  • All rows should be visible I'm afraid.
    – Steve
    Oct 13, 2015 at 22:13
  • 1
    @Steve the rows are visible by default and they are clearly grouped as well. The collapsible control just gives you a build in way of grouping items (since part of the display is grouping all visible items) and an added bonus of actually collapsing the group.
    – R. Barzell
    Oct 14, 2015 at 0:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.