Is there any research out there showing whether or not alternating the row colors for a table increases/impedes the time it takes to parse information? An example can be found at the following location:
I generally find it easy to associate the input fields with the row names as long as the table is formatted correctly. So, I am not sure if alternating the colors actually adds to the user experience, but I guess I can see why this is stylistically appealing.
Jessica Enders wrote an article on A List Apart about three studies she did to determine whether "zebra stripes" are helpful.
The first study, described in an earlier article, tested users' ability to read and interpret data in a simple table. The second study was similar to the first, with an improved methodology. The third study attempted to determine whether users tend to have a subjective preference for striped tables.
The recommendation
The results of the three studies conducted to date suggest that the safest option is to shade the alternating, individual rows of your table with a single color. Taking this approach is likely to ensure that:
- task performance is better, or at least no worse, than with other table styles, and
- the aesthetic sensibilities and subjective preferences of the majority of your users are catered for.
If zebra striping of this type cannot be done easily, then ruling a line between each row may be the next best option.
Update: Don't miss Filipe Hoffa's answer below.
For on-screen tables, I think it's best to have non-alternating tables but have the entire row under the mouse to be highlighted. Also, the column header that the mouse is pointing should also be highlighted.
Don't. Don't use zebra stripes.
Let me quote Edward Tufte:
Again, this is a solved problem, with examples in Envisioning Information, chapter 3. Strips are merely bureaucratic or designer chartjunk; good typography can always organize a table, no stripes needed.
-- Edward Tufte https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001IV
If you are going to use colors, make the colors meaningful. Why is this row dark? Why is this row lighter than the others? There should be a reason other than "this line happened to go after this other one".
For large data sets, I'm a fan of slight gradient for each row. A slick annual report I saw a few years back made the effect by alternating the row border bottom colors like #333 to #666.
+1 Lie Ryan for the hover effect. Our time tracker highlights the rows on hover. Lifesaver. AND what's more, it provides additional data in the tool tip pop-up. Gradual engagement win.
The goal is to make the data easy to read and scan. Zebra stripes are but one element that can be leveraged to assist with that.
Often, they are abused, and become chart junk.
I'd suggest that they should be a last-option tool. If the layout of the data can not hold together in easy to scan rows, then toss in the stripes. But be extremely subtle with them to start with.
I don't know of any research on this field, but if you take alot of rows and columns in Microsoft Excel and compare them with and without alternating backgrounds my experience is that it's much easier to know what column is connected to what row, especially if you want data from the rightmost column and you use the first (leftmost) column as the reference.
Since humans easily group things into bunches of 3-7 (depending on the human), I've always wondered why the zebra stripes are per-row rather than per-bunch.
I've also found a highlight on mouseover (or click if you want to support touchscreens like smartphones) to be helpful - a bit like a zebra stripe that only appears to visually group the specific row you're interested in at the moment.
If you are going to use any of these visual-grouping backgrounds, separating them as they did in the image you posted as an example is a strict no-no. The visual breakup by the table cell padding is jarring.
Alternation of background color in rows helps with accessibility for users who have vision problems. One example is scotopic users, who without the right colors or alternating rows may end up reading the same row over and over among other issues. Here are some of the symptoms of scotopic vision:
This list is misleading when it says stripes because of the subject matter, however, the text itself is the "stripes" and the striping in the table is actually what breaks that up and makes it easier to read.
