My blog has been moved to

Sunday, May 20, 2007

Alternating row colors, in group

Alternating row colors is a very common user interface pattern, the most used example is the playlist in Apple iTunes. With different color every other row, the table or a long list looks more pleasant and easier to use.

However, if your list is rather vertical than horizontal, i.e. it is not that wide, but rather quite tall, and only consists of one or two columns, sometimes it helps to color not every row but a group of row. The example is shown here. The leftmost list widget has the same white color for all rows, the middle one uses alternating row colors (which looks rather "busy"), and the last one colors every 3 rows. Which one do you think is better?

Plain color Row Grouped

If your list is an instance of QListWidget, QListView or anything derived from QAbstractItemView, it is very easy to enable the alternating colors, just use alternatingRowColors property.

Alas, for grouped alternating colors for QListWidget, you must do some additional work, e.g. (works well for rather static items):

  int group = 3;
  list->setUpdatesEnabled( false );
  for(int i = 0; i < list->count(); i++)
    QListWidgetItem* item = list->item(i);
    QBrush c = ((int)(i/group))&1 ? palette().base() : palette().alternateBase();
    item->setBackground( c );
  list->setUpdatesEnabled( true );

Multiple column list is often made from QTreeWidget with only top level tree items. In this case, grouped alternating colors can be achieved using e.g. (for two columns, create a loop for more):

    int group = 3;
    tree->setUpdatesEnabled( false );
    for(int i = 0; i < tree->topLevelItemCount(); i++)
      QTreeWidgetItem* item = tree->topLevelItem(i);
      QBrush c = ((int)(i/group))&1 ? palette().base() : palette().alternateBase();
      item->setBackground( 0, c );
      item->setBackground( 1, c );
    tree->setUpdatesEnabled( true );

You can of course save some microseconds if you cycle the background color while iterating the items.

In addition, you may want to put some logic to prevent coloring if the number is item is e.g. less that 2*group. Otherwise, 4-item list will look odd, as only the last item has different background color.


jospoortvliet said...

Way cool! At first, it looks a bit odd, if you're used to the normal alternating color, but it does make sense. Maybe grouping on a certain property, so the colors convey some meaning, would be even better. But that would of course be very application-specific.

Anonymous said...

So, when I make the window wider you revert back to coloring ever other row?

I think the biggest problem is the default setting in KDE is much to dark. The color difference should be a lot more subtle so it doesn't bother you but it does allow your eyes to align the items better.

My vote, without doubt, goes to the ever-other-row (the center one).

Thomas Zander

Anonymous said...

I agree that this is a great idea.

I would suggest though, that the grouping should be done in 5's or 10's which (since IRL we mostly use the decimal system) makes most sense for grouping.

...just a suggestion though. I imagine you've thought about this already and the 3's are just a proof of concept.

Anonymous said...

I'd vote for alternating row by row. The right one suggests that each three lines belong together. I get that effect when browsing it with my eyes: to look for something, I start reading at the beginning of every new colour, instead of at the beginning of each line.

but just my two cents of course.

Anonymous said...

I first thought that you started a new background-color for every first letter. Like white for those starting with A, then grey for those with B, white for C etc.

Wouldn't that be cool?

Anonymous said...

Yeah I also thought it was going to be alphabetic. With the screenshots given I think the plain one (#1) is the best. And I agree the dark lines are too dark. If they were lighter then maybe #2, but #3 is just confusing. Sorry.

Anonymous said...

>> to look for something, I start reading at the beginning of every new colour, instead of at the beginning of each line.

Same here.Sure it looks more "busy", but I think anonymous has a point:

>> The color difference should be a lot more subtle so it doesn't bother you but it does allow your eyes to align the items better.

One color every 3 rows doesn't really make sense to me; I feel like they are grouped, [abs acos asin] belong to one group and [atan average bin] to another.

Anonymous said...

The third definitely looks less noisy. As it's not alternating, however, it does look like there is meant to be some kind of grouping. I would suggest the second one, therefore. Just make the color used lighter for less contrast.

I definitely don't agree with highlighting in groups of more than three -- you highlight alternating rows to make it easier to 'scan right' to see all items on a row -- it's a visual cue. With three items highlighted you have the top, middle, and bottom item in the group, so differentiating isn't so bad.

Anonymous said...

#2 is the best imo

Anonymous said...

Goodness. You have no idea how excruciatingly diffiult that is to do on Windows with Microsoft's programming tools.

Anonymous said...

Rather than alternating background colors, how about using line separators? Or even better, how about *meaningful* separators? In your example, each alphabetical group could be separated. The list widget or model could have a virtual function which would be responsible for flagging the start of a new visual group.

Another idea is to use a bit more white space between groups rather than a solid line.

Anonymous said...

By the way, I am unable to comment on your site using Konqueror 3.5.6. The Visual versification image does not appear. I had to use Firefox to post.

Anonymous said...

#3 is very confusing because it looks like those items are selected, while they really aren't.

Anonymous said...

Did you submit your site at

You can reach blogsearch by just typing in your browser window or click here

This is a service by bizleadsnet directory of web logs.

Anonymous said...

Definitely the second one - the third doesn't actually look bad, but, as others have noted, it gives the appearance of meaningful grouping.
And a lighter contrast would be nice too *g*

Ariya Hidayat said...

This generates more feedback than I could imagine. Thanks a lot!

Seems that generally people (and actually I also do) prefer the middle, a proof that consistency wins. Although first I thought, because its special case (not too wide, only two columns), the last choice could be indeed preferred.

@Superstoned: it won't be so easy to correlate color with any meaning in this case.

@Thomas Zander: that's the problem, the coloring won't change when the window gets wider. In this case, it's for docked widget which 99% won't be too wide (and it has only two columns).

@hook: a matter of changing the value of 'group' in the code.

@ben: good point. A possible counter argument is, it's only 3 rows in a group (top-middle-bottom) and thus our eyes should still be able to scan them quickly. But, I still agree, it's not as easy as the middle solution.

@Anonymous: alphabetical coloring would be interesting, however in the case the number of items is not too many. I guess it's useful e.g. for displaying thousands of files in a directory.
But I already consider it for a different purpose, stay tuned :-)

@Lans: good point. Do you still feel the same if it's 2 rows in a group instead of 3?

@Paul Giannaros: "scan to right" is not so harmful in this example because the list is not that wide and it has only two columns (so eyes can glance the rows pretty fast). But I understand your point.

@segedunum: I can imagine that...

@Anonymous: As I wrote above, lines/separators/letters might be useful if there are many many rows in the list. Otherwise, the list can be "cluttered" by that lines/separators/letters. But that's interesting ideas nevertheless.

Linus said...

I thought that the "3-gouping" was alot easier to eye-through. The only thing that I can see as a problem is that it actually suggests that the color-grouped items belong together