In a grid, how to display long column headers

Question

When displaying data in a grid (each row contains a record, each column a different record field), vertical space need is easily solved with scrolling or paging.

We are usually sooner missing horizontal space as the number of columns or column data becomes large. This topic is already discussed here: How to display too much data and this is not the point of my question.

Some columns have data that occupy a little space (a check box, a date or an icon), but their header label is long. The result is that the column becomes wide because of the header, not the data, with an obvious loss of horizontal space.

There are some simple solutions:

• find shorter header texts
• wrap the header text into multiple lines
• display the header text vertically
• display an abbreviation with a mouse over tooltip containing the complete label
• use an icon as a header

There are cases when none of these solutions can be applied, keeping a clear and easy to understand UI at the same time. What are your solutions?

Answer 1

The most widely used approach that I've seen is to use an ellipsis to indicate that there is more text, like this:

You can then provide a tooltip on hover to show the user the complete name. On Mac OS, Apple tries to condense the text as a first step. They do it by reducing the space between letters and words. The idea is to show you as many characters as possible before adding the ellipsis as a last resort.

I've seen another, far more elegant approach in an app somewhere where they fade the last displayable letters. I can't recall the app's name, but it looked like this:

This is obviously more work, but it sure looks more modern and classier. I'm surprised that it hasn't become a standard feature of Mac OS yet. Speaking of, Apple does use fading in Spotlight to show you a long file path:

In addition to the faded file path, see the file "YLListenerBase.cpp": you can see that it's condensed if you compare it to its .h file. The file path with the fading effect is at the bottom of the window.

Answer 2

I think I suggested this in a comment in the other question, but to recap... I would suggest icons when the icon can accurately describe the columns meaning.

Quote from comment on the other question:

E.g. if you have a column that will only contain a single character (e.g. Y/N/?, or 0/1/2/3/? or T/F) if you can use an icon or abbreviated text in the header you may be able to greatly reduce the column width. e.g. if you have a "Number" column, using "#" instead will save some space.

Answer 3

Your list is pretty exhaustive. There isn’t much else you can do but pick whatever is best for your situation.

• If your headers are multiple words, the wrapping is probably the best option. You can also break-up the occasional long word if you use proper hyphenation. Do not break up words at arbitrary points.

• You generally have better luck getting guessable abbreviations than icons, unless the icons are already established elsewhere in the app. If you’re not using established abbreviations, test them in context to make sure users can guess them. Yes, use tooltips whether you’re using icons or abbreviations, but don’t rely on them for normal use. Abbreviations generally do not need periods, so that will save space.

• If you display the header vertically, you’ll get better readability by writing the text sideways, rather than stacking the letters on top of each other.

• Rather than displaying the header vertically, “bend” the column at the top and display the header text at a 30 to 45 degree angle. Now it only takes a mild tip of the head to read them. That only works, however, if you have a bunch of adjacent columns with long headers.

• For some grids such as where the field values tend to be the same width across different fields (e.g., for showing a train schedule), it makes sense to swap columns with rows. Now you column headers are row headers, which can be a long as necessary without wasting space.

Remember there is no law against horizontal scrolling in a grid. Users have been doing it for years with spreadsheets.

Answer 4

Why not use a stacked 'cloud' above the column hears? If they're really that important to have long, go crazy:

       ________________   _____________
      |Super Long Title| |I'm also long|
               ^            ^
| Foo | Bar |  |   | Baz |  |  | FooBar |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |

Answer 5

Some good solutions already mentioned. Here but another to consider: Use color, number or letter identifiers for the column and a legend.