I’m building Spreadless — an app for project budget management. Wanted to start this project with some basic visual themes. Just wanting to explore some ideas about how budgets should be shown. None of this is a functional design. Just looking for patterns and themes at this point.
What’s Wrong With Spreadsheets?
Here’s the typical budget spreadsheet here on the left. Quick! which items are over, or under budget?
You have to go line-by-line to find them. Slow. Tedious. Let’s apply the “squint test” to simulate a quick glance. There is no information left.
The ultimate goal is scanability. The user should be able to spot problems at a glance. Concerning items should say “hey, look at me!” Long columns of numbers doesn’t accomplish this. We need something more visually enticing and informative.
Breaking Down the Budget
There are two parts to managing a project budget. We need a hierarchic structure. We need to be able to compare values. That’s about it. Let’s try something as simple as a bar graph.
Try Simple Bars
First wireframe was simple bars using some very muted tones to let the patterns come through. Each bar varied based on the task hierarchy. Parent tasks got long bars. Each level of children got shorter bars. Clear visual presentation of the project’s hierarchy.
Now I add some inner bars to provide comparison capability. I took the values from the spreadsheet and eyeballed them into the bar lengths.
We completely lose our hierarchic information. Notice how child items start to look like parent tasks. Is the item over budget, or a parent task? It’s hard to tell without looking intently. It’ really difficult to scan. The eye, trying to scan the left side of the graph takes a tortuous path.
Try Equal Length Bars
Finding outliers is a very visual operation. The eye wants to see straight lines. It’s amazing how the eye can quickly detect even small warps in a board if you sight down the edge. Normalizing the bar lengths… give us that sight line.
Now picking out concerning over budget items is trivial. At a quick glance we can spot the problems. The eye has a perfect sight line.
Let’s give it the “squint test”. I can still easily spot the overages.
Some Information is Lost Though
Equalizing the bar length helps us find troublemakers. But they don’t tell us anything about scale. For example a $1 dollar task with a $2 overage will have the same visual presentation as a $100,000 task that is $200,000 over it’s budget. The project manager needs to be far more worried about the later. So some work remains to deliver that information in a visually meaningful way.
More Work Remains
I am a long way from creating actual app mockups. Need to resolve the scale issues. And while the above design pattern is effective–it’s ugly. Not how we’d use it in the actual app.