1 Untitled

I never read the comments from the last discussion from the last article so sorry if this has already been said. For me zebra stripes are a must have.

I’ve got tunnel vision so when I look at the sample data in the article, I can’t see the full table at one glance. I can see the countries column clearly or I can see the data columns clearly: but not both at the same time. Due to this sometimes reading table data can be slower than it needs to be. I won’t say tricky because it’s not, it’s just more inconvient for me.

The zebra stripes make it easier and quicker for me to read the data. If I look at Canada (a white row) and switch my eyes right to the data, I know that the data in the white row, in the middle of my view is Canada. If the colours weren’t there, I couldn’t be 100% that I was looking at the data for Canada unless I either scanned across the page from left to right, or if I double checked by looking left then right again.

I know it’s not a hassle for me to have to double check or scan across the page instead of just snap from A to B but isn’t this what usability is all about? I haven’t seen any negatives to zebra striping apart from the small amount of time it takes to code and the (rare?) possibility of it throwing off a design. For me, the ease of use I gain greatly outweighs the amount of time it would take me to code the site.

posted at 03:23 pm on September 9, 2008 by Lee Theobald

2 Thanks!!!

Thank for this article. A good portion of my workload includes designing user interfaces. I spend alot of time trying to find ways to make the experience easier and more efficient for users, especially because they use the interfaces to preform day to day tasks.

The issue of zebra striping the tables has been discussed and no one ever seems to agree on it. I am for them, but I personally think it is in how you create them. If they do lead the eye and the contrast isn’t to sharp then it can definitely help the user sift through results tables quicker (based on what i have seen at my job). I think the idea about testing people under pressure was more applicable to work place usage in a production environment.

Again thank you for another great article and helpful resource.
~Aaron I

posted at 03:51 pm on September 9, 2008 by Aaron Irizarry

3 Great Article and Data

Thank you for this informative article. The data and conclusions presented are very helpful, especially for someone such as myself that is involved in the design of annual reports.

posted at 03:52 pm on September 9, 2008 by Aaron Riddle

4 Dynamic striping

Jessica, thank you for your hard work on this. Thanks to ALA, as well, for publishing it.

One benefit of being online is that we have the ability to dynamically alter elements of the page. Even just with :hover, we can alter table rows, table cells, etc. I find that by having a table without striping allows the user to scan vertically, but having a row’s :hover state change the background color to a highlighting color (even if just gray) gives the “focus” that this survey shows to be useful.

Further, you can assign a value to the row, as appropriate. For example, in our personal finance app, when the net value for the row is positive, the row’s highlight color is a pale green. When the row’s value is negative, the :hover color for the row is a pale pink. This allows the row highlighting itself to carry meaning that reinforces the data in the table.

I’m not suggesting that you add dynamic row coloring on to the extensive testing you’ve done … you’ve done a fabulous job. But it’s easy to forget that we have options available to us because of the medium we’re using, and I’d encourage other web developers to remember that there are easy enhancements that can increase usability without compromising aesthetics.

posted at 04:17 pm on September 9, 2008 by Charlie Park

5 Excellent Article!

Very informative article, well thought out and thorough. I’d love to see more of these on the site for other aspects of design! I have an in-house website that acts as a front end to a rather large database and it ends up creating some very sizable tables at times, so I often spend time trying to decide how best to improve the readability of the tables. Lately I’ve settled on a lined table complete with line-highlighting based off of mouse position. I feel like doing it that way eliminates a lot of the noise of static striping, with the obvious drawback being losing the helpfulness of striping for initially finding the row you are looking for. I’d be very interested to see these same tests repeated with the addition of in-line highlighting based off of :hover.

posted at 04:19 pm on September 9, 2008 by Gene Davison

6 My Preference

I prefer to take a default table, and apply the following:

td {border:1px solid black, padding:5px}

This results in a table with nice padding and easily trackable rows & columns.

posted at 04:47 pm on September 9, 2008 by Mike Whitehurst

7 Thanks for the excellent article

Thanks for the excellent article. It’s great to see user driven design informed by statistic analysis as well as aesthetic preference.

posted at 05:49 pm on September 9, 2008 by Joshua Wait

8 uneven distribution of columns?

Thanks for doing this research. It’s invaluable.

The distribution of white space among the columns in the sample table is rather uneven and tends to arrest the eye moving across a row. I wonder how much of the preference for stripes and rules is the result of the readers’ desire to impose a stronger horizontal rhythm on the rows of the table and if a similar effect could not be achieved by a judicious adjustment of the columns.

LTM

posted at 06:01 pm on September 9, 2008 by Lindsey Martin

9 Yet more research?

A lot of data tables I create contain links and/or form elements such as radio buttons or checkboxes. Care to run another test on speed/accuracy of striping of these tables?

My gut feeling is that they are much easier to use, but that’s only an opinion.

posted at 06:08 pm on September 9, 2008 by ault nathanielsz

10 My Own Theory

I think that zebra stripes work great only if you plan to make them tall. If they are vertically thin, they just make it even harder to track.

posted at 06:35 pm on September 9, 2008 by Zen Sand Garden

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)