User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

In the product we sell, we show comparisons between websites on a number of metrics. Some of those metrics are best displayed with linear graphs, some are best displayed with logarithmic graphs.

enter image description here

As you can see, we have a dropdown menu to flip between the different metrics. Currently, we adjust the logarithmic setting automatically depending on what metric you're looking at.

enter image description here

We're concerned users don't "get" what is going on. Any brilliant ideas on how to do the representation?

share|improve this question
up vote 4 down vote accepted

In addition to using gridlines to reinforce the non-uniformity of the axis, you could also add:

  • An animation between linear and logarithmic, showing the scaling that occurs.
  • A "learn more about logarithmic graphs" popup or a "What's this?" notifier next to the option. This should explain how they are better at spotting things that vary wildly in scale and where % change is more important than absolute numbers.

Finally, if users are really looking at data that varies that wildly, is a log-lin line graph the best representation? What questions are they trying to answer? E.g., do they want to know month-over-month growth? How much better/worse they're doing than competitors?

Throwing a graph up there is basically giving up, telling the users, "Here's the data--go fetch, yourself." What questions can you answer for them? Augmenting the graph with other visualizations will distinguish your site from the thousand other sites that just stick an unexplained graph in users' faces.

share|improve this answer
+1 for what's this. Animated switch - nice idea. +10 for try to do more than just plot it, so the user doesn't have to measure the difference with a ruler :-) To be fair, maybe that functionality is there too so benefit of the doubt maybe. – Roger Attrill Aug 10 '11 at 19:26

Perhaps you could express the non-linear scale by making your gridlines become denser along the y-axis, as in the (poor) MS Paint mockup below:

enter image description here

share|improve this answer
Using minor gridlines (in a faint color) can really reinforce what is going on. You could also make the axis labels more salient. – Alex Feinman Aug 10 '11 at 14:27
+1 That really helps. i peeked in on the question to see what ideas people are throwing around. Those gridlines really drive the point home. – Ian Boyd Aug 10 '11 at 19:53

What is the basis for your concern? Are you guessing or do you have data? That's the first step: actually ask your users whether this is confusing or not. Perhaps they understand just fine.

One immediate thing I would change, however, is to have the "use logarithmic scale" and the actual readout on the Y axis be more visually connected. Consider actually labeling the Y axis as being on a logarithmic scale when it is vs. when it isn't.

I'm also curious whether there's any visual feedback of the change that happens when you check the checkbox. Do you use something like a yellow fade technique to update them on what part of the interface has been changed?

share|improve this answer
There has been some user testing - it came back OK. But we're still worried ;) I totally agree on moving the control - that's in-progress. Right now there is no visual feedback. I'm torn on the yellow - it's attracting the eye to something that, in the end, isn't the thing I really want the user to watch. I think more testing is the right answer. Thanks. – Dan Dunn Aug 9 '11 at 21:55

I would give the logarithmic graph a background shading, graduating from white at the bottom to slightly less white at the top of each section, but making the top section of each colour progressively darker for each higher section - as in the first image below.

You could then optionally also not make those gradients linear but roughly representative of the logarithmic tendancy - see second image.

It might not even need to be as dark as this - it's purely a differentiator from the standard non-logarithmic graph, which you can either leave with a white background, or have a single linear graduation from bottom to top as in the third image below.

enter image description here

enter image description here

Non logarithmic: enter image description here

share|improve this answer
The faded backgrounds starts over at every multiple of 10 - the problem is that the visual feedback don't match the reality since the logarithmic increase is smooth, it has no steps on every multiple of 10. Furthermore, I am not sure that fades will be seen this way since so many websites uses fades in the background. It was a good tought experiment though - to visually try to help the user about what the scale is. I would put in an icon on the Y axis with representation of log when the log scale is used and vice versa. – Henrik Ekblom Aug 10 '11 at 8:23
@Henrik I understand logarithmic increase is smooth, but the gradient background is a metaphor for standard logarithmic graph paper where the lines get more and more dense and then so dense that you can hardly differentiate the lines and so you start them again in the next multiple of 10. – Roger Attrill Aug 10 '11 at 8:47
It might just be me, but I find this solution confusing. It doesn't help me understand the graph better. I don't think basing the design on logarithmic graph paper helps people unfamiliar with logarithms understand the concept since they wouldn't be exposed to the graph paper either. (remember that I'm an 'expert' so discount my opinion unless you have data that supports it). – Rahul Aug 10 '11 at 12:45
@Rahul The point is that it's a differentiator between linear and logarithmic. It's a visual representation of the fact that you are looking at one type of graph over another, when you are using the dropdown box to flip between different types of graphs, some of which are linear and some of which are logarithmic. You mentioned in your own answer about having the checkbox more visually connected - by changing the background, I'm proposing the differential be right there in with the content so you don't even have to look at any other indicator to know it's a linear or logarithmic scale. – Roger Attrill Aug 10 '11 at 13:01
@Roger I understand how it works, I just don't think it helps explain that you're looking at a logarithmic graph. It would make me scratch my head and say "what is this supposed to indicate?" – Rahul Aug 10 '11 at 13:08

As a HubSpot user... Get it in there now. :)

EDIT: Just realized that was a comment. In appropriate as a response so let me clarify:

I recognize the UI as HubSpot (whether it is or isn't is irrelevant from a UX perspective) so I made a tongue-in-cheek response. The heart of the matter is logarithmic scale is not going to be understood easily by everyone, but I also use a tool called Market Samurai which provides me with good information because it provides logarithmic scale.

Without it the ability to graph complex data is completely lost.

I have previously used one tool where every time a change of scaling factors occurred they provided some sort of demarcation (double dashed line with the text <-- change in scale --> between the lines. Although not technically feasible in logarithmic scaling it could be used if you had standard breakpoints.

Although it is not as clean or "sexy" it leaves little in the room for interpretation.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.