Navigation

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

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.

Ähnliche Beiträge

  • Leveling & Cards

    Google’s Material Design macht interaktive Elemente subtil sichtbar. Die Zeit stark verschatteter Elemente ist eigentlich lange vorbei. Das stimmt jedoch nicht ganz, da der Schatten durch das Google Material Design in einer sehr subtilen Weise als Hilfsmittel fungiert, um interaktive Elemente zu erkennen. Die Idee: alles, was durch Klicken weitere Optionen offenbaren würde, wird vom…

  • Evil UX worst practices

    „Don’t be evil“ war bis 20181 ein Teil von Google’s Code of Conduct. Die damalige Version des Verhaltenskodex liest sich ganz im Sinne des Dienstes am User „Yes, it’s about providing our users unbiased access to information, focusing on their needs and giving them the best products and services that we can …“ (der volle…

  • Farben

    Das Google Mateiral Design definiert einen Farbkatalog und klassifiziert Helligkeitsstufen, damit Hintergrundfarben (auch Primärfarbe genannt) mit Vordergrundfarben (auch Akzentfarbe genannt) nahezu beliebig kombiniert werden können. Primärfarben werden mit einer mittleren Helligkeit angelegt (Stufe 500), während Akzentfarben stark gesättigt und hell sind (Stufe A100 bis A300). Primärfarbe Hintergrundfarben nehmen flächenmäßig einen großen Raum ein. Diese sind…

  • Weissraum

    Man sieht oft den Wald vor Bäumen nicht. Stünde ein einzelner Baum auf einer sonst baumfreien Lichtung fällt er sofort ins Auge. Weißraum bietet den Elementen eine Bühne, damit diese Platz haben, atmen und entfalten können. Der Weissraum muss nicht unbedingt weiß sein, sondern wird in der Primärfarbe oder mit einem subtilen Farbverlauf eingefärbt. Fehlt…

  • CPQ configure price quote

    In B2B und auch immer stärker im B2C werden Configure-Price-Quote Systeme (CPQ) genutzt, um für den Kunden die Produktkonfiguration (configure), die Preisermittlung (price) und die Angebotserstellung (quote) in einem System ohne Medienbruch und Wartezeit bereitzustellen. Die Nutzer solcher Systeme reichen vom eigenen Vertrieb bis zum Endkunden. Der eigene Vertrieb bedient den „Inhouse-Konfigurator“ um sich schnell…