1

We run an analytics monitoring service. We have a chart control that we use to show data to users who want to explore their different analytics providers. Here's a rough mockup:

https://i.stack.imgur.com/aoOmd.png

Here, the user is looking at the metrics associated with and available from one of their Twitter accounts. The dropdown contains all the accounts for all their services; below that are all the metrics for that stream.

I don't like that the unit of measurement is repeated at least three times here on this chart: once at the top-left on the chart label, once on the right-hand panel that tells you what you're mouseover-ing, and once on the bottom where you pick the streams.

One idea I had was to move the stream/metric selection to the top, since that would be a little more natural to have the title also be the place where you can change what you're looking at. However, if we do that, then the chart will get pushed down different amounts for services with different numbers of streams, which seems unwieldy.

Conversely, if we leave the stream/metric selection at the bottom, the title of what you're looking at would come after the thing it refers to, which also seems strange.

Is there a way to pull this off and eliminate the title label repetition, or is this a "something's gotta give" situation where we should consider giving up something else?

2
  • Are there any other interactive elements on the page, and is this the only content on the page?
    – Michael Lai
    Oct 11, 2013 at 22:48
  • There's no other interactive elements. There is a vertical navigation bar on the left, our company logo in the upper-left, and the user's profile/log out links in the upper-right. Oct 13, 2013 at 19:59

1 Answer 1

3

I think some labeling is necessary since you can't really have a number with the unit associated with it. However, you can definitely reduce the repetition by rearranging the content a little bit. Here are some suggestions:

Firstly, I think the chart should have a 'title', which should be the dropdown selection showing what information is displayed. I don't know what else you have on the page other than the graph (if this is not a dashboard), but the title should be easily noticeable and reachable if it is something the user selects often. It is also a good idea to put the interactive elements close together so they don't have to let their mouse wander across different parts of the screen too often.

You can display the mouse over information as a label for the data point on the chart instead of the putting it on the right hand side of the graph if you like, otherwise it introduces a vacant space to the bottom right hand side of the page. A suggestion is to move the metrics to the same area instead.

I think if you associate the data period/range toggle with the metrics, than you can remove the repeated 'in past ' label after the metrics. Here's an example of a sketch based on the points I mentioned (please ignore the dotted lines).enter image description here

2
  • 1
    Thanks, Michael; this has sparked a good deal of discussion here. It's kind of amazing how a simple rearrangement improves things so much. Oct 14, 2013 at 18:35
  • 1
    I would be interested in what the feedback was on the designs, and how you ended up implementing the design. It is always great to see people think more deeply about the reasons for the design (which is pretty much the whole point of UX), so I hope it works out in the end.
    – Michael Lai
    Oct 20, 2013 at 21:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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