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.

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:

enter image description here

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.

share|improve this question
    
I'm not going to be citing any scientific survey or anything like that, so I'll make this a comment instead of an answer, but I prefer zebra'd tables. The color difference should be slight, however -- I don't like strong zebras. Also, as explained by others, the very best method is allowing the user to highlight a selected row, but that's sometimes not really appropriate, in which case a weak zebra is preferred. –  Michael Feb 17 '11 at 9:25
11  
The example is bad because the first column is not included in the alternate coloring, making it rather painfully useless. –  ammoQ Feb 17 '11 at 14:59
add comment

7 Answers

up vote 54 down vote accepted

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.

share|improve this answer
3  
Funny, I just read a study that said exactly the opposite. I'm going to see if I can dig it up. –  Alex Feinman Feb 16 '11 at 18:47
    
I wonder if a rainbow-like styling has a more positive effect. Since each row has a distinct color it seems like they would be even easier to tie together. That obviously wouldn't be desirable in most cases though, for aesthetic reasons. –  Bryan Matthews Feb 16 '11 at 21:00
6  
I believe this is the follow up article –  sholsinger Feb 16 '11 at 21:48
    
This experiment shouldn't be used as a general guide since it lacks different scenarios (small datasets, big datasets, small gaps between columns/rows, big gaps etc). My gut feeling is that zebra stripes help, but on the other hand - why doesn't Excel use zebra stripes in its standard mode (you have to create a table with custom striping)? –  Henrik Ekblom Feb 17 '11 at 9:25
    
Thanks, @sholsinger! Rewrote the answer to emphasize the newer article. –  Patrick McElhaney Feb 17 '11 at 14:44
show 2 more comments

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:

  • Discomfort with busy patterns, particularly stripes ("visual stress" and "pattern glare")
  • Discomfort with extreme conditions of bright/dark contrast (i.e. backlighting)
  • Discomfort or difficulty reading (reading involves busy patterns, particularly stripes. People with strong symptoms of the syndrome find it very difficult to read black text on white paper, particularly when the paper is slightly shiny.)
  • Text that appears to move (rise, fall, swirl, shake, etc.) Losing text content and only seeing rivers of white through the text Words moving together becoming one unrecognizable word

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
1  
+1 for the mouseover-highlight; it's like reading a printed table with a ruler. –  koiyu Feb 16 '11 at 20:48
2  
Zebra stripes per-row or per-bunch... Well I guess that kinda depends whether you are trying to differentiate between rows or bunches? For regular tabular data, I think per-row will be more common. –  w3d Feb 16 '11 at 21:12
    
Your suggestion that the row should be highligted when clicking on it on a touchscreen has its limitations. A common scenario is that the reference column is the first, hence the leftmost. If you have to touch that one to highlight the row, your hand (if right handed) will cover the entire screen for each click wich can can have negative impact on the work flow. –  Henrik Ekblom Feb 17 '11 at 9:19
    
@HenrikEkblom Indeed; I would recommend making the entire row highlight on click, not just the reference column. Obviously in some tables there would be parts that take some additional action onclick, so those regions should take that other action rather than highlighting (and be rendered in a way that makes that action obvious, like an Edit link). –  Chris Moschini Mar 27 '13 at 3:18
    
Old-school green bar line printer paper grouped in bunches of three, e.g. pdp8online.com/images/greenbar.shtml. I've always found that easier to read than alternating rows. –  Gerald Combs Jan 13 at 18:31
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
13  
That would work for everyone that uses a mouse –  Joe Philllips Feb 16 '11 at 17:35
1  
As an alternative, you could make clicking/tapping the row highlight it too. –  MJeffryes Feb 16 '11 at 21:17
    
@Joe Philllips: The idea is that since a screen can change the highlighted row/column does not need to be static. The primary idea is that we can infer which row/column that the user is currently interested at by observing user's behavior; the input for highlighting does not have to be a mouse, it can be eye tracking, or last clicked/tapped row/column (for touchscreen), or the arrow key in keyboard (for users that doesn't have or cannot use mouse or prefers keyboard navigation). The basic idea is that we can and should take advantage of the fact that computer screen is dynamic. –  Lie Ryan Feb 17 '11 at 14:11
add comment

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.

share|improve this answer
add comment

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.