A List Apart has just posted a pretty interesting article on zebra striping and its effectiveness among users. A study was setup to test whether or not striping the rows of tables was as really useful as we make it out to be. Considering that I used ALA’s previous article on zebra striping several years ago, I found the results a little surprising.
Essentially, the experiment found that zebra striping tables did not improve the accuracy or speed of finding information in the table. However, one thing stood out to me:
Finally, and perhaps most interestingly, a number of participants in the study spontaneously reported using their finger, on or over the computer screen, to follow down columns and across rows. Other participants used their mouse to highlight rows of interest. These people were, in effect, creating their own “temporary” zebra striping. So we may be reducing the burden on our users if we do the zebra striping for them.
What this told me is that there is a simple, easy answer to whether or not zebra striping can be helpful. Use hover styles. If the user is already using their mouse to highlight rows of interest, why not do it for them? You can break it down even further by highlighting the individual cell if you have a lot of rows and columns. I think it comes down to what is visually appealing is easier to work with, even though it may not technically improve accuracy or speed.
Here is how I handle my zebra striping.
If you want a bunch of different examples to choose from, here’s a great list.
I like hover styles, but I am definitely one of those who uses the mouse to highlight information in a table row. When I do this, that information stays highlighted so that I can move the mouse away and click back into another application (typically on a second monitor). That allows me to find exactly what row I want when I look back at the table. Normal zebra striping wouldn’t be that useful in this example because my eyes would be drawn to any of the “colored” rows – not the one I highlighted myself.
I think it comes down to what is visually appealing is easier to work with, even though it may not technically improve accuracy or speed.
I definitely agree with this statement. Thanks for posting this. Pretty interesting stuff.
As Charlie implied, a lot of this seems to come down to preference. My preference leans toward striping with lighter colors and to use very little contrast between them, then have the hover color be very saturated.
Also, let’s not forget the good ol’ grid hover. In some cases, it’s very handy.
Example: http://cba.ua.edu/~william/zebra
Disclaimer: I set that example up on Firefox on my mac, so I have no idea what it will do on IE.