Chart drill-down affordance?

Question

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: https://www.fusioncharts.com/charting-best-practices/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.

Answer 1

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.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

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.

^{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.

Answer 3

Very good question. And I have to agree that putting instructions at the top of the chart may look cheap. But it may be a decent trade-off and here is why.

Things are easy and straightforward when we are dealing with desktop browsers/applications only: popups, callouts, cursor changes in response to hover events can do miracles. Single clicks, double clicks, click-and-holds add more power. But the problem is that we probably want our solution to work on mobile devices and we want the UX to be consistent across platforms. And there is no hover on mobile platforms. And double clicks may be reserved for something else (like zooming) on some platforms.

We experimented a lot with different approaches and ended up using:

• hover events on desktop and tap events on tablets to display callouts with additional information about the visual element;
• click-and-hold events on all platforms to initiate drill-downs.

There is another alternative for mobile devices: on tap events, display the popup/callout with a "Drill-down" button on it. But this approach:

• will cost users extra effort comparing to tap-and-hold;
• introduces inconsistency between platforms;
• looks cheap too.

So, it's still an open question. As for the breadcrumbs with drill-down hierarchy: sounds great, but pay attention to the chart real estate, which is precious.