Labels

Introduction

Labels are a means to communicate to users the purpose, type, status, function, hierarchy, or requirements of parts of a system or product.

Guiding Principles

  • Leverage labels — Labels are a particularly effective way to communicate to a users as they use your product or system.
  • Narrative + terminology — Pay special attention to using the correct terminology and building narrative cohesiveness when labeling elements.
  • Be succinct — Keep labels short, and to the point.
  • Be specific — Make sure labels are specific enough that they help disambiguate between similar elements or tasks.
  • Make them accessible — Make sure that labels clearly communicate enough meaning on their own (relying only on the page title/purpose for additional context) so that they are understandable when accessed by an accessible technology such as a screen reader.

Design Recommendations

Page Titles

Purpose

Page titles describe the context and function of the current page.

Guiding Principles

  • The page title can be worded as either a task or an object, to best reflect the user's most likely mental map of the web page content.
  • When the page is depicted as a task, the title should be written as an action with a clear goal, using simple language.
  • When the page is an object, the title should include the information that best identifies the page to the user.
  • If there is no object name, but will be when the initial step is completed (e.g., drafting a course proposal), use the task form until the object can be identified. This gives the user feedback that the system has received their input.

Header Labels

Purpose

Headers are the main way to group and contain other components, helping to arrange content in a meaningful way on a page, or even within another container.

Guiding Principles

  • Pay attention to whether a header is acting as a label for grouped content (for which it should be worded as an object rather than a task), and when it is acting as a call to action or guiding a user through a series of steps (for which it should be worded as a task).

Form Field Labels

Purpose

Form field labels describe what data should be input into a form field.

Guiding Principles

  • Objects — Generally, form fields represent objects, not actions, and should be labeled as such. An common exception however are search parameter fields, which are by convention labeled by the task (Search).
  • Association with field - Use text style and placement, rather than punctuation (e.g., colon), to associate a label with its form field or field group.
  • Constraints, Instructions, Help — Don’t use the form label to communicate input constraints, instructions, or other help text.

Button Labels

Purpose

Button labels describe what action will result from pressing a button.

  • Action + Object — Default labels for buttons should be in the form: ‹action› + ‹object type› (e.g. “Save Calendar”).
  • Space constraints — If there is a space constraint, label a button only with the action (e.g. “Save”).
  • Articles — By default, articles should not be used in labels. Use only when the article is necessary to communicate the function of the button (e.g., “Release to Departments”).
  • Icons on buttons
    • One symbol per function — Each unique symbol should map to a unique and specific function, to call attention to an action.
    • Accessibility — In cases where the icon is displayed with accompanying text, care must be given to keep the icon "hidden" from screen readers so the action text isn't announced twice.

Resources