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.

Currently we are working on a project that includes many datatables. Before deciding to use zebra stripes to make datatables easier to manage, I wanted to ask if you could advise a better solution than it.

share|improve this question
11  
Zebra striping has been adopted as a standard because it works well generally; that is, for almost any kind of data table. There are certainly lots of ways to make data tables even better, but those will be specific to what the data actually is and what it will be used for. –  Sam Blake Jul 2 at 17:30
3  
I have provided an answer to this question in a different post: ux.stackexchange.com/questions/42674/… I think there is a better alternative, discussed in the Darkhorse Analytics blog here: darkhorseanalytics.com/blog/clear-off-the-table –  Michael Lai Jul 2 at 23:28
20  
I keep this one in my bookmarks: i.imgur.com/ZY8dKpA.gif –  VinceCgto Jul 3 at 10:01
    
In the screenshot example, the problem for me is that the column headers have the same background color as the darker lines. It looks to me as if the column headers are a darkened data row –  DebugErr Jul 3 at 10:24
1  
This has also been discussed on the TeX Stack Exchange site: tex.stackexchange.com/questions/33758/… In short, there are often better alternatives than zebra stripes, and basic zebra stripe designs can be improved. –  Karl Ove Hufthammer Jul 6 at 10:08

4 Answers 4

It depends on your definition of "better", but whether you define user performance or user preference as your metric, there are studies that objectively measure zebra striping (which can be done in more than one way).

A study was done in 2008 that looked at how effective zebra striping is on tables, and it drew some interesting conclusions.

The study tested the following table designs and measured both user performance and user preference:

enter image description here

User Performance

The study found that zebra striping doesn't harm, and in some cases improves, user performance:

enter image description here

The table shows that for three of the eight questions, the striped version yielded a more accurate response than did the plain and lined versions. A fourth question comes very close to being statistically significant. For the remaining four questions, the difference in accuracy between all three styles is so small that it cannot be statistically separated from random noise. In these cases, performance with zebra striping is just as good as—and certainly no worse than—the plain or lined version.

This means that, in this study at least, zebra striping doesn’t harm performance—and in many cases, it actually leads to an improvement.

User Preference

Not only did the striping improve performance, but users indicated a clear preference in favor of them (and a strong aversion to plain tables):

enter image description here

The typical zebra striping approach (single-color, single-row) is the most preferred: 31% of participants rated it as the table that helps the most and only 4% rated it as the table that helps the least. (Note that the maximum margin of error on these estimates is 2.8%.)

Take away

What I would take away from this study with regard to your question is that you have several options available:

  • Plain Table
  • Double striped
  • Lined
  • Triple striped
  • Single striped
  • Two color striped

There are measurable differences in how users react to and use these designs, and the study's results suggest that the single striped table is the best approach.

share|improve this answer
4  
This answer is nearly as good as it gets. I just feel I should add that zebra-striping is essentially an implementation of Gestalt's law of enclosure. From visual design perspective very pale, low-contrast background will do the job - both in the OP image and the one on this answer you could argue that the grey raws can be toned down yet achieve the same effect. –  Izhaki Jul 2 at 21:21
3  
I think one of the problem with this study is that the plain version of the table was compared against zebra stripes and not against an optimized design of plain tables. The Darkhorse Analytics blog ( darkhorseanalytics.com/blog/clear-off-the-table) suggests a design that is more effective than zebra stripes. –  Michael Lai Jul 2 at 23:30
4  
@MichaelLai: "that is more effective than zebra stripes" - not quite. The linked blog merely guesses that an alternative presented design might be more effective (whatever definition one applies for that) than zebra stripes. It does not provide any verifiable evidence for that claim. –  O. R. Mapper Jul 3 at 9:34
3  
+1 for providing actual data. If all answers on this site were like this it would be much more useful. –  Dan Hulme Jul 3 at 17:20
3  
If we're listing all kinds of striping, I personally prefer striped by line, but with three rather than two alternating colors (in a 1-2-3-1-2-3 pattern, not a 1-2-3-2-1-2-3 pattern). In my experience, that makes it less likely to accidentally "switch" the line for as soon as my gaze wanders off the interesting line, it is instantly clear to me whether I need to look back up or down. –  O. R. Mapper Jul 4 at 6:07

It depends

As a web developer, I decide according to the data a particular table holds. Now why do I decide according to the data the element holds?

Say for example I am having a list of messages rendered in a tabular form, I tend to highlight rows for the messages say that are unread, or say I've another table with tasks listed, so I highlight the tasks according to the priority, so inhere, obviously zebra pattern isn't a way to go for.

To show you what I mean, I will attach an image from a System I am programming for business, where the user enquiry are logged and shown to the administrator where the admin has an option to mark the enquiry as unread... which is highlighted in mild yellow..

enter image description here

Apart from that, I often use highlight when a user hovers over table rows.. So using zebra pattern with similar highlight color will confuse your users.

So my approach towards this is to use a plain table with the header row highlighted and footer row highlighted (If a table has footer), you can optionally highlight few special rows or cells, just like I've done in the example below.

Demo

Plain table format

enter image description here


I've also used a chess pattern recently but that is useful when you want to show a user that none of the cells are related to each other... For example

Demo

Chess table format

The above pattern helps the user to focus on single cell.

So my suggestion to you is that use a simple table and use hover for rows.

share|improve this answer
    
You've said how you do it, and you've given advice, but you haven't actually said why you do it that way, or explained why your solution is better than alternatives. Could you expand your answer with some reasoning? –  dhmholley Jul 4 at 13:58
    
I don't get the reason behind the down vote but I think I explained it well in my answer that why I do it that way and also I stated that it depends on the scenario so I suggested a generic approach towards this –  Mr. Alien Jul 4 at 14:35
    
For data which will not be scrolled, another useful variation can be to add a small amount of extra space after every nth row (or if there are many small columns, every nth column). Such designs work very badly when scrolling, however, because many scrolling operations will cause some cells' baselines to move up and others to move down, with no apparent relationship to the scroll direction or distance. –  supercat Jul 5 at 19:12
    
I really cont' like the chess pattern –  sergiol Jul 17 at 13:21

Note that zebra-striping evolved as a way of helping users read tables on paper. If you've got the data in a computer, you can use dynamic highlighting, filtering, or other mechanisms to help users see how rows/columns are associated.

(Or, of course, pull the data out of a table entirely and present it in some more useful form.)

Also note that even in print, striping doesn't have to strictly line-by-line alternation. Two-and-two, three-and-three, or other combinations can work perfectly well, and sometimes better; the important thing is for users to have a clear visual reference nearby that they can use to track across the page. (I wouldn't normally go father than three-and-three, giving top/middle/bottom of each three-line group.)

share|improve this answer
1  
"Two-and-two, three-and-three, or other combinations can work perfectly well, and sometimes better" this seems in direct contradiction to the other answer, which has extensive academic sources. –  Lego Stormtroopr Jul 3 at 3:06
    
I agree that we disagree. All I can say is that my experience diverges, especially for highly dense tables. It does depend on exactly how the shading is done, of course. –  keshlam Jul 3 at 5:08
6  
"If you've got the data in a computer, you can use dynamic highlighting, filtering, or other mechanisms" - while that is mostly true for traditional computers with pointing devices, things may be different with touch devices again - normally lacking a proper hover state, on-the-fly highlighting is less satisfiably feasible than with a pointing device such as a mouse. –  O. R. Mapper Jul 3 at 9:39
1  
@LegoStormtroopr: If information will need to scroll, certain zebra-stripe patterns may improve visual tracking; what pattern is optimal will depend upon factors like scroll speed and refresh rate. –  supercat Jul 3 at 20:22
1  
@LegoStormtroopr The contradiction can be resolved when you see that the most upvoted answer is first and foremost about computer. On A3 paper with 8pt lettering (like they used for share prices in our local newspaper), zebra stripes would not help the eye keep track of the row when wandering from far left to far right end of the page - so they striped five consecutive rows. –  Alexander Jul 4 at 12:38

I often use dynamic striping, i.e. alternatively white and light green, while the entire line the cursor is on is light yellow.

My tables tend to be rather wide :-)

share|improve this answer
2  
Why would you say this is better than traditional zebra striping? –  JonW Jul 4 at 12:55
    
Highlighting the line of interest is often better than static striping... if you can easily select the line of interest, and if you have an active display rather than paper. –  keshlam Jul 4 at 14:26

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.