zebra tables and lists
March 9, 2004 | Bruce Hensley
14 Comment(s)
We produce many tables and lists in our publications group, in print, presentations, and web pages. There is a growing trend toward using “zebra tables”, alternating bands of background color for every other row.
While this can look graphically cute when viewed at a distance, I find my eye jumps to all the even (or odd) rows when scanning for information, so that I must constantly back up and rescan.
Is my observation backed by any other evidence, or am I just a whiner? I would appreciate a reference to a good discussion on design of tabular information.
Thanks,
Bruce Hensley
See Envisioning Information, chapter 3.
Why zebra stripes for referees? See
http://slate.msn.com/id/2096904/
Thank you for the reference; I now have a vocabulary to use in explaining the phenomenon to coworkers … the alternating backgrounds are creating two distinct layers of focus in the tables when there is no difference between the alternating rows of information. The technique has value in instances where there is a distinction you want to make visible, but used in a simple list, it confuses the eye into thinking there are two separate types of information.
However, three coworkers claim they find the zebra lists easier to scan than a list where the lines are separated by white space or faint, thin, grey rules (I am the odd one out). Have you found that some of the rules you have found apply only to certain classes of people, perhaps based on their right/left brainedness, their cultural or personal experience, or some other cerbral difference?
P.S. The note on zebra referees made great dinner conversation material with my 13 year old, sport, stepson from Michigan.
To implement ET’s alternative to zebra stripes in HTML, do something like this:
<table>
<tr bgcolor=”#EFEFEF”>
<td>data</td>
</tr>
<tr bgcolor=”#FFFFFF”>
</tr>
<tr bgcolor=”#EFEFEF”>
<td>more data</td>
</tr>
</table>
Which looks like this:
It’s not optimal, but IE (at least) will put in a very thin white line between the cells, and #EFEFEF is a very light gray that shouldn’t be too distracting. In my version (used for a company phone list), you really can’t see either the background or the white line. Your eye just scans horizontally.
Stephen
ET’s alternative to zebra stripes looks great on screen and printed in color. But lightly colored backgrounds look terrible or disappear altogether when printed on many laser printers. What is the best way to format a table that will end up in the output tray of a monochromatic printer?
I’m a fan of putting a thin dotted or light-colored line below every third row in the table (as at left, in the above image) for two reasons:
In Adobe Illustrator, I find a 0.6 point line, with rounded caps and a dot spacing of 0/2.1 works quite nicely.
And of course, this is not based on any hard evidence, other than my own observations.
-Matt
I would also thank Mr.Tufte for providing the explanation about the perception of the striped tables. For long time this kind of table decoration was irritating me, because my eyes also jump between all the odd/even rows.
But I still find such tables everywhere and I can’t understand, why? The single “pro” I have found here
Striped Tables: Comparison @ alistapart
http://www.alistapart.com/d/stripedtables/comparison.html
was that in the multicolumn tables, tall stripes guide the eye to the next column better than thin lines.
Again, this is a solved problem, with examples in Envisioning Information, chapter 3.
Strips are merely bureaucratic or designer chartjunk; good typography can always
organize a table, no stripes needed.
I’m glad this popped up today as I was reminded of the issue.
Discussing the New Jersy Transit Northeastern Corridor Timetable, ET writes on page 55 of Envisioning Information “A redesign calms the dominating grid, moves the New York departure times to the very top, de-emphasizes less important data, and add new information.” The table has 30 columns. Since not all trains stop at all stations some data is missing and therefore the table lacks regularity. The redesign includes light, warm gray, horizontal zebra stripes that reinstill vertical order lost to the empty cells. The stripes are three rows tall, so one has an upper border, the next has no border, and the third has a lower border.
Today I printed two tables, the same table really, but with one column of input and three columns of output changed to explore the result of a policy change. The entire table is 27 columns wide and 33 rows tall. I did not use zebra stripes or any other device, just data. Along with changing the input in the second spreadsheet I wrote procedures to automate the output calculations and changed the calculations done on the input. Someone else reviewing the two tables found it necessary to hand-draw lines between every five rows on both tables. That person found what appeared to be an error in my calculations. As I checked my work I found those five lines very helpful.
Last week and over the weekend I was making tables of other data, 12 columns wide and 93 rows tall. None of the 70 or so people reading the 15 editions of changing data asked for curbs at all, and I never percieved a need for them myself.
As the secretary for a committee that meets monthly I keep attendance for the year on one page. The months run across the top and the committee members run down the side. The rows are curbed with stripes, however, all the cells are initially empty. I have to figure out where to put check marks, so I drew vertical lines after every third month.
I think at some number of columns between 10 and 25 a minimal row-curb may be helpful, be it stripes or ruling. The number of columns is probably dependent on how many fits in the eye’s fovea or the mind’s area of attention. Getting back to rows though . . . harkening back to Miller’s Magical Number lecture, the curb may be least obtrusive at an interval of five rows rather than three. The eye-brain system, running across columns, marks and then repeatedly checks the distance of a row from the nearest convenient parallel landmark. As Miller summarized, the eye can detect, within a fraction of a second, five to 10 differences in one dimension—in this case curb immediately above, nearer above, equidistant, nearer below, and immediately below. The eye-brain system can descriminate five differences as quickly as it can descriminate three, and it starts getting confused if there are six or more differences and the eye-brain system becomes unreliable at around 10 differences in one dimension. Omitting all curbing devices remains an excellent option because individual readers can at least draw lines at whatever intervals, and in whatever directions, they want.
I wonder what you folks think about highlighting a row when the mouse is hovering over the row? Would this increase the readability of data? Or will this changing colors just end up confusing the user more?
Thaths, only if that row is part of a widget, and can actually be selected. Otherwise, it’s just annoying imo.
There’s an article from a few weeks ago in A List Apart (one of the few web
design sites that covers both theory and practice) that attempts to find an increase in speed or accuracy using
zebra striping on a table. I’m not certain the experimental design is sound, but it’s worth reading.
Zebra Striping: Does it Really Help?
I’d personally be interested in seeing if the technique of grouping multiple rows together is beneficial in large
tables.
We publish an online tool that allows users to see live prices on bonds with a number of different measures and have just relaunched to universal criticism. Among the changes we had introduced were removal of zebra stripes in place of a subtle grey line every 3rd row, changing the font from Arial to GillSans, and several others. We’re sticking firmly to our guns here on the basis that we don’t design by committee but have we made any obvious errors here? I’ve included screenshots of the new (the cream background) and old versions.
Will,
Your redesign is clearly an improvement in many areas including the removal of the vertical
lines and of the gradient in the header columns.
My challenge with zebra striping is in small sets of data. If there are too few rows in the
table then zebra striping looks more like highlighting than a visual aid for scanning. For
this reason I believe your choice of a horizontal line is appropriate. But, unfortunately,
for the small amount of data displayed, the single horizontal line has the effect of
dividing the set in 2 instead of clearly being a visual aid for scanning.
I propose that for a set of so few rows that it is necessary to use 2 horizontal lines. The
2 lines more readily establish a pattern and thus it is more clear why they are present.
Finally, I couldn’t help myself and had to make some additional modifications to the chart.
I understand the objective of the pair of vertical green and blue lines but I challenge
their effectiveness and thus I removed them. The column header alignment to the data seemed
inconsistent so I attempted to center align the headers to the data. Also, I believe the
data is much easier to read when decimal aligned. Note that I also made the precision
consistent by adding a zero to the 5.1 data item in the last column. Lastly, note that the
second “Chg” column aligns the “+” symbol, again making the data easier to scan.
Steven