1

I have a vertical bar chart that represents the progress of the usage. I have limited width and height to work with, but I need to make sure that the current usage and maximum usage are both shown on the screen. Here is what I currently have: enter image description here

My problem with this design is that I feel there is too much text which makes the bar chart too wide. Is there an alternative way to place my labels so that I can make the bar chart visually appealing without increasing the width of the overall image? I prefer to keep the GB on both numbers in case of confusion.

Edit: Using everyone's suggestions, I created this option using all 3 possible data points. I felt it was best to display all possible information even if it would make it a bit more cluttered.

enter image description here

Improve this question
6
  • 1
    Do you need 3 decimal places on the numerator? I wouldn't expect a user to be looking for sub-1% changes in this type of dashboard summary.
    – Nuclear Hoagie
    Jun 9 at 18:20
  • 1
    @NuclearHoagie yes, because we are measuring down to the MB, so the 3 decimal places are necessary when measuring in GB. For example, we need to show 11MB, but represent that number in GB, so 0.011 needs to be shown
    – Gene Lee
    Jun 9 at 18:24
  • 2
    I won't post this as an answer because it's too short, but it's a good practice not to repeat information in charts. So, if you have Usage(GB) it's clear that the information inside refers to GB, so you can simply remove the GB part. Additionally, if all the elements (disks?) have teh same size, then you can add that information outside the bar, as in "all disks are 108GB"
    – Devin
    Jun 9 at 18:38
  • One additional note outside of your question: rather than a half full half empty wouldn't your users need info on how much space left they have? In that case your bar will look more cluttered, but users will have all the info at first sight, specially the main one: how much space is left . For example in Mac, depending on OS you have no mention of storage left unless you hover over the space, but new OS have the avialble storage visible at first sight (no idea how Windows handles that since I'm not at the office where I have some Windows PCs, but the idea remains)
    – Devin
    Jun 9 at 20:02
  • @Devin I think users would definitely need to know how much space they have left. I'm wondering what the best way to go about that is. Either add it into my current design for 3 data points total(total, remaining and used), or prioritizing 1-2 out of the 3 and removing the others. If I only kept the xx remaining and removed the others, do you think that is too vague of a concept?
    – Gene Lee
    Jun 9 at 20:51

2 Answers 2

Reset to default
2

You could try placing the total at the top and the amount consumed in the "filled" section like so:

animation growing

I also played around with this idea:

with differences between the values

The above was suggested by @Devin

Improve this answer
5
  • 1
    amazing. Just made a comment about this before I saw your answer: Why don't you replace the "left" and "gone" words with the amounts?
    – Devin
    Jun 9 at 20:04
  • @Devin I already took your idea of using "(GB)" I can only copy so much before I switch this answer to be a community answer. But let me do that real quick.
    – Kitanga Nday
    Jun 9 at 20:07
  • @Devin Updated, though I have to mention, I wanted to try this but felt that it would be too much math for the user, but now I just feel like the filled in colour and the top section are fighting for attention. What do you think?
    – Kitanga Nday
    Jun 9 at 20:14
  • I just read your comment, it's exactly what I've done, I didn't read the rest so missed the half empty half full part. Well then this becomes a community answer
    – Kitanga Nday
    Jun 9 at 20:16
  • 1
    Thank you so much for going through the effort to animate this. Although both answers were amazing, ultimately I think this one fits my product design better. Thanks everyone for your help
    – Gene Lee
    Jun 9 at 20:44
3

Graphic designers are quite used to deal with impossible product prices in a small space. Here some tricks:

  • Use a narrow font in its normal version, such as Arial Narrow
  • Use superscript and subscript for secondary characters, or 50% of the original text size. What we designers do with the cents and currency symbol, this allows you to remove unnecessary spaces:

enter image description here

  • Define a negative tracking for the separator character

enter image description here

  • Use a contrast for the meaning of each figure, for example, white for the total, black for the one used

Result

end

Comparative

enter image description here

Improve this answer
4
  • 1
    It looks much better, although I do have some concerns about the readability of the 75.120, but I will do some user research regarding that. One question, how do you picture the 109GB to look when the green bar is barely present? The 109GB wouldn't be visible with the white background
    – Gene Lee
    Jun 9 at 18:55
  • Use another color 😉 The colors of my answer are just quick and raw examples. By the way, the font size in my example is bigger than that of your image
    – Danielillo
    Jun 9 at 18:56
  • 1
    this looks beautiful!
    – Devin
    Jun 9 at 19:53
  • It is a nice solution indeed. But since this is mostly done for pricing it might confuse people a bit. That doesn’t have to be a problem but is worth to take into consideration.
    – jazZRo
    Jun 13 at 7:01

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.