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
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.
No comments:
Post a Comment