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.

I wouldn't call it 'pretty good evidence' that they are the 'most effective' way. I would call it 'evidence that they can be useful at times'. Using zebra stripes shouldn't be a default choice, though. Only use it when it makes sense to and other options aren't providing the solution you need. With drag-n-drop, you provide a pretty good argument as to why you shouldn't use zebra stripes in that scenario.
–
DA01Jul 3 '14 at 18:01

3 Answers
3

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.

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.
–
FranchescaJul 3 '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.
–
DA01Jul 3 '14 at 22:23

Also, I don't think parallax is the right term here. Parallax refers to stereoscopic site and distance.
–
DA01Jul 3 '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.
–
FranchescaJul 4 '14 at 8:20

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:

to be able to oversee a long row more easily

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.