Verwendung
Tab-Interfaces (Registerkarten) werden verwendet, um unterschiedliche, aber verwandte Inhalte zu gruppieren und zwischen sich gegenseitig ausschließenden Inhaltsbereichen in derselben Ansicht zu navigieren. Nutzende können somit durch strukturierte Informationen oder Funktionen navigieren, die im selben Kontext erscheinen, ohne die Seite zu verlassen.
Registerkartenleisten (Tab Bars) verwenden Reiter (Tabs) Diese Tab Bars helfen somit, die verschiedenen Arten von Informationen oder Funktionen zu verstehen, die ein Screen bereitstellt. Sie ermöglichen außerdem einen schnellen Wechsel zwischen Sinnabschnitten des Screens, während der aktuelle Navigationsstatus in jedem Abschnitt erhalten bleibt.
Sie können für gesamte Seiten oder in einzelnen Komponenten verwendet werden.
Aufbau
Tab-Interfaces dienen der Strukturierung von Inhalten in abgegrenzte Themenbereiche, wenn nicht zwingend alle Inhalte zugleich bzw. nacheinander angezeigt werden müssen.
Es gibt immer mindestens zwei Tabs, standardmäßig ist immer ein Tab ausgewählt und das dazugehörige Tab-Panel eingeblendet. Die Reihenfolge der Tabs sollte über die gesamte Anwendung hinweg konsistent sein.
Die Oberfläche besteht immer aus folgenden Bestandteilen:
- Tab-Interface
- Ein Satz von Tab-Elementen mit ihren zugeordneten Tab-Panels.
- Tab-Liste
- Ein gruppierter Satz von mindestens zwei Tab-Elementen.
- Tab-Element
- Ein einzelnes Element einer Tab-Liste, das als Beschriftung eines Tab-Panels dient und benutzt werden kann, um ein einzelnes Tab-Panel zu aktivieren. Symbole sind optional.
- Tab-Panel
- Das Element, welches die Inhalte enthält, die einem Tab-Element zugeordnet sind.
Abgrenzung
Tab-Interfaces können verwendet werden, wenn jeweils nur ein zusammenhängender Satz von Daten oder Inhalten in einem geöffneten Tab-Panel angezeigt werden soll. Sollen mehrere Gruppen von Inhalten zeitgleich darstellbar sein, dann kann hierfür das Muster Akkordeon verwendet werden.
Wenn Nutzende einen linearen Prozess Schritt für Schritt durchlaufen müssen, dann verwenden Sie statt eines Tab-Interfaces besser Abfolgen von Seiten mit Fortschrittsanzeige oder Fortschrittsnavigation.
Tab-Interfaces und Akkordeons können auch ineinander verschachtelt sein, allerdings sollte dann überlegt werden, ob man die darzustellenden Inhalte oder Funktionen nicht doch besser auf mehrere Seiten verteilt.
Tooltips
Tab-Interfaces enthalten grundsätzlich keine Tooltips.
Ausdruck
Tab-Panels werden im Ausdruck linearisiert untereinander dargestellt; die Tab-Elemente dienen in diesem Fall als Zwischenüberschriften.
Positionierung & responsives Verhalten
- Tab-Liste und Tab-Elemente werden linksbündig im Grid positioniert. Dabei reicht der Container der Komponente vom Beginn der ersten Spalte bis zum Ende der letzten Grid-Spalte.
- Sollten Inhalte der Liste von Tab-Elementen länger sein als der Container, dann laufen diese rechts aus dem Viewport heraus. So sollen Nutzende erkennen können, dass dieser Bereich horizontal gescrollt werden kann.
- Es kann so weit nach rechts gescrollt werden, bis sich das letzte Tab-Element vollständig im Container der Komponente befindet; jetzt laufen die vorherigen Tabs links aus dem Viewport.
- Nach 5 Sekunden ohne jegliche Interaktion mit den Tabs sollte das Interface sich so positionieren, dass das aktuell ausgewählte Tab-Panel auf der ersten Gridspalte beginnt.
Ab dem Breakpoint SM (≥ 575px)
- Wenn alle Tab-Items in den Viewport passen, dann brauchen und können diese nicht mehr gescrollt werden.
- Der Indikator des Tab-Containers zeigt dennoch die Breite des umschaltbaren Bereichs an (hellblaue Linie)
Interaction Design
Der Fokus bewegt sich bei Tab oder Swipe sichtbar auf die gesamte Tab-Liste. Innerhalb der Liste der Tabs bewegen die Pfeiltasten → und ← den Fokus vor und zurück. Der aktuell fokussierte Tab erhält einen deutlich sichtbaren Indikator, der bei Tastaturbedienung durch eine zusätzliche Outline noch verstärkt wird.
Navigationsbewegungen mittels Pfeiltasten, Swipe oder :hover blenden jedoch noch keine Tab-Panels ein oder aus; Leerschritt oder Enter bzw. Tap bei Touch-UIs aktivieren den fokussierten Tab und blenden erst dann das dazu gehörige Tab-Panel ein.
Im nun aktiven Tab-Panel bewegt sich der Fokus auf das erste interaktive Element innerhalb des Tab-Panels. Inhalte in ausgeblendeten Tab-Panels müssen aus dem Dokumentenbaum entfernt werden und dürfen nicht per Tastatur erreichbar sein.
Best Practices
- Verwenden Sie Tab Bars nur, um die Navigation zu ermöglichen, nicht um Nutzende bei der Ausführung von Aktionen zu unterstützen. Mithilfe einer Tab Bar können Nutzende zwischen verschiedenen Bereichen einer Anwendung navigieren. Wenn Sie Steuerelemente bereitstellen müssen, dann verwenden Sie stattdessen eine Symbolleiste.
- Verwenden Sie die Mindestanzahl an Tabs, die erforderlich sind, um die Navigation in Ihrer Anwendung zu erleichtern. Jede zusätzliche Registerkarte erhöht die Komplexität der Anwendung und macht es schwieriger, Informationen zu finden. Versuchen Sie, einige Tabs mit kurzen Titeln oder Symbolen zu verwenden, um zu vermeiden, dass Tabs überfüllt sind und die Tabs abgeschnitten werden. Verwenden Sie maximal drei bis fünf Registerkarten.
- Verwenden Sie konkrete Substantive oder Verben als Titel der Tabs. Ein guter Titel hilft bei der Navigation, indem er klar beschreibt, welche Art von Inhalten die Nutzenden finden, wenn sie den Tab auswählen. Erwägen Sie Substantive für Tab-Titel sowie Verben oder kurze Verben für Dinge, die sich aus Sicht der Nutzenden auf den Inhalt beziehen.
- Ziel bei der Verwendung von Tabs ist es, durch die Darstellung spezifischer und beschreibender Kategorien von Inhalten oder Funktionen auf jeder Registerkarte einen Fokus zu schaffen.
Do’s and Dont’s
So:
- Inhaltlich oder funktional Zusammenhängendes im gleichen Tab.
- Die wesentlichsten Inhalte im initial eingeblendeten Tab-Panel.
- Stellen Sie sicher, dass die Tab-Leiste sichtbar ist, wenn Nutzende zu verschiedenen Bereichen Ihrer Anwendung navigieren.
So nicht:
- Initial ausgeblendete Panels, deren Inhalte zwingend wahrgenommen werden müssen.
- Zu viele einzelne Tabs, die auf Mobilgeräten nicht mehr nebeneinander dargestellt werden können.
- Verschiedene Ansichten gleicher Daten.
- Überfüllen Sie Registerkarten nicht mit Funktionen.
