Five cents worth of zebras and tables

While reading Jessica Enders articles on Zebra Striping at A List Apart I made a couple of observations. Fairly obvious ones as the formatting of table data is not rocket science but still perhaps worth a few minutes of typing.

Zebrawhat?

Zebra striping refers to the practice of accentuating every other row in a table of data by alternating the rows colors. This is used to help guide the users eye along the row and speed up the reading of data. The experiments on A List Apart amongst other things pointed out that it was common for the user to guide their eye with the help of their finger. Here is where the obvious strikes me. We already have something to point with on screen. The mouse cursor should be able to replace physical fingers greasing up the screen (oh, don´t you just hate that?). So if the mouse cursor was available to the users why did they not choose to use it as visual aid while trying to read?

My assumptions are that a combination of the following makes the cursor less than ideal for the purpose:

• There is too much precision required in handling the mouse or other tracking device in an exact straight line for the average user.
• The cursor is not easy enough to see as it by default turns into a horizontal line while hovering over text, virtually making it disappear.

Now I´m not saying that the cursor state is wrong as it does indicate that the text is selectable. However it is not helping the user with the primary task regardless of your row colors.

Bringing something to the table

How do we go about making the table more readable? Adding some CSS and JavaScript can remedy the problem. By adding a simple hover state to the current row, cell and or column and highlighting them on roll over you will greatly increase readability. You might also consider making it a bit more functional by adding some JavaScript. If you do not wish to spend your time reinventing the wheel there are several solutions out there that do this. Frequency Decoders version is the one I prefer at the moment. Their solution is interaction-wise as simple and unobtrusive as can be.

Play with this for a couple of seconds:

Col 1	Col 2	Col 3	Col 4	Col 5	Col 6	Col 7	Col 8	Col 9	Col 10
Data 1	Data 2	Data 3	Data 4	Data 5	Data 6	Data 7	Data 8	Data 9	Data 10
Data 11	Data 12	Data 13	Data 14	Data 15	Data 16	Data 17	Data 18	Data 19	Data 20
Data 21	Data 22	Data 23	Data 24	Data 25	Data 26	Data 27	Data 28	Data 29	Data 30
Data 31	Data 32	Data 33	Data 34	Data 35	Data 36	Data 37	Data 38	Data 39	Data 40

*

So why is this type of interaction not more widely implemented? Again a couple of assumptions based on personal experience.

• Designers. Photoshop compositions do not convey how things should work and behave only how they should look. Making comps of every state of an interactive page element is time consuming for designers.
• Developers. There is a bit of extra effort involved in producing these tables. Developers without proper specifications or allotted time might opt for the easy way (not doing it).
• Weight watchers. Adding the extra JavaScript and CSS to a site with extreme traffic loads might not be a good idea. As always use common sense and good judgement.

Making your tables interactive is not the way to go in every case as the extra work is not always justifiable nor do all tables contain important enough data. I would recommend an absolute minimum of four rows and columns before going through the trouble. Any help we can give the users to complete their task, on the other hand, is always a good thing.

Back to the pajamas horses

While zebra striping is sometimes esthetically pleasing and does help to some degree I´d like to leave you with a (somewhat vague) thought. On the savannah the zebra actually uses its stripes to confuse predators when moving (albeit more effectively so in large groups). I personally doubt that anyone would make use of such high contrast in a table but try looking at a striped table while scrolling. You will feel your eyes jump up and down the page like table tennis balls. It has the same effect as when trying to focus on a single line in the middle of the road while speeding along in a car (hopefully in the passenger seat). You follow it to a point then your eyes automatically jump ahead to your previous starting point and start over.

To sum this rant up:
If you need a striped table try keeping the contrast between row colors at a reasonable level. Otherwise your table might become a disruptive element on the page. Also do consider making the table interactive. Your efforts are bound to be appreciated by someone.

Got any additional thoughts on tables and the reading of data? Please leave a comment.

---