Discussing about donut chart in Is multistability a good thing on a donut?, a question arise.

Discarding the pertinence of donut chart, do you have arguments/studies that would favor one of the following layouts:

same data, different layout

explanation then data vs. data then explanation

  • 1
    You're unlikely to notice a difference either way. Pick a format and stick with it. Commented Jul 16, 2015 at 3:09
  • Contacts Left XXXX what? What does the number measure? Looking at the Charts Left to right, it feels incomplete and disconnected respectively. I've explained in my reply below.
    – Rayraegah
    Commented Jul 16, 2015 at 11:32
  • Amended my reply, now that your edited title makes your problem/question clear.
    – Rayraegah
    Commented Jul 16, 2015 at 13:18

3 Answers 3


I would go ahead and assume this donut chart wouldn't be the only one displayed, but will be part of a row(s) full of charts and visual graphs.

In this case, I would absolutely organize the text in a readable data structure - Label top, Data bottom.

When visualizing data as such, it is better practice to first give them the key for the data(which normally takes more time to read and understand), and later the numerical value.

That's in order to avoid the situation when the user looking first at the number ("I have no idea what this number means"), then looking at the label ("aha! that's what it means, but what are the figures, again?"), and go back to read the numeric value because he forgot what he did there from the first place.

As the human eye reads (in English) from left to right, and from top to bottom (just like computers, by the way), it would make much more sense to structure data and forms like this: Contacts Left: 6,689 rather than 6,689: Contacts Left, especially when you have more than one figure displayed and the user have to read big amount raw information.

More about label-form placement(not exactly your case, but the conclusions might be somehow relevant): http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

  • The chart is alone in the current version of the app, but I see your point and it also help when using the document in unexpected way (e.g. copy/paste, parsing, etc.) Commented Jul 9, 2015 at 10:15

It depends on the frequency of use and the context. Is the user going to see this on a daily basis in a dedicated setting, or a couple times a year in the context of a larger report?

As grmmph already said, having the label on top makes it easier to parse what the number is, so it's more helpful for first time users. However, if users will be seeing this graph on a regular basis in an isolated context, users will already know what the number stands for and the number itself may be more important.

Will users be familiar with the chart? Will most users access this chart frequently enough that they immediately know what the number means? If so, emphasizing the number by putting it on top may improve usability in the long run. Think of the number icon shown on inbox icons to indicate the number of unread messages: once users know what the number means, the fact that there is no label makes it very quick to parse the data.

Is there other data to skim through? In the folder list in Outlook or Gmail, the number of unread message is shown after the label. When you're looking at a long list of similar data, the label is what you need to be able to skim.

Where in your app does the graph appear? Is it under a specific section titled "Contacts Remaining"? Or is under a tab titled something generic like "Reports"?

Edit: as more food-for-thought, I found an "inspiration" post.

  • I understand the reasoning, but do you have study to back up your answer? Commented Jul 16, 2015 at 8:37
  • Not a specific one. I'll see if I can find one to improve the answer.
    – AlannaRose
    Commented Jul 16, 2015 at 18:07

Data visualisation is statistics with a pretty face (statistics is mathematics) and fundamentally this is how we've always measured anything,

Label. Value. Unit.

  • Speed, 115km/h
  • Force of 48N
  • Gravity is 9.8m/s

and in your case, Contacts Left, 6689 Humans or Contacts Left, 6689 Androids or Contacts Left, 6689 Aliens

  • Without a Label, a user would no idea what your chart is about
  • Without a Value, you're not measuring anything
  • Without a Unit, your value is just a senseless number

That also implies that 6689 contacts left would be incorrect as contacts left is the label.

  • What about when answering a question? "How many people do I still need to email?" "There are 6689 contacts left." "How fast were you going?" "60 mph."
    – AlannaRose
    Commented Jul 16, 2015 at 16:36
  • "How many people do I still need to email?" "You may stop once you've emailed everyone in your contact list" "How fast were you going?" "Fast enough"
    – Rayraegah
    Commented Jul 16, 2015 at 17:23
  • My point was that there are valid reasons to have the order be "6689 contacts left" instead of "contacts left: 6689". Perhaps the user clicked a link that said "contacts remaining". In this case, they're basically asking "how many contacts are left?" On math homework, your point is very valid, but, at least they way you've stated it, it doesn't seem relevant to this case.
    – AlannaRose
    Commented Jul 16, 2015 at 17:26
  • At first, 6689 Contacts left sounds valid and even correct. i.e. if you are willing to use "contacts" like you would use "km" or "Kg". But you should understand that you would ask a person for contact information. I.e. a email, telephone would qualify as a contact. If my dad saw that graph he would ask me "what does he mean by contact? did he mis-spell contract?" because to the layman, using contact to measure does not make sense. But semantics aside, I've followed Label. Value. Unit in all the 50,000+ visualisations I've designed. I'm a data scientist.
    – Rayraegah
    Commented Jul 16, 2015 at 18:45

Your Answer

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

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