I Am Not Charles

Wild Zebras

Posted in the Living Room by Joe on May 10, 2008
Tags: ,

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.


2 Responses to 'Wild Zebras'

Subscribe to comments with RSS or TrackBack to 'Wild Zebras'.

  1. Christian Piper said,

    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

  2. Joe said,

    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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: