8

I'm designing a dashboard. One of the components of the dashboard is a Tile Panel that should display values in different units. The problem is those numbers can be really huge and to make it more friendly I'm formatting them using a suffix (k for thousand, M for million, etc.).

So far I have this design:

enter image description here

The problem I'm having is that I can't find a good way to display the "suffix". The way it is now I think it is not drawing the attention it needs and the user may read 3000 and 3 as the same number because he may just let the k pass.

Any tips or good practices about this? Couldn't find anything specific.

Thanks

Improve this question
1
  • Would people already "know" the unit? I don't really know what your business is like, but if "Custo médio" would never be 34M or plain 34, you can make the k be part of the unit, as qoba suggests.
    – mgarciaisaia
    May 15, 2018 at 17:32

4 Answers 4

Reset to default
8

Re-sizing elements in this UI may help.

Firstly, those first numbers are huge and the ones that follow are way too small. It makes it difficult to read and you can't do so at a simple glance. There is nothing wrong with keeping them the same size and abbreviating them.

Secondly, I would add a suffix for millions and remove it for thousands, it's easier for a millions suffix because it's generally more accepted that this is rounded or shortened too 'M'. For thousands it's rounded to a K if it's a round number. For example 34k or 34.1k is a generally accepted convention of abbreviating a number in the thousands as apposed to 34,51k either add in the extra '0' or take away the tens number (0.00, bold) to make it easier to read and an accepted convention.

enter image description here

See the above image to illustrate what I mean. This makes all the numbers easily readable at a simple glance. (grey boxes represent the text above and below the values as in your design)

Improve this answer
6
  • Thanks @OwenHughes for the answer... Just explaining in case it wasnt clear: In my design the first numbers are the integer part of the number and the small ones are the decimal part (we use comma for decimal separator). The idea is that the decimal part is almost negligible given the value of the number (but they still should be there). Now about your idea, how would you draw 345,100.70 for instance? Wouldn't it be too big for the box? Thanks again
    – João Menighin
    May 15, 2018 at 14:11
  • No worries @JoãoMenighin Apologies, thanks for making that clear. If it needs to be there then make it the same size, just for readability. In your example above I personally add the whole number still as its in the thousands or round it off to the nearest whole number, removing whats after the decimal point.
    – UIO
    May 15, 2018 at 14:18
  • Please don't use comma as digit grouping character. It's utterly confusing for those who are used to having it as decimal separator — especially for numbers less than a million. Better use thin space as BIPM and IUPAC and some others suggest.
    – Ruslan
    May 15, 2018 at 21:24
  • 1
    This depends on where you’re are from. The Radix Point is common in many English speaking countries to separate the Integer from the fractional. In many other countries its a comma rather than a point. Would you go with what ever is the cultural norm of the user base is? According to BIPM it can be both: bipm.org/en/publications/si-brochure/section5-3-4.html
    – UIO
    May 15, 2018 at 21:33
  • I'm not arguing for/against any decimal mark. Both comma and point are fine. But grouping character should be neither of these, precisely because it can be confused for decimal mark. E.g. for some people 34,510 means 34510, for others it'll mean 34.51±0.0005. It's much less of a problem for numbers with more than 6 digits: e.g. 23,446,831 is unambiguous.
    – Ruslan
    May 16, 2018 at 19:44
5

Two suggestions:

1) Make all the digits and unit the same size to avoid having the digits located after the decimal point so much smaller. Then the "k" suffix in the same size as everything else.

2) Or, make the k/M/... suffix part of the "unit" (R$/t in your example) at the bottom of the square instead, and make this unit bigger (k R$/t).

Improve this answer
0
2

After presenting a lot of options to my client, the one he choose was this one:

enter image description here

34,51k = 34510,00 (comma is decimal separator)

It is basically a mix of @duto ideas with some other tips you guys gave me. I'm still open to discussion on why this is or isn't a good a idea, but I'll admit I did like the result. One of the flaws is that the user may read it as "34k,51" which would translate to 34000,51 instead of 34510,00.

Thanks again!

Improve this answer
0

I just played with your ss. In my opinion if you use ",51K" with bold it would be better, also this dimentions makes suffix easy to read. May be not a perfect solution but i think it's a nice option.

enter image description here

Improve this answer
1
  • Hummm I liked that... I will also try making the suffix the same size of the big number to see how it turns out. Thanks @duto!
    – João Menighin
    May 15, 2018 at 16:10

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.