Progressive Disclosure

Progressive Disclosure ist ein Interaktionsdesign-Prinzip, das Informationen und Funktionen stufenweise enthüllt — zuerst das Wichtigste, Details und Erweiterte Optionen erst auf explizite Anfrage.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Schrittweise Offenbarung, Staged Disclosure, Layered Interface

Was ist Progressive Disclosure?

Das Konzept wurde von J.M. Carroll und Mary Beth Rosson in den 1980er Jahren im Kontext der Software-Usability-Forschung bei IBM eingeführt. Es basiert auf einer einfachen Beobachtung: Die meisten Nutzer verwenden nur einen kleinen Teil der verfügbaren Funktionen. Wenn alle Funktionen gleichzeitig sichtbar sind, entsteht kognitive Überlastung — Nutzer fühlen sich überwältigt und finden die einfachen Kernfunktionen nicht mehr.

Progressive Disclosure löst dieses Problem durch eine hierarchische Präsentation: Zeige zuerst das, was die meisten Nutzer am häufigsten brauchen. Alles andere ist auf zweiter oder dritter Ebene verfügbar — sichtbar für Experten, unsichtbar für Anfänger.

Erklärung

Das Grundprinzip

Progressive Disclosure folgt dem Pareto-Prinzip (80/20-Regel): 80 % der Nutzer verwenden 20 % der Features. Statt alle Features für alle gleich prominent zu zeigen, werden die 20 % Kernfeatures prominent präsentiert, die restlichen 80 % progressiv versteckt.

In der Praxis manifestiert sich dies auf drei Ebenen:

Niveau 1 (Sofort sichtbar): Die wichtigsten, am häufigsten genutzten Aktionen. Für einen E-Mail-Client: Schreiben, Antworten, Löschen.

Niveau 2 (One Click Away): Weniger häufige, aber wichtige Funktionen. Für denselben E-Mail-Client: Filter, Labels, Regeln.

Niveau 3 (Deep Settings): Selten genutzte Spezialfunktionen. SMTP-Server-Konfiguration, Import/Export, Developer-APIs.

Anwendungsformen

"Mehr anzeigen" / Show More: Die einfachste Form von Progressive Disclosure. Eine Inhaltsmenge ist zunächst auf 3–5 Items beschränkt, mit einem "Alle anzeigen"- oder "Mehr"-Link. Bewährt für:

• Kommentarlisten
• Produktbeschreibungen (erste 3 Zeilen sichtbar, dann "Mehr lesen")
• Navigationslisten mit vielen Items
• Filteroptionen mit vielen Werten

Advanced Options / Erweiterte Einstellungen: Formulare und Dialoge zeigen standardmäßig die wichtigsten Felder. Ein "Erweiterte Optionen"-Toggle oder Akkordeon blendet zusätzliche Einstellungen ein. Dies ist das meistgenutzte Muster in Einstellungs-Interfaces.

Beispiel: Eine E-Mail-Compose-Maske zeigt standardmäßig An, Betreff, Nachricht. "Mehr Optionen" blendet BCC, CC, Priorität, Lesebestätigung ein.

Zweistufige Interfaces: Ein vereinfachtes Interface für Einsteiger, ein erweitertes für Experten. Häufig mit einem Toggle (z. B. "Einfacher Modus / Expertenmodus"). Adobe Photoshop Lightroom bietet "Guided", "Quick" und "Expert" als drei Ebenen desselben Workflows.

Hover-Revelations: Aktionen, die nur im Hover-State erscheinen (z. B. "Löschen"- und "Bearbeiten"-Icons in Listeinträgen). Sauber für Power-User, aber problematisch für Mobile (kein Hover).

Contextual Toolbars: Aktionen erscheinen erst, wenn ein Element selektiert ist. Google Docs Formatting-Toolbar: Ohne Selektion minimal, mit Selektion vollständige Formatierungsoptionen. Kontext definiert die sichtbare Funktionalität.

Wann Progressive Disclosure angemessen ist

Progressive Disclosure ist kein Allheilmittel. Es ist sinnvoll, wenn:

• Eine klare Trennung in "häufig gebraucht" und "selten gebraucht" existiert
• Einsteiger und Experten dieselbe Anwendung nutzen
• Die vollständige Funktionsliste kognitive Überlastung erzeugen würde

Es ist unangemessen, wenn:

• Wichtige Informationen versteckt werden müssen, um Nutzer zu einer Entscheidung zu treiben (→ Dark Pattern)
• Alle Inhalte gleich wichtig sind
• Nutzer regelmäßig zwischen allen Ebenen wechseln (dann ist Verstecken Reibung, nicht Hilfe)

Beispiele

1. Gmail Compose: Standardmäßig minimales Fenster (An, Betreff, Body). "Mehr Optionen" expandiert zu einem vollständigen Compose-Fenster mit BCC, CC, Anhang, Formatierung und Terminplanung. Exzellentes zweistufiges Interface.
2. Apple iOS Kamera-App: Standardmodus zeigt Auslöser, Video-Wechsel und Flash. Wischen nach oben oder Tippen auf Pfeile öffnet erweiterte Optionen (Belichtung, Timer, Filter, Live Photos). Fortgeschrittene Funktionen für diejenigen, die suchen.
3. Figma (Right-Panel): Properties-Bereich zeigt standardmäßig Rahmen, Farbe, Effekte. Detaillierte Typographie-Einstellungen sind hinter einem "..." zugänglich. Text-Layer zeigt Schriftfamilie, Größe, Gewicht prominent; OpenType-Features sind versteckt.
4. Amazon Produktbeschreibung: Lange Produktbeschreibungen sind auf ca. 300 Zeichen oder 5 Zeilen gekürzt mit "Mehr anzeigen"-Link. Nutzer, die genug wissen, sparen Scroll; Nutzer, die mehr wollen, können mehr lesen.
5. Airbnb Buchungs-Flow: Schrittweise Enthüllung von Buchungsdetails: Erster Screen zeigt Preis und Datum. Erst nach Klick auf "Buchen" erscheinen Gastgebernachricht, Abbruchbedingungen, Gesundheitsrichtlinien. Kognitive Last pro Schritt bleibt gering.

In der Praxis (Figma-Umsetzung)

Show-More-Muster:

1. Content-Frame mit Clip Content: true und fester Höhe (z. B. 120 px = 3 Textzeilen)
2. "Mehr anzeigen"-Button darunter
3. Variante expanded: true: Frame ohne feste Höhe, Hug Contents, Button-Label wechselt zu "Weniger anzeigen"
4. In Figma mit On Click → Swap Instance zwischen zwei Varianten umschalten

Advanced Options Toggle: Sekundärer Text-Link oder Chevron-Button ("Erweiterte Einstellungen ▼"). Click → Auto-Layout-Frame expandiert mit versteckten Feldern. Transition: Smart Animate, 200ms.

Contextual Toolbar: Frame opacity: 0 in Default-State. On Click auf Parent-Element → opacity: 1. Nutze Component Properties selected: true/false mit bedingter Icon-Visibilität.

Zwei-Modus-Toggle: Switch-Komponente mit Label "Einfach / Erweitert". Click tauscht den Content-Frame aus. Separate Figma-Frames für jeden Modus, verknüpft durch Overlay oder Swap.

Vergleich & Abgrenzung

Progressive Disclosure vs. Accordion: Akkordeons sind eine spezifische UI-Implementierung von Progressive Disclosure. Progressive Disclosure ist das übergeordnete Prinzip, das auch durch Hover, Modal, Toggle oder separate Seiten umgesetzt werden kann.

Progressive Disclosure vs. Pagination: Pagination ist räumliche Teilung (Seiten). Progressive Disclosure ist funktionale Teilung (Detailtiefe). Beide reduzieren kognitive Last, aber durch verschiedene Mechanismen.

Progressive Disclosure vs. Filtering: Filter zeigen weniger, indem irrelevantes ausgeblendet wird. Progressive Disclosure zeigt weniger, indem komplexes für später aufgehoben wird.

Häufige Fragen (FAQ)

Wie erkenne ich, was auf Level 1 gehört und was auf Level 2? Analysiere Task-Daten (Analytics, Heatmaps): Welche Features werden wie oft genutzt? Interviewe Nutzer: Welche Aktionen führen sie täglich, welche monatlich durch? Die 80/20-Verteilung zeigt sich meist klar in Nutzungsdaten.

Kann Progressive Disclosure auch negative Auswirkungen haben? Ja. Wenn wichtige Funktionen zu tief versteckt sind, werden sie gar nicht erst genutzt — auch wenn der Nutzer Bedarf hätte. Das "Feature-Discoverability"-Problem: Nutzer können keine Features nutzen, von denen sie nichts wissen. Balance zwischen Vereinfachung und Auffindbarkeit ist entscheidend.

Verwandte Einträge

• Accordion-Muster — Spezifische Implementierung von Progressive Disclosure
• Hick-Hyman-Gesetz — Kognitive Last durch Auswahlreduzierung
• Onboarding Patterns — Progressive Einführung in Funktionen

Weiterführend

• Norman, D. A. (2013). The Design of Everyday Things (überarbeitete Ausgabe). Basic Books.
• Lidwell, W., Holden, K. & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.
• Nielsen Norman Group (2006). Progressive Disclosure. nngroup.com.
• Carroll, J. M. & Rosson, M. B. (1987). The Paradox of the Active User. Interfacing Thought. MIT Press.