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?

Improve this question
3
  • 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
    Commented Nov 7, 2016 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
    Commented Nov 7, 2016 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
    Commented Mar 29, 2017 at 11:07

1 Answer 1

Reset to default
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
4
  • 2
    A nice library that does this is d3-format github.com/d3/d3-format; for example: d3.format("$,.3s")(7654321)
    – csiz
    Commented Nov 7, 2016 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
    Commented Nov 7, 2016 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
    Commented Nov 8, 2016 at 9:07
  • 1
    You're right, thanks for all the help. Great stuff!
    – gespinha
    Commented Nov 8, 2016 at 16:57

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.