# What would you consider to be the natural order for this graph?

I have the following case:

I have 5 sale channels and I want to build an active chart (part of a monitoring solution) in order to display the differences between today and yesterday sales, per channel at the same hour (access time).

Actually the user would be interested if the sales have gone up, stalled or are just worst than the day before.

I know that in a "normal graph" with data spreading over a couple of days, the natural order would be to place "yesterday" on the left side, but in this case I consider that placing the important values first (the values that user is interested in), would make more sense. (reading today values first, without passing visually trough yesterday's values).

What version would you choose and why?

Definitely Option B.

Since you are listing them in pairs (today and yesterday), the most distinguishing factor between the two is not the value itself, but rather what day the value represents.

Why?

Because it designates the beginning of a trend or a point in a trend if you were displaying more than just 2 days. When looking at the bars, one naturally draws an imaginary line across the tops of the bars with their eyes. This combined with coloring of the bars gives one an immediate knowledge of whether it's a trend that is increasing, decreasing, or staying the same.

You can see how your eye does these by phsycially drawing the arrows on the tops of the bars like I did in the image below (please excuse my horribly hand drawn arrows):

So as you can see, in Option A the bar colors contradict the direction of the arrows, but in Option B the bar colors agree with the direction of the arrows.

With respect to the colors, I think they are great and easily understood at-a-glance. Without even looking at the legend, one should be able to deduce the following:

• Green: up, increase, or profit
• Red: down, decrease, or loss

The only thing I would probably change is the Blue representing stable. I would probably use a shade of Gray to represent the neutral position of stable. Makes more sense to me.

This seems to be a very specific problem, but what advantages are there to putting "Yesterday" after "Today". You need to have a very very good reason to violate chronological ordering, doubly so if you're going to use chronology as a large part of your legend. I just don't see it, (A) looks like a very bad idea.

It certainly seems misleading, in (A) until I read the legend, I had the impression that things were improving, when the reality was the opposite.

Also to nitpick, the color seems redundant, as well as the grid lines, and the left-hand numbering. Instead of coloring every value, consider coloring if it goes underneath a "CRITICAL" low, or is at an all time low. When everything is colored, it is as though nothing is.

You should take a look at the "OHLC" chart for market traders, it might actually work quite nicely here.

• Thank you, but again for the colors - were not my choice, but I will try to influence that decision. Commented Feb 17, 2014 at 17:10
• I understand :), we only do what we have permission to do. Commented Feb 17, 2014 at 18:13

I would say A is preferred because users read from left to right. Equally, age is often demonstrated as in the past and therefore on the left (think of history timelines and calendars)

I tried to do a quick Google for you to see what, well, Google were doing but I was only able to pull off a Salesforce and MediaPost example. Both of which demonstrate that A is preferred as they both do this method.

I would also take a look at your key / colouration. Do you think that your admin users would really need a colour chart to demonstrate the different between decreasing / stable / increasing? Surely they could figure this out themselves based on one bar chart being taller / same / smaller than the other? Instead I would argue to colour code the day as per MediaPost and maybe introduce that data upon hover? Too much choice can cause confusion.

• You mean "B" is preferred, A shows yesterday on the right. Guess that shows you how useful the weird colors are :P. Commented Feb 17, 2014 at 17:02
• The colors were some "client choice" because I actually used blue for today and dark blue, almost black for yesterday. Commented Feb 17, 2014 at 17:05
• So @DLM is it "B"? :) Commented Feb 17, 2014 at 17:11
• Haha that's brilliant. @VoronoiPotato yes you're 100% correct I meant B and yes, it goes to show some real life user testing there that the colours were 100% completely useless.
– DLM
Commented Feb 17, 2014 at 17:13

I would just show a single bar for each channel. The bar height is the delta between today and yesterday and so can be below or above the zero line.

E.g.

• Not a good solution because people want to see the actual numbers, I was actually thinking about displaying a percent or something like that. Also not looking for other solutions. Commented Feb 17, 2014 at 17:01
• Oh goodness nobody wants to do negative math in their head. Commented Feb 17, 2014 at 17:04
• People just want to see (1) numbers and (2) if it's a change (+) or (-). Commented Feb 17, 2014 at 17:16