UI text patterns

Reusable pieces of content to establish thoughtful, scalable, and consistent language

UI text patterns

Overview

UI text patterns are our building blocks of writing. They’re not attached to one component but appear across all experiences. Text patterns are distinct from each other. The differences between them are a matter of purpose, length, information architecture, and user perception.

Why UI text patterns are useful

With text patterns defined, we don’t have to reinvent the wheel every time we’re about to design another piece of content. Instead, we have a scalable solution that speeds up our writing process. But text patterns don’t only enable faster design—they improve internal communication, too. When we all know what’s a label and how it’s different from a description, we avoid misunderstandings and work efficiently.

Purpose and content

The purpose of a particular text pattern is always the same, but its content can differ. A heading can be conversational (onboarding flows, product announcements) or succinct, for example, when we need to guide people through a multi-step journey. In both cases, a heading emphasizes the essential information in the hierarchy. But knowing people’s state of mind, scenario, and the way people read online, we can apply tone and style that will help them accomplish their goals.

Component-specific guidelines will be included in the component documentation.

UI text patterns

Heading

Headings

Headings indicate the highest levels of the information hierarchy, from most to least important.

Purpose

  • Emphasize the essential information in the experience to make it easy to scan the content
  • Make people immediately understand the place they’re in

Content

  • Nouns, for example: Testers
  • Phrases, for example: Number of testers
  • Sentences, for example: Hire testers from our Panel

Further read

How-to: Accessible heading structure - The A11Y Project

Headings are the backbone of the content of a page. A visitor should be able to scan or navigate a webpage using headings to get a good impression of its content.

Description

Description

A text providing the necessary context and explanation. It communicates additional information to help people progress and make a decision.

Content

  • Phrases, for example: Image presented to testers
  • Full sentences, for example: It’s an image that testers will see during the test
  • Larger chunks of text, for example: It’s an image that testers will see during the test. We support PNG, JPG, and GIF formats. You can upload a file up to 1MB.

Label

Labels

Label is a text that indicates or briefly describes the smallest elements in the experience: icons, categories, numbers, status, etc. It provides information to help people understand the experience in detail.

Content

  • Adjectives, for example: Total
  • Nouns, for example, Gender
  • Phrases, for example: Number of participants

Button label

Button label

Button label is an interactive text that indicates the action people perform.

Its purpose is to make people understand what happens when they perform an action.

Content: One to three words, noun + verb combination, reduced punctuation, for example: Complete order.

Link text

Link text allows people to go to a different place. It indicates the place where people will be taken to.

Content: Short sentences, for example: Learn how to use Clips.

Acknowledgements

The concept of text patterns is influenced by Torrey Podmajersky’s Strategic Writing for UX, a book where Torrey gives guidance on how to design consistent content. For us, text patterns also became a tangible way to structure and organize the documentation. We want to thank Torrey for the inspiration.