Was macht eine gute Tab-Bar in mobilen Apps aus?

Tab-Bars (in Material Design auch als „Navigation-Bars“ bezeichnet) sind seit Jahren das vorherrschende Navigationselement in mobilen Apps. Sie befinden sich am unteren Bildschirmrand, sind stets sichtbar, leicht zu erreichen und vermitteln einen Überblick über die Inhalte der App.

Leider haben viele Apps nach wie vor Schwierigkeiten, den Nutzern eine ansprechende Hauptnavigation in Form einer Tab-Bar anzubieten.

Icons und Text verwenden

Eines der häufigsten Probleme ist die Verwendung von Icons als einzigem Element, das den Inhalt eines Tabs vermittelt. Auch wenn manche Icons für viele von uns offensichtlich erscheinen (wie beispielsweise die Lupe für die Suche), gibt es dennoch Menschen, die ein bestimmtes Icon nicht mit einer bestimmten Bedeutung in Verbindung bringen. Dies verschärft sich umso mehr, je spezifischer eine Funktion oder ein Bereich für eine bestimmte App ist.

Daher wird empfohlen, in einer Tab-Bar Text in Kombination mit Icons zu verwenden. Dies hilft, Missverständnisse zu vermeiden und vermittelt deutlich, was die App zu bieten hat.

Alle Tabs sind gleich wichtig

Ein weiteres Problem, das nicht so offensichtlich ist wie fehlender Text, ist die Art und Weise, wie die App ihre Inhalte über die Tab-Bar hinweg strukturiert. Es ist durchaus üblich, vier bis fünf Tabs zu sehen, wobei der erste ein „Home“- oder „Start“-Tab ist. Dies ist in der Regel ein Hinweis auf eine entweder nachlässige oder komplexe Informationsarchitektur.

Was dann passiert, ist, dass Nutzer dazu neigen, immer mehr Zeit auf dem ersten Tab zu verbringen und immer weniger auf den anderen. Einer der übrigen Tabs könnte „Profil“ oder „Einstellungen“ sein und das sind Funktionen, die man bei der Nutzung der App meistens gar nicht verwendet. Oder, noch schlimmer, es handelt sich um einen Tab mit der Bezeichnung „Mehr“.

Wenn alle wichtigen Use-Cases auf dem ersten Tab platziert werden (da sie ja die wichtigsten sind und es der wichtigste Tab sein muss, oder?), geht die ursprüngliche Idee hinter einer Tab-Bar verloren. Die Tab-Bar stellt die Bereiche der App dar, die alle gleich wichtig sind und sich auf derselben Hierarchieebene befinden.

Eine wirklich gute Tab-Bar schafft es somit, alle wichtigen Use-Cases der App über die Tab-Bar zu verteilen und die Nutzer dazu anzuregen, alle Tabs gleichermaßen zu nutzen. Dies trägt auch dazu bei, dass der Inhalt und die Informationsdichte eines einzelnen Tabs überschaubar und leicht verständlich bleiben.

Airbnb ist ein gutes Beispiel dafür. Die Tab-Bar begleitet den Nutzer von Anfang bis Ende durch den gesamten Prozess. Man entdeckt Reiseziele, speichert Favoriten in der Wunschliste, bucht eine Reise und kommuniziert vor, während und nach der Reise mit dem Gastgeber.

Gute Tab-Bars verfügen über Text und Icons, und hervorragende Tab-Bars basieren auf einer guten Informationsarchitektur.