Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm wondering if anyone has any suggestions for improving the usability of chart drill-down?

More specifically, imagine we have a bar chart (or any other visualization) where a user is able to select a bar and update the chart to see only its children (for example, click on the bar for Canada and have the chart display Canada's Provinces).

I did some research and came up with the following resources:

Drill-down affordance:

A common and typical approach is cursor modification coupled with visual changes as the cursor moves over the item.

If you were to move the cursor over an item which would allow you to drill into, you could change the cursor accordingly, such as we do with a link. Couple this with a visual change to the foreground or other aesthetic modification and I believe the user will quickly grasp that the cursor and visual changes define an area where additional action can transpire. (http://ux.stackexchange.com/a/14951)

Another useful article: http://www.fusioncharts.com/resources/charting-best-practices/How-to-create-an-intuitive-drill-down-interface/

For the article above, their suggestion of simply putting instructions at the top of the chart ("click on a column to drill down") seems to be a bit cheap short-cut - we can't just put instructional text everywhere we wish to communicate an affordance! I think a cursor change to the 'link select' hand along with a highlight of the chart object is good, but it still doesn't tell the user what will happen once he clicks. It would be great to include a tooltip upon hover, but in my case that's not an option because we're already using tooltips to show extra chart information.

For the drilldown target, I would include both the chart visual object (bar, pie chart slice, etc) as well as the labels (axis label for example) so that the user is able to easily drilldown on very small pie slices or tiny bars (which would be too small a target).

Drill-down navigation: I think the breadcrumb is the best solution for navigating the drill-down hierarchy, displayed in the top-left below the chart title.

What do you think about using the breadcrumb to show both the hierarchy 'level' as well as the actual parent hierarchy member? For example, the level breadcrumb could be as follows:

  • Continents > Countries > States/Provinces > Cities > Neighbourhoods

while the hierarchy member breadcrumb could be:

  • North America > Canada > BC > Vancouver > Gastown

As far as navigation, another high dev effort but great approach would be actual drilldown animations, where all bars except the select member fade and then the selected member expands to show its children.

share|improve this question
    
I don't have any research to back this up, but I wonder if double-click is the most intuitive gesture -- users are already used to double-clicking on a directory in a file browser to "drill down" on its contents. Another approach I've seen (works better in some visualizations than others) is the clickable "+" to expand. –  Monica Cellio May 1 '12 at 18:51
    
I presume you don't need to support phones/tablets, which don't have mice and hover. –  Monica Cellio May 1 '12 at 18:53
add comment

2 Answers

up vote 2 down vote accepted

The best affordance for examining/drilling down in a chart is making the data interactive. Users are accustomed to using labels/legends to find the information they're interested in and the natural response to find more detail about a field is to click on the data. The tooltip provides the actual value and confirms the user has selected the correct bar/column/pie wedge.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

Blue underlined labels (hyperlink) is one of the easiest ways to afford clickability. If you make the labels under the bar chart clickable, that will attract the cursor to the chart; having some hover affordance on the bars themselves, as you described, will seal the deal.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I agree that an animation effect to transition the bar chart would be great, but it certainly sounds like an expensive prospect.

The downside of this suggestion is that the text is then fixed in color; indicating categories with colored text is no longer an option. Multicolored links no longer look like links... they look like underlined text. In addition, while the web is pervasive, links may look incongruous in an application interface. They still are good at indicating clickability, but they often look out of place.

share|improve this answer
    
For classic bar charts and charts with basic labels I agree that hyperlinks are a great idea. We run into problems when the labels are shown on a 45 degree angle (as is the case when many bars appears and the labels are long). Also, some of our visualizations (such as bubble scatter plots) don't have labels. –  M.A.X Apr 30 '12 at 23:05
    
Bubble charts will almost always have a legend. The legend can be made clickable in a similar way. Also, have you played with Gapminder? They have drill-down bubble charts. I'm not sure it's the most usable method, but it's not that bad. –  Myrddin Emrys Apr 30 '12 at 23:39
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.