eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page

Disclosure

Patterns that disclose/reveal content to the user only when needed. Expand/collapse, tabs and menu buttons for example.

PreviousTileNextAccordion

Last updated 4 months ago

is an interaction design technique often used in human computer interaction to help maintain the focus of a user's attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand.

Pattern

Working Examples

Best Practices

Interaction Design

Developer Guide

✓

✓

✓

✓

✓

✓

✓

✕

✓

✓

✓

✓

✓

✓

✓

✓

✓

✕

✕

✕

✓

✓

✓

✓

✓

✓

✓

✓

✕

✕

✕

✕

✕

✓

✓

✕

✓

✓

✓

✕

✓

✓

✓

✓

✓

✓

✓

✓

Progressive disclosure
Accordion
Carousel
Details
Flyout
Footnote
Infotip Button
Lightbox Dialog
Panel Dialog
Pulldown List
Segmented Buttons
Tab
Tooltip