Alternating Row Colors

jsalvador / Tuesday, June 21, 2011

I’m not familiar with much scientific research or studies on the effectiveness (or lack thereof) of alternating row colors. However, it is my observation that if you take a lot of rows and columns and compare them with and without alternating backgrounds, it's much easier to know what column is connected to what row especially if you want data from the right-most column with the data from the left-most column as your point of reference.

Interestingly enough, I’ve recently had the opportunity to tackle a design challenge involving lots of columns and rows used in displaying data-driven results and the goal was for the user to visually separate similar looking rows in a table apart in order to match the values of each row. In such case, slight alternating row colors made good UX sense. So, when using Alternating Row Colors, be mindful of the basic:

• Use when you have several columns in a table.
• Use when the content of each column is often of similar nature.
• Use when there a multiple lines for each row.
• Use when the height of each row varies.
• Keep the difference between the two colors to a minimum to preserve a gentle feeling.