Initial commit with translated description
This commit is contained in:
320
references/21-patterns-progressive-disclosure.md
Normal file
320
references/21-patterns-progressive-disclosure.md
Normal file
@@ -0,0 +1,320 @@
|
||||
# Patterns: Progressive Disclosure
|
||||
|
||||
Patterns for revealing information gradually, on demand.
|
||||
|
||||
---
|
||||
|
||||
## What is Progressive Disclosure?
|
||||
|
||||
Showing only the information users need at each moment, with additional details available on demand. Reduces cognitive load while maintaining access to complexity.
|
||||
|
||||
**Core principle:** Simple by default, powerful when needed.
|
||||
|
||||
---
|
||||
|
||||
## Tooltips & Popovers
|
||||
|
||||
**What:** Small overlays triggered by hover/focus/tap showing additional context.
|
||||
|
||||
### Tooltips vs. Popovers
|
||||
|
||||
| Tooltips | Popovers |
|
||||
|----------|----------|
|
||||
| Text only | Rich content (images, links, actions) |
|
||||
| Hover-triggered | Click-triggered usually |
|
||||
| Auto-dismiss | User dismisses |
|
||||
| Brief explanation | Detailed information |
|
||||
| No interaction | Can contain interactions |
|
||||
|
||||
### Benefits & Use Cases
|
||||
|
||||
- **Explanation** — Clarify icon meanings, abbreviations
|
||||
- **Guidance** — Inline help without cluttering UI
|
||||
- **Preview** — Peek at content before committing
|
||||
- **Details** — Additional info for power users
|
||||
|
||||
### Psychological Principles
|
||||
|
||||
- **Progressive disclosure** — Detail available when needed
|
||||
- **Recognition over recall** — Explanation in context
|
||||
- **Filtering** — Non-essential info hidden until requested
|
||||
|
||||
### Implementation Guidelines (Tooltips)
|
||||
|
||||
**DO:**
|
||||
- Delay appearance (300-500ms) to avoid flicker
|
||||
- Position to not obscure related content
|
||||
- Keep text brief (1-2 sentences max)
|
||||
- Provide keyboard access (show on focus)
|
||||
- Use arrow pointing to trigger element
|
||||
|
||||
**DON'T:**
|
||||
- Use for essential information
|
||||
- Require tooltips to complete tasks
|
||||
- Show on touch without alternative (no hover on mobile)
|
||||
- Put interactive elements in tooltips
|
||||
- Make them too long to read quickly
|
||||
|
||||
### Implementation Guidelines (Popovers)
|
||||
|
||||
**DO:**
|
||||
- Clear close mechanism (X, click outside)
|
||||
- Appropriate max-width for content
|
||||
- Position dynamically (flip if near edge)
|
||||
- Allow interactions within
|
||||
- Consider mobile-specific behavior (bottom sheets)
|
||||
|
||||
**DON'T:**
|
||||
- Nest popovers within popovers
|
||||
- Put critical actions only in popovers
|
||||
- Open on hover (confusing behavior)
|
||||
- Make too large (use a modal instead)
|
||||
|
||||
---
|
||||
|
||||
## Nested Menus
|
||||
|
||||
**What:** Multi-level dropdown menus for hierarchical navigation.
|
||||
|
||||
### Benefits & Use Cases
|
||||
|
||||
- **Hierarchy** — Navigate deep category structures
|
||||
- **Space efficient** — Many options in small trigger
|
||||
- **Organization** — Group related actions
|
||||
- **Power users** — Complex command palettes
|
||||
|
||||
### Psychological Principles
|
||||
|
||||
- **Chunking** — Options grouped logically
|
||||
- **Progressive disclosure** — Deeper options revealed on demand
|
||||
- **Hick's Law** — Hierarchy reduces visible choices at each level
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Limit nesting depth (2-3 levels max)
|
||||
- Clear visual indicator for submenus (arrow)
|
||||
- Appropriate hover delay for submenus (300ms)
|
||||
- Keep submenus visible while navigating
|
||||
- Keyboard navigation (arrows to navigate, Enter to select)
|
||||
|
||||
**DON'T:**
|
||||
- Deeply nest menus (hard to navigate)
|
||||
- Make menus too narrow for content
|
||||
- Require precise mouse movements
|
||||
- Hide critical actions in deep nests
|
||||
- Mix menu types inconsistently
|
||||
|
||||
### Positioning Guidelines
|
||||
|
||||
- Open toward available space (flip if at edge)
|
||||
- Submenus open to side with most room
|
||||
- Consider mobile alternatives (drill-down, bottom sheets)
|
||||
|
||||
---
|
||||
|
||||
## Expandable Rows
|
||||
|
||||
**What:** Table or list rows that expand to reveal details.
|
||||
|
||||
### Benefits & Use Cases
|
||||
|
||||
- **Overview first** — Scannable summary view
|
||||
- **Details on demand** — Expand for more
|
||||
- **In-context** — Details appear near summary
|
||||
- **Comparison** — Compare multiple expanded rows
|
||||
|
||||
### Psychological Principles
|
||||
|
||||
- **Progressive disclosure** — Detail when needed
|
||||
- **Filtering** — Hide details unless requested
|
||||
- **Recall** — Summary aids memory; details available
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Clear expand/collapse indicator
|
||||
- Smooth animation
|
||||
- Distinct visual treatment for expanded content
|
||||
- Allow multiple rows expanded (usually)
|
||||
- Preserve expanded state during interactions
|
||||
|
||||
**DON'T:**
|
||||
- Auto-collapse other rows (usually—unless space critical)
|
||||
- Nest expandable rows within expandable rows
|
||||
- Put primary actions only in expanded view
|
||||
- Make expanded content too tall (becomes a page)
|
||||
- Forget keyboard accessibility
|
||||
|
||||
### Content in Expanded Rows
|
||||
|
||||
- Additional metadata
|
||||
- Action buttons
|
||||
- Related items
|
||||
- Full description
|
||||
- Inline forms (for edit-in-place)
|
||||
|
||||
---
|
||||
|
||||
## Drawers & Sheets
|
||||
|
||||
**What:** Panels that slide in from screen edge, overlaying content.
|
||||
|
||||
### Side Drawers vs. Bottom Sheets
|
||||
|
||||
| Side Drawers | Bottom Sheets |
|
||||
|--------------|---------------|
|
||||
| Desktop primary | Mobile primary |
|
||||
| Navigation menus | Actions, options |
|
||||
| Longer content | Shorter content |
|
||||
| Wider content | Full-width content |
|
||||
| Slide from left/right | Slide from bottom |
|
||||
|
||||
### Benefits & Use Cases
|
||||
|
||||
- **Context preservation** — Main content visible behind
|
||||
- **Temporary focus** — Complete task then return
|
||||
- **Space efficient** — Off-screen until needed
|
||||
- **Navigation** — Mobile nav menus
|
||||
- **Filters** — Search refinement panels
|
||||
|
||||
### Psychological Principles
|
||||
|
||||
- **Progressive disclosure** — Reveal when needed
|
||||
- **Context maintenance** — Don't lose place
|
||||
- **Filtering** — Focused attention on drawer content
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Clear close mechanism (X, tap outside, swipe)
|
||||
- Appropriate width (280-400px for side drawers)
|
||||
- Overlay/scrim behind to focus attention
|
||||
- Animate open/close smoothly
|
||||
- Trap focus within drawer (accessibility)
|
||||
|
||||
**DON'T:**
|
||||
- Make drawers too wide (becomes a page)
|
||||
- Put critical info only in drawers
|
||||
- Stack multiple drawers
|
||||
- Open automatically without user action
|
||||
- Forget keyboard users (Escape to close)
|
||||
|
||||
### Mobile Considerations
|
||||
|
||||
- Bottom sheets generally preferred on mobile
|
||||
- Allow swipe to dismiss
|
||||
- Consider detent heights (partial, full)
|
||||
- Respect safe areas
|
||||
|
||||
---
|
||||
|
||||
## Modals (Dialogs)
|
||||
|
||||
**What:** Overlays that demand attention and require dismissal.
|
||||
|
||||
### When to Use Modals
|
||||
|
||||
- Require user decision (confirm, choose)
|
||||
- Critical information that can't be missed
|
||||
- Focused task (compose, edit)
|
||||
- Interrupt current flow intentionally
|
||||
|
||||
### When NOT to Use Modals
|
||||
|
||||
- Showing information (use popover, drawer)
|
||||
- Non-blocking notifications (use toast)
|
||||
- Navigation (use page, drawer)
|
||||
- Error messages (use inline feedback)
|
||||
|
||||
### Benefits & Use Cases
|
||||
|
||||
- **Focus** — Block other interaction
|
||||
- **Confirmation** — Prevent accidental actions
|
||||
- **Interruption** — Force user to acknowledge
|
||||
- **Isolation** — Complete task before continuing
|
||||
|
||||
### Psychological Principles
|
||||
|
||||
- **Attention capture** — Demands response
|
||||
- **Decision forcing** — User must act
|
||||
- **Context switch** — Clear change of task
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Clear title describing the modal purpose
|
||||
- Primary action prominent (visual emphasis)
|
||||
- Secondary action available (cancel/back)
|
||||
- Close via X button AND clicking backdrop AND Escape key
|
||||
- Focus first interactive element on open
|
||||
- Return focus to trigger on close
|
||||
|
||||
**DON'T:**
|
||||
- Overuse modals (modal fatigue)
|
||||
- Stack modals (one modal opening another)
|
||||
- Require scrolling in modals (usually)
|
||||
- Use for errors that don't need confirmation
|
||||
- Auto-open modals without user action
|
||||
- Disable backdrop click to close (unless destructive action)
|
||||
|
||||
### Modal Sizes
|
||||
|
||||
| Size | Use Case |
|
||||
|------|----------|
|
||||
| Small (400px) | Simple confirmations |
|
||||
| Medium (600px) | Forms, content preview |
|
||||
| Large (800px+) | Complex tasks, multi-step |
|
||||
| Full screen | Immersive tasks (mobile common) |
|
||||
|
||||
---
|
||||
|
||||
## Read More Links
|
||||
|
||||
**What:** Truncated content with option to reveal full text.
|
||||
|
||||
### Benefits & Use Cases
|
||||
|
||||
- **Overview** — Scannable summaries
|
||||
- **Choice** — User decides what to read
|
||||
- **Space efficient** — Long content doesn't dominate
|
||||
- **SEO-friendly** — Full content in DOM
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Natural truncation point (sentence break, not mid-word)
|
||||
- Clear "Read more" link/button
|
||||
- Consider inline expansion vs. navigate to full page
|
||||
- Show character count or reading time for long content
|
||||
- Animate expansion smoothly
|
||||
|
||||
**DON'T:**
|
||||
- Truncate critically important content
|
||||
- Use arbitrary truncation lengths (vary by content)
|
||||
- Truncate to single words ("...")
|
||||
- Hide the only instance of information
|
||||
- Make "Read more" the only way to access content
|
||||
|
||||
### Truncation Guidelines
|
||||
|
||||
| Content Type | Truncation Point |
|
||||
|--------------|------------------|
|
||||
| Card descriptions | 2-3 lines |
|
||||
| Table cells | 1 line with tooltip |
|
||||
| List item descriptions | 1-2 sentences |
|
||||
| Blog excerpts | 150-250 characters |
|
||||
|
||||
---
|
||||
|
||||
## Progressive Disclosure Pattern Selection
|
||||
|
||||
| Need | Pattern |
|
||||
|------|---------|
|
||||
| Quick explanation | Tooltip |
|
||||
| Rich preview | Popover |
|
||||
| Deep navigation | Nested menus |
|
||||
| Detail on demand (lists) | Expandable rows |
|
||||
| Temporary panel | Drawer/sheet |
|
||||
| Required decision | Modal |
|
||||
| Optional full content | Read more |
|
||||
Reference in New Issue
Block a user