Is there a good alternative to zebra stripes when rows use drag-and-drop reordering?

Question

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.

Answer 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.

Answer 2

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.

Answer 3

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.

Answer 4

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.