I recently conducted a study into the helpfulness (or lack thereof) of zebra striping—the shading of alternate rows in a table or form. The study measured performance as users completed a series of tasks and found no statistically significant improvement in accuracy—and very little statistically significant improvement in speed when zebra stripes were implemented.
These results were a surprise to many readers of the corresponding article, published in A List Apart in May, 2008. I think it’s fair to say that the vast majority of us, myself included, expected to see that zebra striping helped a lot.
Because of these surprising results, I decided to conduct two more studies into the value of zebra striping. These studies aimed to test design elements deliberately excluded from the first study, and to address some of the issues raised by the results of the first study.
This article represents a summary of my research, presenting the findings of these two further studies and providing a recommendation on future use of zebra striping.
Is zebra striping research really necessary?#section2
Before jumping into the findings of the new studies, I would like to take a moment to reflect on whether research on this topic is actually a “waste of time,” because the usefulness of zebra striping is “obvious.”
Many years of conducting user research have taught me that what seems like an obvious choice to one person is disliked by another, and often for good reason. In the case of zebra striping, the benefit (i.e., of leading the eye) seemed likely, but I had a niggling concern about possible downsides (e.g., additional visual noise interfering with cognitive processing).
Interestingly, since writing the first article, many people have told me that they often debate the use of zebra striping in their work teams. These debates actually provided my original motivation—I expected the first study to find a clear benefit from zebra striping and therefore provide a statistic that could support such discussions. Instead, these original results made the picture less, rather than more, clear! To me, this suggests that more research was warranted.
Directing research energies#section3
The experimental data produced by the initial study didn’t support a strong argument for zebra striping. Yet a single experiment is not sufficient to disprove a theory: maybe zebra striping had little effect because of that experiment’s particular design. Sure, zebra stripes may not help much when you are presenting a table like the one from that study—which is in fact something worth knowing, all by itself—but what if the table was longer, the stripes were a different color, or the task was harder? This was a concern that my readers and I shared.
In an ideal world, I would conduct a study for every possible design attribute that could influence whether zebra striping helped or not. However, these attributes are likely to include at least the following:
- number of rows and/or columns,
- density of the text,
- amount of white space between rows and/or columns,
- how high the rows/wide the columns are,
- how many colors are used for the striping,
- which color(s) is/are used for the striping,
- the degree of contrast between the striped and non-striped colors,
- whether rows are shaded in groups or singly, and if the former, how many rows are in a group,
- what other styles of tables the user has been exposed to in the past,
- how much time the user spends with the table,
- how much the user has to switch between using the table and other tasks,
- the degree of pressure on the user when they are working with the table,
- the type of data that the table contains (e.g., text or figures),
- whether the user has a pointing device (e.g., mouse or electronic pen), and
- how important the task is to the user.
For a small business owner such as myself, it’s just not feasible to conduct all this research. But I did want to follow up on one aspect of the initial study design that particularly bothered me: the lack of real pressure experienced by people when participating. To my mind, if you give someone an unlimited amount of time to perform a task, they will use that time to perform the task well, especially if they believe accuracy matters. To put it another way, the initial study may have had a low number of errors because participants were being careful to get the answer right, so the benefit of this added attention outshone the benefit of zebra striping.
The second study: an alternate examination of performance#section4
As such, I felt it was important to conduct another study: one that limited the amount of time participants had to answer and created a bit of pressure around the task. I also felt it was important to make the task itself harder. These principles guided the design of the follow-up study that was linked to at the bottom of the original ALA article (and elsewhere).
Like the first study, the follow-up study asked participants to answer eight questions using a table of unfamiliar information (see figure below). Differently from the first study, users were presented with the questions in a random order, and the style of table (plain, lined, or striped) that accompanied each question was also randomly chosen.
A timer in the top right hand corner of the screen helped create a sense of pressure. Participants had 15 seconds to answer each question: when the time elapsed a message was displayed and the participant was taken to the next question. Any answer that the participant had entered by the time the 15 seconds elapsed, even if partial, was captured; participants could also commit their answer before the time elapsed, by using a “submit” button.
To add to the difficulty of the task, the table included blank cells and a greater number of rows, so that vertical scrolling was likely to be needed. In this sense, the table was similar to an online banking statement (a common use of tables online).
A whopping 3,674 browser sessions were begun for this follow-up study, which was conducted April 29–June 15, 2008. From these, I removed sessions in which more or less than eight questions had been answered. I also removed all but one session (chosen at random) when multiple sessions were submitted from the same IP address. (This sledgehammer approach was the only way to eliminate duplicates. It will have also meant the loss of some valid data, but we were concerned to prevent any bias from repeat participation.) These measures left 2,276 clean survey sessions that could be used for analysis.
Answers were classified as either correct or incorrect, so that accuracy could be analyzed. An answer was considered correct if it was at least partially correct (e.g., “philli” or “Philipins” for “Philippines”). This was done so that people were not as disadvantaged by their typing speed, if they had found the right answer but not entered it fully when the time expired.
This table of information was used in the second study on the benefits of zebra striping. Participants were asked to answer eight questions using this information, with 15 seconds given for each response. The table was presented either plain, lined, or zebra striped; the striped version is shown.
Despite there being only eight questions and three styles, this follow-up study has yielded an incredibly large amount of data.
I haven’t analyzed it all—and probably will never have time to—so if you’re interested in getting a copy of the data set and running your own analysis, feel free to contact me.
The key results, however, are shown below. Yellow highlighting indicates cases in which the better performance with the striped version of the table are statistically significant based on Pearson’s Chi-Squared Goodness of Fit tests. (These tests adjust for the different sample sizes each table style had.) Orange highlighting indicates the case that is extremely close to being statistically significant (p=0.0545).
The results of the second study showed that zebra striping improved accuracy on three of the eight questions asked.
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.
The third study: user preference#section5
A second issue raised by a number of readers was that the value of zebra striping is related to aesthetics and/or subjective preference as much as actual improvement in performance. This is a solid argument and one that I made at the end of the original article: if users like zebra striping, then it’s almost a moot point whether it actually helps them read tables more easily (provided it doesn’t make reading tables harder).
In order to use preference as an argument for implementing zebra striping, we need a statistic that shows that the majority of the user audience prefers it. For this third study, I chose the general public as the user audience, so that the results were as broadly applicable as possible (i.e., not just derived predominantly from the web developer community). With the generous support of Newspoll, I was able to ask a question about preference on one of their National Online Omnibus studies. The National Online Omnibus is a web-based survey of just over 1,200 Australians aged 18-64. The survey contains different questions every fortnight—organizations buy one or more questions for inclusion. The survey participants are members of Newspoll’s rigorously maintained market research panel, and the results are weighted to produce estimates for the Australian population. Therefore, we can be confident in the representativeness of these results, for the Australian population at least (and probably also for the populations of other similar countries, such as the United States, Canada, New Zealand, and Britain).
Participants were shown the following image[1] —which presented the same table six times, each using a different style of formatting—and text:
The tables of information used to measure user preference for plain, lined, and variations of zebra striped tables.
The tables were accompanied by the following instructions:
Thinking now about the design of tables. The above picture shows a table presented in six different styles. Please rank these different table styles in order of preference from one to six. Your first choice should be the style that you think does the most to make the table easy to read and use. Your sixth (and last) choice should be the style that you think does the least to make the table easy to read and use.
Obviously, there are many other styles (e.g., three color or mix of lined and striped) that could be tested, but a technical limitation meant the number of styles could be no more than six. In choosing these six styles out of all the styles possible, we took into account the following factors:
- The desire to definitively answer the question: “Do people prefer zebra striped tables when compared explicitly to plain and lined tables?”
- Certain alternatives to plain, lined, or single-color, single-row seemed to be popular amongst readers of the original ALA article (e.g., two color, single row).
- That gray is neutral and therefore should be able to be used for zebra striping in most cases (e.g., regardless of corporate branding constraints and monitor type).
- That green is easy on the eye (we have more green receptors than red and blue ones) and is considered in many cases to be calming.
The need to avoid styles that are likely to create too much visual noise (and thus make readability worse rather than better).
To minimize order effects, it would have been preferable for the order in which the tables appeared in the image to be random, but unfortunately this was not possible. As a “next best thing,” similar styles were physically separated, to make the order appear random. Also, the style that was thought to be least favored (plain) was put in the position that eye tracking studies tell us receives the most attention (the top left-hand corner). This way, if there was a preference away from this style, this finding couldn’t be discounted as a result of the poor location of the table.
The results of this third study are shown in the graph below. 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%.)
The third study showed participants preferred single-row, single-color, zebra striped tables.
The two-color, single-row approach seems to divide the population, with 23% of the population considering it the best approach but 15% considering it the worst approach. These results make sense: we can imagine the use of two different colors could constitute extra visual cues for some but extra visual noise for others.
Interestingly, at 20%, the lined version is preferred almost as much as the two-color, single-row version. It also has—like the single-color, single-row version—only a small proportion of people who dislike it, at 4%. The other interesting result is the poor outcome for double and triple-striped, each being preferred by less than 10%. Triple-striped is also the least preferred option for almost a third of the population (28%). While this may be a reflection of a true dislike for these approaches, the size of the tables used in the survey could be a factor. Because of space limitations, the tables could only have seven rows, potentially making it less clear that the double and triple striping was a pattern that would be repeated throughout the table. I personally think the rationale behind it—that it provides more visual information than single row striping, via “chunking” of data—makes a lot of sense. However, it is possible that people just don’t like it as much as the other styles.
The recommendation#section6
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.
One door closes and another one opens#section7
It feels as if we are getting somewhere in terms of having reliable and valid statistical data to back up our choice of zebra striping for tabular data online. However it continues to be possible to punch holes in the studies yielding this data. For example, maybe people have a subjective preference for single-color, single-row striping because it’s what they’re used to (like using blue underlining for hyperlinks). Familiarity could also explain the lack of support for double and triple striping, approaches that may well improve task performance significantly.
What are we to do? I think the answer is twofold.
Firstly, if, in your particular circumstance, the cost associated with implementing single-color, single-row zebra striping is acceptable—and I have been told of several cases where this is not the case—then this should be done. Otherwise, stick with a plain or lined design.
Secondly, if you are designing an application or website that contains data tables, don’t let personal preference, habit, or the (untested) status quo drive your design decisions—go out there and get some user data. Run some tests using your preferred approach and one or more of the alternatives described here. And if you can, share your results with us, so our knowledge of the efficacy or otherwise, of different styles of tabular data, can grow.
References#section8
[1] Note that the image was shown at a size of 749 pixels wide by 403 pixels high.
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.
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
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.
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.
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.
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.
Thanks for the excellent article. It’s great to see user driven design informed by statistic analysis as well as aesthetic preference.
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
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.
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.
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.
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..
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.)
@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.
@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.
@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?
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?
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.
Was the table in the first study (with the countries and coast lines) shown at the same width as it is in the article?
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.
@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.
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
@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.
@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.
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.
@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.
@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.
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.
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.
@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.
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.
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!
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
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
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.
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.
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 {…}
@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).
@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.
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.
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
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.
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.
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.