How should times be aligned in a column

Question

I have a data grid of three columns of type [Time, Decimal, Decimal]. All records in the decimal columns have the same number of decimal places. I have right aligned these as they're numeric.

But I don't know what the convention for time alignment is. I've had a search online for suggestions but it seems like there isn't one convention. I wonder if this is related to the fact that date and time format vary significantly between locales.

Is there a convention for times? And if not, does it seems reasonable to also right align it in my case, as left aligning looks asymmetric and ugly given the two succeeding columns are right aligned.

Here is an example:

| The Time | Some decimal | Another decimal |
|    14:02 |      12.5456 |        565.4735 |
|    14:06 |      12.1043 |        568.8763 |

Or

| The Time | Some decimal | Another decimal |
| 14:02    |      12.5456 |        565.4735 |
| 14:06    |      12.1043 |        568.8763 |

Note that my font is NOT fixed width. The example above is purely to illustrate the structure of my data grid.

Answer 1

Right align

Yes, it is reasonable to right align in your case. For other date and time formats, the alignment can be discussed.

Example from Spotify:

The biggest number can vary in number of figures -- in your case the hour, in this example the minute -- but the smallest cannot.

So right alignment is a simple way to a keep a consistent scale along the Y axis, that is keeping the colon at the same place, no matter the time displayed. This way the value of a figure can be directly compared to the value of a figure immediately above or below it.

Thoughts

Yes, the format varies from culture to culture. What to seek for, no matter what the figure represents (time, money, percentage, love) is always to align figures of the same weight. Normally this is the same as aligning the colon or decimal sign. Which is the same as right aligning a time value, like ´HH:mm´, as it has the convenience of having a fixed number of digits to the right.

This method does not work in all date formats though. Using the international standard, the fourteenth of March this year is written 2012-03-14. The weight of the figures will be consistent in the Y axis no matter the alignment, for the next eight millennia. But in several cultures zeros are omitted both here and there, for example writing the same date (pie day) can be written 14/3/2012. If not padded with zeros, the Y axis consistency of these formats is lost many times every year, no matter the alignment.

Stripping the biggest number from the occasionally initial zero is still a good idea, for the left most time unit. Have a look at the songs in the list. Without even reading the numbers you can immediately spot that one is longer than the others. Using four digits for representing duration (or time) would require some extra milliseconds and cognitive load to actually read and compare the value of those figures.

Summary

Reduce cognitive load by

1. aligning figures of the same weight, which often means right align, and

2. removing occassional left most initial zeros.

Answer 2

As I mentioned in a comment above, traditional typography habits are that you align numeric data with some form of decimal divider (decimal point with numbers, colon with times, etc). Word processors have long had this ability with lining tabs that allow you to do just that.

Alas, no such thing exists with HTML/CSS.

On option is to use a monospaced font. Then just make sure you have the same number of leading/trailing numbers on the side you are aligning with. (with time, you'd align-right as all would have 2 minute numbers).

However, after thinking about this some, you could manage to align on a decimal even with proportional fonts in HTML/CSS. Here's an example:

http://jsbin.com/imejer

The HTML:

<div class="decimalNumber">
    <span class="left">1</span>.<span class="right">001</span>
</div>
<div class="decimalNumber">
    <span class="left">100</span>.<span class="right">2</span>
</div>
<div class="decimalNumber">
    <span class="left">32</span>.<span class="right">56783</span>
</div> 

The CSS:

.decimalNumber .left {
  display: inline-block;
  text-align: right;
  width: 5em;
}
.decimalNumber .right {
  display: inline-block;
  text-align: left;
  width: 8em;
}  

And this is what you'd end up with:

Would I recommend you do this? Probably not. It's going to be a chunk of extra markup. That said, I think this is still semantically valid and is certainly doable. Maybe keep it in the bin of 'stupid HTML/CSS tricks' ;)

ADDENDUM:

I just realized I made a huge assumption that this was a web app you're building. If it's not, then obviously disregard my HTML/CSS solution. On the other hand, if it's not an HTML/CSS based app, you may actually have access to numeric alignment options that don't exist in CSS.

Answer 3

I would align based on the significance of the parts. if most of the times will be separated by seconds and your users are going to be comparing the right-most part of one time to the right-most part of the next time, then the times should be right-aligned. if the hours are the most useful part of the data, then the times should be left-aligned.

Answer 4

If you are using a border for your column , alining must not be an issue for either of the column. But, if you are displaying results without column borders, then use the standard method of alining to left as it leaves trailing white space before displaying decimal column. It would avoid confusion b/w datetime and decimal value.