Perhaps of some passing interest is a comparison with the old “greenbar” paper, which frequently used triple striping. The nicer greenbar paper was not only heavier, but it combined triple striping with being lined.
One other observation: the country table shown for the second test hurt my eyes, I believe this is because the grey was so dark, and there was little surrounding whitespace compared to the size of the text; it was almost like a moire pattern waiting to happen. (I’m exaggerating, but you get my point.)
By “contrast,” the table showing the results uses a much lighter grey, and there is more surrounding whitespace — in absolute terms, and when compared to the size of the text.
Copy & paste the code below to embed this comment.
Void Nothings
From my own experience as a web designer, I think Zebra stripping helps a lot. But as the article says, It requires real data about the users. So I’d still advice my fellows to collect real information.
I have two websites with large data tables on – one of them uses zebra striping and the other uses hover striping (CSS only so doesn’t work in IE6).
One disadvantage I’ve just thought of (and never spotted before, hmph) is that neither method is likely to work for printing, as most browsers strip all backgrounds – so it may be a good idea to line the tables for the print css.
I’d be interested to hear what people think of the two methods, which they prefer aesthetically and which they find easier to read in these particular cases. I’m also intrigued by Charles’ comments that the hover striping makes him feel ill – does anyone else suffer from this kind of side effect?
After reading this article, I have decided to complete the coding for a quick study on readability of color combinations. You can “participate in the study here”:http://evc-cit.info/psych018/colorexp/ .
It’s a very simplified version of “this study”:http://www.laurenscharff.com/research/AHNCUR.html
Copy & paste the code below to embed this comment.
Mo Gosh
Even if you don’t like zebra striping, you’re going to be seeing a lot more of it.
Some designer/developer at Microsoft decided, on all our behalves, that zebra stripes are the way to go when presenting data in tables. In MS Word 2007, 90 out of a possible 105 default table layouts offered to users employs zebra striping. That’s a whopping 86% of the design options offered.
Has anyone considered combining zebra striping with the table ruler script listed on ALA?
What you call “table ruler script” I call “hover striping” (see #33). Except that rather than use a script, I just did it via CSS (it doesn’t work in IE6 but I considered that an acceptable casualty!) – it’s very straightforward, just add a declaration for tr:hover td {…}
Your experiment combining zebra striping with hover highlighting is interesting.
On a personal level, I find the removal of the zebra striping quite visually distracting. But maybe this is only because I’m not actually trying to accomplish a task with the data.
I’d be interested to see how it looks if you do exactly the same thing but leave the zebra striping there all the time (i.e. just introduce the hover).
Copy & paste the code below to embed this comment.
P Bean
I find this article very interesting and read it with great pleasure because this is indeed something I spoke about with a colleague the other day. One trouble however in this study is the wording of the poll question. It basically says ‘which does the most to increase visual to make the table easy to read and use’. If I were to participate in the survey, I would choose either the striped or lined one, because I would think that would ‘do the most’, rather than choose my preference (which might be the non-striped or line one) as first.
Maybe for this particular element it would have been better to have a page displaying a table and allowing users to customize is, adding stripes and/or lines in different colours and asking the question to form it so that it makes it easy for them to use, randomly offering striped, lined or neither as initial state.
But… I’m no researcher and it’s just something I came up while reading your article. I appreciate all the work done and am very thankful you did this and published it.
Copy & paste the code below to embed this comment.
Chris Hayes
I personally think that zebra stripes help find information quicker, especially in wider tables.
I hypothesize that if you were to set up the experiment in a lab, ask a question and have the person find and say the answer to you as quickly as possible, you would find that zebra stripes increase the speed.
One aspect of this experimental design that I feel could influence the results is that fact that people have to fill in the a form and submit the question online. There is variability in the amount of time to locate the data entry box, in typing speeds etc. I think if you were to test people in a lab and have them say the answer immediately after finding it, a lot of these confounds would be eliminated.
Good study, but based on the null hypothesis that zebra striping does not increase speed or accuracy, I think there exists a Type II error (at least more so for the initial study):P
The data presented in this article are very useful!
I was looking for similar data for research, analysis and references and only found here.
Thank you very much.
I will refer your site / blog and his article in my presentations.
Copy & paste the code below to embed this comment.
Gumgatron
Firstly, Great article.
It would be interesting to see if the discrepency in favor of single striping is increased as the number of columns between the reference column (the country) and the data column increases. It seems that there is little difference for adjacent columns and a small but noticable difference when separated by one column.
What would be the effect if the reference and data were separated by say 8 columns of other data. I would imagine that you would see a predictable (probably linear) increase in the effectiveness of the zebra striped table.
Copy & paste the code below to embed this comment.
maniamom
I think this is a fantastic article! Thank you for all of your time in putting this together.
I also think that it’s very hard to take a specific finding on usability and apply it to all circumstances. It’s the unity of the page, and how all entities involved in it work together that count.
For instance, if I have several tables on one page, and am defining and comparing the information within them, then I may choose not to have the zebra stripes, which fight visually with the divisional space between the tables.
44 Reader Comments
Back to the ArticleGlenn Cole
Thanks for the research!
Perhaps of some passing interest is a comparison with the old “greenbar” paper, which frequently used triple striping. The nicer greenbar paper was not only heavier, but it combined triple striping with being lined.
One other observation: the country table shown for the second test hurt my eyes, I believe this is because the grey was so dark, and there was little surrounding whitespace compared to the size of the text; it was almost like a moire pattern waiting to happen. (I’m exaggerating, but you get my point.)
By “contrast,” the table showing the results uses a much lighter grey, and there is more surrounding whitespace — in absolute terms, and when compared to the size of the text.
Void Nothings
From my own experience as a web designer, I think Zebra stripping helps a lot. But as the article says, It requires real data about the users. So I’d still advice my fellows to collect real information.
Great article!
Stephen Down
I have two websites with large data tables on – one of them uses zebra striping and the other uses hover striping (CSS only so doesn’t work in IE6).
One disadvantage I’ve just thought of (and never spotted before, hmph) is that neither method is likely to work for printing, as most browsers strip all backgrounds – so it may be a good idea to line the tables for the print css.
I’d be interested to hear what people think of the two methods, which they prefer aesthetically and which they find easier to read in these particular cases. I’m also intrigued by Charles’ comments that the hover striping makes him feel ill – does anyone else suffer from this kind of side effect?
eg – “Zebra striping”:http://getdown.org.uk/pocklington/latest.htm – “Hover striping”:http://getdown.org.uk/bus/bus/34.shtml
J David Eisenberg
After reading this article, I have decided to complete the coding for a quick study on readability of color combinations. You can “participate in the study here”:http://evc-cit.info/psych018/colorexp/ .
It’s a very simplified version of “this study”:http://www.laurenscharff.com/research/AHNCUR.html
Mo Gosh
Even if you don’t like zebra striping, you’re going to be seeing a lot more of it.
Some designer/developer at Microsoft decided, on all our behalves, that zebra stripes are the way to go when presenting data in tables. In MS Word 2007, 90 out of a possible 105 default table layouts offered to users employs zebra striping. That’s a whopping 86% of the design options offered.
matt bear
Has anyone considered combining zebra striping with the “table ruler”:http://www.alistapart.com/articles/tableruler script listed on ALA?
I’d be interested to see if that offers any serious benefits. I assume it does, but you all know what they say about assuming.
Stephen Down
What you call “table ruler script” I call “hover striping” (see #33). Except that rather than use a script, I just did it via CSS (it doesn’t work in IE6 but I considered that an acceptable casualty!) – it’s very straightforward, just add a declaration for tr:hover td {…}
Jessica Enders
@Michiel
Your experiment combining zebra striping with hover highlighting is interesting.
On a personal level, I find the removal of the zebra striping quite visually distracting. But maybe this is only because I’m not actually trying to accomplish a task with the data.
I’d be interested to see how it looks if you do exactly the same thing but leave the zebra striping there all the time (i.e. just introduce the hover).
Jessica Enders
@Stephen
You make a good point about print CSS. Thanks for taking the time to contribute that.
Thanks also for posting those two examples. I personally like each approach for each situation:
I feel a “it depends” coming on.
P Bean
I find this article very interesting and read it with great pleasure because this is indeed something I spoke about with a colleague the other day. One trouble however in this study is the wording of the poll question. It basically says ‘which does the most to increase visual to make the table easy to read and use’. If I were to participate in the survey, I would choose either the striped or lined one, because I would think that would ‘do the most’, rather than choose my preference (which might be the non-striped or line one) as first.
Maybe for this particular element it would have been better to have a page displaying a table and allowing users to customize is, adding stripes and/or lines in different colours and asking the question to form it so that it makes it easy for them to use, randomly offering striped, lined or neither as initial state.
But… I’m no researcher and it’s just something I came up while reading your article. I appreciate all the work done and am very thankful you did this and published it.
Chris Hayes
I personally think that zebra stripes help find information quicker, especially in wider tables.
I hypothesize that if you were to set up the experiment in a lab, ask a question and have the person find and say the answer to you as quickly as possible, you would find that zebra stripes increase the speed.
One aspect of this experimental design that I feel could influence the results is that fact that people have to fill in the a form and submit the question online. There is variability in the amount of time to locate the data entry box, in typing speeds etc. I think if you were to test people in a lab and have them say the answer immediately after finding it, a lot of these confounds would be eliminated.
Good study, but based on the null hypothesis that zebra striping does not increase speed or accuracy, I think there exists a Type II error (at least more so for the initial study):P
Fornecedores Clientes
The data presented in this article are very useful!
I was looking for similar data for research, analysis and references and only found here.
Thank you very much.
I will refer your site / blog and his article in my presentations.
Gumgatron
Firstly, Great article.
It would be interesting to see if the discrepency in favor of single striping is increased as the number of columns between the reference column (the country) and the data column increases. It seems that there is little difference for adjacent columns and a small but noticable difference when separated by one column.
What would be the effect if the reference and data were separated by say 8 columns of other data. I would imagine that you would see a predictable (probably linear) increase in the effectiveness of the zebra striped table.
maniamom
I think this is a fantastic article! Thank you for all of your time in putting this together.
I also think that it’s very hard to take a specific finding on usability and apply it to all circumstances. It’s the unity of the page, and how all entities involved in it work together that count.
For instance, if I have several tables on one page, and am defining and comparing the information within them, then I may choose not to have the zebra stripes, which fight visually with the divisional space between the tables.