111 Proper use of stripes

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.

posted at 06:39 pm on June 11, 2008 by Charlie Ross

112 Eye tracking make a big difference

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

posted at 01:22 am on June 26, 2008 by Thomas Sola

113 CSS3 will do the job

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

posted at 05:58 pm on July 29, 2008 by Mikkel Mortensen

114 zebra stripes don't hurt

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.

posted at 12:12 am on August 1, 2008 by mark opala

115 This whole discussion is pointless.

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…

posted at 04:06 pm on January 10, 2009 by Don Fredrickson

116 A couple of cents worth on the subject

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/

posted at 08:20 am on November 23, 2009 by fluxd

117 zebra stripes help me.

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.

posted at 12:33 pm on April 11, 2011 by Frederik

118 Zebra is not ideal for this case

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

posted at 03:23 am on June 8, 2011 by iurevych

119 Sharpness

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

posted at 02:02 am on September 28, 2011 by inventorysoft