Progressive Disclosure ist ein Gestaltungsprinzip, das zuerst die häufig gebrauchten Optionen zeigt und die selteneren erst auf Abruf einblendet. Jakob Nielsen hat es für Oberflächen beschrieben, die einfach wirken und trotzdem alles können müssen. Der Druckdialog ist das Musterbeispiel: Anzahl der Kopien und Auswahl des Druckers stehen offen, die Skalierung liegt hinter den weiteren Optionen.
- Progressive Disclosure
Gestaltungsprinzip, das zuerst die häufig gebrauchten Optionen zeigt und die selteneren erst auf Abruf einblendet.
Beispiel: „Die Lieferadresse steht offen, die abweichende Rechnungsadresse klappt der Besucher bei Bedarf auf.“Auch: schrittweise Offenlegung. Der deutsche Ausdruck ist selten, in Projekten hat sich der englische Begriff durchgesetzt.
Gegenbegriff: Staged Disclosure verteilt einen Ablauf auf eine feste Folge von Schritten, etwa im Bestellprozess. Progressive Disclosure lässt den Besucher auf der ersten Ebene und stellt ihm die zweite frei.
Die Aufteilung entscheidet über den Nutzen
Die Wirkung steht und fällt damit, was auf der ersten Ebene landet. Nielsen nennt dafür eine einfache Regel: Alles, was häufig gebraucht wird, steht vorn. Welche Option das ist, zeigt die Auswertung der bestehenden Seite oder eine Beobachtung im Test.
Der häufigste Fehler ist die Aufteilung nach der Bedeutung, die eine Abteilung im Haus einer Angabe beimisst. Dann steht das selten gebrauchte Feld oben, und die alltägliche Auswahl verschwindet hinter einem Link.
Der Auslöser muss verraten, was dahinter liegt
Eine zweite Ebene nützt nur, wenn sie gefunden wird. „Mehr“ sagt wenig, „Weitere Zahlungsarten“ sagt genug. Dazu gehört ein Auslöser, der als Bedienelement erkennbar ist und seinen Zustand zeigt, also offen oder geschlossen.
Wir empfehlen außerdem, die Anzahl der Klappstellen pro Seite klein zu halten. Zehn geschlossene Blöcke untereinander verlagern die Arbeit nur vom Lesen zum Suchen.
Im Web reicht dafür oft ein HTML-Element
Für den einfachen Fall braucht es kein JavaScript. Das Element details mit einer summary bringt Auf- und Zuklappen, Tastaturbedienung und die passende Ansage für Screenreader von sich aus mit.
<details>
<summary>Abweichende Rechnungsadresse</summary>
<!-- Felder, die die Mehrheit der Besucher leer lässt -->
</details>An einer Stelle ist die Grenze erreicht: Ein Pflichtfeld gehört nach oben. Wenn es doch eingeklappt bleibt, muss der Block beim Absenden von selbst aufgehen, damit die Fehlermeldung am richtigen Feld sichtbar wird.