11 Striped

When we did that Job Search Results page on Monster, the team battled back and forth a dozen times on the pros and cons of the row striping. After a bit of usability testing, we found that for complex, multi-row sets of data with controls associated with each data set, we needed to visually wrangle it all together.

The thin green border between results did help users with lower vision group the controls to the job search result, so I’ll stand by it.

posted at 04:03 pm on May 6, 2008 by Jesse Perry

12 Frameworks

Good point – my comparison wasn’t valid (comparing frameworks with languages).

posted at 04:09 pm on May 6, 2008 by Julian Lawton

13 Sorry, what?

I have absolutely no idea why would I want to drop striped rows in favor of their hard-to-follow bad-looking plain counterpart. Even if we are talking of 2 or 3 percent increases in accuracy and speed, the “extra” effort to implement the feature is well worth the difference.

What a waste of time…

posted at 04:09 pm on May 6, 2008 by Damjan Mozetic

14 Highlight

I agree with the above posters that having the grid lines makes the zebra striping superfluous. The study did lead me to another question, though. I’ve seen in the past the ability to highlight rows and columns as you mouse over the cell. I’ve never tried, but I am sure it is trivial with JavaScript.
Since users were already highlighting and using their fingers to focus their attention on a row, wouldn’t this piece of functionality save time (and possible increase accuracy long-term)?

posted at 04:13 pm on May 6, 2008 by Nathan Ziarek

15 CSS ?

@Nathan Ziaerk

You don’t even need JavaScript for that. CSS is enough. The problem is that older browsers like IE6 don’t support the :hover property on other tags than <a>, so in that case you would really need JS, but yes, it’s simple enough to do.

posted at 04:16 pm on May 6, 2008 by Tiago Rodrigues

16 There is a problem with the technique discussed.

Zebra striping doesn’t help. That much is true. WHY doesn’t it help though? Answer: because rows are often too small to provide a distinction between one white row and the white rows before and after that one.

It is a matter of how much information the human eye can take in at once. As rows reduce in size, humans can view more rows at a time, making such a technique useless. For an example, open a graphics editor and create a 2×2 image and zoom in really far. Have blue in opposite corners and red in the other. Make it the background of a Web page and it appears to be a shade of purple.

If you have a large area for table rows, this technique DOES help.

A solution for those small rows exists too: use more colors. Typically 4 colors are good enough unless the text of the table is at an 8pt font size or lower (which shouldn’t happen because of accessibility).

The solution of not taking the time to stripe the table rows and using a hover effect on a row is also a very effective solution. JavaScript shouldn’t be required except in the case of IE6, IE7 in quirks mode (use and validate against a Strict doctype to help avoid this) and legacy browsers because the modern browsers all support the :hover pseudo-class on any element.

posted at 04:30 pm on May 6, 2008 by Dustin Boyd

17 Zebra Stripes

@Tiago Rodrigues: CSS can naturally do zebra striping as of 2.1. Because the Explorer family of browsers choses to ignore large pieces of the spec, nobody uses the CSS method.

The UI class I took in college spent two or three weeks on the subject of data visualization, specifically as it applies to print. The most common property of good data visualization versus bad data visualization was the reduction of unnecessary visual noise.

Cell borders in this case aren’t just ugly, they stand in the way of effective communication by partitioning related data in visually-separate boxes of content. Zebra striping allows the designer to remove the cell borders, which has the effect of relating horizontal data together in a visual clump—it also has the effect of de-emphasizing vertical data relationships, but that’s the nature of the beast in this case.

In small data sets, zebra striping is often unnecessary; light horizontal rules often do well enough to relate horizontally-presented data, which introduces the possibility of using brightly-colored vertical rules to relate vertical data.

Nick

posted at 04:31 pm on May 6, 2008 by Nick Husher

18 Test at end of article

I just took the test linked to at the end of the article, and if this is the same method the author used to perform the first test, then there is a reason results were mixed.

The problem I had is that, zebra or not, I had a very difficult time finding the answer when I was given the number and had to find the country it belonged to. I had to scan each column, hoping that the number would stand out. This is not a striping problem, but a sorting issue.

To make matters worse, there is a timer counting down at the top of the page. This made me try and go as quickly as possible, that when coupled with the lack of sorting, made me miss the answer several times.

I would say the only reliable way to test if zebra striping works is to do some eye tracking studies. This way you can actually see if the the striping is helping the eye track across the table, which is the point. Speed is irrelevant for the most part, since with the web, all users are scanning as quickly as possible.

posted at 04:31 pm on May 6, 2008 by Sean Ryan

19 Designing for Visual Appeal

Not everything we design into a web application is purely “functional”. Much of what we consider to be “best practices” for web design revolve around the simple concept of “designing for visual appeal”. What would you rather read on a web site, an unformatted table full of words and numbers or a beautifully formatted table including “zebra stripes” and other “eye candy?

Sometimes the question is not “does this feature add functionality”, but “does this feature offer enough visual appeal that the user will take the time to read what is presented”?

posted at 04:52 pm on May 6, 2008 by Jeff Lynch

20 Poorly Tested

I’m afraid that the core of this study is quite flawed. How can you really make a conclusion when you didn’t complete a full test?

• How many different shades of striping were tested?
• What size font was used?
• Why did you choose to have borders on the table cells?
• Did you test without borders?

• …

There’s an endless amount of unanswered questions that your study opens up. To any trained theorist or panel of judges, this articles argument would fail.

Which brings me to my point: I would like to see this study done correctly, testing various shades and colors of striping, seeing whether or not borders with and without striping have an effect on readability. Have a set of users that are visually impaired.

And what about row highlighting for the position of the mouse? So when a person mouses over a row, it gives it a completely different background or border than the rest of the table.

And why were cells blank? I don’t know how to answer a question if the answer that I’m looking for isn’t there.

posted at 04:55 pm on May 6, 2008 by Paul Armstrong