1

I am struggling with small redesign of our app's screens. I have a few labels + values (one under the other) which contain numerical and text data. Another complication is that some of those numeric values do not have decimal places

I am struggling how to best align that mix so that do not look all over the place. What I have come up with are 3 alternative versions:

Which one do you think is best? Version 1 aligns the numbers to the decimal point version 2 aligns the numbers to the right Version 3 is pretty much the same as ver 2, only it aligns the text to the right as well. These fields are related so I should not really change their order. I think version 1 is best, but would like to know your opinion as well. enter image description here

  • Can you attach a screenshot or a mock up of your problem. – Rayraegah Feb 6 '14 at 8:45
  • Put the currency in front of the monetary values, preferably in a separate column. If it must be in the same column: align it to the left - certainly don't make it move position with the length of the monetary value. Align numbers on the decimal position. Add -- for discrete (non-decimal) numbers in light gray or some such and of course without the decimal separator. Keep textual values right aligned as that mixes better with the numerical alignment. – Marjan Venema Feb 6 '14 at 15:38
1

In my comment I said:

Put the currency in front of the monetary values, preferably in a separate column. If it must be in the same column: align it to the left - certainly don't make it move position with the length of the monetary value. Align numbers on the decimal position. Add -- for discrete (non-decimal) numbers in light gray or some such and of course without the decimal separator. Keep textual values right aligned as that mixes better with the numerical alignment.

This is a picture of what I meant (no pictures in comments):

enter image description here

Note: keeping text right aligned may only the best option if the numerical values "swamp" the textual ones. If/when you have significantly more textual values than numerical ones, it is probably better to keep the text left aligned.

0

Context is most important here, and I think in this case the context dulls it towards numbers presentation and ability to compare them. This is why I think it's no good to have these numbers shifted depending on if they do have something after decimal pont or not - because by doing it you remove this ability.

Regarding text, I would use diffferent styling (background maybe?), so that it sticks out.

You can also consider always showing decimals - in my opinion this will increase the clarity of the numbers presentation.

Here's my idea:

enter image description here

  • I should have mentioned before: – Odie Feb 6 '14 at 9:57
  • Thanks, but I should have mentioned this before: the first field is a "quantity" field so it must not have "USD" next to it. Also - the number of decimals can vary between the fields, so it is not always two decimals. E.g. Numeric (non decimal) has no decimals in 90% of cases, but some times it can have up to 6 (depending on the formatting config). Fields I marked as "Numeric(decimal)" have 2 decimals in 90% of cases. – Odie Feb 6 '14 at 14:12
  • This changes everything, indeed. In this case I think you should do the opposite: not let these be comparable, preferably by splitting them, dividing visually. But this is generalizing. Do you think you could provide some more details about the system? – Dominik Oslizlo Feb 6 '14 at 14:53
0

Decimal numbers should always align on the decimal.

In desktop publishing software, you'd use a decimal tab stop just for this. It's what it was designed for. In HTML, alas, this can be a bit tricky as there is no concept of the decimal tab stop.

There are two solutions:

  1. Use monospaced fonts, make sure every number has the same number of decimal places (even if zeros) and right-align the text. Pro = easy. Con = can't guarantee it will show up for every end user as a monospaced font (depending on browser and system settings, etc.)

  2. Get crafty with your CSS: http://jsbin.com/jecuyeqi/1/ Pro: it's font independent. Con: takes more markup.

What you need to do is wrap the decimals in their own container separate from the whole numbers:

<span class="number">123<span class="decimal">.345</span></span>

You then float the decimal to the right, and then give it a width, and set the text to left-align:

.number {
  display: block;
  text-align: right;
  overflow: auto;
}

.decimal {
  width: 100px; 
  float: right;
  text-align: left;
}

(There are variations to the above as well. For instance, you could skip the floating and set .decimal to display: inline-block. But the concept is all the same)

0

If the first field is a quantity for an item then it's probably best not to align in and instead make them in one line:

Item 1       10 x 300 USD

or

10 x Item 1 @300USD         3000 USD

Your version 1 is, IMO, horrible; it implies similarity where there is none. Similar things should look similar, while different things should look different.

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.