Zebra Striping: More Data for the Case

by Jessica Enders

44 Reader Comments

Back to the Article
  1. I never read the comments from the last discussion from the last article so sorry if this has already been said.  For me zebra stripes are a must have. I’ve got tunnel vision so when I look at the sample data in the article, I can’t see the full table at one glance.  I can see the countries column clearly or I can see the data columns clearly: but not both at the same time.  Due to this sometimes reading table data can be slower than it needs to be.  I won’t say tricky because it’s not, it’s just more inconvient for me. The zebra stripes make it easier and quicker for me to read the data.  If I look at Canada (a white row) and switch my eyes right to the data, I know that the data in the white row, in the middle of my view is Canada.  If the colours weren’t there, I couldn’t be 100% that I was looking at the data for Canada unless I either scanned across the page from left to right, or if I double checked by looking left then right again. I know it’s not a hassle for me to have to double check or scan across the page instead of just snap from A to B but isn’t this what usability is all about?  I haven’t seen any negatives to zebra striping apart from the small amount of time it takes to code and the (rare?) possibility of it throwing off a design.  For me, the ease of use I gain greatly outweighs the amount of time it would take me to code the site.
    Copy & paste the code below to embed this comment.
  2. Thank for this article. A good portion of my workload includes designing user interfaces. I spend alot of time trying to find ways to make the experience easier and more efficient for users, especially because they use the interfaces to preform day to day tasks. The issue of zebra striping the tables has been discussed and no one ever seems to agree on it. I am for them, but I personally think it is in how you create them. If they do lead the eye and the contrast isn’t to sharp then it can definitely help the user sift through results tables quicker (based on what i have seen at my job). I think the idea about testing people under pressure was more applicable to work place usage in a production environment. Again thank you for another great article and helpful resource.
    ~Aaron I
    Copy & paste the code below to embed this comment.
  3. Thank you for this informative article. The data and conclusions presented are very helpful, especially for someone such as myself that is involved in the design of annual reports.
    Copy & paste the code below to embed this comment.
  4. Jessica, thank you for your hard work on this. Thanks to ALA, as well, for publishing it. One benefit of being online is that we have the ability to dynamically alter elements of the page. Even just with :hover, we can alter table rows, table cells, etc. I find that by having a table _without_ striping allows the user to scan vertically, but having a row’s :hover state change the background color to a highlighting color (even if just gray) gives the “focus” that this survey shows to be useful. Further, you can assign a value to the row, as appropriate. For example, in our personal finance app, when the net value for the row is positive, the row’s highlight color is a pale green. When the row’s value is negative, the :hover color for the row is a pale pink. This allows the row highlighting itself to carry meaning that reinforces the data in the table. I’m not suggesting that you add dynamic row coloring on to the extensive testing you’ve done ... you’ve done a fabulous job. But it’s easy to forget that we have options available to us because of the medium we’re using, and I’d encourage other web developers to remember that there are easy enhancements that can increase usability without compromising aesthetics.
    Copy & paste the code below to embed this comment.
  5. Very informative article, well thought out and thorough. I’d love to see more of these on the site for other aspects of design! I have an in-house website that acts as a front end to a rather large database and it ends up creating some very sizable tables at times, so I often spend time trying to decide how best to improve the readability of the tables. Lately I’ve settled on a lined table complete with line-highlighting based off of mouse position. I feel like doing it that way eliminates a lot of the noise of static striping, with the obvious drawback being losing the helpfulness of striping for initially finding the row you are looking for. I’d be very interested to see these same tests repeated with the addition of in-line highlighting based off of :hover.
    Copy & paste the code below to embed this comment.
  6. I prefer to take a default table, and apply the following: td {border:1px solid black, padding:5px} This results in a table with nice padding and easily trackable rows & columns.
    Copy & paste the code below to embed this comment.
  7. Thanks for the excellent article. It’s great to see user driven design informed by statistic analysis as well as aesthetic preference.
    Copy & paste the code below to embed this comment.
  8. Thanks for doing this research. It’s invaluable. The distribution of white space among the columns in the sample table is rather uneven and tends to arrest the eye moving across a row. I wonder how much of the preference for stripes and rules is the result of the readers’ desire to impose a stronger horizontal rhythm on the rows of the table and if a similar effect could not be achieved by a judicious adjustment of the columns. LTM
    Copy & paste the code below to embed this comment.
  9. A lot of data tables I create contain links and/or form elements such as radio buttons or checkboxes.  Care to run another test on speed/accuracy of striping of these tables? My gut feeling is that they are much easier to use, but that’s only an opinion.
    Copy & paste the code below to embed this comment.
  10. I think that zebra stripes work great only if you plan to make them tall. If they are vertically thin, they just make it even harder to track.
    Copy & paste the code below to embed this comment.
  11. What an excellent article. Thanks for putting the effort into getting some solid statistics on this, and for not just leaving it at the previous zebra stripe article which I didn’t think went far enough to point where I could almost simply point people towards it when saying whether we should do it one way or the other.
    Copy & paste the code below to embed this comment.
  12. Despite the fact I am not such a huge fan of forms and the like, I do appreciate this kind of reflection and research into the usability aspect. That said, I probably fall into the camp that slightly prefers zebra stripes (even if just on the assumption that it helps). But I also agree that it often adds unwanted clutter in an already information cluttered page. One thing I think that’s great about the simple interactivity of the web in this context is allowing for row highlighting. Zebra striping can be left out (or light) and with some basic css and the essential cursor, you can allow users to highlight table rows they are scanning with a simple mouse-over… Certainly not appropriate all the time, but then again, what is..
    Copy & paste the code below to embed this comment.
  13. I want to echo Charlie Park’s idea: I think that it could be extremely beneficial to make stripes carry actual information when the situation warrants it (such as a certain color to call out important information about a row). It would, of course, require some discretion in not making a table too messy, but it could give the double benefit of making a table both more meaningful, _and_ more readable. (It always makes my day when I can make aesthetic elements pull their weight in the information structure.)
    Copy & paste the code below to embed this comment.
  14. @Lee
    * It’s very interesting to learn of the benefits that zebra striping provide for you. I’d be very keen to hear from anyone else that has a vision problem and finds that zebra stripes are particularly useful (or otherwise).
    * In terms of the negatives, I was concerned that zebra striping may create ‘visual noise’ that was distracting or a barrier for use for some people. In some cases, coding up zebra striping does also take a bit of work. But the research to date seems to confirm your view, which is that the negatives are outweighed by the positives. Thanks for contributing to the debate.
    Copy & paste the code below to embed this comment.
  15. @Charlie, Gene & Jeff You raise a very interesting point about dynamic striping (e.g. with hover) and giving users control. I wholeheartedly agree that we should make use of the functionality that the web offers us, and not constrain ourselves to the limits of previous media link print. Dynamic striping could be a great way to do this. The only downside that I can see, upon initial reflection, is that hovers are not accessible to keyboard-only users. At least, I don’t think they are - happy to be corrected. I wonder if we can go one step further in what we offer. What if tables were presented with the option to turn striping on or off, turn hover highlighting on or off, or perhaps even modify the way striping/highlighting is done (e.g. increase/decrease contrast, use a certain colour)? In many cases providing this degree of personalisation might be overkill, but when it comes to database front-ends and other such applications, which are being used hour after hour, day after day, it would probably deliver real improvements in both task effectiveness and user satisfaction.
    Copy & paste the code below to embed this comment.
  16. @Nathan I too like the idea of adding another dimension (i.e. colour) to the stripes to help reinforce meaning. If this were to be done, it would be very important to check, with the user group, the cultural associations for the chosen colours. I, like Charlie, often use green as a ‘positive’ reinforcing colour but I have heard that green is the colour of death in Italy (any Italians able to verify or refute this for me?). Being aware of the variability in colour associations is probably particularly important when it comes to designing for the web, and given the increasingly multicultural nature of our communities and workforces. Having said that, there may be contexts were we can be certain of meaning, maybe red versus black in accounting?
    Copy & paste the code below to embed this comment.
  17. Interesting study! I wish there were more objective studies of this kind informing our design decisions. What particularly struck me about your results was the small size of the effect of striping: just a few percentage points. Also, I seem to recall from undergraduate statistics classes that there’s a thing called Type I error: you reject a null hypothesis (of no difference between samples), when in actual fact it is true. The more independent tests you do, the higher the chance of seeing a “significant” result purely by chance… you need to correct for Type I error. One way is to do a different kind of test (e.g. do an Analysis of Variance instead of a whole series of pairwise t-tests), or you lower the value of p that you consider to be significant (drop it from 0.05 to 0.01 or less—there are various formulae you can use to calculate what it should be dropped to). So my question is, did you do multiple independent tests to arrive at your conclusions about significance…. and if so, do those conclusions still hold if you correct for the possibility of Type I error?
    Copy & paste the code below to embed this comment.
  18. Many people report a strong preference for zebra striping, yet the data supporting it is a bit weak in comparison. Could this be due to differences between individual users? I’d love to see some statistics on repeated tests for the same user, using different tables each time. Perhaps you would find that some users consistently benefit a great deal from zebra striping, while others do not. This might suggest that differences in reading styles (which we know exist) affect the usefulness of striping. And it would help to explain why so many of us, myself included, often have real difficulty reading a table without striping, while others have no problem at all.
    Copy & paste the code below to embed this comment.
  19. Was the table in the first study (with the countries and coast lines) shown at the same width as it is in the article?
    Copy & paste the code below to embed this comment.
  20. Interestingly, the cases where zebra striping is statistically better in the second study are the questions where the user needs to scan *left* after they match the data from the question, whereas when finding the country and scanning *right* zebra-striping doesn’t seem to have the same advantages.
    Copy & paste the code below to embed this comment.
  21. @Charlie bq. One benefit of being online is that we have the ability to dynamically alter elements of the page. Even just with :hover, we can alter table rows, table cells, etc. I find that by having a table without striping allows the user to scan vertically, but having a row’s :hover state change the background color to a highlighting color (even if just gray) gives the “focus”? that this survey shows to be useful. Surveymonkey did or does this in some of their survey templates. I find this extremely distracting. One problem is that if my cursor happens to pass over a row on my way to do something else, this effect is toggled on and off rapidly. Picture me cursoring across 10 rows in less than a second to get to the row I’m actually interested in. I have 9 rapid on-off flashes to distract me. (If I have to deal with this for 10-20 minutes, as with an extended survey, this can make me feel queasy. The last thing you want people associating with your service is feeling ill.) If there were a time delay (as with tooltips) to confirm that I was actually hovering over a row and not simply passing over it, then in *might* be useful. But in general, I find most page animation problematic, especially page animation that changes the background. I know enough about CSS to defeat this behavior with a personal style sheet, but most site visitors don’t or, if they found it sufficiently bothersome they might find another site to get the same information. In general, it is important that designers consider not only whether a particular feature will make a particular task easier, but also whether that feature will stay out of the way of people trying to do some other task. That’s one reason why we don’t have drop-down menus on our current site (http://www.sfmta.com), although I am looking at the feasability of allowing people to turn this feature on or off, since we do get occasional requests for it. You could do this same for dynamic row coloring: allow site visitors to turn the feature on or off per their preferences. bq. Further, you can assign a value to the row, as appropriate. For example, in our personal finance app, when the net value for the row is positive, the row’s highlight color is a pale green. When the row’s value is negative, the :hover color for the row is a pale pink. This allows the row highlighting itself to carry meaning that reinforces the data in the table. As long as the color is not the only cue to the information.
    Copy & paste the code below to embed this comment.
  22. I suppose zebra striping doesn’t hurt, as long as the contrast remains high. However, if the contrast between background and text is high enough to not interfere with text reading, then the contrast between one row and the next might not be enough for some low-vision site visitors to detect the border between one row and the next. I believe both horizontal and vertical cell borders, rendered in the same color as the text, are needed for maximum accessibility. Site visitors using large fonts may experience text wrapping, and it is important for them to be able to suss out where cell borders begin and end. I supposed one could use both cell borders and alternating row coloring. If we were to implement zebra striping at our site, that is the scheme we would probably use. I note that vertical zebra striping might be useful for an extremely wide table. Hope this helps,
    Charles “Chas” Belov
    SFMTA Webmaster
    Copy & paste the code below to embed this comment.
  23. @Catherine You make 2 really good points in your comment, and I agree with them both. * I’ll leave it to the reader to decide whether the difference is important enough for them to consider it strong support for zebra striping. * There is the chance that the statistically significant difference we are seeing in the second study reflects Type I error, but I think this chance is slim. The yellow boxed results in the second figure were all significant at not just p=0.05 but also p=0.01.
    Copy & paste the code below to embed this comment.
  24. @Jarrett In your comment, you said: bq. I’d love to see some statistics on repeated tests for the same user, using different tables each time. Perhaps you would find that some users consistently benefit a great deal from zebra striping, while others do not. Both the first and the second studies were exactly that - repeated tests for the same user, using different tables each time (unless I’ve misunderstood you). What I haven’t done is looked at the results at an individual level to see if for some users there is a clear bias towards zebra striping. Because there were only 6 & 8 questions and 2 & 3 treatments respectively in each study, I dare say we wouldn’t have enough data at the individual level to really see a difference. For example, the very first participant in the second study had 2 questions asked with the plain version of the table, 4 with the lined version and 2 with the plain version. They got all of the lined questions right and one each of the striped and plain questions right. Can we deduce something from this? What if the differences we see are somehow related to which questions were presented with which treatments? I don’t mean to suggest that such studies/analysis are not worthwhile: they’re just tricky and resource intensive! Having said that, I do feel a niggling question around why preference continues to be so strong when the task performance data is comparatively weak.
    Copy & paste the code below to embed this comment.
  25. First of all, thank you for making the effort to get objective information about this. Amateur webmasters like me don’t have the resources to do this kind of research ourselves, but some of us would still like our sites to be attractive and usable! Would it be possible to provide a link to the tables your test subjects saw, rendered at full size, please? I’m curious to see how some of the exampes, particularly the plain one, looked during the experiment. I am curious because at the reduced resolution in the article, it seems like the classic problem of narrow content under wide column headings is at work. It’s a fairly common idea in general typography that you want your line spacing greater than your word spacing for best legibility. In this case, with such wide spaces between some of the columns, there is nothing but whitespace for the eye to follow across a row in the plain example. If the inter-row space is relatively narrow, that might have influenced the results, and the conclusions might not hold in a table without such well-padded columns.
    Copy & paste the code below to embed this comment.
  26. @Michael The size of the country table was 595 pixels wide by 892 pixels long, so a little bit bigger than as in this article.
    Copy & paste the code below to embed this comment.
  27. @Chris N I’ll give the ALA people the 3 original jpg files for the table, and hopefully they can link them up here for you. Having said that, you’ll see that they weren’t that different from the image shown in the article - just slightly bigger as I indicated in my response to Michael. I agree that putting greater padding between the rows may impact on the importance or otherwise of zebra striping. I do suspect, however, that in many cases such spacing is not feasible because it will make the table impracticably long and introduce a new inefficiency: large amounts of scrolling. I also agree that wide spacing between columns could have an effect. In fact, I deliberately designed the table this way for the second (country) study because: * in the very first (screw) study, the columns were close together and readers thought that this might be why that study *didn’t* really find that zebra striping helped; and
    * such spacing is likely to be unavoidable in many cases (for example, when the row ‘stub’ is of varying lengths or when the table is HTML and a flexible CSS layout is used, meaning it can be stretched). If you ask me, it’s becoming pretty clear that there’s no obvious fail-safe approach for the presentation of tables in all (electronic) situations. I can only hope that using the totality of my research, together with great input from people such as yourself, developers and designers can put together the best possible design for their specific circumstances.
    Copy & paste the code below to embed this comment.
  28. Personally, I like zebra striping visually, but dynamic striping functionally (i.e. it most helps me find the correct data fast). Unfortunately they don’t go well together, at least I haven’t found a colour combination where dynamic :hover striping on a zebra striped table didn’t give ugly and cluttered results. So I just made a test page where I combined the two in a different way. Normally the table is zebra striped. On hover, the striping is removed and replaced by :hover striping. This is done with just a few lines of CSS. I haven’t looked at the result long enough to form a solid opinion, but wanted to share the result anyway:
    http://www.deztatest.com/pmwebviewer/goes/plandata_index.asp?type=bpv The effect is best shown when you set the number of rows to 50 or all (alle) with the combobox on the lower right.
    Copy & paste the code below to embed this comment.
  29. Okay, so among the 8 questions, there are four where the zebra-striped table aided the user in a statistically significant manner. Why did zebra stripes make no difference in the others? The table data itself may be eye-leading for some entries. The visual separation of the data entries may also contribute to the significance of zebra striping where it showed significance. So, if one had JUST a list of countries with coastline data, separated by as much as is shown here, would one get the same results? And if one had JUST a list of countries with land under rice data, separated by the same amount as the coastline data, would one get the same results? If the data are more close together, zebra striping seems to make little difference (previous study). And in this one, the closer data shows zebra striping to help but in a statistically insignificant way. I’m not questioning the validity of the study - I think it’s an excellent preliminary study, and is just the sort of study which should have a user interface designer looking to do another set of them very like it.
    Copy & paste the code below to embed this comment.
  30. @Chris N and others If you want to see the original images used in the study, follow these links: * “Plain table”:http://formulate.com.au/transfer/plain-table.jpg * “Lined table”:http://formulate.com.au/transfer/lined-table.jpg * “Striped table”:http://formulate.com.au/transfer/striped-table.jpg As noted before, they are 595px wide by 842px long. Be aware - some browsers automatically scale images, so if they don’t seem large enough, this is probably why.
    Copy & paste the code below to embed this comment.
  31. Thanks for the research! Perhaps of some passing interest is a comparison with the old “greenbar” paper, which frequently used triple striping. The nicer greenbar paper was not only heavier, but it combined triple striping with being lined. One other observation: the country table shown for the second test hurt my eyes, I believe this is because the grey was so dark, and there was little surrounding whitespace compared to the size of the text; it was almost like a moire pattern waiting to happen. (I’m exaggerating, but you get my point.) By “contrast,” the table showing the results uses a much lighter grey, and there is more surrounding whitespace — in absolute terms, and when compared to the size of the text.
    Copy & paste the code below to embed this comment.
  32. From my own experience as a web designer, I think Zebra stripping helps a lot. But as the article says, It requires real data about the users. So I’d still advice my fellows to collect real information. Great article!
    Copy & paste the code below to embed this comment.
  33. I have two websites with large data tables on - one of them uses zebra striping and the other uses hover striping (CSS only so doesn’t work in IE6). One disadvantage I’ve just thought of (and never spotted before, hmph) is that neither method is likely to work for printing, as most browsers strip all backgrounds - so it may be a good idea to line the tables for the print css. I’d be interested to hear what people think of the two methods, which they prefer aesthetically and which they find easier to read in these particular cases. I’m also intrigued by Charles’ comments that the hover striping makes him feel ill - does anyone else suffer from this kind of side effect? eg - “Zebra striping”:http://getdown.org.uk/pocklington/latest.htm - “Hover striping”:http://getdown.org.uk/bus/bus/34.shtml
    Copy & paste the code below to embed this comment.
  34. After reading this article, I have decided to complete the coding for a quick study on readability of color combinations. You can “participate in the study here”:http://evc-cit.info/psych018/colorexp/ . It’s a very simplified version of “this study”:http://www.laurenscharff.com/research/AHNCUR.html
    Copy & paste the code below to embed this comment.
  35. Even if you don’t like zebra striping, you’re going to be seeing a lot more of it. Some designer/developer at Microsoft decided, on all our behalves, that zebra stripes are the way to go when presenting data in tables. In MS Word 2007, 90 out of a possible 105 default table layouts offered to users employs zebra striping. That’s a whopping 86% of the design options offered.
    Copy & paste the code below to embed this comment.
  36. Has anyone considered combining zebra striping with the “table ruler”:http://www.alistapart.com/articles/tableruler script listed on ALA? I’d be interested to see if that offers any serious benefits. I assume it does, but you all know what they say about assuming.
    Copy & paste the code below to embed this comment.
  37. bq. Has anyone considered combining zebra striping with the table ruler script listed on ALA? What you call “table ruler script” I call “hover striping” (see #33). Except that rather than use a script, I just did it via CSS (it doesn’t work in IE6 but I considered that an acceptable casualty!) - it’s very straightforward, just add a declaration for tr:hover td {...}
    Copy & paste the code below to embed this comment.
  38. @Michiel Your experiment combining zebra striping with hover highlighting is interesting. On a personal level, I find the removal of the zebra striping quite visually distracting. But maybe this is only because I’m not actually trying to accomplish a task with the data. I’d be interested to see how it looks if you do exactly the same thing but leave the zebra striping there all the time (i.e. just introduce the hover).
    Copy & paste the code below to embed this comment.
  39. @Stephen You make a good point about print CSS. Thanks for taking the time to contribute that. Thanks also for posting those two examples. I personally like each approach for each situation: * Zebra striping is good for the bridge table because I might want to look at lots of different people’s scores. * Hover is good for the timetable because I’m probably only interested in timing for one location. I feel a “it depends” coming on.
    Copy & paste the code below to embed this comment.
  40. I find this article very interesting and read it with great pleasure because this is indeed something I spoke about with a colleague the other day. One trouble however in this study is the wording of the poll question. It basically says ‘which _does the most_ to increase visual to make the table easy to read and use’. If I were to participate in the survey, I would choose either the striped or lined one, because I would think that would ‘do the most’, rather than choose my preference (which might be the non-striped or line one) as first. Maybe for this particular element it would have been better to have a page displaying a table and allowing users to customize is, adding stripes and/or lines in different colours and asking the question to form it so that it makes it easy for them to use, randomly offering striped, lined or neither as initial state. But… I’m no researcher and it’s just something I came up while reading your article. I appreciate all the work done and am very thankful you did this and published it.
    Copy & paste the code below to embed this comment.
  41. I personally think that zebra stripes help find information quicker, especially in wider tables. I hypothesize that if you were to set up the experiment in a lab, ask a question and have the person find and say the answer to you as quickly as possible, you would find that zebra stripes increase the speed. One aspect of this experimental design that I feel could influence the results is that fact that people have to fill in the a form and submit the question online. There is variability in the amount of time to locate the data entry box, in typing speeds etc. I think if you were to test people in a lab and have them say the answer immediately after finding it, a lot of these confounds would be eliminated. Good study, but based on the null hypothesis that zebra striping does not increase speed or accuracy, I think there exists a Type II error (at least more so for the initial study):P
    Copy & paste the code below to embed this comment.
  42. The data presented in this article are very useful!
    I was looking for similar data for research, analysis and references and only found here.
    Thank you very much.
    I will refer your site / blog and his article in my presentations.
    Copy & paste the code below to embed this comment.
  43. Firstly, Great article. It would be interesting to see if the discrepency in favor of single striping is increased as the number of columns between the reference column (the country) and the data column increases. It seems that there is little difference for adjacent columns and a small but noticable difference when separated by one column. What would be the effect if the reference and data were separated by say 8 columns of other data. I would imagine that you would see a predictable (probably linear) increase in the effectiveness of the zebra striped table.
    Copy & paste the code below to embed this comment.
  44. I think this is a fantastic article! Thank you for all of your time in putting this together. I also think that it’s very hard to take a specific finding on usability and apply it to all circumstances. It’s the unity of the page, and how all entities involved in it work together that count. For instance, if I have several tables on one page, and am defining and comparing the information within them, then I may choose not to have the zebra stripes, which fight visually with the divisional space between the tables.
    Copy & paste the code below to embed this comment.