0621 586 799 21

Navigation

By Tobias GüntherDesign Prinzipien

Woher kommt der User, was ist aktuell zu tun und wo geht es danach hin. Navigationselemente beantworten diese Fragen auf einen Blick.

  1. Produktonfigurator.shop»
  2. Produktkonfigurator erstellen»
  3. Entwerfen & Designen»
  4. Design Prinzipien»
  5. Navigation»
Im Schaubild (rechts) befindet sich auf dem aufgeklapptem Pin der Weiter-Button. Der User erkennt, dass ein Pin ausgewählt wird und dann der Nachfolgedialog erreicht wird. Im linken Schaubild fehlen alle Navigationselemente, der User fühlt sich so komplett verloren.

Breadcrumbs

Mit Breadcrumbs (Brotkrumen) ist der Pfad zum aktuellen Dialog sichtbar und sie ermöglichen das Zurückspringen zu einer höheren Seite. Besonders relevant ist der Breadcrumb, wenn User von außen auf die Seiten kommen und mit der Hilfe des Breadcrumbs den Context erkennen, um den aktuellen Dialog einzuordnen.

Tabs

Am unteren Rand angeordnet sind sie das Standard-Navigationselement von iOS Devices. Aussagekräftig durch passende Icons kann der User direkt zwischen den Dialogen hin- und herwechseln.

Navigation-Drawer

Lange Zeit der Standard in der Inter-Dialog-Navigation in Android fährt beim Berühren des linken Rands ein Menü heraus, den halben Bildschirm verdeckend. In diesem ist dann viel Platz für Navigationselement in Bild und Text inkl. weiterführenden Hinweisen, für die in Tabs kein Platz ist.

Zurücktaste

In Android-Devices und Browser-basierten Web-Apps direkt fest verbaut erreicht der User mit der Zurücktaste den vorherigen Dialog unter Wiederherstellung aller vorherigen Zustände. In iOS Devices muss diese explizit eingebaut werden und wird oft oben links platziert.

Tagged: , , ,