21

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

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

Should the header column follow the same alignment that its data values uses?

Example header columns following the data type alignment

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

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

This question came from our site for professional and enthusiast programmers.

10

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 & Co., from a more print design-focused perspective, 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

4

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.

  • 2
    +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
4
  • Numerical data is right-aligned.
  • Textual data is left-aligned because is read from left-to-right.
  • Headers are aligned with their data and center alignment is not recommended.

I know that this question is from 5 years ago, but I saw it has no answer and I found this article, "Design Better Data Tables" very detailed and complete as an answer.

Numerical data is read right-to-left; that is, we compare numbers by first looking at their ones digit, then their tens, then their hundreds, and so on. This is also how most people learn arithmetic — start on the right and move left, carrying digits as you go1. Therefore, tables should keep numerical data right-aligned.

Textual data is read (in English) from left-to-right. Comparing textual elements is typically done by sorting into alphabetical order: if two entries start with the same letter, the second letter is used, and so on. Trying to quickly scan text can be infuriating if it’s not left-aligned.

Headers, generally, should carry whatever alignment their data has. This keeps the vertical lines of the table clean, and provides consistency and context.

Center alignment causes the lines of the table to become “ragged,” which makes it much harder to scan entries, often necessitating extra dividers and graphical elements.

enter image description here

0

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.

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.