The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Row Striping


iTunes

What:

Use two similar shades to alternately color the backgrounds of the table rows.

Use when:

You use a table, but the table's rows are difficult to separate visually, especially when there are many columns (or multiple lines to a row).

Why:

Blocks of gentle color define and delineate the information contained inside them, even when you can't use whitespace to separate the data into "chunks." Cartographers and graphic designers have known this for ages. (Remember that colored backgrounds are also effective in defining Titled Sections.

Specifically, row striping helps a user:

  • Follow a row from left to right and back again, without confusing the rows
  • See the "footprint" of the table itself, separately from its containing page

How:

Pick a pair of quiet, low-saturation colors that are similar in value, but not identical. (In other words, one needs to be a wee bit darker than the other.) Good choices are blue and white, beige and white, or two similar shades of gray -- assuming the text on top of them is dark, anyway. Generally, one of the colors is your page's background color.

Alternate the color from row to row. If the rows are thin, you could also experiment with grouping the rows: the first three are white, the next three are blue, etc.

This pattern virtually eliminates the need for horizontal lines between the rows (though you could use lines, if they are very thin and inconspicuous). If your columns are aligned with each other, you don't need vertical lines or a heavy border around the table -- the viewer's sense of visual closure kicks in, and the row colors define the edges of the table for you.

Examples:


From http://boston.com

A typical example of Row Striping on a web page.


Same table, different treatment

But look what happens when the gray row backgrounds are stripped away. The columns suddenly become much stronger visually, and each row is harder to read from left to right. Some designers, however, find this design cleaner and more pleasing. There is no absolutely correct answer about whether to use Row Striping.