Wild Zebras
Christian at Design Desires posted some simple Javascript to make dynamic zebra-striped tables. He asked for comments to be mailed to him - in keeping with last month’s rant about open discussion, I’m posting my response here instead:
No sir, I don’t like it.
I don’t find it adds anything. I’m perfectly able to read across the lines of a plain old static table, so highlight one line doesn’t make it any faster to read that line. It also doesn’t help me pick out a line when scanning with the mouse, because I’m already looking at the line that gets highlighted - I put the mouse there myself!
I don’t know if it’s just my browser, but highlighting the line causes a lot of flicker. (The “more extreme” example from Neil Roberts is even worse - it actually resizes things while I’m mousing over them, jerkily. That’s terrible!) So I’d really hesitate to use this until it’s been tested on a lot of browsers and setups to make sure it’s smooth everywhere.
The only advantage I could see is if I look away and come back later. There might be some value in highlighting the line after the mouse has stopped there for a few seconds, which wouldn’t cause flicker when scanning quickly. It still might be more annoying than useful, though.
on May 10, 2008 on 6:41 pm
Hi Joe, Thanks for the comments.
I should point out a couple of things I didn’t make clear for the reason of creating the demo, It was in response to a comment to A List Apart’s original article in which a users mentioned case studies (I believe in the print world) that visual noise impairs responsiveness to tabular data, I wanted to show a simple and effective way of reducing the noise.
As far as the flicker goes this could easily be solved with a bit of timing in the script, I will sometime this week come back to it and build something a bit more robust, for the moment though it was just to show a simple way of reducing noise and get feedback.
Kind Regards,
Christian Piper
on May 11, 2008 on 12:53 am
The flicker is caused by the update lagging slightly behind mouse movement, though - if you’re moving the mouse fairly quickly, the rows aren’t quite redrawn fast enough to track it smoothly. How can you make that script update faster? It’s pretty simple - I don’t really see any scope for decreasing the timing. (Increasing it is easy, which is why I suggested putting enough of a pause to completely break the illusion that it’s tracking the mouse.)
EDIT: actually, I can see a way to make it track better: draw just the heavily highlighted row, and then fade out the surrounding rows more slowly only if the mouse is still over the same row.