Progressive Disclosure

Einfach erklärt

Progressive Disclosure zeigt erst das Wichtigste – Details kommen auf Anfrage.

Level 1 (Default):
┌─────────────────────────────┐
│ Empfehlung: Produkt X      │
│ Confidence: 92%            │
│ [Details anzeigen ▼]       │
└─────────────────────────────┘

Level 2 (Expandiert):
┌─────────────────────────────┐
│ Empfehlung: Produkt X      │
│ Confidence: 92%            │
│                            │
│ Hauptgründe:               │
│ • Ähnlich zu deinen Käufen │
│ • Beliebt bei Nutzern wie dir │
│                            │
│ [Technische Details ▼]     │
└─────────────────────────────┘

Technischer Deep Dive

HTML-Pattern

<div class="prediction">
  <h3>Ergebnis: Kategorie A</h3>
  <p>Confidence: 87%</p>
  
  <details>
    <summary>Warum?</summary>
    <ul>
      <li>Feature X: +45%</li>
      <li>Feature Y: +32%</li>
    </ul>
    
    <details>
      <summary>Technische Details</summary>
      <pre>SHAP values: ...</pre>
    </details>
  </details>
</div>