Hello there and thanks in advance for your help.

Background: I am designing a financial mobile app that will allow users to invest in private equity.

By law (French in this case) to invest it is mandatory to indicate your assets distribution (real estate / cash / actions etc etc), among many other things.

For a reference, see a screenshot of the web app (empty state). Writing the percentage on the corresponding field will populate the doughnut chart — there is some automation to calculate the final percentage.

This is just a part of a long "secondary" onboarding.

How could I solve this problem for a mobile interface, apart from adapting the chart for a mobile screen?

enter image description here

  • At first glance, it is confusing the fact that it says 0% but it shows 1/6 of your doughnut pie. – Dimitra Miha May 3 '17 at 7:27
  • thanks — it should be probably deactivated / grayed out. – Luc D May 3 '17 at 9:18

There are a lot of articles why pie charts are bad for data visualization.

  • Comparing two different categories, because the slices are rarely aligned and because humans are poor at comparing angles.
  • Displaying exact numerical percentage. Humans are poor at estimating angles. Pie charts invite viewers to try anyways, which increases cognitive load.

from https://www.quora.com/How-and-why-are-pie-charts-considered-evil-by-data-visualization-experts

An interesting article can be found here: https://medium.com/the-mission/to-pie-charts-3b1f57bcb34a

Coming to your case, I would start with an empty bar chart, with a legend similar as you have now. When the user first enters their percentages, they would see the bar growing with the specific color, and so on.

One horizontal bar

or keep one of the bars as it appears in the next picture.

Horizontal bar

The data should be 0 in the beginning since the percentage is 0%. If you present something, it would confuse your user.

  • Good answer - but without any groups there's no reason to stack the bars, on the contrary it makes it more difficult to compare the percentages. – svenmeier May 3 '17 at 8:36
  • Sorry, maybe this was a confusing. I am not suggesting to have 2 groups. Keep 1 as you have already. I will update my answer. – Dimitra Miha May 3 '17 at 9:03
  • Thanks @DimitraMiha. I still think that providing a grayed out / "empty" bar will provide a goal and some context. As soon as I update the interface I will post it here. – Luc D May 3 '17 at 9:23

You don't need to adapt the chart for the mobile screen. Example: you can introduce sliders with e.g. 5% step. Sliders itself will give User a visualized idea of the proportions:

enter image description here

  • thank you very much @JakubTutaj - this is another option I was considering – Luc D May 3 '17 at 15:55

Pie charts are not that bad if you show relevant information properly. I have an example which I implemented for a bank home loan borrowing capacity calculator and users understood pretty well during the Usability testing. I your case you could use this: instead of using $sign you could use % and put % and relevant label on pie chart bars.

You can also use Stacked Bar or Stacked Column type of chart to show how individual parts make up the whole of something, such as the device type used for mobile visitors to your website or total sales broken down by sales rep.

enter image description here

Your Answer

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.