Progressive Disclosure

Introduction

Progressive disclosure is a technique for designing user interfaces that reduces complexity by revealing only the essentials for a current task and then reveals more as users go further.

Basics

Content progressive disclosure ensures that users aren't overwhelmed with too much detail too soon. Users are led through tasks where they can choose to follow paths for more information or more advanced tasks.

Remember: You are building a guided journey, not a scavenger hunt.

• Reveal information in an ordered manner. Each assistance element or pattern that you use builds on the previous one in a flow that provides progressively more information.
• Don't use one assistance pattern to repeat another.
  • Bad example:
    • Field label: Password
    • Hover text: "Enter password" or simply "Password"
  • Good example:
    • Field label: Password
    • Hover text: "Must be 8 characters or longer with at least one number and special character."
• Provide only the details that are necessary at a given time.
• Provide a clear trail for the user.
• Build on the content as you go based on your clear understanding of the value your users get out of your product.
• Clearly identify the users tasks in your product and plan your progressive disclosure pattern based on that user knowledge.

REMEMBER:  Content is Product doc, Support, Training, Developer, Community take them into account as you consider the content patterns your users need.

Progressive disclosure model

The content progressive disclosure pattern contains the following elements:

Design content for each layer of progressive disclosure following the guidelines shown above. When implementing the pattern, design in-application assistance within a broader information architecture so that you can provide a good flow of information.

Make use of the expertise that exists in the community by requesting help from other teams.  #ibm-techcontent

In-App content

In-application content encompasses all text that users encounter in all types of products, including all text in user interfaces, but also even command names; users use all terms to form a mental model about what to do. IBM Design team has extensive information in the Carbon standards for content and is a great resource for discovering in-application guidance possibilities (IBM Carbon). In-application carbon elements include:

• Help: Menu,
• Help: Pop-up,
• Intro Popup,
• Field Hints,
• Instructional text for UI section,
• Instructional text for blank UI,
• Messages,
• Messages: Banner,
• Messages: Field-level,
• Messages: Nag,
• Tooltips,
• Badges,
• Breadcrumbs.

In-application touring elements include:  **3rd party WalkMe or other open-source tools needed.

• Videos,
• Welcome screens,
• Basic task tours,
• Complex task tours,
• Tour menus,
• Nurture and
• What's new

We cannot limit in-app content to encompass only instructional UI text, hover text, or a tours, the era of AI is upon us. Users don't see a separation between product and information and nor, should we.

In-applications elements for other patterns include:

• Logged messages
• Command and parameter names
• API names
• Reports
• AI explainability
• AI training

Web content

Web content encompasses all text that is delivered and encountered by users on the web, including pre-sales content, marketing content, developer content, knowledge center content, community content, and others. This content could be created by IBMer professional writers or by non-writers either internal to IBM or external users of the products who contribute to forums.

Web content locations in IBM include:

• IBM Community
• IBM Developer
• IBM Fix Central
• IBM Knowledge Center
• IBM Cloud docs
• IBM Redbooks
• IBM Support
• IBM Training and skills

Web locations where you might find content not owned by IBM:

• Reddit
• Stackoverflow
• Twitter

Resources