skip to content

All projects: Gel, Jobs, Good Todo, Games, Uncle Mark, Blog, Bit Literacy

Broken: Financial data visualization

In any website or Web app today, if you're going to display any kind of data to a user (who's likely already saturated by data), it's got to be clear, accurate, and well-designed.

That's in contrast to a chart I recently spotted on a financial website, showing expense categories:

credit-card-pie-chart.png

This is broken:

• Why aren't the results sorted, either by category or size? It appears these pieces are displayed in random order.

• Why does the chart appear in 3D? The whole point of a pie chart is comparing the size of different slices, and this view distorts them.

• Any other possible improvements?

The company just launched this feature. Already time for a redesign, I'd say.


15 Comments:

Dave Montgomery — Apr 28, '09 — 5:21 PM

This appears to be a cut and paste job from Excel. And accountant or financial analyst plus data into a tool and gets a result out. They executed the recipe and had to serve it somehow. These folks clearly never watched "The Kitchen Sessions with Charley Trotter" where the recurring question was "Chef, how do I plate this ?"

Charlie — Apr 28, '09 — 6:10 PM

Hey, that's my ****** credit card statement! Had a similar reaction the first time I saw the pie chart... though my snapshot had even more categories making the data virtually impossible to digest.

Ken — Apr 28, '09 — 8:03 PM

Yeah, another improvement would be to not use the pie chart at all. Stupid way to show data. Read Tufte before you design a data display.

Steve — Apr 28, '09 — 8:25 PM

But...But...It's 3D!!!! C'mon!!!

Peter Boersma — Apr 29, '09 — 3:25 AM

In its current state, the chart allows users to visually compare the relative size of the chunks with...the associated percentage numbers!
In my opinion the chart would have been better if the *names* of the categories would have been placed at the end of the lines, not the percentages.

And why is there soo much detail in the numbers? 36.37% That's waaay too accurate for these types of charts.
I would need absolute numbers to check the validity of the detail. Which might be a good addition to the chart too: a table with names, %s and numbers.

richard foley — Apr 29, '09 — 8:51 AM

I can forgive most of this, but come on why do I have to hover to find out what the Account is or that this is Credit Card charges? Why isn't that information in the Sub-Title?

Ryan — Apr 29, '09 — 11:05 AM

Since people consider their expenses in terms of monetary amounts rather than percentages, it would make more sense to simply show the amount spent on each category. The graph can represent the portion of the whole that each category takes up without assigning a meaningless number to it.

I use http://mint.com and their implementation is significantly better at this.

Jerry — Apr 30, '09 — 8:56 AM

The only thing that ties the chart to the descriptions is color, and given the significant number of people affected by some degree of color blindness, that is not good design.

Spencer — May 1, '09 — 12:44 AM

I would like to point out that it has three shades of blue and a very similar color of green directly next to each other. This could further the difficulty in reading due to similarities in shade.

uxdesign.com — May 3, '09 — 4:42 PM

Pure fluff. Of course it can be better designed. But you've neglected to disclose its source. Where's it from??
This is a good example of an attempt at the "seduce them with eye candy" strategy. This strategy is often taken when the schedule--and/or capability--it too short for delivering real value. Just open the can and serve. An example of why industrial age business models, in which thrift and speed equals profit, have no business in information/knowledge management software, or most any other kind.

Robin Heyden — May 6, '09 — 8:17 AM

Here's another broken graphic for you - this one from the NYTimes (http://www.nytimes.com/interactive/2009/04/27/us/20090427-flu-update-graphic.html), depicting cases of swine flu. The concentric circles are meant to indicated reported versus confirmed cases of swine flu in various countries but by depiciting the data this way, the graphic gives the IMPRESSION (without reading the fine print) that the virus is spreading from Mexico and has taken over the southern united states. Inflammatory journalism. Ugh.

Coleen Corbett — May 6, '09 — 9:44 AM

The sample chart doesn't offer any insight into how your spending patterns are changing over time, i.e. You spent 22% on auto/vehicles category -- is this spend level up or down vs. prior month/year?

I like the following resource, which is a "chart on choosing which chart to use." At the center, is the fundamental question: "What would you like to show?" http://www.extremepresentation.com/design/charts/

Ngareta Bassett — May 12, '09 — 11:55 PM

I agree with Peter - significant figures for a normal human; round to the nearest single percent! Ranking in some form related to the figures a big plus - it just goes to show they have "no idea" what a real customer wants and how to engage them.

C. Marino — May 17, '09 — 4:12 AM

The colors on the chart are in random order. They do not correspond increasing or decreasing percentage, nor are they in aphabetical order.

murph — May 18, '09 — 12:58 PM

The Graph is from ****** - normally a solid user experience provider.

It's obvious this is a graph that was built with the data on hand, as opposed to the data a user might want.

Allowing users to tag transactions (and then applied those tags to future instances) would provide users with data they could actually use - as opposed to the "mystery pie" data ****** is pushing now.


Email Newsletter




All Projects from Good Experience

Gel Conference
Our annual get-together in New York
Jobs Board
Post or find a job
Good Todo
The world's best todo list
Good Experience Games
The best games online
Uncle Mark Gift Guide
The guide to technology and life
Good Experience Blog & Newsletter
Mark Hurst explores good experience

"...the Elements of Style for the digital age."
- Seth Godin
Bit Literacy, the book by Mark Hurst, shows how to solve email and info overload.