4

This answer gives pretty good evidence that in a table with multiple columns, zebra stripes are the most effective way to make it easy to see which rows are which in the table. Sometimes in tables, we offer drag-and-drop to reorder whole rows, and there are a few existing questions on visual cues for that.

The two features don't really interact well, because dropping a row potentially changes the colour of the dropped item and all the items between the old and new locations. This might make it visually confusing to see the result of the reordering, and disrupt the user's mental connection between the colour and the row.

Is there a way to get the same benefit of zebra stripes without making drag-and-drop awkward? I'm happy with a completely different technique if it's shown to work as well, or with a refinement to the stripes or drag-and-drop cues that avoid the problem without losing the benefit, or even with some evidence that it's not a problem in the first place.

Community
  • 1
Dan Hulme
  • 619
  • 7
  • 21

4 Answers4

1

I agree that zebra stripes probably are more of a liability than help in this situation. But note that zebra stripes are but just one way to ensure a solid horizontal division between rows. It's also important to note that the evidence that they improve things isn't by any means conclusive. As the article mentions, there's some evidence it helps, but context is a huge factor and one need to know exactly what they are comparing. Zebra stripes can help a poorly formatted table. They can also hinder and add unnecessary complexity to a well formatted table.

The intent of zebra striping is to make it easier to follow a horizontal row of data across a wide table. But there are other ways to accomplish this. Perfectly acceptable alternatives can include increasing the space between each row (white space/leading) or subtle divider lines between each row.

DA01
  • 41,799
  • 5
  • 81
  • 142
0

One simple solution could be to have the zebra stripes in a different layer altogether. So, when the drag-drop is happening, only the information will move. The stripes stay where they are. Also, a third color could be use for the hover, as someone has already pointed above.

Jeet Shah
  • 1
  • At this point it is not really about implementation. What happens if you drop the row? The problem is everything will get a different zebra-stripped color then. – Nash Apr 07 '21 at 09:12
0

Zebra stripes prevent parallax errors when reading grid rows. You just need every other row too look different.

What about giving dragged rows a 3rd colour? Once you save the changes you can re-stripe the rows.

Franchesca
  • 12,525
  • 3
  • 23
  • 36
  • The re-striping is exactly the problem I'm thinking of. – Dan Hulme Jul 03 '14 at 21:56
  • Re-applying stripes is fine. You only want to make sure that users can scan a single line without parallax errors. Users are not going to be in the middle of reading a line if they just completed a drag drop operation. – Franchesca Jul 03 '14 at 22:02
  • 1
    I think in this case re-striping is the problem. With repositioning rows, it's important that the row the eye is fixated on stays consistent as that is their landmark they are using to rearrange items. – DA01 Jul 03 '14 at 22:23
  • Also, I don't think parallax is the right term here. Parallax refers to stereoscopic site and distance. – DA01 Jul 03 '14 at 22:24
  • @DA01 did you read my answer? I said to give dragged rows a 3rd colour, and to only restripe when done rearranging. A parallax error is when our stereoscopic vision causes us to misread something so small / narrow that the difference between what each eye sees is larger than the scale of what you are looking at. – Franchesca Jul 04 '14 at 08:20
  • @Franchesca it may work, but I think that will actually cause the problem. If you are moving rows around, the zebra striping is likely giving you a visual anchor. They're likely not looking at the row being dragged, but rather where they want to drop it. And if upon dropping it each time, the zebra stripes flip, that could get disorientating. – DA01 Jul 05 '14 at 01:47
  • @DA01 yes, that's why I suggested that the rows not be restriped until the user saves the changes. I imagine a user clicking save will be done with needing a "visual anchor", since they are done dragging rows about. – Franchesca Jul 05 '14 at 09:43
  • If one can make existing rows move smoothly to their new locations once the drag and drop is complete, how about having the rows move while the stripes stay put? – supercat May 19 '15 at 23:39
0

My answer is one you might already have thought of but I want to share what I did when I ran into the same problem. I conlcuded that zebra striping doesn’t really solve anything but is just a way to make things a bit clearer and is also often used to make tables less boring to look at. They can be useful for two things:

  1. to be able to oversee a long row more easily
  2. to be able to locate a specific row in the table faster

Drag&drop is less of a problem for the first than for the second. But when drag &drop is needed it’s probably the second that counts.

To be honest I didn't really solve the problem though, but zebra striping made things worse rather than better. By worse I mean it can become misguiding and counterproductive. So I simply got rid of it. Instead I used just a border between the rows and changed the style a bit of the first column, which contained a unique name. Users have to pay attention to what they do but at least there was no misleading background color that would change and make things more confusing than they already are. Using a first column as identifier with a style that stands out from the other columns seemed to be the best solution, for now.

jazZRo
  • 11,783
  • 3
  • 30
  • 51