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.
Now, this may just be me, but isn’t the point of zebra-striping to remove all of the thin rules and grid-work from a table? The example you’ve shown has all of the ruling as well as the zebra striping.
I personally use zebra striping as a visual guide to the eye in the absence of cell borders, whereas your test seems to render them entirely superfluous for that purpose by the inclusion of borders.
I agree with David & Chris. The use of grid lines in the table renders the zebra-striping superfluous. Zebra-striping is especially useful for wide tables with no grid lines. At least, that’s my personal preference.
My thoughts were that are unlikely to encounter significant problems with reading large tables unless you are working with them to the extent that you get tired, bored and careless.
I always find that the first 15 minutes or so working with large data to be relatively fault-free, it’s only once i’ve been working for a long time that I begin making silly mistakes that could be avoided by simple UI enhancements.
If there is benefit to Zebra Striping I wouldn’t expect to see it clearly on such a small data set and with so few questions.
What if instead of zebra stripping with just two colors we do it with more colors ? Say, 4 or 5.
Instead of having:
|white|black|white|black|…|
we could have
|white|black|red|blue|green|white|black|red|blue|green|…|
This way people wouldn’t be so confused in case they would look somewhere else for a second and end up following the wrong column of the same color.
Looks like i got the table wrong with Textile, but i think the idea is clear.
Anyway it should be:
|white|
|black|
|red|
|blue|
|green|
_As web designers, we certainly cannot afford to be spending time coding an approach that isn’t actually helpful!_
If you’re working in the right environment adding zebra stripes is hardly time consuming. Even a minimal increase in user experience is worth flipping the switch to turn this on.
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.
Firstly – I’d agree with the other comments here – without seeing the other data set, it’s impossible to really compare – if there are grid lines then there is some way of identifying the data, but you will note from the iTunes example on the ALA article, that Aqua uses them as a way to distinguish between lines of data where you don’t have a grid.
Interestingly, this isn’t actually a spreadsheet of data either, but actually highly text based. Looking at your example (with borders) everything is a lot more spaced out, so it may be a technique that is useful when you need to get a maximum number of rows on screen – and therefore need to minimise the row gap.
A comparison here may be to prototype a view of an iTunes playlist using the ‘real’ view, a view without any zebra striping, and a view with a line between each row.
Just one more comment – zebra tables aren’t hard to implement electronically. It’s more down to whether they are supported in your development framework (as they are on OS X Aqua or Adobe Flex) or not (CSS).
@Julian Lawton
Not sure about other Webdevelopment frameworks, but Django provides you with that functionality. That shouldn’t be something that CSS would do naturally I think.
When we did that Job Search Results page on Monster, the team battled back and forth a dozen times on the pros and cons of the row striping. After a bit of usability testing, we found that for complex, multi-row sets of data with controls associated with each data set, we needed to visually wrangle it all together.
The thin green border between results did help users with lower vision group the controls to the job search result, so I’ll stand by it.
Good point – my comparison wasn’t valid (comparing frameworks with languages).
I have absolutely no idea why would I want to drop striped rows in favor of their hard-to-follow bad-looking plain counterpart. Even if we are talking of 2 or 3 percent increases in accuracy and speed, the “extra” effort to implement the feature is well worth the difference.
What a waste of time…
I agree with the above posters that having the grid lines makes the zebra striping superfluous. The study did lead me to another question, though. I’ve seen in the past the ability to highlight rows and columns as you mouse over the cell. I’ve never tried, but I am sure it is trivial with JavaScript.
Since users were already highlighting and using their fingers to focus their attention on a row, wouldn’t this piece of functionality save time (and possible increase accuracy long-term)?
@Nathan Ziaerk
You don’t even need JavaScript for that. CSS is enough. The problem is that older browsers like IE6 don’t support the :hover property on other tags than , so in that case you would really need JS, but yes, it’s simple enough to do.
Zebra striping doesn’t help. That much is true. WHY doesn’t it help though? Answer: because rows are often too small to provide a distinction between one white row and the white rows before and after that one.
It is a matter of how much information the human eye can take in at once. As rows reduce in size, humans can view more rows at a time, making such a technique useless. For an example, open a graphics editor and create a 2×2 image and zoom in really far. Have blue in opposite corners and red in the other. Make it the background of a Web page and it appears to be a shade of purple.
If you have a large area for table rows, this technique DOES help.
A solution for those small rows exists too: use more colors. Typically 4 colors are good enough unless the text of the table is at an 8pt font size or lower (which shouldn’t happen because of accessibility).
The solution of not taking the time to stripe the table rows and using a hover effect on a row is also a very effective solution. JavaScript shouldn’t be required except in the case of IE6, IE7 in quirks mode (use and validate against a Strict doctype to help avoid this) and legacy browsers because the modern browsers all support the :hover pseudo-class on any element.
@Tiago Rodrigues: CSS can naturally do zebra striping as of 2.1. Because the Explorer family of browsers choses to ignore large pieces of the spec, nobody uses the CSS method.
The UI class I took in college spent two or three weeks on the subject of data visualization, specifically as it applies to print. The most common property of good data visualization versus bad data visualization was the reduction of unnecessary visual noise.
Cell borders in this case aren’t just ugly, they stand in the way of effective communication by partitioning related data in visually-separate boxes of content. Zebra striping allows the designer to remove the cell borders, which has the effect of relating horizontal data together in a visual clump–it also has the effect of _de-emphasizing_ vertical data relationships, but that’s the nature of the beast in this case.
In small data sets, zebra striping is often unnecessary; light horizontal rules often do well enough to relate horizontally-presented data, which introduces the possibility of using brightly-colored vertical rules to relate vertical data.
Nick
I just took the test linked to at the end of the article, and if this is the same method the author used to perform the first test, then there is a reason results were mixed.
The problem I had is that, zebra or not, I had a very difficult time finding the answer when I was given the number and had to find the country it belonged to. I had to scan each column, hoping that the number would stand out. This is not a striping problem, but a sorting issue.
To make matters worse, there is a timer counting down at the top of the page. This made me try and go as quickly as possible, that when coupled with the lack of sorting, made me miss the answer several times.
I would say the only reliable way to test if zebra striping works is to do some eye tracking studies. This way you can actually see if the the striping is helping the eye track across the table, which is the point. Speed is irrelevant for the most part, since with the web, all users are scanning as quickly as possible.
Not everything we design into a web application is purely “functional”. Much of what we consider to be “best practices” for web design revolve around the simple concept of “designing for visual appeal”. What would you rather read on a web site, an unformatted table full of words and numbers or a beautifully formatted table including “zebra stripes” and other “eye candy?
Sometimes the question is not “does this feature add functionality”, but “does this feature offer enough visual appeal that the user will take the time to read what is presented”?
I’m afraid that the core of this study is quite flawed. How can you really make a conclusion when you didn’t complete a _full_ test?
* How many different shades of striping were tested?
* What size font was used?
* Why did you choose to have borders on the table cells?
* Did you test without borders?
* …
There’s an endless amount of unanswered questions that your study opens up. To any trained theorist or panel of judges, this articles argument would fail.
Which brings me to my point: I would like to see this study done _correctly_, testing various shades and colors of striping, seeing whether or not borders with and without striping have an effect on readability. Have a set of users that are visually impaired.
And what about row highlighting for the position of the mouse? So when a person mouses over a row, it gives it a completely different background or border than the rest of the table.
And why were cells blank? I don’t know how to answer a question if the answer that I’m looking for isn’t there.
In addition to the above comments and criticisms, at first I thought the table in the article was the un-striped version – the contrast between the two sets of rows was so small that they appeared almost identical (at least on my screen, and to my eyes).
I’m sure the level of contrast between the stripes must play a part in it’s effectiveness, and I’d have thought such a small difference in contrast would be fairly ineffective in highlighting the alternate rows.
I’m curious as to why Zebra Stripes were invented in the first place. I would image that they were created to solve a problem — that is, the need to organize data more efficiently. Given that it was a solution to a problem, and adopted wide-scale, I would image that Zebra Stripes are a positive. Maybe more testing?? 🙂
Kris
I find (and this is entirely personal) that having a hover state for rows helps with readability quite a bit, it’s like the digital equivalent of using your finger to scan through a list.
I think a hover state is further enhanced without zebra stripes because it’s the lone alternate color that pops, however it might not be much of a difference with zebra stripes if the hover color contrasts well with the zebra stripes.
I’m assuming those thin cell borders were eliminated on the plain table. Since they exist on the zebra striped table, I’m not even sure anymore.
# Misspelled “Highlighting” in the title
# @14 and @15 already talked about highlighting.
# Remember to read the comments before making myself look like an idiot.
Thanks everyone for taking the time to read and comment on my article.
I need to explain that in the original study, the table did NOT have any cell borders, regardless of whether it was ‘plain’ or ‘striped’. The table you are seeing in this article is a REPRODUCTION of the original. I have asked ALA to put up a screen shot of the original table, to help clarify things, but in the interim you can get it from the full paper which is linked to in the article.
I would also like to clarify two things. Firstly, I am not claiming that zebra striping never helps. You’ll see that towards the end of the article I recognise that “this was just one experiment, with one dataset”.
I wholeheartedly agree with Paul A that there are more questions raised than there are answered – this is often the case in research. My aim in conducting at least one follow up study is to explore some of these questions. Moreover, the original study did test one the most commonly used approaches, the use of light grey shading.
However, I have to say that I think one study is better than none, which was the state of affairs when I went exploring the issue last year.
Secondly, the study found that in this case, there was no statistically significant improvement in accuracy and there was a statistically significant improvement in speed in only some situations. As a statistician I know that NOT finding a statistically significant difference does NOT mean that there isn’t true difference, if that makes any sense. It may just be that the we haven’t found the conditions in which there is a difference.
@Andrew I: I agree that one reason why a strong improvement in accuracy and speed was not found could be the length of the study. In the full research paper, I have posited that perhaps the reason why the sixth question is the only one with a statistically significant difference is because fatigue is starting to set in. I hope to explore the issue of fatigue more in the future.
Tiago R: You might be interested to know that in the past there was some use of more than one colour for paper print outs, e.g. green row, white row, orange row, white row. One obvious problem with this approach is that it may not work for users who have trouble distinguishing colour. It could also may be more burdensome than helpful, because of the cognitive load associated with processing colour.
Trek G & Julian L: I agree that in some environments, zebra striping is not time consuming. However, not everyone is working in those environments. But more importantly, I don’t think we should be doing something out of habit, without having hard evidence that it actually helps.
While I find this study interesting, and I’m fascinated by the number of comment it’s already received, I’d like to raise a different concern. In particular, I’m concerned about the appeal for new study participants in an article like this. _A List Apart_ reaches a wide audience of people with personal interest in the outcome of such a study, and I worry that many such people could use their own bias to skew the results of the study.
Think about it. If I hate zebra tables (personally, I’m in the ambivalent 33%), I could head over to the study, and intentionally take a long time on the zebra striped table, then knowingly give an incorrect answer, in hopes of “proving” that zebra tables are harmful. Conversely, if I love zebra tables, I could help skew the results against plain tables.
In addition to looking into things like fatigue and data density, I think you’d need to make sure to target data workers who are truly looking for the best presentation for the data they have to use. Asking the people who implement these tables to help determine their efficacy is just asking for trouble.
@Sean Ryan: Thanks for taking the time to do the follow up study.
I don’t want to give too much about that study away, to avoid biasing others who are yet to do it, but I want to clarify that I deliberately made the study hard. I need to get higher errors rates than the original study.
I disagree that working from the number back to the country is “not a striping problem, but a sorting issue”. Once you have found the number, you need to move left along the row to find the associated country – this is precisely where zebra striping may or may not help.
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.
Note that the methodology used in the follow up study is different from the original study, in order to answer some of those new questions that Paul Armstrong refers to.
@Marty Alchin
I would certainly hope that web professionals would be professional enough not to try to skew the study results in the way you describe. Don’t we all want good data on which to base our design decisions?
I think zebra striping gets its value in tables where you don’t have borders under every table row. Take for example the iTunes image posted, using zebra stripes certainly makes it easier to group relevant information in the table, without the need for ugly borders. I would like to see a similar study using tables without row-borders, but still clear and easy to read tables. I think the results would be more relevant to the web design world. Or even better, 4 tables, 2 w/borders, 2 w/out, and each pair having one striped and one not. That would really help the web design world come up with the best solution for displaying tabular data.
I believe that if you really want to have more readability in a data table then you should be able to highlight the row and column you want to read. This could be done with a simple mouse hover event with one color change occurring on the current column and another color change on the current row. With this method a reader would have a much more difficult time getting lost in the data.
I think this topic is too subjective to make such a sweeping generalization. A couple of posters before me stated as if it were a matter of fact that zebra striping doesn’t help. From personal experience, if a table doesn’t have zebra striping or horizontal borders between rows, my eyes jump between rows and the table is–for all practical intent–rendered useless to me. The same thing happens to me when reading a book.
If you’ve ever seen someone using a piece of paper or a bookmark to “draw” a line below the line of text that’s being read, that’s why. I’m actually a bit surprised zebra striping hasn’t made its way into textbooks, novels, etc.
I took the table test. When the tables were zebra striped, I had the answer right away. When the table rows were bordered, it took a little longer to get the answer. When there was no distinction whatsoever between rows, the time had run out by the time I scrolled back up to submit my answer.
The fact is that zebra striping helps some people and doesn’t help others. Isn’t that enough?
As noted by Jesse Perry, which worked on the Monster.com design, this proposed new study should also consider testing for tables in which rows span multiple lines of text, such as in Monster.com itself.
I believe striping can help further in these cases, especially when some rows are multi-line and others are not.
—
On the matter of highlighting cells on roll-overs, the columns should also be considered candidates for being highlighted, helping the user discern the individually hovered cell, such as in an X-Y grid.
I would be very interested in seeing the same experiments done with blocks of three lines alternating grey and white. The old AD&D books did that with some fairly hefty tables, and I always found them easy to follow. My guess is that it makes the blocks easier to follow without making them too high to keep track of where you are in them. You can always visually go “top of grey block” or “middle of white block”.
If you do this, please let me know of the results.
With all due respect, I’d hope that if you’re trying to come up with any kind of accurate findings, that you’d do more than “hope” that your study participants would honor the intent of the study. I certainly don’t have any intention of skewing your results, but then, I also don’t have any intention of participating. I wonder, when determining the optimum angle for wheelchair ramps, did they work with disabled citizens or carpenters? (I don’t actually know the answer to that, but it makes a decent parallel).
Even if you ignore the potential for malicious manipulating of data (which I still don’t think you should), there remains the issue of examining the
Sorry, that got sent accidentally.
Even if you ignore the potential for malicious manipulating of data (which I still don’t think you should), there remains the issue of examining the people who would most benefit from a proper answer on this. While most Web professionals do have to answer the zebra striping question at some point, we tend not to spend much of our days interpreting tabular data. If we were being asked to try out a code editor, that would make sense, but we’re being asked to participate in a study that’s not suited to our profession.
My biggest concern, though, is the sheer number of us will be participating in the study, compared with those who come from other areas. Is it being publicly promoted anywhere else? Is there a way to identify which users came from ALA after the fact, and possibly filter them out to see if they skewed the results?
Most of the concerns that have been raised arise from a basic question of replicating a real-world scenario. Removing the timer, taking fatigue into account, adding sortability, these are all things that are intended to more truthfully replicate the environment that would be most impacted by something as subtle as zebra striping. Asking people who don’t do it on a regular basis to pitch in flies quite contrary to that goal.
Of course, I don’t personally think you should be trying to replicate the typical “data worker” experience. After all, how many of us are writing apps for that? Most of us are using zebra tables for baseball scores or track listings, which is much broader audience that doesn’t need to take fatigue into account. But still, I don’t believe Web professionals should be examined as end-users for something like this.
One man’s opinion, of course, but now I’ve shared it.
Perhaps Time is not a good indication of effort? That is, perhaps zebra striped vs non-zebra striped can be done in the same human computation time, but non-zebra actually requires more brain-activation/parallel processes or similar. Perhaps it’s this fact that makes for why people ‘like’ it aesthetically?
I think that, to make strong conclusions about the efficacy of zebra striping to information search, you’d have to test a broader set of stimuli and tasks. For example:
What if you varied the order of columns in the table?
What if you varied the number of columns (and therefore data complexity)?
What if you varied the number of different data types?
Do different data types have an effect on scanning?
Does familiarity with the type of data being explored have an effect (assuming that participants would not be able to guess from prior knowledge)?
Ultimately, I wonder if some important issues may emerge from exploring your a priori assumptions:
“the following attributes may influence the effect of zebra
striping:
“¢ the distance of a row or column from the edge of the table;
and
“¢ whether the participant is reading from right to left versus
left to right.”
One cannot rely on reports by test subjects or simple error rates when conducting a task-based usability study. You _must_ observe the subjects while they perform the tasks. Also, task success may not be time related and subject awareness of the timer may affect results.
I refer you to Jakob Nielsen: http://www.useit.com and also http://www.nngroup.com/reports/tips/usertest/
Based on the comment of using the mouse to create ‘temporary striping’.. in web aps, why not use a mouseover to enhance the effect by highlighting the moused column/row?
As a designer(or developer) how long does it really take to zebra stripe a row. Maybe 5 minutes… 10 if you are hard pressed for a pale and complimentary color. While the benefits might be marginal, if you compound those benefits over millions of possible users, they can add up to be significant enough to warrant out initial time investment.
I personally like to combine zebra striping with a CSS :hover effect for horizontal (and sometimes vertical if the table size warrants it) readability.
Sure, some users might not get the :hover, but they all get the zebra. I don’t believe every bell and whistle needs to be 100% cross-browser. Call it incentive.
This is the most pointless article I’ve seen in a long time, particularly because I have doubts about the way you carried out the research.
And the follow-up survey on your website seemed totally confusing, because data asked in the questions would often be missing in the table provided! Furthermore, time wasn’t sufficient to scroll up the page and type the answer!
I am utterly disappointed ALA published such an “˜article’!
Whatever it’s intended use at conception we still use it today because it is visually appealing. I use it to add a little spice to a boring, repetitive structure of large content areas (like this thread). I vote to continue using Zebra striping.
But like several other comments, I also have several issues with the validity of the initial test parameters, as well as the second round (which I participated in).
While it is painfully evident that little research exists regarding tabular data Usability, this test was far too broad to provide valuable results. I honestly cannot consider this article anything more than a starting pistol.
Still, thanks to Jessica for starting this conversation. Let’s all keep pushing this thinking forward.
We’ve revised the illustration, removing the inner borders. Refresh your browser if necessary.
It seems to me that a lot of commenters think this is the final word on the subject. It is, like Ryan B says above, a “starting pistol”. That’s why the follow-up is there. If I were investigating this I might even do a dozen follow-ups.
However, a lot of people seem to forget that in scientific research it’s best to investigate one parameter at a time. If you would try zebra striping, hover effects, borders, sorting options all in one go, you couldn’t say whether the outcome is due to better/worse readability of one option or total confusion because of the huge variations. Because the author states they chose for a cost effective solution I conclude they haven’t got a lot of money available to do everything. Also, a good statistician _knows_ that only subjects from ALA readers are not a representative test group.
One piece of advice. In the explanatory text in the beginning you could add an example (to show that no value means 0, or at least I think) and tell people they can *return to the top of the page with the _home_ button*, a standard browser function apparantly almost nobody knows about..
with all due respect, this “article” is a lot of saying nothing.
the zebra strip for print was to aid readers to distinguish rows on datasheets with large number of columns. this was often seem in payroll, or the old dotmatrix printers. in your test, your table is too small for zebra strip to be useful.
“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.”
right, as to many other elements in design these days. that’s why there’s no point of conducting a test and write an article about “is rounded corner really friendly?” or “color A vs. color B.”
this article is full of iffiness, i honestly don’t get what you’re trying to say..
It’s simple Gestalt people!
As Nick Husher pointed out, zebra stripes emphasize relations between horizontal data an de-emphasizes vertical grouping (which in most cases is unwanted). It helps, and I think your 1% to 2% variance in results confirm it, even if the test was flawed (why in hell display a timer to the user?).
p.s: ALA doesn’t display any error message when you input a wrong login name or password, how’s that for usability?
In regards to the comment where the users highlighted rows to locate the data; I do that myself when I come across lists with not guidelines. Either zebra striping or underlines.
Recently I’ve been playing with adding :hover to the rows or list items to aid this.
I had a bit of a nervous breakdown a few years back which left me unable to read for about six months.
However one thing that took a lot longer to come back was the ability to read data in tables. I don’t know if it’s a minor cognitive disability but my concentration is not what it was.
Anyhow, to cut the the chase, I find zebra striping immensely useful in helping me read tables. Particularly if I’m tired I get ‘lost’ in tables. Zebra striping reduces this.
@Marty Alchin, @Joseph P Dempsey, Sr. and others
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.
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.
Yes, yes it does.
Are they parsed on post? No, no they aren’t.
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.
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.
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.
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
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.
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?
Ignore my post above, I just realised it has already been discussed 😉
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.
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.
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 personally don’t use Zebra Striping. It would be a waste of time.
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 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
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:
|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.
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.
bq. 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.
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.
I do NOT want to be counted among those who attack the study. I think much more needs to be done on the topic.
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?
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.
Great and very informative, hope to see more stuff like this soon.
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.
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. 🙂
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_%28magazine%29 (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_%28eye%29 — I find a lot of things more difficult than “normally” sighted readers do, because my eyeballs are oddly-shaped ;o)
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.
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.
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.