Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

The general consensus is that zebra striping a table makes it a little easier for people to keep track of which row they're on...but is this reduction of cognitive taxes only for table rows? I at least sometimes backtrack when I'm reading to a previous line of text.

I've zebra striped an article page and I am wondering if this is an added benefit or just something that is interesting but not better than the way people read almost everything else?

share|improve this question
    
When I read the title, I was thinking that you were striping at the paragraph level and not at the line level. –  Dan D. May 1 '13 at 0:40
2  
On my screen and with my eyesight there's a rather nasty moire effect that makes the page appear to vibrate. I don't know if others see the same thing, but I would personally avoid reading an article displayed like that. –  3nafish May 1 '13 at 2:44
1  
When I zoom the text in/out, the striping doesn’t match the text anymore. –  unor May 1 '13 at 14:45
    
I couldn't read a single line, eyes just wouldn't focus in one place. Too much noise in one page. –  RhysW May 1 '13 at 16:08

5 Answers 5

up vote 6 down vote accepted

The purpose of zebra striping is (with arguable success) to connect items in a row that are a distance apart...often as you'd see in a table and where scanning (rather than reading line-by-line) is often a goal.

Item                             Item                   Item

But a paragraph of text has no such problem--the lines of text, themselves, make the connection for you. And proper and thoughtful linespacing is all the division you need between lines.

So, I'd say zebra striping for a paragraph of text is an attempt at fixing a non-existent problem with a solution intended for an entirely different context.

share|improve this answer

I think you're trying to solve a readability problem the wrong way.

Line length (measure) is your real problem. The number generally advised for a readable measure is about 60-70 characters. Cut the measure to about 60% of it's current length and you'll find you have far less trouble. The other way to solve it is a bigger font size ... that would be really ugly.

Adding the alternating rows further hurts reading in your example. In a table it works because you're identifying discreet units. Using it for lines of text isolates arbitrary units (line breaks) in a running text. That's not helpful at all.

Case in point.
Here's a quick before and after on your page. I simply narrowed the paragraphs to 64% of the containing div. That allowed me to bring the leading down from 2em to 1.7.

Current

64% width and 1.7em leading

share|improve this answer
2  
Good answer! Well explained. –  Samuel M May 1 '13 at 9:04
    
Thank you for the website critique! –  JonathanHayward May 1 '13 at 18:44
    
Could I have a pixel width to go with your recommendation? –  JonathanHayward May 1 '13 at 20:02
    
In my example I ended up with 64% of whatever your current column is. That's certainly not a hard figure but I don't think you want diverge too far in either direction. It's probably between 60 and 70% of where you are. With a longer measure comes deeper lines. If you set your type to read well, long lines won't actually save you much space, if any at all. –  plainclothes May 1 '13 at 21:14

Readability is everything

Smashing Magazine conducted a Typographic Study for best User Experience. What they found is plain clean backgrounds with standard type treatments tend to work best. People will typically have an easier time reading what they're familiar with. There is no one set rule for the number of characters per line. It depends on the amount of copy, the point size of the copy, and the usage.

In your example you're using super long lines which make it harder for the reader to flow from the far right back to the next line on the left. While adding the differing colors between the lines is a little distracting, you've also increased the line-height which has more of an impact on readability than the background.

Extreme line spacing (leading) leads to double-spacing

Double-spacing also has an impact. If you look at papers written for school they will typically ask to have them double-spaced for usually two reasons:

  1. The teachers are used to reading double-spacing
  2. It affords the teacher the ability to comment between the lines.

For most normal people not used to reading double-spacing it is harder to read.

share|improve this answer
1  
Great answer! Welcome to the community :) –  HeyCameron May 1 '13 at 15:08
1  
@HeyCameron Thanks. I didn't know this site existed until we were answering a few UI questions on Stack Overflow. –  AbsoluteƵERØ May 1 '13 at 15:12
    
Thanks for a useful critique that I didn't even ask for! –  JonathanHayward May 1 '13 at 18:46

Using zebra stripes in a paragraph is not a good idea. Zebra striping is a solution for improving readability of tabular data and even that is a debated area - http://alistapart.com/article/zebrastripingdoesithelp

There is no repeating structure in the words of a paragraph, which is a good thing since it makes lines easier to distinguish. When you use zebra stripes on alternating lines, you are enforcing a repeated pattern and making it harder for the user to read.

Some articles to help you improve readability of your website:

share|improve this answer

A few suggestions:

  • Use different fonts/colours for breadcrumbs and body content. This look the same and it's not easy to differentiate where sections starts
  • Separate sections, title and content so it's easier to notice scan through in case the user doesn't want to read all
  • Don't add any background (zebra) to the images, it's just noise for the eyes
  • You might also like can be a separate section, different background, etc.

A few general rules of body text are:

Text Length Writing for the web is a whole different thing than writing for print. Users want smaller pieces of text. They hardly ever read an entire page, instead, they scan for keywords.Therefore if you have to add much text, do it in such a way that it doesn't seem that is a long long text. Section it.

Sections Break your page into sections, so the user can see quickly what the page is about and this will make them read the contents.

Leading As with print design, take a look at your leading. A starting point would be 12px leading or more for a font size of 10px.

Width Is suggest a length of between 12 and 16 words per line.

Fonts Sure bets are Tahoma and Verdana (both designed especially for on-screen usage), both with more than 90% availability on OS X and Windows.

Based on: > Introduction to Good Usability - peterpixel

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.