Responsive Tab-Navigationen
Wie ersetzt man Tabs auf kleinen Bildschirmen?
Eines der meistgenutzten Pattern bei XING ist eine simple Tab-Navigation, von verschiedenen Produkten plattformweit genutzt. Sie kann mehrmals und beliebig auf einer Seite platziert werden, mit sehr vielen oder auch nur einigen wenigen Einträgen. Sie eignet sich für verschiedene Wortlängen in verschiedenen Sprachen und soll jetzt auch responsiv funktionieren.
In diesem Artikel gehe ich auf Alternativen ein und beschreibe unsere Lösung.
Recherche
Es gibt viele Möglichkeiten eine Tab-Navigation mobil zu ersetzen. Dropdowns, Accordions und Swipebars sind die häufigsten. Hier ein kurzer Überblick.
Dropdown
Bei einer bestimmten Breite wird die Tab Navigation durch ein Dropdown ersetzt. Ab diesem Zeitpunkt sind alle Navigationseinträge versteckt und ein User muss mit dem Dropdown interagieren um zu sehen, welche Einträge es noch gibt.
Da Dropdowns eigentlich andere Aufgaben erfüllen, werden sie nicht unbedingt als Navigationselement erkannt. Abhilfe kann hier ein gutes, aktivierendes Label, z.B. „Mehr“, „Menü“ oder „Navigation“, schaffen.
Dropdowns haben noch einige andere Probleme und wer fuckdropdowns.com bisher noch nicht gesehen hat, sollte das nachholen.
Accordion
Die einzelnen Tabs werden hier in verschiedene, vertikal angeordnete Abschnitte aufgelöst. Diese Abschnitte können standardmäßig auf- oder zugeklappt sein, mit jeweils verschiedenen Vor- und Nachteilen.
Wenn alle Abschnitte von Anfang an aufgeklappt sind, können lange, unübersichtliche Seiten mit langen Ladezeiten die Folge sein.
Sind alle Abschnitte zugeklappt, bekommt man einen guten Überblick über die Navigationseinträge. Gleichzeitig ist jedoch ein zusätzlicher Klick erforderlich, um zu echtem Inhalt zu kommen.
Der Inhalt der Abschnitte kann entweder vor- oder nachgeladen werden, was, je nach Größe der Inhalte, in Verzögerungen bei Interaktion oder langes Warten schon bei Seitenaufruf resultieren kann.
Swipebar
Sobald ein Tab nicht mehr vollständig dargestellt werden kann, wird die gesamte Tab-Navigation auf Touch-Screens wisch- oder mit der Maus ziehbar. Dieses Pattern wird hauptsächlich auf Android verwendet und ist nicht jedem Desktop-User bekannt.
Je nach Breite, wird eventuell nicht klar, dass noch weitere Navigationseinträge vorhanden sind. Ein Verlauf kann dabei helfen, das Problem zu lösen. Trotzdem muss man ggf. sehr viel interagieren, um zu sehen, welche weiteren Navigationseinträge noch vorhanden sind.
Lösung
Jedes der oben genannten Pattern hat Nachteile. Obwohl manche davon behoben werden können, gingen wir einen anderen Weg und entschieden uns für eine Mischung aus diesen Pattern: Collapsible Tabs.
Collapsible Tabs
Sobald ein Tab nicht mehr dargestellt werden kann, wird der Navigationseintrag in ein Dropdown-Menü verschoben. Alle anderen bleiben unverändert stehen. Je weniger Platz vorhanden ist, desto mehr Einträge werden im Menü platziert. Je mehr Platz man hat, desto mehr Einträge kehren auch wieder in die Tab-Navigation zurück. Und zwar sobald der jeweilige Navigationseintrag wieder dargestellt werden kann.
So wird das zusätzliche Dropdown nur dargestellt, wenn es auch wirklich gebraucht wird. Besteht eine Navigation aus nur wenigen kurzen Einträgen, tritt dieser Fall vielleicht nicht mal auf kleinen Bildschirmen auf. Zusätzlich kann auf die Definition eines festen break-points, an welchem die komplette Navigation ersetzt wird, verzichtet werden. Die Anpassung passiert automatisch, inhaltsbasiert und auflösungsunabhängig.
Es können so viele Navigationseinträge wie nötig abgebildet werden und gleichzeitig besteht die Möglichkeit, bei wenigen Einträgen, auf ein Dropdown-Menü komplett zu verzichten.
Dadurch, das mindestens ein Tab weiterhin außerhalb des Menüs bestehen bleibt, ist es leichter zu verstehen, das es sich hier um ein Navigationselement handelt.
Es bestehen einige Gemeinsamkeiten mit den Tab-Bars auf mobilen Geräten. Werden mehr Einträge benötigt als auf den Bildschirm passen, findet man auch hier häufig einen Mehr-Tab.
Zusätzlich steht genug Platz zur Verfügung um auch lange Einträge darstellen zu können, sogar Mehrzeiler sind möglich.
Fazit
Auch Collapsible Tabs haben Schwächen, trotzdem lösen sie eines unserer dringendsten Probleme: die Sichtbarkeit von so vielen Navigationspunkten wie möglich, bei gleichzeitiger Flexibilität in Bezug auf unsere anderen Anforderungen.
Product Designer bei XING, Hamburg.
@heartshapedwork
