UX/UI Design-Beispiele für deine Navigation

Eine gute Navigation entspricht den Erwartungen des Users. Sie lässt sich intuitiv bedienen und ist verständlich aufgebaut. Sie ist auf allen Seiten einheitlich dargestellt, also konsistent. Wie sie gestaltet wird, hängt von den jeweiligen Voraussetzungen ab. Hier ein paar inspirierende Beispiele. Die Pro und Contra helfen dir die richtige Lösung für dich zu finden:

1/ Horizontal Navigation

Die horizontale Navigation wird recht häufig eingesetzt (auch bei Goldmarie). Sie ist insbesondere für kleine Seiten interessant, da sie nur wenige Einträge zulässt. Auf die Links hat man auf jeder Seite zugriff. Die Navigation kann am Seitenanfang fixiert sein oder auch mit scrollen, so ist sie jederzeit präsent und nutzbar.
Auch lässt sie sich durch eine weitere sichtbare Ebene oder ein Dropdown Menu ergänzen. In dem Fall wären dann weitaus mehr Einträge möglich.

Pro:

  • Beste Sichtbarkeit. Insbesondere wenn sie mit scrollt.
  • Im Vergleich zur vertikalen Navigation nimmt sie wenig Platz ein.
  • Es sind keine großen Mausbewegungen nötig, um einen Link anzuwählen (wenn sie ohne Dropdown daher kommt).

Contra:

  • Die Anzahl der Links ist begrenzt und kaum erweiterbar, ausser man erweitert die Navigation durch eine weitere Ebene oder ein Dropdown Menu.
  • Ein Dropdown überdeckt in der Regel den Content.
  • Im Vergleich zu Off Canvas (4/) nimmt sie mehr Platz ein.

 

2/ Vertical Navigation

Die vertikale Navigation war einst sehr beliebt. Heute sieht man sie seltener, hauptsächlich noch in Shops. Das liegt daran, dass der Content auf Webseiten immer breiter wird. Eine vertikale Navigation nimmt viel Raum ein und stört gegebenenfalls. Deshalb kombiniert man sie mit modernen Lösungen (z. B. Off Canvas).
Eine vertikale Navigation bietet unheimlich viel Platz für Einträge und lässt sich gut erweitern.

Pro:

  • Hohe Anzahl von Menupunkten möglich.
  • Ideal für Erweiterungen.
  • Mehrere Navigationsebenen sind möglich.
  • Eine übersichtliche Struktur mit mehreren Kategorien ist möglich.

Contra:

  • Sie nimmt viel Raum ein.
  • Der Reiz ist groß, viele Menüpunkte zu integrieren, doch zu viel Auswahl kann den User überfordern.
  • Bildschirme gehen immer mehr in die Breite, ein Großteil der vertikalen Navigation ist ggf. auf den ersten Blick unsichtbar.

 

3/ Dropdown Menu

Ein Dropdown Menu ist Usern schon lange vertraut. Bei Mouseover oder Klick auf einen Link in der Hauptnavigation öffnet sich eine Ebene/Fenster mit weiteren Links zu Seiten oder Sprungmarken.

Pro:

  • Platz für recht viele Unterseiten.
  • Erweiterbar.
  • Mehrere Ebenen/Fenster (Flyouts) möglich.

Contra:

  • Kann zu lang und umfangreich werden.
  • Neigt dann schnell zu Unübersichtlichkeit.
  • Wenn sich aus dem Dropdown noch weitere Fenster (Flyouts) öffnen, ist Zielsicherheit und Konzentration erforderlich.

 

4/ Mega Dropdown

Das Mega Dropdown kommt zum Einsatz, wenn das Dropdown an seine Grenzen stößt. Wenn nämlich viele Einträge das Dropdown unübersichtlich oder zu schachtelig werden lassen. Für mehr Übersichtlichkeit kommt dann das Mega Dropdown zum Einsatz. Bei Mega Dropdowns ist das Fenster größer und bietet Platz für Kategorien und alle Links auf einem Blick.

Pro:

  • Sämtliche Seiten und Unterseiten sind auf einen Blick sichtbar und klickbar.
  • Bietet viel Raum und ist begrenzt erweiterbar.
  • Kategorisierung und Strukturierung möglich.
  • Große Typo möglich: gute Lesbarkeit.
  • Auch Icons oder kleine Abbildungen können eingesetzt werden.

Contra:

  • Kann auch schnell unübersichtlich werden.
  • Funktioniert responsive nur in abgewandelter Form.
  • Erfordert eine ausgewogene Struktur und Anzahl an Menu-Punkten.

 

4/ Off Canvas

Bei einer Off Canvas Navigation verschwindet die Navigation aus dem sichtbaren Bereich und kann z. B. durch Klick auf ein Button oder Icon (z. B. Hamburger) hervor gerufen werden. Diese Form der Navigation ist nach wie vor umstritten, der User hat sie inzwischen jedoch verinnerlicht.

4.1/ Page Overlay

Diese Navigationsform funktioniert ebenfalls „Off Canvas“. Ist hier also unterzuordnen. Anstelle einer kleineren Ebene füllt sich der ganze Bildschirm mit der Navigation.

Deine Webseite konvertiert schlecht?

Dann hol dir jetzt die 6 Schritte-Anleitung für ein nutzerfreundliches Webdesign, das die Usability fördert und hilft, dass deine Angebote genutzt werden.

Pro (Off Canvas):

  • Spart jede Menge Platz und überlässt dem Content die Hauptbühne.
  • Bietet Raum und Platz für Erweiterungen.
  • Funktioniert am Desktop PC genauso wie auf mobilen Endgeräten. Ist also absolut konsistent.
  • Kategorisierung und Strukturierung möglich.
  • Große Typo möglich: gute Lesbarkeit.
  • Auch Icons oder kleine Abbildungen können eingesetzt werden.

Contra (Off Canvas):

  • Auf den ersten Blick unsichtbar.
  • Somit besteht Unklarheit über die Inhalte.
  • Navigation funktioniert insgesamt etwas langsamer.
  • Erfordert immer eine Handlung, also mindestens den Klick auf einen Button oder ein Icon um die Navigation sichtbar zu machen.

 

5/ Circular Navigation

Auch spannend ist die Circular Navigation. Sie lässt sich besonders gut mit Storytelling verknüpfen. Doch viele User hätten hier sicher noch Probleme mit der Handhabung. Deshalb sehe ich diese Form der Navigation nur bei speziellen Seiten mit sehr spitzer und webaffiner Zielgruppe.

Und? Welche Navi passt am besten zu dir und warum? Hinterlasse gerne einen Kommentar dazu. Benötigst du noch Hilfe bei der Wahl? Mail mir: hello@goldmarie-suwiemer.de

Wenn du dir die gezeigten Beispiele näher anschauen möchtest, klick auf das jeweilige Bild. Happy day!
 
unsplash-logoHoney Yanibel Minaya Cruz
 

Susanne Wiemer
Hola, ich bin Goldmarie a.k.a. Su Wiemer und ich zeige dir, wie du einen Online-Auftritt gestaltest, der deine Wunschkunden magisch anzieht und sie in Kunden umwandelt – Design matters!

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.