Slashdot Mirror
Do Zebra Stripes Actually Help?
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."
Although it might not provide much extra accuracy, it does make for a nicer looking GUI. That counts for something in todays widget driven environment...
I don't have a study to prove it, but coloring or otherwise marking every Nth row, where n is a smallish number, say 2-5, helps.
Anyone else remember fanfold wide-format computer paper that was colored white and green in alternating blocks of 3 rows each?
Knowledge is how to play a game, intelligence is how to win, wisdom is knowing what game to play.
So they conclude it doesn't help (though their own data says that it does, even though it's slight) based on THAT table? Maybe they should try it again with a zebra striped table where the difference between the colors used is slightly more pronounced. I don't know about the rest here but I personally think I had a harder time with that because the color difference between rows was so slight than if they had left out the color. Played tricks on my eyes.
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?
sloth jr
Whenever I have many rows of data like this on a web page I always make the rows highlight when you move the mouse over them (suck it Javascript haters).
Nystagmus is a condition where your eyes oscillate at a frequency of about 1 Hz (roughly), usually horizontally. Having rows and especially columns coloured differently helps very much for someone affected by Nystagmus, to distinguish between columns.
BTW, a wider font like Verdana is also highly recommended.
"The agriculture ministry is not in charge of Gundam" - Japanese ministry official.
On printed pages, I've seen people using a ruler to help scan through tables of numbers. I thought that was where the idea for zebra striping came from. Honestly, I'm surprised that it was only a minor improvement. Maybe it's just me and my bad eyes, but I think it helps tremendously. It probably also matters how many columns there are -- the more there are, the more it helps. I'd also suspect that fatigue would kick in, so it would make less difference for, say, less than 100 exercises, and more difference after that. [Didn't RTFA. Maybe they address those points.]
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.
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.
What's up with this box everyone has to think inside of or outside of? Why does there have to be a box?
If you didn't like how they ran this test (and I agree with most of the complaints), A List Apart is running a follow-up survey over the internet. I almost missed this, as it isn't mentioned until the very end of the article.
You can find it at http://surveys.formulate.com.au/dtfu. 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.
Heh, my family keeps making fun of me because when I was teaching my daughter to safely cross the street at intersections, I told her to look at the "green guy". Apparently although the traffic light is green, the little guy is white - who knew?
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 travesty to take that and put it on its side so that up vs down cannot be used.
And before you get to the left vs right, some of us are dyslexic...
while (sig==sig) sig=!sig;