Where are the doughnuts?

[Nizar]

Some might prefer Pies, but I really love my charts, especially to see the categories I spend more money.

[hugo (Hugo Cornejo)]

Well, it’s kind of a tricky problem. Every time we’ve considered circular charts we’ve come to the conclusion that they weren’t really the best solution for the problem we were trying to solve.

Pie charts (for our use case) have two big problems:

1. Spending is usually really skewed towards rent and bills so any pie chart of spending is likely to have maybe a 50% of the chart precision gone in just one category. That leaves very little room for the rest of spending.

2. Categories with little spending take so very little space on screen (because they are proportional to the number) that are really difficult to interact with (tap to dive in or select, etc.) because of the lack of tappable surface (a classic problem of Fitt’s law).

So, we won’t probably have pie charts until we want to produce some kind of reports where we don’t want you to interact with or that only compares a few categories or merchants (for example: Uber vs TfL cost).

The bottom line is we never design data visualisations from top (“oh yes, let’s make a nice graph here… what can we populate it with?”). We take the data and the story that we want to tell and once we understand it we try to find the best possible visualisation for it. Until now the answer has never been I’m afraid… but we’ll keep working

[Rika (Scarlet)]

A good question with a fantastic answer. I’m fairly sure I saw some older designs with doughnut charts in them and they showed the same issue.

Unrelated but I keep thinking this topic is a callout post for someone who got doughnutted and didn’t deliver on the goods.

[anon44204028]

Getting round the pie chart problem you do one chart showing say 80% POS and 20% other (instead of showing say 15% FPS and 5% ATM), then do a second pie showing the 20% other as a 100% figure so the split between the other categories is clearer at 75% / 25%

[anon72173902]

Sorry

[Nizar]

I think the way Ting have designed the charts looks good. They also have standard categories with subcategories.
To fix the below issue:

@hugo

2. Categories with little spending take so very little space on screen (because they are proportional to the number) that are really difficult to interact with (tap to dive in or select, etc.) because of the lack of tappable surface (a classic problem of Fitt’s law).

They have like a small tag icon for each category that you can click:

Once you click on the category you get another half-eaten doughnut for the subcategories:

[PMH (Peter)]

I quite like it - but I can’t get away from the fact that everything is represented by almost exactly the same colour.

A nightmare for some, downright impossible for others with visual impairments.

Plus also, just a bit bland, I suppose

[Nizar]

I’m not quit excited about their color schema as well, but I was just highlighting the approach they used for charts.
I really like the top bar chart where you can compare spending by month.
And I bet they will look much better in :mondo: colors

[PMH (Peter)]

I can certainly see what they were getting at! It’s always useful to experiment with the way that this data gets visualised

[Felicity]

I used a budgeting app before (forget the name) where you could select which categories you wanted to compare and view it in the pie chart, so you could totally take rent and large every month direct debits out of it tailoring it to your own needs

[johnhenryb (John-Henry Barac)]

I agree with Hugo, pie charts while attractive tend to be difficult to read and particularly difficult for getting meaningful data. They’re great for comparisons of 2 things, e.g. Pie eaten and not, and where an impression is enough.
A horizontal bar chart - with the value of each bar reading left to right is much easier and great for mobile because you can just scroll down to compare a longer chart of items.
Also! I personally would like to see a line chart of spending when I rotate the phone, like Apple do with stocks… where you can drag along the time axis and get annotated balance at each data point along the way…

[knightlife (Harry Knight)]

I just joined the community and the first thing that came to mind was wondering about pie charts. I think for me personally, i’m quite interested to see visualisations and whatever the best solution may be. Whether it’s a pie or graph or floating circles. I’m not a designer but something that allows some interaction but also gives you a glance/overview.

Using the beta at the moment I find the current visualisations do the trick but don’t necessarily have the ‘sassy, oo lala’ factor. Still 100% loving my Monzo setup!!

[beningreenjam (Ben Green)]

Given the screen space, I don’t see how categories with very low expenditure could be usable if meant to be interactive. Due to it being on a touch screen interface the area being tapped, ideally needs to be at least as large as a fingertip plus a little extra in order to see effects related to button presses so that you can get feedback that you’ve pressed it. That’s a simplified explanation of the wider problem.

Although @Nizar’s inclusion of an image used on another app, with tappable icons outside of the chart is one possible solution, but I feel in doing that it quite drastically reduces the amount of space to display the actual chart itself.

If it were on a web app, then I’d definitely love to see an interactive pie/doughnut chart.

[Failons (Marco Failoni)]

We want the pie!!! Pleeeeease…
No seriously… the one thing I had in my mind during the last two years and during the two looong weeks of waiting for my Monzo card, was beatiful colorful pies.
Still love Monzo’s world and your way to do things, everything is friendly, perfectly working and fast, and seriously well UX designed. I really love u guys, and thank u.
But I was so disappointed when I didn’t find my pie inside the app. Because is really missing something communicative.
The current visualization of expenses doesn’t tell me clearly the where the most art of my money goes, or how much is heavy the beer for my pockets.
Now we have also a possible graphic solution provided above, so please let us choose if go with the pies or not!

[rubenwardy]

I’m working on this:

Teaser: Analytics for Monzo - App for Android

[image] [image] [image] This app will be released when the public API is released early next year after current accounts. Here is a list of current features in the app: Overview Spending per time Balance over time Spend per category Spend per merchant Categories Spend per category Category table (name/visits/total/average) Merchants Spend per merchant Average per merchant Visits per merchant Merchant table (name/visits/total/average) Eating Out Spend per time of day Type of venue …

The tapping of the category to show more info is a very nice idea, I must say

[anon44204028]

The doughnut (or donut as Homer Simpson would say) and pie charts are the clearest way of showing stuff

[alexs (Alex Sherwood)]

@hugo

1. Spending is usually really skewed towards rent and bills so any pie chart of spending is likely to have maybe a 50% of the chart precision gone in just one category. That leaves very little room for the rest of spending.

2. Categories with little spending take so very little space on screen (because they are proportional to the number) that are really difficult to interact with (tap to dive in or select, etc.) because of the lack of tappable surface (a classic problem of Fitt’s law).

For anyone who’s curious to see what Hugo means, I’ve shared some screenshots of the pie charts from the Quids app here (one which looks great & the other which doesn’t work so well) -

Monzo Desktop App - Quids

I’m 202 clicks late to pick up on this app but I wanted to highlight a few features for future reference, for the users like me who hadn’t realised that it delivers a few popular features… Unique Features Total debits + credits per day [image] Pie charts Which sometimes look great - [|238.5x250] & as Hugo mentioned, sometimes don’t - [image] Spend breakdown by month, by merchant Which is sorted with the merchants that you spent the most with at the top of the list so you can see where you …

[anon44204028]

What is custom is to do two pie charts or doughnuts. First one showing split for 100% with the main categories and an other category combining smaller items and then a second one showing the split of the other category

[dc.robertshaw (Daniel)]

I personally think pie charts look really old fashioned and always overlook them in other apps

[rubenwardy]

@hugo

1. Spending is usually really skewed towards rent and bills so any pie chart of spending is likely to have maybe a 50% of the chart precision gone in just one category. That leaves very little room for the rest of spending.

My app supports filtering by categories. I’m also going to make it support double tabling a segment / key to show details on just that category.

@hugo

2. Categories with little spending take so very little space on screen (because they are proportional to the number) that are really difficult to interact with (tap to dive in or select, etc.) because of the lack of tappable surface (a classic problem of Fitt’s law).

Basically solved by adding “other”. Different presentations of data have different advantages/disadvantages - no need to just not have them because of this.

---

In general, pie charts are good for comparing things against total spent, whereas bars are good for comparing things against each other.

---

@dc.robertshaw

I personally think pie charts look really old fashioned and always overlook them in other apps

Well, people have different tastes. I prefer them to just bars for comparing spend.