Zebra striping—also known as candy striping or half-shadow—is the application of faint shading to alternate lines or rows in data tables or forms. Examples of websites that use zebra striping include the currency site XE, the CIA World Factbook, and Monster.com. Zebra striping on the web is actually a carryover from print days: one of the first mentions of the technique appeared in 1961 [1].
Many believe that zebra stripes aid the reader by guiding the eye along the row. However, despite being in use in both paper and electronic mediums for almost half a century, there is practically no evidence that it actually assists users in this way. In June and July 2007, I conducted an extensive review of sources such as the International Association of Paper Historians, the Business and Forms Management Association, and the IEEE Annals of the History of Computing, but found absolutely no information on the origins of or rationale behind zebra striping.
Yet applying zebra striping in an electronic medium is a nontrivial task. A List Apart is just one publisher of an article about how to do zebra striping. As web designers, we certainly cannot afford to be spending time coding an approach that isn’t actually helpful! So, I decided to conduct a study to see whether zebra striping really does make things easier.
Measuring “easier”#section2
Zebra striping is used when data is presented in an essentially tabular form. The user of that table will be looking for one or more data points. Their aim is to get the right points and get them as quickly as possible. Therefore, if we set a task that uses a table, and zebra striping does make things easier, then we would expect to see improvements in two things: accuracy and speed.
The experiment#section3
I designed an experiment whereby participants were given data in a tabular form and asked to use that data to answer six questions. Three of the questions were asked when the table had zebra striping (i.e., was “striped”) and three of the questions were asked when the table did not have zebra striping (i.e., was “plain”).
The questions asked when the table was striped paralleled the questions asked when the table was plain. That is, questions were “paired” so that for each question there was a striped version and a plain version. This enabled us to measure the impact of zebra striping.
Participants were randomly assigned to which format they received first, striped or plain, to remove any order effects. The experiment was described only as “a study of table formatting.” The experiment was conducted via the internet, which, while having its problems, was efficient and cost effective. Two weeks of experimentation yielded usable data from 244 people.
The data table, shown below, had 15 rows (including a heading row) and nine columns. It contained artificial data, which was loosely based on common descriptors for screws. As an example, one of the questions was “is the screw with minor diameter tolerance of 6g available at the factory outlet?”
Zebra striped data table, with 15 rows (including a heading row) and nine columns.
The aim was to construct a table that:
- was large enough to provide a cognitive challenge for participants,
- was not so large as to require scrolling—either horizontally or vertically—in the majority of cases,
- contained data that was not particularly familiar to participants, reducing the chance that they would just “know” the answer without having to use the table, and
- included data in a number of different forms, including numeric and alphabetic, names, symbols, prices and quantities.
Other than the presence or absence of zebra striping, there were no changes made to the table during the experiment.
Findings#section4
Note: There’s lots of statistics behind these results that I won’t bore you with, but you can download the full-length, peer-reviewed paper (PDF, 320K).
Accuracy#section5
Even though I tried to make the task a little difficult, participants got most of the answers right—the error rate on all questions was 12% or less.
Questions that had particularly low errors rates—e.g., question one with an error rate of 2%—were excluded from the remainder of the analysis, because the findings they yielded would be unreliable. This left one pair of parallel questions: question three and question six. As the graph below shows, there was essentially no difference in accuracy between the striped-table and plain-table versions of these questions.
Graph indicating difference in accuracy between the striped and plain table versions of the questions.
Further analysis of these data showed that indeed there were no statistically significant difference in accuracy between striped answers and plain answers.
Speed#section6
Even if there were no improvement in accuracy, an improvement in speed would be beneficial.
As the chart below shows, the average observed time taken to answer questions one and two was greater when the table was zebra striped, but for the remaining four questions, the time taken was less when the table was zebra striped (see Table 5 in the peer-reviewed paper). However, only the difference in time taken for question six was statistically significant, meaning we can’t be sure that the other differences weren’t down to the particular sample we ended up with.
Graph indicating difference in time taken to answer questions between the striped and plain table versions.
Preference#section7
At the end of the six questions that referred to the data table, participants were asked for their personal preference with regard to zebra striping.
Overall, the greatest proportion of participants preferred zebra striping (46%), but a significant portion had no preference at all (33%).
So there’s no point in zebra striping?#section8
This experiment yielded no evidence that zebra striping consistently improves the accuracy or speed of tasks. This would seem to suggest that we shouldn’t bother with zebra striping anymore.
However, there are a few arguments against tossing zebra striping out altogether.
Firstly, in this study there was a subjective preference for striped tables over plain. My reading and discussions with others suggest a number of people find zebra-striped tables more aesthetically pleasing. If many users like zebra striping (and another large group aren’t fussed either way), then why not apply it?
Secondly, this was just one experiment, with one dataset. It is possible that the particular design of this experiment meant that zebra striping had little effect. In other cases, particularly when there is considerable space between columns and/or the user is required to scroll horizontally, a more pronounced effect may have been observed.
Finally, and perhaps most interestingly, a number of participants in the study spontaneously reported using their finger, on or over the computer screen, to follow down columns and across rows. Other participants used their mouse to highlight rows of interest. These people were, in effect, creating their own “temporary” zebra striping. So we may be reducing the burden on our users if we do the zebra striping for them.
The decision is yours#section9
Unfortunately, this study hasn’t given us a clear answer about whether or not to continue applying zebra stripes to tabular data. However, it didn’t give any indication that zebra striping makes things worse, and we do know that it is liked by a number of users, so it certainly doesn’t seem to cause much harm.
At the end of the day, the decision about whether to use zebra striping probably comes down to a subjective assessment of likely gains versus the cost of implementation.
Participate in the follow-up study#section10
Formulate is currently conducting a follow-up study to help address some of the questions that arose from the research described in this article. The study takes less than five minutes. Many participants are needed to achieve valid results.
To do the study, visit http://surveys.formulate.com.au/dtfu/. To learn more, read about the study.
References#section11
[1] Advert for Philip Hano Company Inc. appearing in Sadauskas, W.B., Manual of Business Forms. Office Publications Inc., New York, 1967, 187.
In my personal experience Zebra striping makes it easier to focus on one line, especially if there is multiple columns or extended data; the colour assists my eye in tracking the row in comparison to lines which I can sometimes find difficult to follow or can accidentally skip lines while scrolling.
So personally I think that ‘zebra striping’ is a better method of assisting the readability of a table, more so with the borders then without.
I don’t need a university study to tell me that or confirm it ;o)
The point of defining the text with areas that are alternating seems perfectly valid and if the list is super long, I personally feel, it makes reading less cumbersome.
After the read and, hmm.? away; it seems perfectly clear and possible to alternate the text colour instead to create the eased read without page being reliant on stripes. Just another way of striping without the solid colour in the divs.
As far as coding is considered… well two lines of extra code is alright by my standards. Perhaps in plain html it could be a killer with multiple alternating tdtrs+colouraltsetc… do it in .php or add a genny to your styles.
I’m not a statistician, so maybe Im the one who has the wrong end of the stick, but … I think the assertion “_As the graph below shows, there was essentially no difference in accuracy between the striped-table and plain-table versions of these questions_” is looking at the wrong aspects of the graph.
When you have a significant bias towards one end or the other of a graph, like we do in this case, the data that needs to be looked at is the smaller numbers, not the larger.
Sure, if we look at the rate of correctly answered questions, we get very low variances (92% vs. 89% – roughly a 3% change, for question 6, and an even smaller change for question 3).
If, on the other hand, we look at the _error rate_, we get a very different picture. For question 6, the error rate with zebra stripes drops from 11% to 8% – *nearly a 25% reduction in incorrect answers*.
A simple example will illustrate the value of attending to the error rate, not the correct answer rate:
Consider you are interacting with an automated voice recognition system that has a 10% error rate. One in ten of the words you speak are incorrectly interpreted and must be respoken.
Now consider you are interacting with a competitor’s system, that only has a 5% error rate (one in 20 of your words are misinterpreted).
One system causes the user to have to respeak words twice as often as the other.
@Chris Ross
You are right that a small improvement in error rates can have a big impact. And I agree that a 25% reduction in error rate is a really good thing.
Unfortunately, this reduction was not statistically significant. This means we don’t know whether the observed reduction is due to the particular sample we had or is a reflection of a true reduction in errors that would be achieved in the real world.
When I read the example question and then answered it, I used my mouse pointer to follow the column and row. I suspect I would use my finger if presented with a printed data table. I wonder what the results of the experiment would be if the users were forced to use only their eyes like people with hands free pointing devices.
Hey this was a great read… but like most things in web designcreation it is driven by the user. I have a constant battle with the users of my site because they want it to be pleasing to the eye, which Zebra Striping definitely achieves.
I have no problems with using it, i didn’t even realise that it was flagged as an issue??
I just read your article and immediately went to complete the follow-up study. I encountered quite a few problems that should render my results invalid:
– The biggest problem was the lack of feedback on the submit button. I *think* I needed to hit the submit button twice, but I’m not sure. On one question, I quickly answered the question and clicked submit. I thought something was happening, so I waited for the next question. Instead, I got a message that was my time was up and I’d failed to answer the question.
– I don’t know if you designed it this way, but the table had to be vertically scrolled on my screen. This created additional burden not just in locating the correct answer, but also in scrolling back to the top of the window to enter my answer.
– I was unsure what answer to enter when the table cell I identified was blank. I decided to enter 0, but I have no idea if this was correct. And it took me a few seconds to consider what to do before entering my answer.
Hope this feedback is helpful.
Cheers,
Kim
I took the survey at the end of the article and immediately concluded that you wouldn’t get any useful information from it Because:: as soon as you give me the answer, I scan the number or word without regard for the properties of the tables. I think that your tables are too small to give a useful answer.
I don’t know how you would test for it but it seems to me that the best use of striping is for large wide tables where you’re not sure what you’re looking for or where the type is fairly small and a little hard to read. For me and my not so great eyesight, it also helps to keep it all from turning into one big blur. I also like vertical stripes or borders when it means something, especially in the middle of a large table.
If you go look at the catalog and spec tables from electronic manufacturers and distributors, you’ll see some pretty large tables with a lot of similar data. One item on a row may be the only difference from the row above or below it. Maybe tables like those would be a better test.
Simple javascript for The Zebra Followed by table example. Change the numbers to change the number of lines. Let the js do the counting.
Even if there is no usability benefit with zebra stripes (and I personally believe that there will be a small benefit), zebra strips are worthwhile just for the aesthetics. They make the page look so much nicer. It certainly can’t hurt the usability of the page. my 2 cents anyway.
I have found that a very good use for stripes is when there are many rows and columns (i.e. an overwhelming amount of data that hinders pinpointing a result on the chart) Using stripes to contain three rows of information (top middle bottom) allows for much simpler navigating. It is much easier to remember top, middle, and bottom than item number *** on the list. Otherwise, doing every other line tends to get busy in a hurry.
@Jessica
“I also disagree that the only reliable way to find out whether zebra striping works is to do an eye tracking study. Suppose you conduct such a study and find that people’s eyes are travelling, left to right, along a row. How do you know whether they are “using”? the zebra striping to do this? Eye tracking only shows where participants are looking, not what they are seeing or processing.”
I don’t have access to the study but I’ve seen results of eye tracking tests that tested striped, blank, and ‘lines between rows’. The tracking showed the path the users eyes took traveling from left to right which revealed the straightest line was with the striping. This also corresponded to task completion time. This is essentially confirming that a straight line is the shortest path between two points.
Both of the other layouts had far more erratic lines. The blank look had a lot of back and forth (double checking?) and the ‘lines between rows’ had a lot of shooting from the “straight” path to the lines ether above and below along the way. The stopping points along the zebra path tended to match with the content of the table cells, using them to leap-frog, if you will from cell to cell though not using every cell along the way. Again a more efficient and likely a movement with better comprehension.
All of these results tend to conform to what we know about visual perception and figure and ground. The text is the figure and the background is the ground. With no striping the eyes got lost between figures because the ground was the same the table over. With striping the eyes jumped from figure to figure and had an easier time staying within the ground of the particular row. With the lines in between rows layout the eyes saw the line as figure as well and that distracted the eyes from the content of the rows.
The differences in task time and comprehension were fairly small as in your test but the zebra was still the clear winner.
There’s so many comments already, I don’t know if somebody already mentioned it, but #10, Julian Lawton said that CSS does not support alternating colors of rows. I think it’s worth mentioning that it’s part of the CSS3 specification. Not only zebra stripes but any number of alternating colors: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
Thank you for this article, I am one of those who thought that the stripes made scanning easier for readers.
On the flip side, the results of the test also indicate that the stripes don’t interfere with a readers ability to find information. So this test isn’t a zebra stripe killer.
Personally, I use my mouse to select the row I want to highlight, isolate, or focus on.
Rows were originally put on paper to help people WRITE. It has nothing to do with reading. Since the text you’re reading right now is aligned horizontally, your eye can follow it’s progression naturally without the aid of a guide.
The only way stripes can help you read is if they alternate in color. See, if a line of text is so long, you might have trouble finding where the next line starts. Of course, that’s not an issue with websites, since most designers don’t make text columns THAT wide…
I recently wrote a few words on zebra striping and the readability of table data over at my blog: http://www.fluxd.se/2009/11/02/five-cents-worth-of-zebras-and-tables/
I’m a visually impaired web user, and beginning web developer/designer/enthoussiast. When I use the web, I use software to zoom in, which means that I usually only see part of a web page at a time. In very wide tables, where you don’t have lines, nor zebra stripes, it can get quite hard to asociate relating data. For example a price list like this is hard for me:
water melon $13
some really really really long product name $20
milk $3
web server $1700
wooden cup $6
monkey $3 000 000
basic mailchimp account $0
sun glasses $15
for the rows below the long product name, it gets hard for me to identify the association between the products and prices. In many cases, I find the zebra striping a more elegant sollution than cell borders, and even And even when there are borders, the striping makes vertical scrolling of the screen when zoomed in much easier, so that you stay focused on the same row.
Zebra makes a visual noise. We can just break all data into several blocks and it will look clean (much better than zebra). For web we can add hover on each row to point an eye on it
!https://img.skitch.com/20110608-xtnrds29n818naich2gb96xhea.png!
“I like to use zebra striping for aesthetic reasons, even if there is no practical benefit. But the best aid for getting information from a table is to highlight the row and/or column that your mouse hovers over; I find that invaluable.”
I agree with this comment. A data table without any enhancements makes it a bland experience for the user. Zebra-Striping is an essential with modern data tables.