Display big numbers in a small area

Question

I am developing an accounting app where I display several orders. Every order has a price. I have a box where I would like to display the price as shown below:

This works pretty well for fairly small numbers but as soon I start having big numbers the box is not suited anymore:

A solution I came up with is to only display thousands as shown below:

• Some of my users do not like the letter K that indicates thousands.
• Some of them want to the exact price and all the digits at once.

Making the box resize to fit all the price digits is not an option as this will make some of the boxes bigger than the others and the symmetry will be lost.

Are there any other ways of handling this kind of issue?

Answer 1

Best solution will be to increase the size of the box. If you can do it without changing the layout, it is good.

For reducing the font size, I would suggest use a single size rather than going descending. It is easier to read.

And, if you want to do 'k' representations, make sure the user has some way of accessing the actual number, via a tooltip or some other cue.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Your layout should support your content. First content, then appropriate layout. You can not easily break the physical constraints (like small screen), but maybe even your biggest number could be placed as separate line at smallest screen.

Also I would recommend to keep in mind three stages concerning software:

1. Useful (Functionality)
2. Usable (Usability)
3. Aesthetics

The order is important, so don't let the Aesthetics beat Functionality and Usability.

Answer 3

Something which is done here in stackexchange is using colors in combination with k's to display weight (and I'm guessing m's as well).

Look at how different colors represent different weight, in combination with the k's, you're receiving something which is unmistakably usable & understandable

Reading further: Have you considered adding a tooltip/popover representing the exact number?

Answer 4

Make the box big enough to contain any likely price.

If your app has prices that might go up to six figures, make the price box big enough to take a six figure price. Do this even if you have to change the layout, even if real estate is limited and you have to sacrifice something else to make room for it. Don't use "K" or any other abbreviation to try to keep the price area small - as you correctly say, not everyone will understand it.

The reason I am saying this that for most people doing shopping price is a very important piece of information - more important than anything else except the basic "what is this" information. Moreover people really dislike being misled on price. If it doesn't look like you are being upfront about price, people will think you are trying to trick them - even if you aren't. The comparison with Stack Overflow reputation and the use of K isn't valid, as reputation isn't as important as price, and your audience is less likely to understand the abbreviation.

Answer 5

Is the size of the box a limitation as was asked? The only reason I ask this is due to the fact that you can probably change the size of the box to the width of the largest price you have and set it as a fixed width for the box. Then center the price inside the box and you'll know that no other prices can exceed the width because you've buffered it using the highest possible price (you can perhaps add a few more digits to the maximum size you want displayed).

Also if you are going to use prices with a decimal number, I would just size the box once at the largest possible size and then you don't have to worry about the size of the box changing but you can start centering the prices inside them thus leaving you with a uniform look on the site.

Answer 6

You could compromise on a mouse over for all digits (if that's an option), or you could make the trailing digits smaller / slimmer (if you have the resolution).

I tried with Calibri + Arial narrow, this doesn't buy you much:

(FWIW when using 'k' I'd use a small one, it distinguishes better from the digits and is SI-Correct. no such luck with 'M for million', though.)

---

Generally, consider reducing the total informaiton on screen. If you already have to squeeze in the data your problem is not the individual elements.

You could go for Currency symbol + value,

$123.786

can be more compact than

123k
Price

---

[edit] as requested: The idea is to emphasize the most important information ("123" (k)) but still perserve the detail. I've seen the "one step" version (2nd and 3rd example) a few times, but usually for esthetics / style rather than for coping with information density. Using successively smaller digits was a spontaneous idea to extend this.

As the example shows, the "one step" doesn't buy much in terms of pixels, the second looks at least unusual, if not confusing.

Answer 7

Scientific notation would have you display this as: 1.23e5, it's more 'correct' when it comes to units: 1.23e5 m is right, whereas 123k m isn't (it should be 123 km).

However if your users aren't comfortable with the 'k' postfix then I doubt they'd like this much, I merely mention it for completeness.

Other possibilities might be to have something like: 123^thou or 123^,000

Answer 8

It's hard to say without knowing more, but here are some possible options:

1. Make all boxes resize so they are all as large as the one containing the biggest number
2. Reduce the padding to the left/right of larger numbers so they fit in the box
3. Make the number text smaller
4. Keep the 123K, and have the option of showing the full amount by some sort of toggle (click or hover or whatever)

Answer 9

Take a cue from the social media widgets out there. Like/Follower/+1 etc buttons all need to show large numbers in a tiny little space.

Answer 10

Auto re-size the numbers as the price grows; set one default size for the normal/expected price (2-3 digits let's say) and re-size it as needed.