Log in to like this post! Cultivating a Usable Treemap: Treemap Usability Amy Quinn / Friday, July 23, 2010 Recently we added a treemap control to our Silverlight Data Visualization product. We’ve had treemap controls in our other product offerings for a couple years, but our newest addition to our Silverlight Data Visualization product inspired me to write about some usability tips for this data visualization. Treemaps are hierarchically arranged groupings of information that communicate information about data through the arrangement, size, and color of rectangles. When designed well, treemaps can be powerful visualizations that can convey a lot of useful information. Here is an example of a well-designed treemap found on the Wall Street Journal website that shows United States stock market activity. Stocks are categorized by industry area (i.e. Health Care, Financial, and Energy) and the size of each industry block illustrates the activity of stocks in these areas. The activity of each stock is indicated by rectangle size and the direction of change is shown through color and brightness. Tip 1: Use clear colors and images Color is often used in these visualizations to convey the differences in directional value of elements. Ideally you should use no more than three colors to convey differences and these colors should be part of a continuous scale. When possible, try to use colors that match the viewer’s conception of these colors. The use of color in the above treemap is a good example of this and it works well for multiple reasons. The red to green continuous scale makes sense because it is easy to see the shading differences of the two colors. It also matches the user’s mental model of stocks moving up and down – red is the negative direction and green is the positive direction. If users are not clear of the meaning of the colors, a key is provided that shows the change in colors. To contrast, the following tree map (from http://en.wikipedia.org/wiki/Treemapping) does not use colors well. This tree map shows soft drink preference for a group of people and each person is assigned a color. Here the colors are not used effectively because some people (like Dennis and Alwin) are hard to distinguish from one another making it hard to compare the preferences between individuals. Images can also be used effectively in treemaps provided that these images are widely understood and clear. In this example (from http://edition.cnn.com/SPECIALS/2010/worldcup/twitter.buzz/index.html), images of country flags are used to show the Twitter traffic about the 2010 World Cup. Trends over time can be accessed using the time slider at the bottom. Tip 2: Make the rectangle labels as distinct as possible Understandably these rectangles can get small and text can be hard to see in smaller treemap rectangles. Given this limitation, rectangle labels should be made as distinct as possible. In this treemap (from http://www.juiceanalytics.com/writing/10-lessons-treemap-design/), the labels are hard to distinguish from one another because many of the labels start with the same text (e.g. “Eisinger” and “Wilde”.) The designers of the www.dealmapper.co.uk website have come up with a good solution for rectangle labeling. In this website, treemap visualizations are used to show sales in the UK. The product names of the items shown in the individual rectangles can be small and, due to the length of the name and the size of the squares, little of the product name could be shown. This site provides two good workarounds for this: a detailed thumbnail for each rectangle that appears on mouse hover and an item details panel that provides additional details when a rectangle is clicked on.