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.

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?

share|improve this question

4 Answers 4

up vote 6 down vote accepted

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

alt text

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:

alt text

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:

alt text

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.

share|improve this answer
    
I like both ideas you suggest. The ellipsis or fade out techniques are elegant and definitely need to display the complete name. Why not on column hover and not only header hover? I don't like tooltips like in standard HTML because of their speed and position, but there are certainly ways to improve them. Condensing text is great and I now remember having seen it on the iPhone. I will certainly explore it. –  Mart Oct 1 '10 at 2:47
    
The tooltip that's displayed should depend on what you're hovering. Note in the mockup that Row 2 is also being faded. So you're right (I should have clarified this earlier): show column header's tooltip only if the column header is hovered. Show Row 2's tooltip if the mouse is hovering the cell that intersects Row 2 and the first column. You are also correct about the speed of tooltips. An alternate approach would be to display the full name in a status bar-like area, where it would appear instantly instead of having to pause the mouse cursor before the tooltip appears. –  Hisham Oct 1 '10 at 5:04
    
I perfectly understood your first answer, I was just thinking about its fine tuning. I'm accepting your answer as I feel it has the biggest potential. Other answers also have good ideas, maybe this question can be converted as a community wiki? –  Mart Oct 4 '10 at 19:09
    
Truncating the header is a particular good solution when the column size is user adjustable, so the designer doesn't know the size of the space to choose the best abbreviation. –  Michael Zuschlag Oct 6 '10 at 13:27

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.

alt text

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.

share|improve this answer

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.

share|improve this answer
    
Good point for the bent header. It's easier to read without bending the head. Horizontal scrolling is possible in certain cases if you keep at least one reference column visible, otherwise you get lost quickly. I also favor vertical scrolling as it is available on the mouse (I don't consider mouse horizontal scrolling as usable at all). –  Mart Sep 30 '10 at 13:40

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   |
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.