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