Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
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. –  DA01 Jul 3 at 18:01
    
It's not the same question, but this question about handling zebra striping in a dynamic table is related. As I noted on Mike Chamberlain's answer, here's a fiddle showing how a dynamic table can adapt its zebra striping as rows are added and removed. –  Kit Grose Jul 4 at 7:57
    
Why not just highlight on hover? That works well on all devices that have pointing device. On touchscreen, you can highlight on single tap. –  Lie Ryan Jul 4 at 11:18

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.

share|improve this answer

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.

share|improve this answer
    
The re-striping is exactly the problem I'm thinking of. –  Dan Hulme Jul 3 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 3 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 3 at 22:23
    
Also, I don't think parallax is the right term here. Parallax refers to stereoscopic site and distance. –  DA01 Jul 3 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 4 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:

  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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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