16

I have a set of dashboard values on a sticky horizontal panel on the top of the UI. These numbers are sales values so they are pretty important to the user.

The layout looks something like this:

enter image description here

But, as you can imagine, on screens with a smaller width, the numbers start overflowing on the sides.

What would you suggest as being the best solution for presenting these numbers on smaller desktop screens, given that the top panel shouldn't change shape, so it doesn't cover any more real-estate on the page bellow?

  • 1
    The height will not change so you are asking how to implement it on a horizontal overflow or also consider displaying them differently (eg. one over the other) ? – Alvaro Nov 7 '16 at 10:20
  • 3
    A note about hiding these "important" numbers...they may be important, but they may also only be temporarily important. Once the user's read the daily/hourly/whateverly numbers, I suspect they don't need them on the screen anymore. When screen real-estate is limited, perhaps only showing these numbers under certain conditions is a better strategy than trying to keep them on the screen at all times, but laying them out differently. – Nate Green Nov 7 '16 at 17:41
  • What accuracy is of importance on smaller screens? In your example it's clearly visible, that the smallest amount making the change is $1. But does it matter in practice? – Mike Mar 29 '17 at 11:07
25

The best way to cover long numbers on small devices is to use the K, M, B values; such as 10K, 10.51M etc...

As per layout try resizing this codepen, you'll get an idea https://codepen.io/geoffyuen/pen/FCBEg

This page has couple of good examples to consider.

| improve this answer | |
  • 2
    A nice library that does this is d3-format github.com/d3/d3-format; for example: d3.format("$,.3s")(7654321) – csiz Nov 7 '16 at 14:12
  • Of course, if you have enough numbers that need to be shown, it may be good to turn it into a dropdown that shows the list vertically for small-enough screens instead. You can't have everything displayed all the time on something like a phone. – JAB Nov 7 '16 at 18:11
  • 2
    Even when there is plenty of space, it can be clearer to present numbers this way. 8 significant figures is much more than necessary in most circumstances; $10.5 M is quicker to parse at a glance than $10,480,114. – PLL Nov 8 '16 at 9:07
  • 1
    You're right, thanks for all the help. Great stuff! – gespinha Nov 8 '16 at 16:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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