Navigation

Die Aufgabe einer Navigation kann sehr gut mit der von Straßenschildern bzw. Wegweisern verglichen werden. Sie liefern Information darüber, welche Orte es in der Umgebung gibt, wo diese Orte liegen und wie man dort hinkommt. Navigationen in Interfaces erledigen das Gleiche. Am Beispiel einer Website schaffen sie Überblick über die verfügbaren Seiten, sie zeigen wo unter welche Kategorie eine bestimmte Unterseite zu finden ist und zeigen einen Weg auf um zu dieser Seite zu gelangen.­­­­

Ein wichtiger Teil der Gestaltung einer Navigation ist es, sich mit den späteren Usern und deren Bedürfnissen auseinander zu setzen. Suchen die User nach etwas bestimmten oder möchten sie lieber stöbern. Verstehen die Nutzer*innen intuitiv durch gelernte Konventionen, was beispielsweise bestimmte Icons bedeuten, wenn nicht, sollte als Schlussfolgerung mehr mit klar verständlichen Text-Labels gearbeitet werden.

Dabei darf nicht vergessen werden, was die eigentlichen Ziele der Website sind. Möchte die Seite Produkte verkaufen, werden Informationen vermittelt oder wird lediglich eine Marke präsentiert? Je nach Ziel muss bei der Gestaltung also ein besonderer Fokus auf den Bereich gelegt werden um den Nutzer, ohne aufdringlich zu sein, an den gewünschten Ort zu führen.

Visible Navigation

Der beste Startpunkt, um eine Navigation zu gestalten ,ist häufig die sogenannte Visible Navigation, sie ist für viele Interfaces die beste Option. Wie der Name schon sagt, ist diese Navigation dauerhaft sichtbar. Bei mobilen Geräten befindet sie sich am unteren Bildschirmrand, um sie leichter mit der Hand erreichbar zu machen. Im Gegensatz dazu befindet sie sich bei großen Bildschirmen wie bei Computern häufig am oberen Rand des Interfaces. Auf dem Desktop wird versucht, die Hauptnavigation in maximal sieben Kategorien zu teilen, auf Mobilen Geräten hingegen in höchstens fünf.

Bei der Umsetzung der Visible Navigation gibt es verschiedene Herangehensweisen. Am beliebtesten ist ein horizontal angeordnetes Set mit Icons, welche durch kleine Labels darunter ausgezeichnet werden. Kommunizieren die Icons klar und unmissverständlich deren Funktion kann auf die Labels verzichtet werden.

In diesem Beispiel auf einem mobilen Gerät gehen wir von einem Grid Base Value von 10 pt aus. Werden ausschließlich Icons verwendet sollte die Tab bar mindestens 44pt hoch sein, werden zusätzlich Labels verwendet, erhöht sich der Minimalwert auf 60pt. Die Tab Width, also wie breit eine einzelne Schaltfläche ist, erhält man durch Teilen der gesamten Breite durch die Anzahl der Tabs. In den Tabs wird nun das Icon und das zugehörige Label platziert, dabei sollte darauf geachtet werden, dass ein Padding (Innenabstand) von 10pt gemäß dem Grid Base Value nicht unterschritten wird. Die Höhe und Breite des Icons entspricht der Verdopplung des Grid Base Values.

Der Begriff Active Tab bezeichnet, den aktuell ausgewählten Tab. Dieser Status wird durch gestalterische Mittel signalisiert. Ein beliebtes Mittel hierfür ist eine Farbänderung des Hintergrundes oder eines Icons. Dabei gilt besonders darauf zu achten, dass das ausgewählte Tab klar von den anderen zu unterscheiden ist.

Klassische Desktop Navigationen basieren in der Regel auf Text Based Grids. Also eine rein textliche Auszeichnung der Menüpunkte. Sie werden meist am oberen Bildschirmrand platziert. Auch hier bedienen wir uns wieder an einem Grid, das entweder auf acht oder zehn Punkt basiert. Bei der Darstellung dieser Text Based Grids auf mobilen Viewports gilt darauf zu achten, dem User zu zeigen, dass mehr als die auf schmalen Displays maximal darstellbaren drei Menüpunkte zur Verfügung stehen. Dies gelingt durch Anschneiden eines vierten Menüpunktes durch den Displayrand. Damit wird zu verstehen gegeben, dass durch das Scrollen nach rechts weitere Auswahloptionen zur Verfügung stehen.

Eine weitere Anwendungsmöglichkeit einer Visible Navigation ist die Sidebar. Sie eignet sich besonders gut für lange Tab Listen, also Menüs mit besonders vielen Unterpunkten, die wiederum Unterpunkte anbieten. Allerdings sollte die Hierarchie nicht aus mehr als drei Leveln bestehen, um eine gute Lesbarkeit und Orientierung zu gewährleisten. Damit eine konstante Gestaltung beibehalten werden kann, wird an einem „Helferrechteck“ die Einrückung eines Unterpunkts ausgerichtet. Außerdem nützlich können hierbei Trennlinien sein, um dem User klar zu signalisieren wo eine Kategorie anfängt und wieder aufhört.

Hidden Navigation

Unter einer Hidden Navigation versteht man ein Menü, dessen Sichtbarkeit von einer Aktivierung abhängig ist. Das bekannteste Beispiel hierfür wäre das von Google Material Design stammende Hamburger Menü. Die User klicken oder tippen, klassischerweise auf das namengebende Hamburgerartige Icon, wodurch eine Sidebar zum Vorschein kommt. Dieses Menü verdrängt entweder den eigentlichen Inhalt von Screen (Pushing) oder es überlappt ihn (Overlaying). Beim Gestalten dieser Sidebar ist es wichtig für eine ausreichende Größe der Menüpunkte zu sorgen, um versehentliches Tippen auf falsche Menüpunkte zu vermeiden. Gibt es zudem Buttons, die auf keinen Fall unbeabsichtigt ausgewählt werden sollten, wie zum Beispiel eine Log-Out-Funktion, besteht die Möglichkeit, diese ganz unten mit deutlichem Abstand zu den anderen Menüpunkten zu platzieren.

Eine andere Art von Hidden Navigation ist der Floating-Action Button. Ebenfalls entwickelt im Rahmen des Google Material Designs, bietet er schnellen Zugriff auf Aktionen. Er ist besonders platzsparend. Allerdings ist zu beachten, dass verwendete Icons klar deren Funktion kommunizieren sollten, da es sonst zu Unklarheiten kommen kann.

Der größte Vorteil der Hidden Navigations ist, dass beim Gestalten der eigentlichen Inhaltsseiten beinahe keine Rücksicht auf den Platz für das Menü gegeben werden muss. Der Inhalt kann daher Bildschirmfüllend gelayoutet werden.

Contextual Navigation

Contextual Navigations werden basierend auf der aktuellen Situation des Users angezeigt. Sie passen sich dynamisch an und zeigen nur relevante Optionen, basierend auf der aktuellen Interaktion der Anwender*innen. Durch diese Personalisierung werden irrelevante Optionen ausgeschlossen und die User finden schneller ans Ziel. Auch Links innerhalb des Contents werden als Contextual Navigation bezeichnet. Prominentes Beispiel wären die Links zu Seiten über bestimmte Keywords in Wikipedia Artikeln. Gestalterisch ist hier vor allem ein hoher Kontrast zum restlichen Content wichtig. Oft wird hier auch mit Unterstreichungen gearbeitet. Es ist wichtig, dass die Navigation besonders intuitiv stattfindet.

Dos and Don’ts

Zusammenfassend können noch einige Dos and Don’ts gelistet werden, die im Allgemeinen für die Gestaltung von Navigationen in Interfaces gelten.

Dos

• Klarheit und Lesbarkeit
• Konsistenz
• Sichtbarkeit und Auffindbarkeit
• klare visuelle Hierarchien
• Feedback und Orientierungshilfen
• einfache Sprache und Terminologie
• Hierarchie und Priorisierung

Don'ts

• dünne Typografie
• zu viele Elemente
• unklare Bezeichnungen / Icons
• fehlende Responsibilität
• Social Media Icons in der Top Nav

Trends

Für einen Blick über den Tellerrand hinaus wird im Folgenden noch ein Blick auf andere Arten von Navigationen geworfen. Vor allem das Thema Gestensteuerung dürfte in Zukunft eine wichtige Rolle spielen. Besonders, wenn der Platz auf einem Bildschirm begrenzt ist, bietet sich diese Möglichkeit an. Auf einem Display bringt einen das Swipen mit einem Finger an einen anderen Ort im Interface als das Wischen mit zwei Fingern.

Bei der vor kurzem vorgestellten Apple Vision Pro wird das Klicken auf einer Maus oder Tastatur, oder das Tippen auf einem Bildschirm durch eine kleine Berührung von Daumen und Zeigefinger ersetzt.

Auch Sprachsteuerung ist eine Art der Navigation, die spätestens seit Siri und Alexa einen Einzug in das tägliche Leben gefunden hat. Mit den beeindruckenden Fortschritten in der AI-Technologie wird diese Art des Navigierens auch in Zukunft noch deutlich benutzerfreundlicher.

Außerdem zu nennen ist die Gamification von Interfaces. Hier werden User mittels spielerischer Elemente geleitet.

Informations-Architektur

Die Informations-Architektur setzt sich zum Ziel, dem User eine möglichst intuitive und effiziente Navigation zu ermöglichen. Erreicht wird das, indem sie Inhalte und Seiten von Interfaces ordnet, sie bezeichnet und Beziehungen zwischen den Inhalten schafft. Dadurch entstehen hierarchische Strukturen, die das Gerüst einer Anwendung oder einer Website abbilden.

Ein typischer Prozess zur Erstellung einer Informations-Architektur wäre wie folgt. Zunächst müssen alle Inhalte, die abgebildet werden sollen, erfasst werden. Diese werden gruppiert und im Anschluss strukturiert. Danach können die Inhalte benannt werden. Der letzte und wichtigste Schritt ist das Evaluieren. Hierbei wird durch User-Tests ermittelt, ob Fehler in der Datenstruktur vorliegen – die das Navigieren erschweren. Wird ein Fehler festgestellt, beginnt der Prozess an dem Punkt erneut, wo der Fehler vorliegt.