UI Text Patterns

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

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 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.

https://www.a11yproject.com/posts/how-to-accessible-heading-structure/

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

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 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.