Placeholder text
Replace lorem ipsum text with relevant examples or custom placeholder content.
This section outlines guidance for using mid-fidelity content as placeholder text in user-facing contexts. This generally means replacing lorem ipsum text with descriptive text to provide additional context and meaning within prototypes.
Medium fidelity content
Medium fidelity content, also known as mid-fidelity content, refers to text and labels that describe an element or use case. This is different from low-fidelity content, like lorem ipsum text, or high-fidelity content you’d find in a functional interface.
- Use medium fidelity content when planning and prototyping, as it helps communicate the purpose of an element without requiring substantial content support.
Do Use mid-fidelity content and generic labels to help orient users and provide context about the purpose of an element.
Don't Use low fidelity content and lorem ipsum in prototypes, as this can make elements unclear or hard to identify.
Do Use numbers to differentiate text in the same category to add clarity and indicate it’s not the same repeated item.
Don't Repeat the same text within one category, as this makes it hard to differentiate between items.
Naming formula
To ensure mid-fidelity labels are clear and descriptive, VPDS recommends using the descriptor + text category formula. This formula results in labels that are clear and descriptive by combining contextual information (descriptors) with text that identifies the purpose of the label (text categories).
Note: Descriptors can be left out of labels if the text category provides sufficient context. However, the text category should always be included.
Descriptors
Descriptors specify the exact element being labeled with context like location, category, or type. They help indicate sequential order, hierarchy, grouping, or placement. Here are the most common ones used throughout VPDS:
- Component names (like button, checkbox, or link)
- Group
- Level (like L1, L2, L3)
- Page
- Primary, secondary, tertiary
- Section
- Variant names (like informational, success, warning, or error)
Note: Use simple descriptors whenever possible, avoiding terms like 1st, 2nd, 3rd, first, second, third, or primary, secondary, or tertiary, as they become complicated beyond the third position. An exception to this rule is calls to action, where labeling “Primary action” and “Secondary action” are common.
Text categories
Text categories indicate the type of content being used in an element. These are an essential piece of mid-fidelity labels and should always be included. Here are the most common ones used throughout VPDS:
- Action (for buttons)
- Body text
- Header (for tables)
- Heading
- Label
- Subtitle
- Subheading
- Title
Examples
Below are examples of this naming convention formula used in context. For the specific naming conventions of each component, refer to their respective anatomy diagrams at the top of each page.
In this example, “group label” isn’t just any label, but one that describes the whole group of elements.
In this example, “Section title” differentiates the anchor links in one section of the page from the title of the entire page.
Inline messages
In components, descriptive text is known as an inline message and typically appears below the main text category like a title or label. Inline messages can be optional or required depending on the context or state of a component.
- When composing generic inline messages, follow this formula: “This is required/optional text that describes the component name / text category in more detail.”
Having both the component name and text category isn’t always required. In some situations, it helps to refer to the component name if it looks similar to other components when taken out of context. In other instances, such as with more easily recognizable components, referring to just the text category is easier and simpler.
Constantly referring to the checkbox component within each element can get repetitive when users know which component they’re looking at.
As titles are turned off for banners by default, and banners may be confused with flags or section messages, it’s helpful for the message to refer specifically to the component name.
Empty states
Inline messages should also be included in the empty state of a component to inform users when there’s no data to display in their current view. This can happen if searching or filtering yields no results, data hasn’t been added to an element, or the user doesn’t have permission to view the data. Reference Feedback and status for more information.
Custom content
Custom or fictitious content can be added to prototypes to help further indicate contextualize elements or add examples. Use this level of specificity when trademarked brands can’t be used but a real or simulated use case is needed to provide deeper context than generic labels. Refer to Fictitious brands for more guidance.
