Tabs

Tabs sind ein Navigationsmuster, das mehrere gleichrangige Inhaltsbereiche hinter klickbaren Reitern organisiert, von denen jeweils nur einer sichtbar ist.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Tab Navigation, Registerblatt, Tab Bar, Reiter

Was sind Tabs?

Tabs sind eines der ältesten und am weitesten verbreiteten UI-Muster — direkt von physischen Aktenregistern abgeleitet. Sie lösen das Problem, wie mehrere Inhaltsbereiche platzsparend auf einer Seite zugänglich gemacht werden können, ohne die Informationsarchitektur zu tief zu verschachteln. Gut eingesetzte Tabs sind intuitiv und effizient; schlecht eingesetzte erzeugen Verwirrung über den Zusammenhang der Inhalte oder verstecken wichtige Information.

Erklärung

Horizontale Tabs

Horizontale Tabs sind die häufigste Form: Reiter sind nebeneinander angeordnet, oberhalb des Inhaltsbereichs, der bei Klick wechselt. Dies ist der de-facto-Standard für Web-Anwendungen und Apps.

Wann horizontale Tabs verwenden:

• 2–7 gleichrangige Bereiche existieren
• Nutzer wechseln häufig zwischen Bereichen hin und her
• Die Bereiche sind inhaltlich parallel (nicht hierarchisch oder sequential)
• Der gemeinsame Kontext ist für alle Bereiche relevant (z. B. Produkt-Details-Seite mit Tabs "Beschreibung", "Bewertungen", "Q&A")

Wichtige Design-Details:

• Aktiver Tab: Visuelle Unterscheidung durch Unterstrich, Hintergrundfarbe oder Fettschrift — alle drei gleichzeitig ist zu viel
• Inaktive Tabs: Ausreichender Kontrast, Hover-State erkennbar
• Tab-Breite: Entweder gleichbreit (feste Breite) oder inhaltsbreite (min-width pro Tab)

Vertikale Tabs

Vertikale Tabs sind seltener, aber in spezifischen Kontexten sehr sinnvoll: Wenn viele Tabs existieren (8+) oder wenn die Tab-Labels sehr lang sind. Die vertikale Liste spart horizontalen Platz und ermöglicht längere Labels.

Typische Einsatzgebiete: Einstellungsseiten (macOS-Systemeinstellungen), komplexe Form-Wizards mit vielen Schritten, Dokumentations-Navigation.

Overflow-Handling

Bei zu vielen Tabs, die nicht in einer Zeile passen, entstehen Overflow-Probleme. Bewährte Lösungen:

1. Scrollbare Tab-Leiste: Die Tabs sind horizontal scrollbar. Auf Mobile via Touch-Swipe. Auf Desktop oft mit Pfeil-Buttons oder Fade-Indikator an den Rändern.

2. Dropdown/More-Menü: Die letzten Tabs werden in einem "Mehr ▼"-Dropdown zusammengefasst. Problematisch: Diese Tabs sind versteckt und werden weniger genutzt.

3. Tab-Wrap: Tabs umbrechen in mehrere Zeilen. Selten gute Lösung — sieht unordentlich aus und der Inhaltsbereich beginnt tiefer.

4. Scroll zu Tab: Nur der aktive Tab ist sichtbar, andere sind scrollbar erreichbar. Funktioniert gut auf Mobile (wie bei Android Material Design Tab Bar).

Empfehlung Mobile: Horizontales Scrollen ist das native Android-Muster für Tabs. Auf iOS ist die Bottom Tab Bar gebräuchlicher als scrollbare Tabs.

Active State Design

Der aktive Tab muss eindeutig erkennbar sein. Übliche visuelle Unterscheidungen:

• Unterstrich: Einfachstes und verbreitetestes Signal. Der Unterstrich hebt sich durch Farbe ab (Primärfarbe oder Weiß auf dunklem Hintergrund). Kein Unterstrich für inaktive Tabs.
• Hintergrundfarbe: Aktiver Tab hat anderen Hintergrund. Häufig bei Tab-Bars mit umgebendem Rahmen.
• Typographie: Aktiver Tab bold, inaktiver regular. Nie als alleiniges Signal (nicht ausreichend für Sehschwache).
• Icon + Label: Auf Mobile häufig: Aktiver Tab farbiges Icon, inaktiver grau.

Was nie fehlen darf: Die aktive Seite muss auch beim Seitenreload korrekt selektiert sein — tab-state muss in der URL reflektiert werden.

URL-Verknüpfung

Tabs ohne URL-Unterstützung sind eine Accessibility- und Usability-Falle. Wenn Tab-Wechsel keine URL-Änderung auslösen:

• Zurück-Button des Browsers navigiert weg von der ganzen Seite, nicht zum vorherigen Tab
• Tabs können nicht verlinkt werden ("Schick mir den Link zur Bewertungs-Tab des Produkts")
• Seitenreload setzt den aktiven Tab zurück auf den ersten

Implementierung: URL-Hash (#bewertungen) oder Query-Parameter (?tab=bewertungen). React Router, Angular Router und andere Frameworks unterstützen beides nativ.

Beispiele

1. GitHub Repository-Seite: Horizontale Tabs (Code, Issues, Pull Requests, Actions, Projects, Settings) — die klare Benchmark für Tab-Design. URL ändert sich mit jedem Tab-Wechsel. Aktiver Tab: Unterstrich-Highlight.
2. Google Material Design Tabs: Scrollbare Tab-Leiste auf Mobile mit Fade-Effekt an den Rändern. Material Design Demo-Apps zeigen das Overflow-Handling vorbildlich.
3. Apple macOS Systemeinstellungen: Vertikale Tabs-Liste links, Inhalt rechts — für die vielen Einstellungskategorien die einzig sinnvolle Lösung.
4. Amazon Produktseite: Tabs für "Produktinformationen", "Technische Details", "Weitere Infos" — wechseln ohne Seitenreload, aber mit Scroll-Anker auf Desktop.
5. Figma Inspect/Design/Prototype: Drei Tabs in der rechten Sidebar wechseln den Kontext des Inspect-Panels. Sehr sauberes vertikales Tab-Muster in einem Tool-Interface.

In der Praxis (Figma-Umsetzung)

Tab-Bar-Komponente:

1. Auto-Layout Horizontal mit Hug Contents, Padding Bottom: 0 (Unterstrich ist border, nicht padding)
2. Jedes Tab-Item: Auto-Layout Horizontal, Padding 12 × 16 px, min-Width: 80 px
3. Unterstrich: 2 px hoher Frame unterhalb des Labels, Primärfarbe, nur beim aktiven State sichtbar

Variant-Properties:

• state: default / hover / active / disabled
• size: small / medium / large (Schriftgröße und Padding)
• hasIcon: true / false

Scrollbare Tabs simulieren: Hauptframe mit fester Breite, Clip Content: true. Tab-Bar-Inhaltsframe breiter als Hauptframe → overflow wird abgeschnitten. Im Prototyp: Drag-Geste simuliert Scroll (begrenzt in Figma, besser in ProtoPie).

Tab-Content-Bereich: Separater Frame unterhalb der Tab-Bar. In Figma Varianten: Eine Variante pro Tab-Inhalt, verknüpft via On Click → Swap to → variant auf den entsprechenden Content-Frame.

Vergleich & Abgrenzung

Tabs vs. Accordion: Tabs zeigen alle Optionen und wechseln den Inhalt im Seitenbereich. Akkordeons erweitern sich vertikal in der Seite. Tabs für wenige Bereiche auf einer Seite, Akkordeons für lange Listen von expandierbaren Abschnitten.

Tabs vs. Navigation: Tabs sind sekundäre Navigation innerhalb einer Seite oder eines Bereichs. Primäre Navigation (Top Nav, Sidebar) strukturiert die gesamte Anwendung. Tabs strukturieren Inhalte innerhalb eines Bereichs.

Häufige Fragen (FAQ)

Wie viele Tabs sind maximal sinnvoll? Horizontal maximal 7 (besser 5), vertikal bis zu 15. Über 7 horizontale Tabs entstehen Platz- und Scanbarkeit-Probleme. Wenn mehr nötig sind, ist entweder ein Dropdown-Menü oder eine Kategorisierung der Tabs in Sub-Gruppen die bessere Lösung.

Sollen deaktivierte Tabs angezeigt werden? Nur wenn der Nutzer wissen muss, dass diese Funktion existiert (aber noch nicht verfügbar ist). Ein deaktivierter Tab mit Tooltip "Verfügbar mit Premium-Abo" ist sinnvoll. Deaktivierte Tabs ohne Erklärung verwirren.

Verwandte Einträge

• Accordion-Muster — Vertikale Alternative für viele Inhaltsbereiche
• Navigation Patterns — Übergeordnete Navigationsmuster
• Progressive Disclosure — Komplexität durch Segmentierung reduzieren

Weiterführend

• Nielsen Norman Group (2016). Tabs, Used Right. nngroup.com.
• Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.
• Google Material Design 3 (2023). Tabs. m3.material.io.
• Lidwell, W., Holden, K. & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.