I’d like to clarify that what I have used in both the original and follow up study is called a ‘within-groups experimental design’, where only one characteristic is altered at a time, in order to measure the impact of that one characteristic, as Richard Reumerman points out.
This is an established method of scientific enquiry and is valid to use, even if I do not have a representative cross section of participants (e.g. over sample web designers and developers). This is because it looks at how the same individual responded to two different design approaches, thereby effectively ‘cancelling out’ any demographic or other differences.
I am, however, interested to explore whether age, in particular, makes a difference. If and when I can do this, I will be looking to include sufficient sample from all age groups.
Also, the study has been advertised elsewhere, such as my website and LinkedIn. I had 300 participants, including people from all walks of life, before this article was published.
Furthermore, in a study such as this, you are NOT trying to replicate the real world experience but, rather, isolate particular design features for testing. I would not, for example, advocate the use of an image-only table on a website. Similarly, the timer exists in the second study for experimental reasons.
I am a sole trader, trying to add to the knowledge base of the design community in my own time, i.e. nights and weekends. If I had a research grant or was a university student, I would probably have been able to explore every aspect of zebra striping by now. Alas, I still have to work full time on making a living in daylight hours.
I appreciate your patience (and help, if you are willing to contribute it!) as I look at this issue. Your constructive comments and feedback are all welcome.
Copy & paste the code below to embed this comment.
chris feldmann
Stripe every third row. This way markedly increases readability across long rows because the nearest row that looks like the one you are following in the context of its neighbors is three rows away instead of two.
My dad would bring home fan-fold paper that came out of the teletype-like printers on the mainframe where he taught in the early 70’s. That paper was always shaded with this kind of third-alternate striping and I’ve generally replicated this device in my web tables.
Which, by the way, takes about one extra line of boilerplate php.
Copy & paste the code below to embed this comment.
Ben Field
I’ve found the speed with which I can perform a task and my accuracy are extremely difficult and impractical to measure on the fly — they have few real-world consequences and have little impact on my experience as a user of information. Contrast emotional responses, though: with zebra striping I feel much more secure in my accuracy and more confident when proceeding to the next task, both of which improve my experience dramatically and make me more effective at the greater effort I’m pursuing. Are you often under the gun to accurately read a table? I’m not.
One special case in which I belive that odd/even line zebra striping can make a HUGE difference in readibility lies in detail sections where each item consists of two or more lines.
Michael Long yada yada yada yada yada yada yada yada yada yada
Doctor yada
James Brown yada yada yada yada yada yada yada yada yada yada
Musician yada
Robert Downy yada yada yada yada yada yada yada yada yada yada
Actor yada
In such cases, zerbra striping can make a huge difference in determining that the information in line 4 actually goes with the information in line 3.
Copy & paste the code below to embed this comment.
Jin Y
perhaps your timing of posting this article is a bit premature? the intro paragrah and the illustration suggests a NO to zebra stripes. however, after reading this article, and your findings, it seems you don’t have a conclusion one way the other. it’d be an article worthy of value, if you had presented more findings through more solid data gathering so you can have a point of what you’re trying to say.
another thing is, as other comments pointed out, certain design elements are more for aesthetics than function. even though a small data table that doesn’t benefit from having a zebra stripes functionally, can still benefit visually. after all, a solid colored table may clash with the rest of the site design.
Has anyone been able to find a javascript/CSS/HTML trick to achieve the zebra stripes on a paragraph of text?
All the examples discussed in the article are for tabular data only…
Copy & paste the code below to embed this comment.
Jin Y
Julie,
the effect you want is possible, however not with a pure css method. you can have an image as the background of the container element the text is in. the image will have 2 color stripes, tiling. however, you’ll need to use “em” for the font size, line-height and the background image size. you’ll have to do some math to make sure the effect stays in tact if the user changes the font size setting.
Copy & paste the code below to embed this comment.
pete adelman
Seems like the most critical variables are the the space between entries, percentage of blank fields, the number of columns, and the number of rows. It would be extremely useful to know if there are mean values beyond which zebra striping becomes critical. Be interesting to see the results of part 2.
I would like to know people’s thoughts on a different approach to highlighting tabular data for searches:
As web designers, we like modifying the styles of links when people mouse-over them, so why not modify the style of the table row when we mouse over it? It would, in effect, be like in the study where people said they followed the row with their finger or mouse.
Why not do it programatically so they don’t have to do it physically? It could be done in addition to zebra-striping, but might make it superfluous. Any thoughts? Any examples of where it’s already been done?
I would argue that zebra-striping is useful – I personally have a minor issue with visual scanning, especially on fairly dense content. It becomes even more useful when data stretches out past the edge of the window/page.
But this is 2008, and we have lots of dynamic solutions, so why limit to static highlighting. For very little extra work, I add hover and click events to my table rows in addition to the traditional zebra-striping. Granted, this dynamic aspect does rely a little on JS, but that is why the static highlighting is there as a base.
Just as a sidenote – I find the results on the “preference” question to be rather interesting, but this could easily be ascribed to cultural biasing. Users have gotten so used to seeing larger data tables with zebra striping that that is what they expect.
Zebra-striping improves the vertical rhythm of type set in tabular form. It’s ancient knowledge. Spend your research time on something valuable, please.
Copy & paste the code below to embed this comment.
dilip vedula
I would suggest, that we highlight the row with brighter color when mouse is on it. This would be more readable.
This is just my opinion, no numbers to back it up, If you guys can experiment with it that would be great :)
Interesting article and research Jessica. I also think user confidence plays a part in it and this is likely to be one of the reasons for the preference of zebra stripes from the users. As a user I would be more confident I got the right data from the table if there was zebra striping.
I do like the look of subtle zebra striping but I think as far as web tables go, I prefer a third color, (or maybe font change) as you mouse over the current row. As long as it doesn’t cause the table to shift, etc, it makes the current row really easy to read, but naturally the catch with this is that your hand/mouse have to traverse the table at the same rate as your eyes, etc.
In short though, alternating two colors and then highlighting in a third when you mouse over is my preference.
Copy & paste the code below to embed this comment.
Mike Pjura
I took the follow up survey. The tables seemed pretty thin.
As I’m sure others have said, I think you will see results in favor of striping steadily increase as the tables get wider and/or row data gets further apart.
The point seems moot though. The insignificant increase in development time (which will become less as support for CSS3 selectors grows) seems more than worth it to have a more aesthetically pleasing table.
This experiment seems to be asking the wrong question. The issue is not “is there an overall increase in productivity with striping”, but “does striping help anyone (while not harming others)”. If even 1% of people (perhaps with dyslexia or similar conditions) find the striping helps them, and it doesn’t reduce readability for other people; that’s a net gain and an accessibility improvement.
As a former researcher and having done much statistic sampling in economic research, combined with my experience in web usability ever since Netscape 0.92b I was very surprised by the results of the study.
Either a form of horizontal aid in a table does not help at all and common knowledge has been proved wrong, or there is something up with the data.
Science is a matter of using statistical support to support reason that has been formulated from a gut feeling. Your (very well written) article shows your surprise, I bet you did not expect this outcome.
I have read all 69 previous comments and thought about it for a while, and as an economist I’m wondering if the fact that you treat a heterogenous group of users as homogenous has skewed the result. In other words, are the statistical differences between groups larger than the statistical differences in outcomes of the questions? (groups being created on age, sex, years of online experience, professional background, like being a designer or not, etc.).
I hope that the fact that you post a follow-up study on a targeted group as ALA readers will give you the answer to this question, if you draw in subjects from other sources as well and control for the groups in your analysis. I’m very curious to a follow-up on this article.
On a side note: Out of the 69 comments I gathered that 70% was negative. I think that is not deserved, very nice work you present here!
I work with dev teams to design Web-based reporting tools. The display of tables with gobs of complex data is my bread and butter.
We use striping sparingly. Instead of allowing rows of data to scroll down the screen, we constrain the data within scrolling boxes of moderate height. This rule of “scroll the data, not the screen” serves to keep important page controls always visible and within our layout control. With fewer rows visible, the benefit (if any) of screen striping is weakened.
We also balance the effect of striping with the need for other uses of color in the tables and the good habit of reducing visual noise. Done well and subtly, striping can reduce visual noise. Done mechanically, the result is an infelicitous mess.
In the past few years, I see (and feel) more pressure to use striping even where it is clearly not beneficial. Somehow, layers of managers have decided that alternate row coloring has a cool factor—and expressly cram it into application requirements.
When something starts getting over-used as much as row striping, then it is very good to have someone like Jessica Enders put the burden of proof where it needs to be put.
Just thought you might be interested to learn that according to some print professionals and members of the Business Forms Management Association (http://www.bfma.org), zebra striped paper (i.e. green paper) was introduced originally as a way for paper companies to INCREASEMARKETSHAREFORTHEIRPRODUCT. That is, zebra striping was a way to differentiate Company A’s paper from Company B’s – there is no record of it being introduced for reasons of usability.
I stand by my assertion that whilst there are low level principles that support the use of zebra striping (e.g. the Gestalt Principles of Visual Perception), there has been no RESEARCH to confirm that zebra striping actually helps, in either the paper or electronic medium. This lack of scientific research is important because what is helpful to you and I (and I certainly like zebra striping over plain), may be visual noise or otherwise problematic to another user. Those of you who follow Edward Tufte will know what I mean.
I believe it is healthy to carefully and impartially check our assumptions and habits. Data that supports our design decisions helps us justify them to stakeholders.
With the tests I’ve seen so far, they appear to be based on asking questions and getting answers… I think you will find that this reduces the time taken for testing the effect of zebra stripes, where more time is spent interpreting the question and the respective data.
For example, with the question you are showing in the article:
“is the screw with minor diameter tolerance of 6g available at the factor outlet?”?
First, I spent considerable cognitive time trying to determine which were the appropriate headings (not even looking at the data)… this wasn’t made easier with “factor”, rather than “factory”.
As an alternative test, which should focus more on tracking of the rows, you could have a 2 column table, at ~400px wide, with numbers in both columns (left column being text-align left, and the right column with text-align right)… this setup is about trying to maximize the eye tracking.
This table could initially be hidden, and the user is presented with the instructions… when they have finished reading the instructions, and after trying a simple example, then they can try the real (time based) test… this will mean less time is spent on understanding the question, and more time on the actual test.
As an example to maximize the time spent on using the data, how about…
—
Starting with the number “5”, read the value in the opposite column (e.g. 10) and write this number down.
Then find that number in the left column, and find its corresponding number and write that down.
Continue until you reach “End”.
Before the real test, have a look at this example:
5
10
3
12
10
3
12
7
7
End
In this example, you should have got the number sequence 10, 3,
12, 7.
When you are happy with this, please start the experiment.
People seem to draw the conclusion from this study that Zebra striping does not help. One could instead look at the study results as weak (statistically insignificant) evidence that it does help, and evidence that users prefer the striping. Presumably 46% consciously preferred the table with zebra striping vs 21% consciously preferring it without?
Some possible alternative hypotheses:
1. Zebra striping helps significantly on some tasks, and doesn’t seem to hurt significantly in any cases. Q6 showed a statistically significant speed increase and a 27% decrease in the error rate (from 11% to 8%). This leads us to ask, which tasks?
2. People need some time to learn to effectively use the zebra striping. There is an (admittedly very weak) trend in the two sets of questions Q1 to Q3 and Q4 to Q6 such that the later questions in each set show more favorable speed differences for Zebra striping than the earlier questions. Maybe this is because people take some warm-up questions before they’re ready to use and trust the extra perceptual cues that zebra striping provides.
The usefulness of zebra striping also depends on the medium. Does the reader have the ability to use a finger or a pen to physically trace a row while reading it? If viewing a table from afar, without the ability to use a physical means of tracing a row with anything other than my eyes, I personally find zebra striping of great help.
I’ve also seen people create their own zebra stripes with a highlighter when transcribing data from a 8pt printout of a purchase order.
Copy & paste the code below to embed this comment.
David Mulder
The greatest value provided by Jessica’s study is the questions that have been raised. We don’t have a great understanding of how to present complex data in a standard, usable way. At this point, we have theory, and the one that Jessica questions is zebra striping. For all its flaws, the presented research has still made this an area of contention.
Further study into this subject is needed. As a researcher I’ve already put together an ideal method in my head, though I wonder who would fund that proposal.
Striping is a helping structure to visually differenciate between horizontal rows. On the other hand it might (slightly) hurt the orientation in vertical columns.
Thus i believe the advantage of striping vs plain will be strongest, when the task is close to just reading and staying in the same row. This would be the case with tables like Adress-Lists where the correct column is easily identified just by looking at the data.
Like Craig (#74) and Stephen (#75) suggest, the screw-table, quite in contrast to that optimum, was quite complicated to understand at first. So you have to look up the headings repeatedly to get the correct columns until you have “learned” the table.
This would explain why in the first questions stripes yielded slightly worse results, and better in later questions, where seeking out the right column becomes more and more automatic.
Well I thought the results were a little surprising but perhaps a broader survey will lean the benefits more towards using zebra stripes.
I like to use them and as well as looking good i personally find them especially useful for wide tables where you need to scan along the rows to compare values.
I didn’t read all of 8 pages of comments so it may be that someone mentioned it before: Besides agreeing with some of the other opinions (time of using, size of table, …) I think what was nearly completely out of focus were issues like “The Flow” – which were not polled. These may have a massive effect on using an information matrix like a table. What comes out of this is that simply asked – if measurable or not – if one feels more comfortable with or without stripes or in which case he “liked” the using more we perhaps would have had another outcome.
With the tests I’ve seen so far, they appear to be based on asking questions and getting answers”¦ I think you will find that this reduces the time taken for testing the effect of zebra stripes, where more time is spent interpreting the question and the respective data.
I agree with Craig. I tried the alternative test and wasn’t able to answer at least half of the questions in time. For some of them I was still trying to find the answer or couldn’t type it in fast enough. I don’t think it had to do with table format. With practice I was able to pick up speed so maybe 8 questions wasn’t enough.
The concept behind the test is interesting. I’m not sure what the best way in an online environment to test this would be.
Sometimes you have data in a row and buttons for actions to the right or left edges of it. This is the case in PHPMyAdmin and many dataset management tools. Zebra striping is often used so that the user doesn’t press the button for the previous or next row.
Interesting study. I think it’s good practice to challenge conventions from time to time, for it’s own sake. This is where new ideas come from and an often overlooked and widely used convention, is indeed zebra-striping.
However, I am not convinced that the means of evaluation in this case were terribly useful in the assessment. I don’t believe zebra-striping came about to necessarily improve legibility or speed, although the argument for legibility with dense data, can certainly be made.
The benefit, as I see it, is in the illusion. Tabular data is not pleasing or inviting by nature. The simple application of offsetting alternate rows with shading, creates a visual indicator of order. This may or may not be the case with the actual data contained therein.
This illusion of order is what softens the data for the user. It is effective visual communication, over one of the most dull constructs of information.
Additionally, I would add, over extended periods of time, zebra-striping can really aid a weary data sifter, though not as much as a cup of coffee, I’m sure.
The columns are so nicely spaced (when they’re very tight, zebra striping horizontally can helps immensely), and yes, it’s not very wide… you can tell that zebra striping isn’t going to help much just by looking at. Huh?
Also, why be limited to two colors? Why not cycle between 3 or more, on a HUGE table, and see what kind of results you can get then…
Sometimes zebra striping can help, while it never makes a simple table harder to read… so, uhm, no.
this topic can’t be summarized strictly in a usability sense based on an “experiment”. does it look good from a design standpoint? does the client like it? does the website look better?
As others have noted, the survey doesn’t have a broad enough data set to determine much. As well, tables—when designed well—can lend to the overall display.
Copy & paste the code below to embed this comment.
Harriet W
There are enough of us out there who have vision /tracking problems because of bad eye muscles to make keeping the stripes worthwhile.
You said some were tracing the line with their fingers? I have a whole assemblage of tricks I use when tables aren’t striped. I grab a piece of paper and hold it against the screen, I scroll up or down to use the browser window as a straight edge, I narrow the browser window to contract flexed tables and make the rows as short as possible. These are all tiring.
As much as stripes are a pain to code,they are worth it to folks like me. Without them, I can easily drop down two rows as I scan across as little as five columns especially if the table flexes out to a wider screen.
Copy & paste the code below to embed this comment.
danny s
Zebra striping helps me when I’m looking at a dataset on the entire row, say for example I’m looking up ID’s on the far left column but am using the far right column as well. I always thought that was the point for using them, to constrict your view so that you don’t have to scroll your fingers?
Copy & paste the code below to embed this comment.
Court Kizer
My guess is your usability testing didn’t take into account the high percentage of the population with small-large amounts of dyslexia.
I can tell you that zebra stripes are the only thing that keep me sane when reading tabular data, and I’m only moderately dyslexic. It’s very important to use Zebra stripes for other kinds of users with disabilities, especially people who have vision problems.
However we’ve found in our usability testing, and in my person preference that putting a border around each row in addition to zebra stripes (ALA iTunes) takes away all the benefits.
So if you use zebra stripes keep them light, with no border like itunes. But for the love of God, don’t stop using them. because if you do, most likely I“ll have to draw lines on my screen with wide columns of data to read the right number.
Zebra stripes have been in use on paper for nearly a century. NASA’s manuals for space, and many flight manuals INSIST on them, with a certain level of contrast.
Copy & paste the code below to embed this comment.
Chris Moyers
The article implied that Zebra stripes don’t provide significant ROI because of being a lot of work to implement. Sure, maybe if we are talking about a static html page, but who makes large static datasets? Isn’t that, like, the point of putting a DB behind your website? When looping over a dataset it is easier than breathing to make some form of Zebra stripes. I believe that good design is about doing all of the little things, one of them being Zebra striping. Sure, one could take any “little” thing and deflate its value. A web page and its usability is the sum of its parts.
Copy & paste the code below to embed this comment.
Kerri-Anne Sheridan
I’ve used striping at times, but after asking the people who actually stare at this stuff all day (go ask your accounting people) I’ve had it explained to me that single lines of colored stripes feel like it slows them down. Now alternating three lines of white, three lines colored – THAT seems popular! It breaks things up, makes it a little easier on the eyes (that comment especially from people with glasses) and isn’t so busy.
Good analysis… However, for a short period of time readers might be able to focus and produce same results. Over a long period of time, it might help to provide visual clues. Also, it might help more casual readers too.
“The article implied that Zebra stripes don’t provide significant ROI because of being a lot of work to implement. Sure, maybe if we are talking about a static html page, but who makes large static datasets?”
Even in static Sites it doesnt require more than giving a class to half the table-rows (and writing the appropriate css-rules).
Which can also be done by a javascript (see this weeks Editors choice article)
if you are Ok with only giving stripes to modern browsers, you might also use one advanced selector like
– table:row[%2]
– table tr:nth-child(2n)
– table tr:nth-child(odd)
instead of giving classes (dont know which one is most supportet).
I agree with others who say that zebra striping is probably more helpful and will most likely provide a positive effect when dealing with big, long tables over a long period of time.
I’d also like to point out another possible problem with Jessica’s experiment: participants are given a task, which is likely to raise their level of concentration. But does this technique really provide any clues about the readability of tables we encounter every day, like charts on music websites, where it isn’t really essential for the reader to “get it right”?
I think that stripes – table cell borders or not – improve the readability of tabular data, and in my opinion this experiment does not provide evidence for this assumption, because it can’t.
Without conducting complicated and expensive tests, we’ll have to rely on people’s subjective preferences, which seem to be in favour of those stripes, and I don’t see the problem, given that it has become relatively easy to implement them.
One of the things I remember from my (relatively) misspent youth was that “White Dwarf”:http://en.wikipedia.org/wiki/White_Dwarf_(magazine) (or possibly some other rôle-play gaming mag) used to have lots of big tables in it. One of the things I found pticly useful in following them was zebra striping.
One-by-one striping on a relatively large number of rows, though, tends to descend into visual soup. So they striped several rows together — one-by-one on small tables, three-by-three in larger tables and five-by-five in really big tables. It works surprisingly well, as they eye can just follow the colour block, but you automatically follow top, middle, bottom (or mid-top, mid-bottom) rows surprisingly easily.
It might also be worth testing with readers who have an “astigmatism”:http://en.wikipedia.org/wiki/Astigmatism_(eye) — I find a lot of things more difficult than “normally” sighted readers do, because my eyeballs are oddly-shaped ;o)
Copy & paste the code below to embed this comment.
joe wanker
Even if you could prove that Zebra striping is detrimental or, at best, completely ineffective, which you couldn’t, you still did not provide any kind of tangible ALTERNATIVE to this technique.
Sooooo, this article is completely pointless, as far as I am concerned.
Copy & paste the code below to embed this comment.
Rob Record
We could just hi-light or shade only the row that the mouse pointer hovers over. That would help your eyes to follow along, without needing even-odd zebra stripes. What do you think?
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)
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.
Copy & paste the code below to embed this comment.
Chris Ross
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.
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.
Copy & paste the code below to embed this comment.
Trey Runcie
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.
Copy & paste the code below to embed this comment.
Alex Thomas
Hey this was a great read… but like most things in web design\creation 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.
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.
[removed]
<!—
rc = 0;
function DoRow()
{
if ((rc % 4) < 2) [removed](”<tr bgcolor=’#ffffee’>”);
else [removed](”<tr bgcolor=’#ffffc0’>”)
rc += 1;
}
//—>
[removed]
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.
Copy & paste the code below to embed this comment.
Charlie Ross
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.
Copy & paste the code below to embed this comment.
Thomas Sola
@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.
Copy & paste the code below to embed this comment.
Mikkel Mortensen
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.
Copy & paste the code below to embed this comment.
Don Fredrickson
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/
Copy & paste the code below to embed this comment.
Frederik
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.
Copy & paste the code below to embed this comment.
iurevych
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
“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.
119 Reader Comments
Back to the ArticleJessica Enders
Marty Alchin,Joseph P Dempsey, Sr. and othersI’d like to clarify that what I have used in both the original and follow up study is called a ‘within-groups experimental design’, where only one characteristic is altered at a time, in order to measure the impact of that one characteristic, as Richard Reumerman points out.
This is an established method of scientific enquiry and is valid to use, even if I do not have a representative cross section of participants (e.g. over sample web designers and developers). This is because it looks at how the same individual responded to two different design approaches, thereby effectively ‘cancelling out’ any demographic or other differences.
I am, however, interested to explore whether age, in particular, makes a difference. If and when I can do this, I will be looking to include sufficient sample from all age groups.
Also, the study has been advertised elsewhere, such as my website and LinkedIn. I had 300 participants, including people from all walks of life, before this article was published.
Furthermore, in a study such as this, you are NOT trying to replicate the real world experience but, rather, isolate particular design features for testing. I would not, for example, advocate the use of an image-only table on a website. Similarly, the timer exists in the second study for experimental reasons.
I am a sole trader, trying to add to the knowledge base of the design community in my own time, i.e. nights and weekends. If I had a research grant or was a university student, I would probably have been able to explore every aspect of zebra striping by now. Alas, I still have to work full time on making a living in daylight hours.
I appreciate your patience (and help, if you are willing to contribute it!) as I look at this issue. Your constructive comments and feedback are all welcome.
chris feldmann
Stripe every third row. This way markedly increases readability across long rows because the nearest row that looks like the one you are following in the context of its neighbors is three rows away instead of two.
My dad would bring home fan-fold paper that came out of the teletype-like printers on the mainframe where he taught in the early 70’s. That paper was always shaded with this kind of third-alternate striping and I’ve generally replicated this device in my web tables.
Which, by the way, takes about one extra line of boilerplate php.
chris feldmann
Yes, yes it does.
Are they parsed on post? No, no they aren’t.
Ben Field
I’ve found the speed with which I can perform a task and my accuracy are extremely difficult and impractical to measure on the fly — they have few real-world consequences and have little impact on my experience as a user of information. Contrast emotional responses, though: with zebra striping I feel much more secure in my accuracy and more confident when proceeding to the next task, both of which improve my experience dramatically and make me more effective at the greater effort I’m pursuing. Are you often under the gun to accurately read a table? I’m not.
Michael Long
One special case in which I belive that odd/even line zebra striping can make a HUGE difference in readibility lies in detail sections where each item consists of two or more lines.
Michael Long yada yada yada yada yada yada yada yada yada yada
Doctor yada
James Brown yada yada yada yada yada yada yada yada yada yada
Musician yada
Robert Downy yada yada yada yada yada yada yada yada yada yada
Actor yada
In such cases, zerbra striping can make a huge difference in determining that the information in line 4 actually goes with the information in line 3.
Jin Y
perhaps your timing of posting this article is a bit premature? the intro paragrah and the illustration suggests a NO to zebra stripes. however, after reading this article, and your findings, it seems you don’t have a conclusion one way the other. it’d be an article worthy of value, if you had presented more findings through more solid data gathering so you can have a point of what you’re trying to say.
another thing is, as other comments pointed out, certain design elements are more for aesthetics than function. even though a small data table that doesn’t benefit from having a zebra stripes functionally, can still benefit visually. after all, a solid colored table may clash with the rest of the site design.
Jeffrey Zeldman
I feel your pain.
We’re updating our platform and should soon be able to resolve the frustrating inconsistency between preview and reality.
Thanks for reading ALA.
Julien Couvreur
Has anyone been able to find a javascript/CSS/HTML trick to achieve the zebra stripes on a paragraph of text?
All the examples discussed in the article are for tabular data only…
Thx
Julien
http://blog.monstuff.com/archives/000019.html
Jin Y
Julie,
the effect you want is possible, however not with a pure css method. you can have an image as the background of the container element the text is in. the image will have 2 color stripes, tiling. however, you’ll need to use “em” for the font size, line-height and the background image size. you’ll have to do some math to make sure the effect stays in tact if the user changes the font size setting.pete adelman
Seems like the most critical variables are the the space between entries, percentage of blank fields, the number of columns, and the number of rows. It would be extremely useful to know if there are mean values beyond which zebra striping becomes critical. Be interesting to see the results of part 2.
Ben Reimers
I would like to know people’s thoughts on a different approach to highlighting tabular data for searches:
As web designers, we like modifying the styles of links when people mouse-over them, so why not modify the style of the table row when we mouse over it? It would, in effect, be like in the study where people said they followed the row with their finger or mouse.
Why not do it programatically so they don’t have to do it physically? It could be done in addition to zebra-striping, but might make it superfluous. Any thoughts? Any examples of where it’s already been done?
Ben Reimers
Ignore my post above, I just realised it has already been discussed ;-)
Stuart Jones
I would argue that zebra-striping is useful – I personally have a minor issue with visual scanning, especially on fairly dense content. It becomes even more useful when data stretches out past the edge of the window/page.
But this is 2008, and we have lots of dynamic solutions, so why limit to static highlighting. For very little extra work, I add hover and click events to my table rows in addition to the traditional zebra-striping. Granted, this dynamic aspect does rely a little on JS, but that is why the static highlighting is there as a base.
Just as a sidenote – I find the results on the “preference” question to be rather interesting, but this could easily be ascribed to cultural biasing. Users have gotten so used to seeing larger data tables with zebra striping that that is what they expect.
Colin Williams
Zebra-striping improves the vertical rhythm of type set in tabular form. It’s ancient knowledge. Spend your research time on something valuable, please.
dilip vedula
I would suggest, that we highlight the row with brighter color when mouse is on it. This would be more readable.
This is just my opinion, no numbers to back it up, If you guys can experiment with it that would be great :)
James Mansfield
Interesting article and research Jessica. I also think user confidence plays a part in it and this is likely to be one of the reasons for the preference of zebra stripes from the users. As a user I would be more confident I got the right data from the table if there was zebra striping.
ryan headley
I do like the look of subtle zebra striping but I think as far as web tables go, I prefer a third color, (or maybe font change) as you mouse over the current row. As long as it doesn’t cause the table to shift, etc, it makes the current row really easy to read, but naturally the catch with this is that your hand/mouse have to traverse the table at the same rate as your eyes, etc.
In short though, alternating two colors and then highlighting in a third when you mouse over is my preference.
Mike Pjura
I took the follow up survey. The tables seemed pretty thin.
As I’m sure others have said, I think you will see results in favor of striping steadily increase as the tables get wider and/or row data gets further apart.
The point seems moot though. The insignificant increase in development time (which will become less as support for CSS3 selectors grows) seems more than worth it to have a more aesthetically pleasing table.
Andy Mabbett
This experiment seems to be asking the wrong question. The issue is not “is there an overall increase in productivity with striping”, but “does striping help anyone (while not harming others)”. If even 1% of people (perhaps with dyslexia or similar conditions) find the striping helps them, and it doesn’t reduce readability for other people; that’s a net gain and an accessibility improvement.
Martijn ten Napel
As a former researcher and having done much statistic sampling in economic research, combined with my experience in web usability ever since Netscape 0.92b I was very surprised by the results of the study.
Either a form of horizontal aid in a table does not help at all and common knowledge has been proved wrong, or there is something up with the data.
Science is a matter of using statistical support to support reason that has been formulated from a gut feeling. Your (very well written) article shows your surprise, I bet you did not expect this outcome.
I have read all 69 previous comments and thought about it for a while, and as an economist I’m wondering if the fact that you treat a heterogenous group of users as homogenous has skewed the result. In other words, are the statistical differences between groups larger than the statistical differences in outcomes of the questions? (groups being created on age, sex, years of online experience, professional background, like being a designer or not, etc.).
I hope that the fact that you post a follow-up study on a targeted group as ALA readers will give you the answer to this question, if you draw in subjects from other sources as well and control for the groups in your analysis. I’m very curious to a follow-up on this article.
On a side note: Out of the 69 comments I gathered that 70% was negative. I think that is not deserved, very nice work you present here!
Peter Jerome
I personally don’t use Zebra Striping. It would be a waste of time.
Brett Merkey
I work with dev teams to design Web-based reporting tools. The display of tables with gobs of complex data is my bread and butter.
We use striping sparingly. Instead of allowing rows of data to scroll down the screen, we constrain the data within scrolling boxes of moderate height. This rule of “scroll the data, not the screen” serves to keep important page controls always visible and within our layout control. With fewer rows visible, the benefit (if any) of screen striping is weakened.
We also balance the effect of striping with the need for other uses of color in the tables and the good habit of reducing visual noise. Done well and subtly, striping can reduce visual noise. Done mechanically, the result is an infelicitous mess.
In the past few years, I see (and feel) more pressure to use striping even where it is clearly not beneficial. Somehow, layers of managers have decided that alternate row coloring has a cool factor—and expressly cram it into application requirements.
When something starts getting over-used as much as row striping, then it is very good to have someone like Jessica Enders put the burden of proof where it needs to be put.
Jessica Enders
Just thought you might be interested to learn that according to some print professionals and members of the Business Forms Management Association (http://www.bfma.org), zebra striped paper (i.e. green paper) was introduced originally as a way for paper companies to INCREASE MARKET SHARE FOR THEIR PRODUCT. That is, zebra striping was a way to differentiate Company A’s paper from Company B’s – there is no record of it being introduced for reasons of usability.
I stand by my assertion that whilst there are low level principles that support the use of zebra striping (e.g. the Gestalt Principles of Visual Perception), there has been no RESEARCH to confirm that zebra striping actually helps, in either the paper or electronic medium. This lack of scientific research is important because what is helpful to you and I (and I certainly like zebra striping over plain), may be visual noise or otherwise problematic to another user. Those of you who follow Edward Tufte will know what I mean.
I believe it is healthy to carefully and impartially check our assumptions and habits. Data that supports our design decisions helps us justify them to stakeholders.
Regards,
Jessica
Craig Francis
Hi Jessica,
With the tests I’ve seen so far, they appear to be based on asking questions and getting answers… I think you will find that this reduces the time taken for testing the effect of zebra stripes, where more time is spent interpreting the question and the respective data.
For example, with the question you are showing in the article:
“is the screw with minor diameter tolerance of 6g available at the factor outlet?”?
First, I spent considerable cognitive time trying to determine which were the appropriate headings (not even looking at the data)… this wasn’t made easier with “factor”, rather than “factory”.
As an alternative test, which should focus more on tracking of the rows, you could have a 2 column table, at ~400px wide, with numbers in both columns (left column being text-align left, and the right column with text-align right)… this setup is about trying to maximize the eye tracking.
This table could initially be hidden, and the user is presented with the instructions… when they have finished reading the instructions, and after trying a simple example, then they can try the real (time based) test… this will mean less time is spent on understanding the question, and more time on the actual test.
As an example to maximize the time spent on using the data, how about…
—
Starting with the number “5”, read the value in the opposite column (e.g. 10) and write this number down.
Then find that number in the left column, and find its corresponding number and write that down.
Continue until you reach “End”.
Before the real test, have a look at this example:
In this example, you should have got the number sequence 10, 3,
12, 7.
When you are happy with this, please start the experiment.
Stephen Fung
People seem to draw the conclusion from this study that Zebra striping does not help. One could instead look at the study results as weak (statistically insignificant) evidence that it does help, and evidence that users prefer the striping. Presumably 46% consciously preferred the table with zebra striping vs 21% consciously preferring it without?
Some possible alternative hypotheses:
1. Zebra striping helps significantly on some tasks, and doesn’t seem to hurt significantly in any cases. Q6 showed a statistically significant speed increase and a 27% decrease in the error rate (from 11% to 8%). This leads us to ask, which tasks?
2. People need some time to learn to effectively use the zebra striping. There is an (admittedly very weak) trend in the two sets of questions Q1 to Q3 and Q4 to Q6 such that the later questions in each set show more favorable speed differences for Zebra striping than the earlier questions. Maybe this is because people take some warm-up questions before they’re ready to use and trust the extra perceptual cues that zebra striping provides.
Ates Goral
The usefulness of zebra striping also depends on the medium. Does the reader have the ability to use a finger or a pen to physically trace a row while reading it? If viewing a table from afar, without the ability to use a physical means of tracing a row with anything other than my eyes, I personally find zebra striping of great help.
I’ve also seen people create their own zebra stripes with a highlighter when transcribing data from a 8pt printout of a purchase order.
David Mulder
The greatest value provided by Jessica’s study is the questions that have been raised. We don’t have a great understanding of how to present complex data in a standard, usable way. At this point, we have theory, and the one that Jessica questions is zebra striping. For all its flaws, the presented research has still made this an area of contention.
Further study into this subject is needed. As a researcher I’ve already put together an ideal method in my head, though I wonder who would fund that proposal.
Wolfgang Löer
Striping is a helping structure to visually differenciate between horizontal rows. On the other hand it might (slightly) hurt the orientation in vertical columns.
Thus i believe the advantage of striping vs plain will be strongest, when the task is close to just reading and staying in the same row. This would be the case with tables like Adress-Lists where the correct column is easily identified just by looking at the data.
Like Craig (#74) and Stephen (#75) suggest, the screw-table, quite in contrast to that optimum, was quite complicated to understand at first. So you have to look up the headings repeatedly to get the correct columns until you have “learned” the table.
This would explain why in the first questions stripes yielded slightly worse results, and better in later questions, where seeking out the right column becomes more and more automatic.
David Kindness
Well I thought the results were a little surprising but perhaps a broader survey will lean the benefits more towards using zebra stripes.
I like to use them and as well as looking good i personally find them especially useful for wide tables where you need to scan along the rows to compare values.
Tom Klose
I didn’t read all of 8 pages of comments so it may be that someone mentioned it before: Besides agreeing with some of the other opinions (time of using, size of table, …) I think what was nearly completely out of focus were issues like “The Flow” – which were not polled. These may have a massive effect on using an information matrix like a table. What comes out of this is that simply asked – if measurable or not – if one feels more comfortable with or without stripes or in which case he “liked” the using more we perhaps would have had another outcome.
Cara Peterson
I agree with Craig. I tried the alternative test and wasn’t able to answer at least half of the questions in time. For some of them I was still trying to find the answer or couldn’t type it in fast enough. I don’t think it had to do with table format. With practice I was able to pick up speed so maybe 8 questions wasn’t enough.
The concept behind the test is interesting. I’m not sure what the best way in an online environment to test this would be.
Nicolas Cohen
Sometimes you have data in a row and buttons for actions to the right or left edges of it. This is the case in PHPMyAdmin and many dataset management tools. Zebra striping is often used so that the user doesn’t press the button for the previous or next row.
Jeremy Anderson
Interesting study. I think it’s good practice to challenge conventions from time to time, for it’s own sake. This is where new ideas come from and an often overlooked and widely used convention, is indeed zebra-striping.
However, I am not convinced that the means of evaluation in this case were terribly useful in the assessment. I don’t believe zebra-striping came about to necessarily improve legibility or speed, although the argument for legibility with dense data, can certainly be made.
The benefit, as I see it, is in the illusion. Tabular data is not pleasing or inviting by nature. The simple application of offsetting alternate rows with shading, creates a visual indicator of order. This may or may not be the case with the actual data contained therein.
This illusion of order is what softens the data for the user. It is effective visual communication, over one of the most dull constructs of information.
Additionally, I would add, over extended periods of time, zebra-striping can really aid a weary data sifter, though not as much as a cup of coffee, I’m sure.
Johann Lau
The columns are so nicely spaced (when they’re very tight, zebra striping horizontally can helps immensely), and yes, it’s not very wide… you can tell that zebra striping isn’t going to help much just by looking at. Huh?
Also, why be limited to two colors? Why not cycle between 3 or more, on a HUGE table, and see what kind of results you can get then…
Sometimes zebra striping can help, while it never makes a simple table harder to read… so, uhm, no.
maurer website
this topic can’t be summarized strictly in a usability sense based on an “experiment”. does it look good from a design standpoint? does the client like it? does the website look better?
Diane Vigil
As others have noted, the survey doesn’t have a broad enough data set to determine much. As well, tables—when designed well—can lend to the overall display.
Harriet W
There are enough of us out there who have vision /tracking problems because of bad eye muscles to make keeping the stripes worthwhile.
You said some were tracing the line with their fingers? I have a whole assemblage of tricks I use when tables aren’t striped. I grab a piece of paper and hold it against the screen, I scroll up or down to use the browser window as a straight edge, I narrow the browser window to contract flexed tables and make the rows as short as possible. These are all tiring.
As much as stripes are a pain to code,they are worth it to folks like me. Without them, I can easily drop down two rows as I scan across as little as five columns especially if the table flexes out to a wider screen.
Ideally, I like stripes and a hover effect.
Harriet W
I do NOT want to be counted among those who attack the study. I think much more needs to be done on the topic.
danny s
Zebra striping helps me when I’m looking at a dataset on the entire row, say for example I’m looking up ID’s on the far left column but am using the far right column as well. I always thought that was the point for using them, to constrict your view so that you don’t have to scroll your fingers?
Court Kizer
My guess is your usability testing didn’t take into account the high percentage of the population with small-large amounts of dyslexia.
I can tell you that zebra stripes are the only thing that keep me sane when reading tabular data, and I’m only moderately dyslexic. It’s very important to use Zebra stripes for other kinds of users with disabilities, especially people who have vision problems.
However we’ve found in our usability testing, and in my person preference that putting a border around each row in addition to zebra stripes (ALA iTunes) takes away all the benefits.
So if you use zebra stripes keep them light, with no border like itunes. But for the love of God, don’t stop using them. because if you do, most likely I“ll have to draw lines on my screen with wide columns of data to read the right number.
Zebra stripes have been in use on paper for nearly a century. NASA’s manuals for space, and many flight manuals INSIST on them, with a certain level of contrast.
Interesting read.
sachin kumar
Great and very informative, hope to see more stuff like this soon.
Chris Moyers
The article implied that Zebra stripes don’t provide significant ROI because of being a lot of work to implement. Sure, maybe if we are talking about a static html page, but who makes large static datasets? Isn’t that, like, the point of putting a DB behind your website? When looping over a dataset it is easier than breathing to make some form of Zebra stripes. I believe that good design is about doing all of the little things, one of them being Zebra striping. Sure, one could take any “little” thing and deflate its value. A web page and its usability is the sum of its parts.
Kerri-Anne Sheridan
I’ve used striping at times, but after asking the people who actually stare at this stuff all day (go ask your accounting people) I’ve had it explained to me that single lines of colored stripes feel like it slows them down. Now alternating three lines of white, three lines colored – THAT seems popular! It breaks things up, makes it a little easier on the eyes (that comment especially from people with glasses) and isn’t so busy.
Just another thought. :)
abhi G
Good analysis… However, for a short period of time readers might be able to focus and produce same results. Over a long period of time, it might help to provide visual clues. Also, it might help more casual readers too.
Wolfgang Löer
“The article implied that Zebra stripes don’t provide significant ROI because of being a lot of work to implement. Sure, maybe if we are talking about a static html page, but who makes large static datasets?”
Even in static Sites it doesnt require more than giving a class to half the table-rows (and writing the appropriate css-rules).
Which can also be done by a javascript (see this weeks Editors choice article)
if you are Ok with only giving stripes to modern browsers, you might also use one advanced selector like
– table:row[%2]
– table tr:nth-child(2n)
– table tr:nth-child(odd)
instead of giving classes (dont know which one is most supportet).
Michael Macher
I agree with others who say that zebra striping is probably more helpful and will most likely provide a positive effect when dealing with big, long tables over a long period of time.
I’d also like to point out another possible problem with Jessica’s experiment: participants are given a task, which is likely to raise their level of concentration. But does this technique really provide any clues about the readability of tables we encounter every day, like charts on music websites, where it isn’t really essential for the reader to “get it right”?
I think that stripes – table cell borders or not – improve the readability of tabular data, and in my opinion this experiment does not provide evidence for this assumption, because it can’t.
Without conducting complicated and expensive tests, we’ll have to rely on people’s subjective preferences, which seem to be in favour of those stripes, and I don’t see the problem, given that it has become relatively easy to implement them.
Owen Blacker
One of the things I remember from my (relatively) misspent youth was that “White Dwarf”:http://en.wikipedia.org/wiki/White_Dwarf_(magazine) (or possibly some other rôle-play gaming mag) used to have lots of big tables in it. One of the things I found pticly useful in following them was zebra striping.
One-by-one striping on a relatively large number of rows, though, tends to descend into visual soup. So they striped several rows together — one-by-one on small tables, three-by-three in larger tables and five-by-five in really big tables. It works surprisingly well, as they eye can just follow the colour block, but you automatically follow top, middle, bottom (or mid-top, mid-bottom) rows surprisingly easily.
It might also be worth testing with readers who have an “astigmatism”:http://en.wikipedia.org/wiki/Astigmatism_(eye) — I find a lot of things more difficult than “normally” sighted readers do, because my eyeballs are oddly-shaped ;o)
joe wanker
Even if you could prove that Zebra striping is detrimental or, at best, completely ineffective, which you couldn’t, you still did not provide any kind of tangible ALTERNATIVE to this technique.
Sooooo, this article is completely pointless, as far as I am concerned.
Rob Record
We could just hi-light or shade only the row that the mouse pointer hovers over. That would help your eyes to follow along, without needing even-odd zebra stripes. What do you think?
Chris McKee
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)
Chris McKee
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)
svend christensen
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.
Chris Ross
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.
Jessica Enders
@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.
Trey Runcie
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.
Alex Thomas
Hey this was a great read… but like most things in web design\creation 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??
Kim Ladin
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
Dave Baldwin
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.
Dave Baldwin
Simple javascript for The Zebra Followed by table example. Change the numbers to change the number of lines. Let the js do the counting.
[removed]
<!—
rc = 0;
function DoRow()
{
if ((rc % 4) < 2) [removed](”<tr bgcolor=’#ffffee’>”);
else [removed](”<tr bgcolor=’#ffffc0’>”)
rc += 1;
}
//—>
[removed]
<table border=“0” cellpadding=“0” cellspacing=“0” summary=”” width=“100%” id=“clubtab” class=“contab”>
[removed]DoRow();[removed]<td>Content0</td></tr>
[removed]DoRow();[removed]<td>Content1</td></tr>
[removed]DoRow();[removed]<td>Content2</td></tr>
[removed]DoRow();[removed]<td>Content3</td></tr>
</table>
Stephen Cronin
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.
Charlie Ross
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.
Thomas Sola
@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.
Mikkel Mortensen
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
mark opala
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.
Don Fredrickson
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…
fluxd
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/
Frederik
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.
iurevych
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
inventorysoft
“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.