A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.
We need to present a time series of additive (?) data and I'm looking for an intuitive way for the user to get what's happening. I'm a little stuck.
We need to show Price, Cost 1, Cost 2, Profit. Price = Cost1 + Cost2 + Profit. Example data: $500 = $100 + $150 + $250 (data changes over time).
Ideas so far:
1) Line graphs, displaying 500, 100, 150, 250. Problem: not intuitive that there is a relationship (P=C1+C2+P).
2) Modified line graphs, displaying Price, Cost 1, Total Costs, Profit. Same problem.
3) Stacked area + line graph, displaying 100 (bottom), 150 (middle), 250 (top) in areas, 500 in line (line is coincident with top of areas). Problem: user needs to calculate C2, P, may not realize that P is not total value.
What do you think?
For a single product: pie chart
For a range of products: stacked bars
Tuesday, October 18, 2005
Just for reference,
I would prefer to see a stacked bar chart for this
Wednesday, October 19, 2005
I can't think of a way to completely satisfy all the tasks you imply, so you may have to prioritize them. If the primary task is to see changes in the raw value of each source of the price across time, and the secondary task is to see the relative contribution of each source to the total price across time, I'd go with some version of your Option 1. I'd communicate that price is the sum of the sources with text labels, such as "Price (= Cost1 + Cost2 + Profit)" and/or graphics, such as color coding the line for each source, and making the Price line use all 3 colors (e.g., alternating at a high frequency). It seems to me that knowing the price is the sum of these sources is domain knowledge, not system knowledge, and users are often experts at domain knowledge. Are you sure this is a difficult concept for them? If space allows and the comparison of raw values among the sources is a very minor or irrelevant task, you could apply the arithmetic symbology we learned in grade school to imply that price is the sum of the sources. Have a separate graph for each source arranging the three vertically. Draw a horizontal line under the third, add a big plus sign to the left, and show the Price graph under the line. Does this have to be a static display or can it be interactive? Getting back to something more like your Option 1, you could have a slider on the time axis to support the secondary task. For the point in time corresponding to the slider position, display a pie chart showing the relative contributions of each source of price.
If the primary task is to see the relative contribution of each source to price over time, and the secondary task is to see the raw value of each source over time, I'd go with a version of your Option 3. Color-code the *areas* in the graph associated with each source --don't just use lines --and label each area (or use a legend to the side if absolutely necessary). Place a distinct and extra heavy line across the top of the stacked graph and label it (preferably with a callout) "Total Price." I think that'll best communicate that Price, not Profit, is the total value. Use relatively similar colors for the 2 costs, and that'll help users mentally group them together apart from profit if they want to (same applies to the interactive pie charts described above). To support the secondary task, at regular intervals (monthly, quarterly, maybe dependent on zoom level), you could draw vertical line segments between the lines in the stack and write in the raw value of each source at that point in time. If you can have an interactive graph, with a slider on the time axis, the user can display a bar graph and/or table of raw values of each source for any selected point in time.
Seems like a job begging for paper prototyping. Let us know how each alternative you try performs.
Fantastic ideas. Ultimately, we decided that the user needs to see the relative size of different areas.
We wound up going with a stacked area chart for the three components (red, blue, green with no borders) and a heavy black line for the total (price). Was a clear winner over the ideas we had before I posted here.
The raw numbers are easily accessed (the data is actually in an Excel PivotChart/PivotTable) by selecting data or you can see all the numbers on the PivotTable.
A harder problem: we need to backtest too. Now, we're displaying a ton of data together.
Of course we want to look as similar to the forecast as possible. Within the limitations of Excel, here's where we are:
- Previous layout is maintained for Actual data
- Modeled data is shown as light colored dashed *lines* superimposed on area chart (Actual Profit is green area, Modeled Profit is dashed light green line)
- No total line (Excel only allows individual OR stacked lines), so footnote to explain P=C1+C2+P.
This topic is archived. No further replies will be accepted.Other recent topics
Powered by FogBugz