Home > Tutorials > Designing User Interfaces > Labels

Labels

A label is an interface component that is used to describe other interface components, such as text fields and combo boxes.

Labels are not traversable and not interactive. They do not receive keyboard focus and they do not directly respond to any user input.

In user interface toolkits, a label more generally is an interface component that is used to display text or graphics. Labels may be used not only for labeling components but also for displaying section headers or icons.

In most toolkits, labels are limited to a single line of text or a single graphic or a combination of the two.

The background color of a label is usually the background color of the window client area. Generally, setting the background color of a component to the background color of the window client area is used to indicate that a component cannot be modified.

Labels usually do not have a border. In a number of windowing systems, borders are used to indicate that a component is traversable and interactive.

A label is disabled when the component it describes is disabled. Generally, components are disabled when they are unavailable in the given context. Disabled components are usually grayed out. For this reason, the terms disabled and grayed out are often used interchangeably.

Wording

Keep labels short. Try to limit them to one or two words.

Avoid abbreviating labels. If a label needs to be abbreviated, use one of the following methods:

  • truncation (e.g., Trunc for Truncation)
  • vowel drop (e.g., Strt for Start)
  • contraction (e.g., Ccy for Currency)
  • convention (e.g., Qty for Quantity)

[PENDING: Review research on abbreviations.]

Do not include punctuation for abbreviations or acronyms. Punctuation takes up space and reduces readability.

If the component contains values in a specific unit and the unit of measurement may not be immediately obvious to users, then add the unit of measurement in brackets at the end of the label. For example, Distance (km), Speed (mi/h), Height (in), etc. It is also possible to display the unit of measurement without brackets to the left of the component, e.g., Distance _________ km. However, if the component is long, there is a greater chance that users might miss the unit of measurement. Including the unit of measurement in the label is certainly safer.

A number of guidelines recommend to add a symbol at the end of the labels, usually a colon (":"). The symbol indicates that the text is a label and creates a visible separation between label and component. This was certainly necessary on mono-colored, text-based user interfaces where there was not other way to distinguish labels from text fields. However, there is no need for it in modern graphical user interfaces where components are usually distinguished from labels by different background color and borders around the components. If you have a lot of space, using or not using colons probably does not make a difference. However, if you are short on space, you can safely omit the colons as long as you provide other indicators (background color, border) that enable users to distinguish labels from components.

Capitalization

Display labels in mixed case. Capitalize the first letter of each word except for articles, coordinating conjunctions, and preposition. This is also called headline-style or up-style capitalization. This is in contrast to sentence-style or down-style capitalization used in ordinary written English sentences.

In sentence-style capitalization, only the first word and all proper nouns and proper adjectives are capitalized. In headline-style capitalization, all words are capitalized except articles (a, an, the), coordinating conjunctions (and, but, or, for, nor), and prepositions, unless they are the first or last word. The to in infinitives is also lowercased. In hyphenated compounds the second and subsequent elements are capitalized unless they are articles, coordinating conjunctions, or prepositions.

The Windows Interface Guidelines for Software Design (Microsoft, 1995, 387-388) recommend to use headline-style capitalization for menu items, push buttons, tabs, title bar text and icon label, and sentence-style capitalization for combo boxes, check buttons, radio buttons, and border headings.

By the way, to capitalize a word means to capitalize only the initial letter. A word printed in all capital letters is said to be set in full caps.

Layout

Place labels above or to the left of the component it describes. It is more common to place labels to the left of a component. However, it has been suggested that placing labels above components is advantageous for international applications. It provides more flexibility for labels of different lengths in different languages. However, we believe that this is only a problem if using the application uses absolute label and component positions. We usually recommend relative positioning that does not only support change to label length but also to changes in font.

If you have a number of components, arrange them into columns. Left-align the components in the column. You have the choice of either left-aligning or right-aligning the labels. If labels are left-aligned, they are easier to scan. This is useful if users are likely to search for particular labels. In contrast, if labels are right-aligned they are closer to the visual focus when users scan components. Usually we recommend right-aligning labels.

Some applications have two columns of identical components. For example, in a medical application the columns might represent a patient's characteristics before and after treatment. If the corresponding components are placed next to each other, there is no need for two sets of labels. One set of labels is sufficient. The labels can be placed to the left of the components or centered between components. We have seen both arrangements in existing applications and we have no data on their relative advantages.

For our next update we plan to add some graphics in order to illustrate some of the issues discussed on this page. Also, references are still missing.

Top