Accordion-Muster

Accordion-Muster ist ein UI-Designmuster, das Inhaltsbereiche hinter klickbaren Überschriften versteckt und bei Interaktion auf- oder zuklappt, um Platz zu sparen und kognitive Überlastung zu reduzieren.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Akkordeon, Expandable Section, Collapse/Expand, Disclosure Widget

Was ist das Accordion-Muster?

Das Akkordeon ist nach dem Musikinstrument benannt: Wie ein physisches Akkordeon, das beim Ziehen und Stauchen seine Form verändert, expandiert und kollabiert das digitale Muster Inhaltsbereiche. Es ist eines der ältesten und bekanntesten Interaktionsmuster im Web — fast jede FAQ-Sektion nutzt es. Trotz seiner Verbreitung wird es häufig falsch eingesetzt: als generelle Lösung für zu viel Inhalt, statt als gezieltes Werkzeug für spezifische Informationsarchitektur-Probleme.

Erklärung

Anatomie eines Akkordeons

Ein Akkordeon besteht aus mehreren Items, jeweils bestehend aus:

1. Header/Trigger: Die immer sichtbare Überschrift, die beim Klick den Inhalt einblendet. Enthält typischerweise einen Titel und ein Indikator-Icon (Pfeil oder Plus/Minus), das den Zustand signalisiert.
2. Content-Panel: Der verborgene Inhalt, der beim Expandieren sichtbar wird. Kann Text, Listen, Bilder, Formulare oder andere Komponenten enthalten.

Icon-Konventionen:

• Pfeil (▼/▲): Zeigt Richtung — häufigste Variante
• Plus/Minus (+/−): Intuitiv für "hinzufügen/entfernen" von Sichtbarkeit
• Chevron (›/‹): Ähnlich wie Pfeil, aber richtungsunabhängiger
• Regel: Icon dreht sich beim Expandieren (Rotation 0° → 180°), nicht einfach wechseln

Exclusive vs. Inclusive Accordion

Exclusive Accordion (nur eines offen): Zu jedem Zeitpunkt kann maximal ein Item expandiert sein. Wenn Nutzer ein anderes Item öffnet, schließt das vorherige automatisch. Vorteil: Platzkontrolle. Nachteil: Nutzer können keine zwei Items gleichzeitig vergleichen.

Inclusive Accordion (mehrere offen möglich): Mehrere Items können gleichzeitig geöffnet sein. Vorteil: Flexibilität für Nutzer, die verschiedene Abschnitte vergleichen wollen. Nachteil: Seite kann sehr lang werden.

Empfehlung: Für FAQs (keine Vergleiche nötig) → Exclusive. Für Einstellungs-Akkordeons oder Filterabschnitte (Vergleiche sinnvoll) → Inclusive.

Wann Akkordeons sinnvoll sind

FAQs: Der Klassiker. Überschriften geben einen klaren Überblick, Antworten sind bei Bedarf verfügbar. Nutzer müssen nicht alle Antworten lesen — nur die, die sie interessieren.

Mobile Navigation: Navigation-Akkordeons in mobilen Sidebars erlauben Unterpunkte ohne eigene Seite. Parent-Item öffnet Children-Items.

Einstellungs-Kategorien: Lange Einstellungsseiten (Profil, Sicherheit, Benachrichtigungen, Datenschutz) können durch Akkordeons in überschaubare Abschnitte unterteilt werden.

Sidebar-Filter: E-Commerce-Filter als Akkordeons (wie auf Amazon) — jede Filterdimension ist kollabierbar.

Wann Akkordeons nerven

Wenn alle Inhalte immer relevant sind: Akkordeons erzeugen Klickaufwand. Wenn Nutzer typischerweise alle Abschnitte lesen, ist es besser, alles direkt sichtbar zu zeigen.

Wenn Inhalte sehr kurz sind: Ein Akkordeon für 2-Satz-Antworten ist Overhead ohne Nutzen. Der Klickaufwand übersteigt den Platzvorteil.

Wenn Nutzer Inhalte vergleichen müssen: Wenn Items vergleichend gelesen werden, erzeugt jedes Öffnen/Schließen unnötige Schritte.

Als Ersatz für Struktur: Manchmal verbergen Designer mit Akkordeons inhärente Informationsarchitektur-Probleme. Wenn eine Seite 20 Akkordeon-Items hat, ist das oft ein Zeichen, dass die Inhalte besser auf mehrere Seiten aufgeteilt werden sollten.

Accessibility-Anforderungen

Das ARIA-Pattern für Akkordeons ist klar definiert:

• role="button" oder nativer <button> für den Header-Trigger
• aria-expanded="true/false" auf dem Trigger
• aria-controls verweist auf die ID des Content-Panels
• hidden oder aria-hidden="true" auf dem geschlossenen Content-Panel
• Tastaturnavigation: Enter/Space öffnet/schließt, Tab navigiert zwischen Headers

Beispiele

1. Apple Support (FAQ): Jede Support-Seite nutzt Akkordeons für häufige Fragen. Exclusive (immer nur eine Antwort offen), klares Pfeil-Icon, smooth Transition. Mustergültiges FAQ-Design.
2. Amazon Produktseiten (Mobile): Produktdetails wie "Über dieses Produkt", "Technische Daten", "Kundenrezensionen" als Akkordeons auf Mobile. Spart massiv Scroll-Länge ohne Informationsverlust.
3. Google Material Design (Einstellungen): Android-Einstellungen nutzen gruppierende Akkordeons für Kategorien (WLAN, Bluetooth, Konto etc.). Jede Kategorie expandiert ihre spezifischen Einstellungen.
4. Bootstrap / UI-Framework-Demos: Das Akkordeon-Komponente ist in jedem großen UI-Framework vorhanden — ein Zeichen für seine Universalität als Pattern.
5. Figma Plugin-Panel: Figma selbst nutzt kollabierbare Sektionen in der rechten Properties-Sidebar (Design, Prototype, Inspect) — ein spezifischer Akkordeon-Typ für Tool-Interfaces.

In der Praxis (Figma-Umsetzung)

Basis-Akkordeon-Item-Komponente:

1. Header: Auto-Layout Horizontal, Padding 16 px, min-Height 56 px
2. Header-Inhalt: Titeltext (links, flex 1) + Chevron-Icon (rechts, 20 px)
3. Content-Panel: Auto-Layout Vertikal, Padding 0 16 px 16 px, Hintergrundfarbe leicht abgestuft
4. Trennlinie zwischen Items: 1px solid #E0E0E0

Variant-Properties:

• state: collapsed / expanded
• exclusive: true / false
• hasSubItem: true / false

Icon-Rotation: Im Collapsed-State: Chevron zeigt nach unten (0°). Im Expanded-State: Chevron zeigt nach oben (180°). In Figma: Nutze Smart Animate zwischen den Varianten für die Rotations-Transition.

Prototyp-Interaktion: On Click auf Header → Swap to → state: expanded (für das geklickte Item). Für Exclusive-Verhalten: Komplexer in Figma — nutze Component Properties (Boolean per Item) oder Interaction-Flows auf einer dedizierten Akkordeon-Demo-Seite.

Vergleich & Abgrenzung

Accordion vs. Tabs: Tabs zeigen immer alle Optionen als horizontale Überschriften und wechseln den sichtbaren Inhalt. Akkordeons können mehrere Bereiche gleichzeitig expandiert haben und strecken die Seite vertikal. Tabs für wenige (3–7) gleichwertige Bereiche, Akkordeons für viele sequenziell gelesene Abschnitte.

Accordion vs. Details/Summary (HTML): Das native <details>-Element in HTML ist ein semantisches Akkordeon ohne JavaScript. Styling-Möglichkeiten sind eingeschränkt. Für einfache FAQ-Seiten ideal, für Design-System-Komponenten zu unflexibel.

Häufige Fragen (FAQ)

Sollen Akkordeons standardmäßig offen oder geschlossen sein? Standardmäßig geschlossen ist der Normalfall — sonst gibt es keinen Platzspar-Effekt. Ausnahme: Wenn es wichtig ist, dass Nutzer den Inhalt des ersten Items sehen (etwa eine kritische Information), kann das erste Item offen starten.

Soll eine "Alle aufklappen"/"Alle zuklappen"-Funktion angeboten werden? Ja, wenn Nutzer häufig alle Inhalte auf einmal brauchen (z. B. um eine Seite auszudrucken oder nach Text zu suchen). In FAQ-Kontexten eher unnötig.

Verwandte Einträge

• Tabs — Alternative für gleichwertige Inhaltsbereiche
• Progressive Disclosure — Übergeordnetes Prinzip des schrittweisen Enthüllens
• Filter und Sorting UI — Akkordeons als Filter-Sektionen

Weiterführend

• Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.
• W3C WAI (2023). Accordion Pattern. w3.org/WAI/ARIA/apg/patterns/accordion.
• Nielsen Norman Group (2020). Accordion Icons: Which Signifiers Work Best? nngroup.com.
• Norman, D. A. (2013). The Design of Everyday Things (überarbeitete Ausgabe). Basic Books.