Truncating long text labels - Best Practices?

Question

I was wondering whether there are any studies around truncated labels, in case if they ever get too long and layouts can't fix it? Does it confuse users if a label is truncated with an ellipsis character in the middle of a label like so:

• LabelBeginning...LabelEnd

  or

• LabelBeginning (...) LabelEnd

If I compare different text style guidelines there are different approaches. Apple e.g truncates long labels with an ellipsis in the middle of a label, which I think is a great solution as I think it reflects how people scan and identify a label (beginning and end).

"An ellipsis character can also show that there is more text than there is room to display in a document title or list item. If, for example, the name of an item is too long to fit in a menu or list box, you should insert an ellipsis character in the middle of the name, preserving the beginning and the end of the name. This ensures that the parts of the name that are most likely to be unique are still visible."

Microsoft suggests to avoid truncating labels wherever possible, but doesn't go into detail in how to implement an ellipsis in long labels.

"Ellipses mean incompleteness. Use ellipses in UI text as follows:

• Commands. Indicate that a command needs additional information. Don't use an ellipsis whenever an action displays another window—only when additional information is required. Commands whose implicit verb is to show another window don't take an ellipsis, such as Advanced, Help, Options, Properties, or Settings.

• Data. Indicate that text is truncated.

• Labels. Indicate that a task is in progress (for example, "Searching...").

Tip: Truncated text in a window or page with unused space indicates poor layout or a default window size that is too small. Strive for layouts and default window sizes that eliminate or reduce the amount of truncated text. "

Answer 1

Summary: It depends, but default to 'abcdef...' over 'abc...def'

I would choose the method on the basis of whether text at the end or in the middle of the string is more likely to differentiate the item. This would be dependent on the domain (so I don't think isolated studies from particular contexts would be helpful).

On a property website, for instance, an address string will usually end 'Road' or 'Street'. So the form 'abc...def' won't be much use as the final characters will almost always be 'oad' or 'eet', neither of which help the user.

If the answer is not clear, I would then default to the 'abcdef...' form over 'abc...def'. This is because I strongly suspect that partial words will be easier to guess from the initial characters than the end ones. 'Openi...' is much more recognizable than '...ening', for example. This is because many English words have non-unique suffixes and ending patterns.

Answer 2

Using ellipsis has a disadvantage, in that the ellipsis itself takes space that could have been used to display more of the actually useful information instead. Especially if you use the ellipsis at either end, you might consider an alternative to the space wasting three dots: fading out the text over the last few characters. The text stays readable, but the fading out gives a cue that there is more text to be had.

For instance:

(source of the image)

Of course it is always better not to have to do this on labels, so by all means: do try to avoid it, but if you are really stuck between a rock and a hard place, this might be a solution.

Answer 3

There is a non-written rule, that instead seems to be set in stone, about not breaking labels.
Possibly many layouts would badly break if one tried to set a two-line label, which could be one explanation.
That said, I would not truncate a long label but instead I'd break it in as many lines as necessary, also breaking the (boring) regular spacing of the label + field cadence in the form design.
The rationale is that the form has to be designed after the user's convenience, and that not puzzling the users with tricky unneeded interactions (like clicking ellipsis) is better for them, like not puzzling them with abbreviated text that might turn out to be a cryptic for a foreign language speaker.
Tweaking the labels in order to achieve design consistency is putting form before content.
Is letting the cruel designer rule over the user's clarity cravings.

Answer 4

Where there is a real need to truncate a label, where to put the ellipses depends on data. The default is normally at the end, however for some data it is better to see part of the beginning and the end. But the later takes up more space as you need to display enough characters at both the beginning and the end. For other data, numbers for example, displaying the ellipses at the beginning is better - if the last digits are most significant. However you should design to try to avoid this as mentioned in other posts.

Answer 5

Needing to truncate a label is in a sense a failure itself, but I know sometimes despite our best efforts we get jammed up in unavoidable situations.

One possibility is to use elipses at the end of available space but make it a button-like thing (not a standard grey button, but something that is obviously clickable but blends in more with the text it's attached to). When clicked the "button" expands into the remaining text, which also has that "button" style. When the expanded text "button" is clicked it collapses back into the ellipses button.

At first I thought make a hover action to show the full text, but that won't work on touch devices.