1 Zebra Striping

Now, this may just be me, but isn’t the point of zebra-striping to remove all of the thin rules and grid-work from a table? The example you’ve shown has all of the ruling as well as the zebra striping.

posted at 12:40 pm on May 06, 2008 by David Newbury

2 Aren't we missing the point a little here?

I personally use zebra striping as a visual guide to the eye in the absence of cell borders, whereas your test seems to render them entirely superfluous for that purpose by the inclusion of borders.

posted at 12:41 pm on May 06, 2008 by Chris Cox

3 Like they said

I agree with David & Chris. The use of grid lines in the table renders the zebra-striping superfluous. Zebra-striping is especially useful for wide tables with no grid lines. At least, that’s my personal preference.

posted at 12:46 pm on May 06, 2008 by Tamlyn Rhodes

4 Conclusions seem flawed

My thoughts were that are unlikely to encounter significant problems with reading large tables unless you are working with them to the extent that you get tired, bored and careless.

I always find that the first 15 minutes or so working with large data to be relatively fault-free, it’s only once i’ve been working for a long time that I begin making silly mistakes that could be avoided by simple UI enhancements.

If there is benefit to Zebra Striping I wouldn’t expect to see it clearly on such a small data set and with so few questions.

posted at 12:47 pm on May 06, 2008 by Andrew Ingram

5 Alternative idea

What if instead of zebra stripping with just two colors we do it with more colors ? Say, 4 or 5.

Instead of having:

we could have

This way people wouldn’t be so confused in case they would look somewhere else for a second and end up following the wrong column of the same color.

posted at 12:52 pm on May 06, 2008 by Tiago Rodrigues

6 wrong...

Looks like i got the table wrong with Textile, but i think the idea is clear.

posted at 12:55 pm on May 06, 2008 by Tiago Rodrigues

7 Spending time?

As web designers, we certainly cannot afford to be spending time coding an approach that isn’t actually helpful!

If you’re working in the right environment adding zebra stripes is hardly time consuming. Even a minimal increase in user experience is worth flipping the switch to turn this on.

posted at 12:57 pm on May 06, 2008 by Trek Glowacki

8 Untitled

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.

posted at 12:59 pm on May 06, 2008 by Peter Gasston

9 Stripes?

Firstly – I’d agree with the other comments here – without seeing the other data set, it’s impossible to really compare – if there are grid lines then there is some way of identifying the data, but you will note from the iTunes example on the ALA article, that Aqua uses them as a way to distinguish between lines of data where you don’t have a grid.

Interestingly, this isn’t actually a spreadsheet of data either, but actually highly text based. Looking at your example (with borders) everything is a lot more spaced out, so it may be a technique that is useful when you need to get a maximum number of rows on screen – and therefore need to minimise the row gap.

A comparison here may be to prototype a view of an iTunes playlist using the ‘real’ view, a view without any zebra striping, and a view with a line between each row.

Just one more comment – zebra tables aren’t hard to implement electronically. It’s more down to whether they are supported in your development framework (as they are on OS X Aqua or Adobe Flex) or not (CSS).

posted at 12:59 pm on May 06, 2008 by Julian Lawton

10 Django

@Julian Lawton

Not sure about other Webdevelopment frameworks, but Django provides you with that functionality. That shouldn’t be something that CSS would do naturally I think.

posted at 01:01 pm on May 06, 2008 by Tiago Rodrigues