Alternating Row Colors

Problem

People have trouble visually connecting pieces of information in a row.

Solution

Alternate the background color of rows to subtly differentiate each row from surrounding rows.

Context

• There are enough rows to make consuming the entire table at once difficult.
• You have a lot of columns or more than one line per row.
• You want to avoid the visual clutter of border lines around each row.

Rationale

Alternating row colors have been used for years, and many users will be familiar with them due to the ubiquitous “green-bar” reports. This pattern is also known as row striping, indicating the overall visual effect of stripes that it creates. Even if the alternating colors do not exactly align with your rows, it breaks up the visual monotony of long tables and provides a subtle visual guide when picking out particular rows.

Pretty much any visual designer will whap you over the head if you create a table/grid with a bunch of lines to divide rows and cells. They add a lot of visual noise when the same purpose can be achieved through judicious use of white space and, as described in this pattern, using color. This removes the need for the lines, and the colors, because at least one of them will contrast against the background color, will serve to create a visual outline of the table/grid without needing an actual outline border.

That said, if the table is only a few rows or columns, the value of alternating row colors is diminished and may even be distracting, so you probably don’t want to use it in those cases.

Implementation

This pattern is so common that some UI technologies, like ASP.NET, provide built-in support for alternating rows in tables/grids in the form of controls that have item templates and alternating item templates. If that’s the case, you can take advantage of that for the purpose of supplying alternating row colors. If you don’t have that option, you can usually use the modulus operator against a row count variable (e.g., rowCount % 2 == 0) in a conditional statement to supply alternating colors. It is likely that reporting packages will also have built-in support for this pattern.

In terms of color choice, you should generally pick unobtrusive colors. This means low saturation (intensity) and, usually, neutral or cool hues (like blue, beige, gray, or green), assuming your text color is dark. If your palette uses dark backgrounds, then you might opt for a higher saturation or warmer hues. Regardless, the colors should provide sufficient contrast with the text color to be easily readable. You can have one row color match the background color, or you can pick two distinct colors, which may help further establish a visual outline of the table/grid.

If the contents of your columns cannot be sufficiently spaced to distinguish them from one another, you can opt to break up the row colors with your background color as an alternative to using column lines; however, if possible, it is generally preferable to try to sufficiently space/pad your columns to keep the design clean and uncluttered.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Alternating Row Colors pattern is implemented in the following ASP.NET controls: WebDataGrid, WebGrid. Check out the samples browser to see it in action.

Silverlight

You can use the NetAdvantage for Silverlight xamWebGrid control for this.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinGrid and WinCombo to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinGrid -> Appearances to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF XamDataGrid Control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Alternating Row Highlighting to see it in action.

JavaServer Faces

Alternating row colors are built in to the NetAdvantage grid. You can change the colors used, and specify more than two colors. An example is available here.

Sources

Jenifer Tidwell, Row Striping

Patterns in Interaction Design, Alternating Row Colors

Tags

Usability, Displaying Complex Data, Grid.