Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 6 down vote favorite

I would like to know what are the best approach to align header columns according with the data type.

I haven't found any Human Design Interface article explaining this.

Do the header column must follow the same alignment that his data type uses?

Example header columns following the data type alignment

If yes, I would like to see some trustable references.

share|improve this question

migrated from stackoverflow.com Aug 9 '11 at 21:25

3 Answers

up vote 4 down vote

In general, Excel is considered the grand-daddy of data grid applications, and most apps with data tables generally follow it's basic defaults. So, titles, dates and text usually align to the left and numerical values generally align to the right. Column headers always align to the left regardless of data type.

share|improve this answer
+1 It's an interesting question though. Just because Excel does it that way doesn't mean it is good UX. Although it does give an idea of what people may unconsciously expect. – JohnGB Oct 4 '11 at 8:40
Titles, Dates, and other text align to the left for easier scanning. Scanning numerical values is easier with right alignment. Users are still scanning the left side of the column. Comparing the magnitude of values is easier with left alignment (e.g., 15,000 vs 3,000 with right alignment reads as 150 vs _30 when visually scanning the first 3 characters). If it helps, you can think of numerical values as being left aligned, but with leading 0s replaced by spaces. The most important information is still on the left. – Brian Oct 31 '12 at 17:54
up vote 2 down vote

Columns of figures should be tabular and right aligned if they share the same unit, and the headings should match.

Guidelines, via Morten Hjerde (IXDA thread):

  • All text left aligned
  • All numbers right aligned
  • Single characters are centered
  • Numbers that are not values, like product codes for example, are treated like text and left aligned.
  • Use the same number of decimal places for all numbers in a column
  • Left align dates.
  • Use 2 digits and leading zero for day numbers (this may be cultural?), and use the same format for dates throughout

I'm not able to find any Tufte-esque references, but plenty of examples:

I had to take out additional links and images because I don't have the rep yet. Sorry friend :\

Hoefler & Frere-Jones, without going into the HCI justification, provide a reasonable example (source):

H&FJ

Example two, pulled from this Behance profile. Just clear enough to tell what's going on:

UHAUL report

share|improve this answer
up vote 0 down vote

I think dwils makes an interesting point. His examples look like they reference the print world of accounts. I've used design principles from these visualisations in HTML data tables/grids I've developed. Principles such as columns that contain numerical data are right aligned as is the header, columns that have a sub heading are centred across the span.

Take a look at how banks and building societies present their annual reports. The reports present visual consistency in their tabular formats.

share|improve this answer

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.