Complex Diagrams

7

This is a short story of user experience, information visualization, and design choices. I like Rivendell Bicycle Works for a lot of reasons (see below). However, one thing they don’t do particularly well is allow you to compare products on their web site.

When comparing a few randomly sorted parts, such as rear deraillers, looking at all 3 or 4 choices and then choosing one is relatively easy. When the choice is among 16 tire models in three rim diameters, various widths, some with various features (kevlar bead, anti-puncture, etc.), spread across three pages, in no particular* order, doing a comparison and then confidently choosing one is really, really difficult.

To address this sub-optimal user experience issue, I created this chart to make life easier for customers, improve the interface for comparing the tire offerings, and hopefully improve sales.

It allows the (potential) customer to quickly focus on the appropriate tires(s) based on desired rim size, tire width, and toughness/quickness, and then click the chart to go directly to the tire’s page. (Note that some of these links are going to break as the selection of tires for sale changes.)

There were a few interesting (to me) considerations when designing this chart.

• The toughness axis isn’t well-defined or ordered. To convey that nebulous quality, I labeled the vertical axis with the not-very-well defined terms “burly” and “svelte.” The goal is to give customers some idea of what they are getting, while being intentionally ambiguous.
• The vertical axis label is off to the right to reduce the focus on it and keep it from drawing attention away from the the tire names on the left. Similarly, the widths are along the bottom, grounding the image. They would have added excessive visual weight to the top of the mostly-empty chart.
• The light brown color used for the grid lines and legend is from the Rivendell site.
• The rim sizes are pre-attentively differentiable, and circles are reminiscent of rims.
• Other data that would be possible to include would be price and special features. I didn’t include those in this chart, as they can be easily compared when the search is narrowed to a few tires, and inclusion would add a fair bit of visual noise for not much added value at this level of use.

The other interesting consideration when creating this chart is: how do you display more than three axes of data in two dimensions. I stopped at three (width, relative toughness, rim size), making this a trivial example. However, the challenges of adding more axes are a fascinating problem which I’ve been thinking about quite a lot lately. Keep watching this space for a comprehensive discussion of strategies and solutions.

History of this post:
I like bikes for the usual environmental, political, economical, and health reasons. I also like the culture of camaraderie and knowledge sharing that is common in some parts of bike culture. I stumbled on Rivendell’s Tips for Happy Riding last summer, and have been a fan of theirs ever since. This chart and post were created without any input, collaboration, or permission from Rivendell Bicycle Works. I hope they like it.

* The order is newest-first, by date added to the site, which is effectively random for the customer’s purposes.