Designing for Unknown Content

Learning Goal

To understand the importance of designing for unknown or variable content, including placeholder and empty-state rules, loading states, and documented patterns for cards, lists, and tables.

Who

Designers, UX Writers, and Front-end Developers.

What

This lesson covers the key strategies and techniques for handling unknown or variable content in a design context. We'll explore:

• Placeholder and empty-state rules.
• Variable title length, multilingual handling (wrap/truncate).
• Loading states: Skeleton vs Spinner.
• Documented patterns for cards, lists, and tables.

Where

This lesson is relevant for anyone working on digital products, especially those involving variable or unknown content.

When

This lesson is relevant for when you're designing or developing digital products, including web applications, mobile apps, or any digital medium.

Why it matters

Designing for unknown or variable content matters because it directly impacts the user experience. By implementing proper strategies, you can ensure that your product remains intuitive and engaging, even when the content is incomplete or unknown. This not only enhances the user's journey but also helps in maintaining the overall quality and consistency of your digital product.

How

To tackle designing for unknown or variable content, follow these steps:

1. Understand the requirements: Clearly define the types of unknown or variable content you're dealing with (e.g., placeholders, empty states, loading states).
2. Apply placeholder and empty-state rules: Use placeholders to represent missing or variable content. For empty states, provide a clear, concise message that guides the user on what to do next.
3. Variable title handling: Ensure that titles are truncated to 2 lines and include an ellipsis, and provide a tooltip or link for further information.
4. Loading states: Skeleton vs Spinner: Use skeletons to display stable dimensions and avoid layout shifts, and use spinners for loading states that require more dynamic content.
5. Documented patterns for cards, lists, and tables: Establish documented patterns for these UI elements to ensure consistency and user-friendly interactions.

Self-Check

• Wrap/truncate rules exist.
• Empty state documented.
• Skeleton rules set.

Optional Deepening

• Empty states: https://www.nngroup.com/articles/empty-state/
• Skeletons vs spinners: https://uxdesign.cc/skeleton-screens-what-to-use-instead-of-the-loading-spinner-2fd0f5f4bd2e

Read the lesson →

Playbook 2026 – Day 15

Handle unknown/variable content: wrap/truncate, empty state, skeleton.

Read the lesson →

Issues to fix:

• Lesson does not follow the canonical lesson structure for its course language.
• Lesson does not contain enough markdown section headings.
• Lesson must contain markdown section headings.