Inhaltsbereich Navigation Navigation Fußzeile

Bottom Navigation Bar

Verwendung

Navigationsleisten (Navigation Bars) bieten den unmittelbaren Zugriff auf drei bis fünf Ziele innerhalb der Anwendung. Verwenden Sie eine Navigationsleiste für Ziele, die während der gesamten Benutzerreise leicht zugänglich bleiben sollen, eines der Navigationsziele mit seinen Inhalten ist immer aktiv und hervorgehoben.

Die Navigationsleiste ist für den unmittelbaren und bequemen Zugriff am unteren Bildschirmrand positioniert. Jedes Ziel wird durch ein Icon und eine Textbeschriftung dargestellt. Wenn ein Icon der Navigationsleiste angetippt wird, dann werden Nutzende zum verknüpften Navigationsziel weitergeleitet.

Navigationsleisten können vorübergehend von Inhalten der Anwendung, der Bildschirmtastatur oder anderen Elementen verdeckt werden, die zum Abschließen einer Tätigkeit erforderlich sind. Sie dürfen aber auf keinem Screen dauerhaft verdeckt sein.

Best Practices

  • Verwenden Sie nicht mehr als fünf Ziele. Wenn Elemente nahe beieinander platziert werden, kann die Textlänge zu Problemen führen. Erwägen Sie bei mehr als 5 Zielen die Verwendung von Tab Bars.
  • Verwenden Sie eine Navigationsleiste auch nicht für weniger als drei Ziele, verwenden Sie stattdessen eine Tab Bar.

Abgrenzung

Die Kombination von Navigation Bars und Tab Bars kann zu Verwirrung führen, da ihre Beziehung zum Inhalt möglicherweise unklar ist. Tab Bars haben immer ein gemeinsames übergeordnetes Thema, während sich die Ziele der Navigation Bar auf der obersten Ebene befinden und nicht miteinander verbunden sind.

Beschriftung

Ziele in Navigationsleisten enthalten immer ein Icon. Am besten kombinieren Sie Icons mit Textbeschriftungen, insbesondere wenn das Symbol keine offensichtliche Bedeutung hat. Eine Kombination von beschrifteten und unbeschrifteten Icons ist nicht erlaubt. Das Icon und seine Beschriftung sind zueinander zentriert.

Tooltips

Navigationsleisten erhalten grundsätzlich keine Tooltips.


Do’s and Dont’s

So:

  • Ziele in der obersten Ebene der Informationsarchitektur, die von überall in der Anwendung erreichbar sein müssen.
  • Drei bis fünf Ziele.
  • Text Labels bieten kurze, aussagekräftige Beschreibungen der Linkziele.

So nicht:

  • Einzelne Inhalte, z. B. das Anzeigen einer einzelnen Textseite.
  • Benutzerpräferenzen oder -einstellungen.
  • Verwendung von Icons ohne Beschriftung.