AgentSkillsCN

ux-progressive-disclosure

识别隐藏复杂性、逐步呈现信息的契机。当需要简化令人望而却步的界面、为新手到专家的过渡设计、减轻初始认知负担,或当用户提及“渐进式披露”、“隐藏复杂性”、“高级选项”、“显示更多”、“简化”或“过于繁杂”时,可灵活运用此方法。

SKILL.md
--- frontmatter
name: ux-progressive-disclosure
description: Identify opportunities to hide complexity and reveal information progressively. Use when simplifying overwhelming interfaces, designing for novice-to-expert transitions, reducing initial cognitive load, or when user mentions "progressive disclosure", "hide complexity", "advanced options", "show more", "simplify", or "overwhelming".

UX Progressive Disclosure Advisor

Design interfaces that reveal complexity only when needed.

Core Principle

Show users only what they need at each moment. Hide advanced options until requested, but make them easily discoverable.

Benefits:

  • Reduces initial cognitive load
  • Supports novice → expert transition
  • Keeps interfaces clean
  • Maintains access to power features

Disclosure Levels

Level 1: Essential (Always Visible)

Information/actions needed by 80%+ of users 80%+ of the time.

Examples:

  • Primary form fields
  • Main navigation
  • Core actions (Create, Save, Delete)

Level 2: Secondary (One Click Away)

Features used regularly but not constantly.

Implementation:

  • "More options" expandable section
  • Secondary tabs
  • Dropdown menus

Examples:

  • Additional filters
  • Format options
  • Sharing settings

Level 3: Advanced (On Demand)

Power features, settings, configurations.

Implementation:

  • "Advanced" link/button
  • Settings page
  • Configuration dialogs

Examples:

  • API configuration
  • Developer options
  • Bulk operations

Level 4: Expert (Discoverable)

Features for specialists, rarely needed.

Implementation:

  • Keyboard shortcuts
  • Command palette
  • Documentation-linked

Examples:

  • Scripting/automation
  • Debug modes
  • Raw data access

Audit Checklist

For each screen, evaluate:

  • Are essential actions immediately visible?
  • Can advanced options be hidden without loss?
  • Is there clear indication that more options exist?
  • Can hidden content be revealed easily?
  • Does revealed content display inline or navigate away?
  • Is level of disclosure appropriate for user expertise?

Patterns to Apply

Expandable Sections

Best for: Related options that some users need

code
[Basic Settings]
└── Name: [______]
└── Description: [______]

▶ Advanced Settings (collapsed)

Show More / Less

Best for: Long lists or content

code
• Item 1
• Item 2
• Item 3
[Show 12 more...]

Tabs / Segments

Best for: Parallel feature sets

code
[General] [Security] [Advanced]
─────────────────────────────
Content for selected tab

Modal / Drawer

Best for: Detailed configuration without losing context

code
Click "Configure" → Drawer slides in with full options

Tooltip / Popover

Best for: Supplementary information

code
Label [?] ← Hover/click reveals explanation

Wizard / Stepper

Best for: Complex tasks that benefit from sequencing

code
Step 1 → Step 2 → Step 3
(Only current step visible)

Anti-Patterns to Fix

Everything Visible

Problem: Screen shows all options at once, overwhelming users Solution: Group into levels, hide Level 3-4 behind "Advanced"

Hidden Essentials

Problem: Important features require discovery Solution: Promote to visible Level 1 or 2

Disclosure Cliff

Problem: Too much revealed at once when expanding Solution: Add intermediate disclosure level

No Indicator

Problem: Users don't know more options exist Solution: Add "More options", counts, or visual cues

Modal Overload

Problem: Advanced options open complex modal with many tabs Solution: Simplify modal or use inline expansion

Output Format

code
# Progressive Disclosure Analysis: [Screen/Feature]

## Current State
- Visible items: X
- Hidden items: X
- Disclosure mechanisms: [List]

## Recommended Disclosure Levels

### Level 1: Essential (Always Visible)
| Element | Rationale |
|---------|-----------|
| [Item] | [Why essential] |

### Level 2: Secondary (One Click)
| Element | Trigger | Rationale |
|---------|---------|-----------|
| [Item] | [How to reveal] | [Why secondary] |

### Level 3: Advanced (On Demand)
| Element | Location | Rationale |
|---------|----------|-----------|
| [Item] | [Where to access] | [Why advanced] |

## Specific Recommendations

| Current | Change | Pattern | Impact |
|---------|--------|---------|--------|
| [Item visible] | Hide behind "Advanced" | Expandable section | Reduces initial load |
| [Item hidden] | Promote to visible | — | Improves discoverability |

## Implementation Notes
- [Specific UI changes needed]

Decision Framework

For each element, ask:

  1. How often is this used?

    • Weekly+ → Level 1
    • Monthly → Level 2
    • Rarely → Level 3-4
  2. Who uses this?

    • All users → Level 1
    • Power users → Level 2
    • Specialists → Level 3-4
  3. What's the cost of hiding?

    • User fails task → Don't hide
    • User takes longer → Consider indicator
    • No impact → Safe to hide
  4. What's the cost of showing?

    • Significant clutter → Hide
    • Minor clutter → Evaluate priority
    • No clutter → Show

References

For disclosure pattern examples: See references/disclosure-patterns.md