Do Zebra Stripes Actually Help? 234
RyoShin writes "A List Apart, an excellent resource for web development and related aesthetics, has put together an article based on original research by Jessica Enders into 'zebra striping.' From the article: 'Zebra striping [coloring alternate rows] is used when data is presented in an essentially tabular form. The user of that table will be looking for one or more data points. Their aim is to get the right points and get them as quickly as possible. Therefore, if we set a task that uses a table, and zebra striping does make things easier, then we would expect to see improvements in two things: accuracy and speed.' The conclusion of the peer reviewed paper? It's a wash. Striped tables offered only a slight increase in accuracy and speed overall. The article notes a few other benefits to using Zebra striping, so it's all up to the individual."
It looks nice (Score:3, Interesting)
Re:It looks nice (Score:5, Informative)
numbers at the top) to fill in times.
Re:It looks nice (Score:5, Insightful)
Re: (Score:2, Interesting)
Also, if the table gets really big, and it's difficult to identify where you are in the table, I start alternating between sets of 5 and sets of three - usually 5/5/3. Again, this seems to help (At least it helps me) with visual placement.
IIRC I first saw this in the AD&D manuals, except they always alternated 1/3 or 3/5 on single-page tables, which made it
Re: (Score:3, Insightful)
Shading in every third line actually provides the eye a stronger guideli
Re: (Score:2)
Re:It looks nice (Score:5, Insightful)
Zebra striping becomes more useful the further apart the key row is from the data in the row. It also becomes more important if there are no lines between the rows and columns. It's practically essential when you're trying to view a wide table where the key must be scrolled off screen to view the pertinent data.
In this study, the key row was the tolerance in grams, and the data was the factory outlet boolean. They were an inch and a half apart from each other, and there was no necessity to interpret multiple values in a row, but only vertically scan the key column and test for the existence of a row that has yes in the factory outlet column right next to it.
These people are spreading misinformation. The study was so contrived to support the premise, and so consciously avoidant of the actual situations where zebra striping becomes useful, that it's difficult to believe it wasn't intentionally done. If nothing else, there was far, far too little study done to make any conclusion whatsoever.
Whoever is behind article this should be working at MacDonalds.
Re:It looks nice (Score:5, Insightful)
second, authetically pleasing is also worth points when it doesn't hurt anything else.
third, and perhaps most importantly, just because I can drive as fast and as safely on a sunny day as I can on an over-cast day, doesn't mean that one isn't easier than the other. professional typers type just as quickly on a qwerty keyboard as they do on a dvorak keyboard because they are professional typers and will adapt to just about anything. But they still expend more effort on a owerty keyboard than on a dvorak one -- simply put, their fingers travel farther.
I don't suppose that this experiment studied the cognitive effort required, nor stressed the patricipants to measure their accuracy during significant distraction -- like driving, or listening to something important, or carrying a conversation, or giving a presentation.
Re:It looks nice (Score:5, Funny)
Re:It looks nice (Score:5, Insightful)
Isn't an improvement in accuracy is better than no improvement, or a decrease?
Re: (Score:2)
But it's not an improvement. The difference was not statistically significant, so for all we know, it might simply have been due to chance.
Re: (Score:2)
Re: (Score:3, Insightful)
Most UI differences are small; the difference between having the task bar in the middle of the screen and on the edge of the screen is very small as well, but that doesn't make it not worth doing.
Re: (Score:3, Insightful)
Re:It looks nice (Score:4, Insightful)
a candidate for the ignobel prize? (Score:2, Insightful)
Do Zebra Stripes Actually Help? (Score:4, Funny)
Re:Do Zebra Stripes Actually Help? (Score:5, Funny)
The now extinct Red Go Faster Striped Zebras easily outran cheetahs. They didn't actually go extinct; they just migrated so fast, time stopped for them.
Re: (Score:2)
Red as one of the colors used in a zebra-stripe, however, is a big no-no. Red is only useful in small doses.
Re:Do Zebra Stripes Actually Help? (Score:5, Informative)
Please remember that some of us are colorblind!
(I was trying to start the "Meet the Robinsons" Blue Ray disk the other day, and couldn't find the "Play" option. It seems some genius over there made the text green on white, and therefor invisible to me...)
you suckz0rz! (just kidding) (Score:2)
Re: (Score:3, Interesting)
Also, I can never move to Texas. The rest of the country has vertical traffic lights, but not Texas. It is bad enough to choose red and green as the stop and go colors, with the full knowledge that a large percentage of the population can't see them - it is a trav
Re:Do Zebra Stripes Actually Help? (Score:5, Funny)
Re: (Score:3, Insightful)
That's why DVD menus in all incarnations shouldn't exist! I can imagine how frustrating that can be, I've had problems using DVD menus and I'm not color blind. I've also had to sit though a class were a professor was trying to show a clip from a DVD, but the DVD menu designer didn't make the highlight color contrast enough for a projector, needless to say a lot of time was wasted while the professor tried to guess when the correct item was selected.
I really hate DVD menus. At the very least make them
Re: (Score:2)
The now extinct Red Go Faster Striped Zebras easily outran cheetahs. They didn't actually go extinct; they just migrated so fast, time stopped for them.
The Red Go Faster Striped Zebras weren't actually red, they just ran away so fast that they appeared so.
The closely related Blue Go Faster Striped Zebras were equally fast, but they would always run towards predators.
The Blue Zebras really did go extinct, as one would expect.
Re: (Score:2)
How about scalability? (Score:5, Insightful)
I think the premise is wrong (Score:2)
The premise of this article is that zebra striping is to aid people finding the data they are looking for faster. I think that is not as much the case as it is to help people keep track of the data once they have found it.
They noted that when people found the row they were looking for they usually highlighted that row somehow, either with a mouse select or using their own finger on the screen. This is what I think the main usefulness of zebra striping is: to help the user to visually keep track of the da
Junk science (Score:2)
Finding data in nine columns with alternating text and numbers is easy.
To expand on that idea, does the utility of a green-bar table expand as the table gets wider, either with more columns or wider columns? The sample table was a nice starting point, but by no means adequate to settle to the issue.
BTW, the accuracy of the answers was higher with the stripped report in each case! The difference was small (1%) in each case, but direction was consistent.
But the real junk comes in reporting the time
That doesn't invalidate it (Score:2)
Also, the end of the article says they are planning to conduct a follow-up study to answer questions raised by this first round. Your criticism may well be addressed in that.
Another possible criticism is the fact that the participants apparently know the point of the study (at least in the case of the follow-up, which is linked to from the article). Could this affect the results? I wouldn't tend to think so, but per
Coloring every 3rd or 5th row helps too (Score:3, Interesting)
Anyone else remember fanfold wide-format computer paper that was colored white and green in alternating blocks of 3 rows each?
Re: (Score:2, Insightful)
Don't try 2-row striping -- for some reason it just looks wrong, like each pair is supposed to be related. Probably because it's just less common.
Re: (Score:2)
Re:Coloring every 3rd or 5th row helps too (Score:5, Funny)
ObEmacs (Score:2)
On the rare occasions I print code out, boy does Emacs and Xemacs rock.
Re: (Score:3, Interesting)
at zebra crossings (Score:2, Offtopic)
Yes, please. (Score:2)
Yes and No. (Score:4, Insightful)
Also the size of the table makes a difference.
Re:Yes and No. (Score:5, Informative)
Re: (Score:2)
Re: (Score:2)
The only problem I had was having two rows in a table that logically went together. I wanted the mouse over either of the rows to highlight both. I could get it to highlight both rows if the mouse was over the top one (I think it was something like "tr:hover + tr"), but I couldn't get it to highlight th
A test without fatigued test subjects... (Score:5, Insightful)
Re: (Score:3, Insightful)
Re: (Score:2)
Re: (Score:2)
Anyway, the point about the ruler being-- this is basically the same thing as zebra stripes, so they are obviously useful.
Re: (Score:2)
Using a ruler is definitely not the same as zebra striping as you're either blocking or at least distorting the data you are not interested below the ruler. This gives a much sharper demarcation of where the useful information is. Zebra striping still has the data there, in a legible and distracting, albeit annotated, form.
Re: (Score:2)
It is a little like shrinking the text on your browser, for the first couple of 'notches', there will probably be very little difference in the speed and accuracy of reading for anyone with a reasonable level of eyesite. However, a couple of hours reading at a size you are uncomfortable with and pretty soon the fatigue, frustration and irritation will set it, effects that we refer to collectively as 'stress'.
I could probably carry 10kgs for 20 metres in a very similar time to 1kgs, speed may not be
They absolutely help (Score:5, Insightful)
Either way, they certainly can't hurt, especially if they're a pale color. So why are we even having this discussion?
of course (Score:2)
Bad example (Score:5, Interesting)
Re: (Score:2)
Re: (Score:2)
For quick swapping you only want to deal with the background, not the foreground, and so you have to consistently use light or dark colors so that the text doesn't disappear. Working around this is almost trivial, though, especially when using CSS and classes.
And, as another user said, stripes really become useful when you have large spans of columns to go through. I'd be intereste
Re: (Score:2)
Re: (Score:2)
This is not the first time I have noticed that laptops suck for this kind of thing though.
Possible alternative? (Score:4, Interesting)
sloth jr
Re: (Score:2)
Or a combination - zebra-stripe the table, then make the "hovered" row a 3rd color
Re: (Score:2)
Re: (Score:3)
If zebra striping doesn't actually make it easier to identify which cells actually belong to a given row - maybe a rethink of what is trying to be accomplished here could help. Perhaps highlighting of the row under the cursor?
I'd mod you up if I had some points.
I've worked for a reasonably large company and designed a web app that was potentially to be used by several thousand different people (by the time I left, about eight hundred did). So, I've done some rather amateurish usability testing by observing what people actually do when reading tabular data.
Over 60% of my test subjects used the mouse to scan a table (a striped one, obviously). They would move the pointer to the first column, and then slide it to the right until t
That was useful (Score:5, Funny)
News at 11.
Depends on the table (Score:2)
That's why I'm a fan of showing the least amount of data I can. More complex = more chance for errors. Drill down application are a pain, but, better than a mistake in payroll.
I love it (Score:5, Funny)
I know this one! (Score:2)
Well, that was fun.
Why it didn't help... (Score:5, Informative)
I can see the Slashdot headline now, "A practice used for over half a century still proves to be useful!" Somehow, I think such a headline falls under the category of "not news."
Re: (Score:3, Informative)
I can tell you why it didn't help. They formatted their table with large spaces between columns and they had only 9 columns. If they tried the same study where they also varied the number of columns I am sure they would find that as the columns increase the positive effect of zebra striping increases. It seems they had a bias built into their test in order to find something unexpected... otherwise the study would have proved pointless. I can see the Slashdot headline now, "A practice used for over half a century still proves to be useful!" Somehow, I think such a headline falls under the category of "not news."
Re: (Score:2)
An obvious problem with the study (Score:5, Insightful)
Re: (Score:3, Insightful)
I thought it was self-evidentary that stripes should run the same way you're most likely to scan.. so you don't have to work too hard to keep your eyesight on the same line. Apparently it wasn't that evident though.
That said, zebra-stripes are nice when you choose good colours, and have them run in the direction they're supposed to.. and they're really horrible when you screw up.. as a lot of people do.
Another problem (Score:3, Insightful)
http://alistapart.com/d/zebrastripingdoesithelp/data-table.png [alistapart.com]
The "ordinary" rows have a background color of pure white. The "striped" rows have a background color of #F5F5F5, a very light grey. I'm all in favor of subtle design, but there is such a thing as being too subtle.
Perhaps the stripes did not help noticeably because there was insufficient contrast between the rows?
Re: (Score:2)
Not enough data to answer the question! (Score:3, Informative)
There may be an effect, but if so, it's small enough that 281 experimental subjects and six questions are not enough to yield statistically significant results. That result alone (that the effect is small at best) makes the paper worthwhile to me. One small quibble: on a web page, I can often use scrolling and the bottom or top of the page to check alignment on a wide table. Maybe zebra stripes are more useful on paper.
But before I give up entirely on zebra stripes, I'd like to see what happens when [1] the table is made wider; [2] the table is made taller; [3] the zebra stripes are 2 or 3 rows wide instead of 1; [4] the stripes are made darker and/or a different color.
C'mon people who want publications, there are lots of other things to try here.
Helps a LOT if you have Nystagmus (Score:5, Interesting)
BTW, a wider font like Verdana is also highly recommended.
sample size too low, and wtf? (Score:5, Insightful)
"Given that applying zebra striping in an electronic medium is a nontrivial task"
Say what? Any application that is based on columns and/or rows has trivial access to those columns/rows as separate entities. Markup for such columns/rows is easily changed. 'mod N 2 == 0? grey:white' is hardly nontrivial, it's so basic that if you can't manage to do it, you must be using the wrong software.
---
Now for the scope - it seems like the only research they have done is when data in the sheet is dense and the sheet itself is not all that wide.
Now try with a wide sheet and instead of every 'cell' or at least one of its close neighbors having data in it, imagine lots of empty cells. Now try and see if zebrastriping helps or not. I can guarantee you that without any visual cues, your lining up of something in the leftmost column to the same line on the rightmost column is going to fail far more often than you'd like.
--
Oh wait, they even admit as much:
"However, there is clearly a need for additional studies to investigate how task difficulty and the size of the table/form influence the effect of zebra striping."
No shit. I'm glad you admitted that your sample size is too low.
What about the animals? (Score:2, Insightful)
Bad experiment (Score:2)
If she tried it again without the black lines dividing the cells, with less faint stripes and with a wider table, she would have come up with a very different result.
Zuba's!!! (Score:2, Funny)
Camouflage effect (Score:2)
I think zebra striping helps people read tables with more than four columns, but there's also a camouflage effect especially when a quick glance is given.
Re: (Score:2)
Speaking of Zebras (Score:2)
But are real zebras white horses with black stripes, or black horses with white strips? Yes there is a correct answer to this.
Questions are bizzare (Score:5, Insightful)
Here's what I view as correct answers:
Q What is the name of the screw that costs $35.66?
A: None. The M28 screw costs $35.66 per 50.
Q There are 664 screws of which minor diameter tolerance?
A: None. The M18 Screw has a minor diameter tolerance of 8g, and there are 664 of those, but there are 1442 screws with a tolerance of 8g.
Q: There are 292 screws of what thread pitch?
A: None. There are 292 M16 screws which have a thread pitch of 2mm, but there are 527 screws with a thread pitch of 2mm.
Seriously flawed, but great stufy (Score:2, Interesting)
It is also important to note that a few participants spontaneously reported that they used their finger, on or over the computer screen, to follow down columns and across rows. Other participants used their mouse to highlight rows of interest, in effect creating their own 'temporary zebra striping'.
When the participants violate the very precepts of the study by creating their own striping, the study become ridiculous. It's like doing a study if walking is slower than biking, and the walkers are allowed to bring their own bikes.
But the study itself is great, I just disagree with the conclusion, it seems to show that striping is SO useful that when denied striping, people create their own.
Maybe not flawed, just not practically useful yet (Score:2)
The study gives a baseline result that is entirely credible: for small static datasets and a small number of questions, a non-fatigued subject population manages to get through a sho
It's hard to prove something you don't like (Score:2)
The way I see it, this person obviously wanted to prove that candy striping doesn't help because they personally don't like it. Candy striping isn't supposed to be a miracle fix that no one can live without...if it were all books would come candy striped. What it helps with are applications where users what to scan for specific information fast, not ones where people are trying to read them as books.
The reason it works is more physical than it is psychological. It helps your eyes read in a straight, hori
Douglas Adams quote (Score:2)
Follow-up Survey (Score:3, Interesting)
You can find it at http://surveys.formulate.com.au/dtfu [formulate.com.au]. It takes about three-five minutes. I just took it, and they appear to be using darker row colors now. It's still too narrow to see how useful it is when you have to scroll horizontally, but it's a small improvement at least.
Issue with "Slight" attitude (Score:2)
It's only a 1% difference so they cut it.
And they cut 15 other 1% things.
And the result is a cardboard tomato, a useless piece of software, an inferior product.
It is the 80/20 rule defined. You spend 80% of your time on 20% of the product to get a good product.
The result of their attitude is a product that is 80% as good as what you really wanted and needed.
Rubbish (Score:2)
Research that ignores the obvious... (Score:2)
statistical illiteracy (Score:2)
whoa, even worse (Score:5, Insightful)
Zebra striping may or may not help significantly, but this paper won't tell you either way.
Hmm. Modern age-- modern zebra? (Score:2)
Say a serif vs a non-serif font.
Bold vs non-bold.
Italic vs non-italic.
So you could have every other row be bold and every other column be italic.
Misleading Subject (Score:2)
Lion attacks? (Score:2)
Did anyone Else Think (Score:2)
Re: (Score:3, Funny)
Re:Maybe not faster but more Aesthetically Pleasin (Score:5, Interesting)
I'm no GUI designer, but when I make utility web pages that use tables, I tend to use either zebra striping or a tr:hover that uses a light yellow to highlight the line under the mouse pointer. That way, if I feel I need the help to track through the table, I just run the mouse down the columns and it lines up the current row for me very nicely. IMHO, this is a nice compromise where zebra striping might not look good, but the user might want the help nonetheless.
Re: (Score:2)
Find the rows in the table where the tax rate is greater than 9%. Now list the names of the states with a tax rate greater than 9%. The striping really only helps in the second part of that process.
Layne
Re: (Score:2)
mininova [mininova.org] has a great implementation of this imho. I liked it so much I stole the CSS for my personal websites.
Re: (Score:2)
Re: (Score:2)
The example table in TFA has a light gray outline around every cell. I'm not sure if the table used in the experiment did, but I wouldn't doubt that the thin horizontal lines between each row/column can help "guide" the eyes the same way that zebra striping supposedly would.
The striped table used in the experiment (as shown in the screenshot in the paper) does not have any cell borders at all. They provide no image of the non-striped table, however. From the usability studies I've read in the past, they favor having cell borders and using colored stripes for every other or every fifth line or column. Also, they recommend using a different, primary color probably a bit darker than the very light grey used. I don't think I've ever seen one recommend doing away with cell border