I'm working on a mobile application, and there we've a pie chart, where each slice is a group. So, when the user taps on one group, it pops up a modal with the group's items.

Pie Chart

Group's items

What is the best UX approach to make clear that the user can tap on a group?

I think that putting a text saying: "Tap on the chart to see more details" is too ugly, is there others ways to do that?

up vote 4 down vote accepted

I would actually create a tap animation and place it over one of the pie slices.

And I would run the animation in a "tutorial / how to use / app tour" mode where you show your user the not-so-obvious features of the app on first use.

When the user completes the tutorial and clicks Got it, you store boolean tutorialComplete = true; in your SharedPreferences so that the tutorial mode won't be shown again by default.

I would also place a link somewhere on the app settings to allow the user to take the tour guide/tutorial again manually if needed and notify the user after he clicked Got it that he can still take the tour from the settings tab.

..tap animation: enter image description here [ source ]

..somewhere like: enter image description here

Let's step back for a moment: are you committed to using a pie chart? Prominent information design guru Edward R. Tufte speaks harshly of them in The Visual Display of Quantitative Information:

Tables are clearly the best way to show exact numerical values, although the entries can also be arranged in semi-graphical form. Tables are preferable to graphics for many small data sets. A table is nearly always better than a dumb pie chart; the only worse design than a pie chart is several of them, for then the viewer is asked to compare quantities located in spatial disarray both within and between pies.

I'm surprised that Tufte does not also remark that a 3-D pie chart is worse than a 2-D pie chart as a 3-D pie chart uses three dimensions to represent one number rather than two dimensions to represent one number, which is bad enough. Comparing areas (2-D) is hard; comparing volumes (3-D) is harder.

You can find some gainsayers noting that one redeeming quality of a pie chart is that the numbers sum to a whole. And I add that a circular display may fit well in a small viewport such as a smartphone, though some tables may not.

  • 1
    Excellent answer. – Mayo May 1 at 20:04
  • Florence Nightingale would be aghast :-) I don't disagree with being against over-use of pie-charts (especially multiple ones) but this use-case looks like a "quick overview with drill-down if interested", so doesn't seem an unreasonable way of doing it (ideally with some key to what each of the groups mean). – TripeHound May 2 at 10:00

What about placing a "finger-pointing hand" icon on the chart or on each group:

👆 (U+1F446)

And something not related to your question directly but to the "too ugly" part - perhaps you can consider showing the split pie parts for each group instead of a modal, like proposed in this answer:
Best way to display users by location

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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