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.