Verwendung
Akkordeons sind großflächig angelegte Regionen auf einer Seite mit im Kopfelement integrierter Ein- und Ausklappfunktion. Sie werden verwendet, wenn einem thematischen Oberbegriff zugeordnete Inhalte strukturiert und gruppiert werden sollen. Sie kommen vor allem zum Einsatz, wenn große Datenmengen überschaubar und platzsparend dargestellt werden sollen. Sie überlassen es den Nutzenden selbst, ob sie diese Informationen anzeigen lassen möchten.
Im Gegensatz zu einer Tabelle oder einer Liste können Nutzende bei Akkordeons Details einer Datenmenge flexibel ein- und ausblenden. Die entsprechende Funktion kann durch einen Pfeil-Icon vom Typ Chevron in einem rahmenlosen Icon-Button auf der rechten Seite oder über Klick bzw. Tap auf die Beschriftung ausgelöst werden werden.
Die Inhaltsbereiche der Akkordeon-Panels können individuell gestaltet werden, z. B. in Form von Filtern mit integrierter Suche an Tabellen. Andere Anwendungen dieses Musters sind der Footer des Seitenrahmens, der von der dreispaltigen Darstellung auf Desktop-Geräten zu einem eingeklappten Akkordeon auf mobilen Geräten wird. Ein weiteres Beispiel ist das als Muster etablierte Hamburger-Menü mit seinen Untermenüs (hier: Konto) im Header des Seitenrahmens.
Akkordeons können auch das geeignetere Muster sein, wenn optionale Informationen nicht dauerhaft sichtbar sein sollen und die benötigte Textmenge zu groß oder aufgrund benötigter Formatierungen und Links ungeeignet für ein Tooltip ist.
Positionierung & responsives Verhalten
Ab dem Breakpoint XS (≥ 0px)
- Das Akkordeon nimmt die volle Breite des Viewports ein.
- Das Akkordeon darf nicht innerhalb anderer Inhalts-Container mit eigenständiger Funktionalität wie z. B. Kacheln platziert werden.
- Das Akkordeon sollte als letzte Komponente des Inhaltsbereichs (vor dem Footer) positioniert werden.
Ab dem Breakpoint MD (≥ 768px)
Das Akkordeon streckt sich von Beginn der ersten bis zum Ende der letzten Gridspalte.
Beschriftung
Akkordeons besitzen immer mindestens ein Akkordeon-Panel, das in der Regel initial ausgeblendet ist und geöffnet werden muss. Das bedingt, dass alle im Akkordeon enthaltenen Panels eine sinnbildend betextete (Zwischen)-Überschrift beinhalten, die als öffnendes Element klar kommuniziert, was sich hinter dem ausgeblendeten Panel verbirgt.
Die beschreibenden Überschriften des Akkordeons sollen in die Überschriftenstruktur der Seite und deren logischer Reihenfolge eingebunden sein.
Panels ohne diese Zwischenüberschrift, die nur den Icon-Button zum Öffnen und Schließen beinhalten sind nicht erlaubt. Eine Ausnahme bildet hier das Hamburger-Menü.
Interaction Design
Ein Klick auf die Beschriftung bzw. Tap auf Touch UIs sowie die Eingabe (Enter) oder Leerschritt bei Tastaturbedienung auf einem fokussierten Element öffnet das zugeordnete Akkordeon-Panel; eine erneute Interaktion schließt das Akkordeon-Panel wieder.
Akkordeons sind nie exklusiv, d. h. das Öffnen eines zweiten Akkordeon-Panels oder eine Interaktion mit einem anderen Element schließt nie ein bereits vorher geöffnetes anderes Panel.
Best Practices
- Wesentliche Informationen, die zwingend von den Nutzenden wahrgenommen werden müssen dürfen nicht in Akkordeons platziert werden, sondern müssen als initial sichtbare Inhalte angezeigt werden.
- Akkordeons dürfen keine wichtigen Informationen zu rechtlichen Angaben oder zum Datenschutz enthalten.
- Akkordeons dürfen nicht ineinander verschachtelt werden.
- Akkordeons dürfen keine Tab-Panels oder vergleichbar komplexe Komponenten enthalten.
- Akkordeon-Inhalte sollen eine überschaubare Anzahl an Informationen beinhalten. Einzelne Akkordeon-Panels mit Überlänge, die nur durch langes Scrollen vollständig erfasst werden können, sollten redaktionell in mehrere einzelne Akkordeon-Panels aufgeteilt werden.
- Akkordeons sollen inhaltlich nicht überfrachtet werden. Ist der Inhalt eines Akkordeons zu umfangreich, sollte über die Verwendung von Dialogen oder Unterseiten nachgedacht werden.
- Interaktionen mit Inhalten eines Akkordeon-Panels beziehen sich nur auf ihren eigenen Kontext und nicht auf Inhalte anderer Akkordeon-Panels.
- Wenn JavaScript im Browser nicht ausgeführt werden kann, dann sollen Akkordeons vollständig geöffnet dargestellt werden.
Do’s and Dont’s
So:
- Optionale Inhalte
- Optionale Formularelemente
- Wohlstrukturierte überlange Inhalte
So nicht:
- Formulare die wesentlich für die Maske sind
- Inhalte mit rechtlichen oder finanziellen Auswirkungen, die von den Nutzenden zwingend wahrgenommen werden müssen
- Verschachtelte Akkordeons
- Komplexe Datentabellen mit einer höheren Anzahl von Spalten
- Tab-Panels in Akkordeons
