Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
2  
You say "The decimal columns present the data right aligned as is the convention." Where did you get this convention from? To be honest I prefer to see these values in such a way that the position of the decimal separator determines the alignment, such as on a receipt. –  Bart Gijssens Mar 15 '12 at 13:06
    
@Bart, Spreadsheets. They don't align on the decimal point. I understand the argument for doing so, indeed this is answered here : ux.stackexchange.com/questions/13795/…, but this almost never happens when displaying decimals in a 'cell' –  RichK Mar 15 '12 at 13:14
    
What are you trying to align against what? –  dnbrv Mar 15 '12 at 13:24
1  
I will point out that most modern proportional typefaces include an option for so-called "tabular figures" for just this use; the use of numbers in tabular data. They are simply fixed-width numerals (designed to be stylistically consistent with the rest of the font). –  Kit Grose Mar 15 '12 at 14:55
1  
If your type isn't monospaced, it's a bit of a moot issue, since the colons will never align exactly. –  DA01 Mar 15 '12 at 17:21
show 7 more comments

4 Answers

up vote 14 down vote accepted

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:

enter image description here

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.

share|improve this answer
    
This is correct. Barring an ability to align based on the colon, right-aligning is the solution since you will always have 2 numerals to the right of it. –  DA01 Mar 15 '12 at 17:03
    
+1 for consistency and comparisons –  jcmeloni Mar 15 '12 at 19:34
add comment

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:

rendered html and css to create decimal aligned column of numbers

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.

share|improve this answer
    
Thanks for the answer DA01, it's actually WPF rather than Web, so there's probably an option to do that. Also, as stated in the question the number of decimal places is constant between records. It's interesting that I'm getting varying answers to this question :) –  RichK Mar 15 '12 at 17:56
    
As a note to this, it's probably possible to do better (semantically speaking) than using the class names "left" and "right". Dependant on the units you're using, you could refer to them as "integer" and "fractional" or "minutes" and "seconds", or whatever. You could then add in microdata, and/or potentially style them differently on different stylesheets, and/or add in javascript controls which truncated them, or any number of other applications. –  dhmholley Jul 27 '12 at 16:20
add comment

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.

share|improve this answer
1  
I don't see how this can be an answer to the question. –  Bart Gijssens Mar 15 '12 at 13:05
    
@BartGijssens 20-10-201223:32:23344.77345.6 this would be without column border , 20-10-201223:32:23|344.77|345.6 , this would be with column border, so if u see both, the second option is more readable and ofcourse their is no standard (as far as i know) to display date/time alignment!!! –  sree Mar 15 '12 at 13:10
    
@sree: If I'm correct, the question is, should it be: |___________20-10-2012 23:32:23_| or |_20-10-2012 23:32:23__________| or |________20-10-2012 23:32:23_______| or something else –  Bart Gijssens Mar 15 '12 at 13:34
    
@Bart Yea that's it, check out my edited question for a rough mockup –  RichK Mar 15 '12 at 13:37
    
@BartGijssens yes ! thats what i was refering to... my point was , if they dint have borders and were aligned like i mentioned, it would be a disaster.:) –  sree Mar 15 '12 at 13:45
show 3 more comments

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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