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 Articlesachin 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.