Grafik-Website-Navigation

Navigation – welche Form ist für meine Website geeignet?

Welche Arten gibt es? Wo verwendet man welche? Was sind Vor- und Nachteile?
Darüber hinaus hat eine Navigation mehr Aufgaben, als Anwendern die Möglichkeit zu bieten, sich von Punkt A zu Punkt B zu klicken.

Eine Navigation stellt einen Punkt der Orientierung dar. Zum einen vermittelt sie einen ersten Eindruck über die Inhalte der Website, zum anderen zeigt sie Besuchern, wo man sich aktuell befindet.

Es gibt verschiedene Typen für Navigationen. Dabei gibt es keine Regel, auf welche Website welche Navigation verwendet werden muss. Sowohl die Struktur als auch die Komplexität einer Website sind ausschlaggebend für die Wahl der Navigation.

Navigation-Bar

Die Navigation-Bar ist der Grundbaustein einer Hauptnavigation. Von ihr leiten sich viele folgende Konzepte ab. Es handelt sich um eine Leiste, welche die Menüpunkte und oft auch das Logo einer Website beinhaltet. Dadurch, dass alle Menüpunkte aufgenommen werden, sind für Besucher auf einen Blick alle Inhalte erkennbar. Besonders häufig findet man dieses Konzept auf sogenannten One-Pager-Websites. Hierbei handelt es sich um Websites, die ihren kompletten Inhalt auf einer Seite präsentieren. In der Navigation sind Sprungmarken zu einzelnen Abschnitten der Seite zu finden. Ein Beispiel stellt die Website onepager.de dar.

Die Experten- Navigation

Die Seite zeigt den Abschnitt Die Experten an, welcher in der Navigation gelb hervorgehoben wird. Doch auch auf Portfolio- oder kleineren Unternehmenswebsites ist dieses Konzept häufig zu finden, da sich die Inhalte oft in einer Ebene darstellen lassen. Einen Nachteil dieses Konzept macht die Website onlineformat.de deutlich.

Online Format - Navigation

Besucher könnten annehmen, dass es sich bei den gezeigten Menüpunkten um alle Inhalte der Website handelt. Allerdings befinden sich unter dem Menüpunkt Leistungen weitere Seiten, welche dem Nutzer nicht angezeigt werden.

Dropdown-Menü

Das Dropdown-Menü erinnert auf den ersten Blick an die Navigation-Bar. Allerdings ermöglicht es, dass Menüpunkte weitere Unterseiten aufnehmen und darstellen können. Durch Klicken auf einen Menüpunkt oder mithilfe eines Hover-Effekts öffnet sich die zweite Ebene. Die Abbildung zeigt die Onlineformat-Website mit geöffnetem Dropdown-Menü. Dieses wurde durch einen Hover-Effekt getriggert.

Online Format - Navigation

Da das Menü durch einen Hover-Effekt geöffnet wird, schließt es sich wieder, sobald sich die Maus nicht mehr über dem Menüpunkt befindet. Um diesem Problem entgegenzuwirken, wird der Bereich, in dem der Hover-Effekt ausgelöst wird, mithilfe von Padding unsichtbar vergrößert. Um ein gezieltes Klicken innerhalb des Dropdown-Menüs zu ermöglichen, darf die Schriftgröße nicht zu klein gewählt werden. Benutzer könnten, ohne es zu bemerken, einen anderen Unterpunkt klicken. Zusätzlich sollten ausgewählte Menüpunkte stark hervorgehoben werden. In der Abbildung ist schwer zu erkennen, dass der Menüpunkt WordPress-Wartung ausgewählt ist. Eine Lösung hierfür wäre, eine farbliche Hervorhebung vorzunehmen. Auf anderen Websites sind Dropdown-Menüs mit mehr als zwei Ebenen zu finden. Dort wird das erste Dropdown nach unten oder zur Seite hin erweitert. Zu viele Verschachtelungen könnten beim Benutzer zu Verwirrung führen. Weitere Probleme könnten bei der Bedienung entstehen. Es gibt mehr Möglichkeiten, auf das falsche Element zu klicken oder eine kleine Mausbewegung deaktiviert versehentlich den Hover-Effekt oder aktiviert einen anderen Punkt im Menü.

Mega-Menü 

Ähnlich wie das Dropdown-Menü öffnet sich das Mega-Menü durch Klicken oder einen Hover-Effekt. Dadurch ergeben sich ähnliche Probleme. Nutzern werden auf den ersten Blick viele Informationen vorenthalten. Die Hauptnavigation der Telekom wirkt zunächst sehr überschaubar. Die Hauptnavigation besteht aus sieben Oberbegriffen. Sobald die Maus über einen dieser Punkte geführt wird, wird dieser mit einem Hover-Effekt farblich hervorgehoben und das Mega-Menü öffnet sich.

Telekom - Navigation

Ein Beispiel soll zeigen, worin weitere Probleme des Mega-Menüs liegen. Angenommen, ein Besucher hat Probleme mit seiner Telekom-App auf seinem Smartphone und sucht auf der Website der Telekom nach Lösungen. Da man Smartphone unter dem Punkt Mobilfunk einordnen könnte, sucht er dort. Allerdings wird er hier nicht fündig, da sich der Punkt unter Service befindet. Eine Lösung hierfür wäre, bestimmte Seiten unter mehreren Menüpunkten zu verlinken. Der Vorteil eines Mega-Menüs, ist der Umfang an Seiten, der präsentiert werden kann. Jedoch muss darauf geachtet werden, dass die Menüpunkte aussagekräftig und klar für einen Besucher erscheinen, damit er findet, wonach er sucht. Durch den zuvor angesprochenen unsichtbar vergrößerten Bereich kommt es beim Navigieren im Mega-Menü zu Problemen. Möchte man unter Mobilfunk den Punkt Geräte auswählen, kann es passieren, dass durch die Mausbewegung nach rechts der Menüpunkt Festnetz & Internet geöffnet wird. Hierfür wäre eine Lösung, das Mega-Menü durch ein Klicken auf einen Menüpunkt zu öffnen.

Nicht alle Mega-Menüs verwenden Oberbegriffe für die Menüstruktur. Die Website von Volkswagen verwendet einen Button, um das Mega-Menü zu öffnen. Bei dem Button handelt es sich um eine Form des Hamburger-Menüs, welches aus der mobilen Welt bekannt ist. Nachdem es sich auf dem Smartphone seit mehreren Jahren im Einsatz befindet, wagen sich Designer immer häufiger, das Icon auch auf Desktop-Ansichten zu integrieren. Durch seine kleine Form nimmt es wenig Platz ein und sorgt für eine minimalistische Optik. Dadurch lässt es sich leicht in bestehende Designs integrieren und es bleibt mehr Platz für Inhalte.

Obwohl das Icon vielen Nutzern vertraut erscheinen sollte, ist nicht garantiert, dass jeder Besucher weiß, wofür es steht. Daher empfiehlt es sich, eine Beschreibung des Icons hinzuzufügen. Aus Sicht des Benutzers könnte es als störend auffallen, dass immer mindestens zwei Klicks erforderlich sind, um über das Menü auf eine andere Seite zu navigieren. Erneut tritt das Problem der fehlenden Informationsvermittlung auf. Sobald das Menü der Volkswagen-Website geöffnet wird, erhält der Besucher einen Einblick in das Menü. Neben den Menüpunkten der ersten Ebene werden Besuchern weitere Links zur Verfügung gestellt. Zum einen befinden sich auf der rechten Seite Quicklinks mit zusätzlichem grafischem Inhalt, um direkt zu einem konkreten Thema zu navigieren. Zum anderen befindet sich unten im Menü eine Kopie des Footer der Website.

Such-Menü

Das Such-Menü verwendet einen komplett anderen Ansatz der Navigation. Benutzern werden durch eine Eingabe von Stichworten Produkte oder Inhalte präsentiert. Auf Google werden täglich mehrere Milliarden Suchanfragen gestellt. Seit Jahren sind Nutzer mit dieser Form der Navigation vertraut. Neben Google findet man diese Form auf E-Commerce-Websites wie Amazon oder Ebay. Doch auch große Konzerne wie die Telekom oder Volkswagen bieten neben dem klassischen Menü die Möglichkeit, Inhalte mithilfe von Stichworten zu filtern.

VW - Navigation

Diese Form ermöglicht Nutzern auf großen Websites gezielt nach Inhalten zu suchen. Auf einer One-Pager-Website wäre diese allerdings überflüssig, da der Umfang einer solchen Website deutlich geringer ist. Darüber hinaus sollte die Suche als Zusatz zu einem klassischen Menü integriert werden, da Nutzern sonst jegliche Form der Informationsbeschaffung verweigert wird. Die Suche lässt sich ähnlich wie das Mega-Menü mithilfe eines Icons einbinden oder direkt mit einem Suchfeld, in welches Begriffe eingetippt werden können. Des Weiteren erlangen Benutzer einen besseren Überblick über die Website, wenn sie diese durch Klicken erkunden.

Side-Navigation

Wie der Name bereits verrät, handelt es sich hierbei um eine Navigation, welche sich an der Seite einer Website befindet. Während sie zu Beginn des WWW häufig als Hauptnavigation verwendet worden ist, dient sie heute überwiegend der lokalen Navigation. Das bedeutet, dass sie die Hauptnavigation erweitert und nicht über die Hauptnavigation erreichbar ist. Die Website der Universitätsmedizin in Mainz verwendet neben einer Navigation-Bar als Hauptnavigation die Side-Navigation auf ihren Unterseiten. Alle direkten Unterseiten des Menüpunkts Patienten & Besucher befinden sich in der Side-Navigation. Dadurch wirkt die Hauptnavigation sehr aufgeräumt und überschaubar. Sobald Besucher sich für einen Menüpunkt entscheiden, wird das gewählte Themengebiet in weitere Kategorien geteilt. Da sich dieses Verhalten über die gesamte Website hinweg wiederfindet, erfährt der Besucher eine konsistente Benutzerführung. Durch farbliche Hervorhebungen im Menü ist auf den ersten Blick erkennbar, an welchem Punkt Nutzer sich befinden. Andere Websites, wie die kgu.de, verzichten auf eine Navigation-Bar als Hauptnavigation und verwenden eine linke Side-Navigation als Hauptnavigation. Eine Studie hat 2017 ergeben, dass Nutzer des WWW 80 Prozent ihrer Zeit die linke Hälfte des Bildschirms betrachten (vgl. Fessenden 2017).

UniversitätsMedizin - Navigation

Breadcrumb-Navigation

Die Breadcrumb-Navigation erinnert an das Märchen Hänsel & Gretel. Dort werden Brotkrümel genutzt, um einen Weg nach Hause zu markieren. Dieselbe Funktion verfolgt auch die Breadcrumb-Navigation im WWW. Zum einen soll sie Nutzern Informationen darüber vermitteln, wo sie sich aktuell befinden. Zum anderen bietet die Navigation die Möglichkeit, immer auf die übergeordnete Ebene zurückzukommen. Oft ist sie in die Hauptnavigation integriert oder unter ihr platziert. Auf der Website von Ikea befindet sich die Breadcrumb-Navigation unterhalb der Hauptnavigation. Die Breadcrumb-Navigation setzt sich aus Text-Links zusammen. Sie spiegeln die Website und ihre Verschachtelung wider. Mit einem Klick auf einen dieser Links können Nutzer direkt zum gewählten Ausgangspunkt zurückkehren.

IKEA - Navigation

Quicklinks

Eine weitere Form, um Besucher auf bestimmte Inhalte einer Website zu steuern, sind Quicklinks. Wie der Name vermuten lässt, handelt es sich hierbei um eine Möglichkeit, schnell zu einer bestimmten Seite oder einem bestimmten Inhalt zu navigieren. Auf der L’Osteria-Website werden Quicklinks verwendet, um Besucher zu einer Karte der Standorte, zur Speisekarte und zum Reservierungsformular zu verlinken.

L'Osteria - Navigation

Problematisch ist hier die Verwendung von Icons. Auf Anhieb ist einem Besucher nicht ersichtlich, worum es sich bei den roten und schwarzen Quadraten handelt. Eine Beschreibung der einzelnen Links könnte hier die Benutzererfahrung aufwerten. Diese könnten auch durch einen Hover-Effekt eingeblendet werden, um Platz zu sparen. Andere Websites verwenden Quicklinks, um Besucher zur Kontaktaufnahme zu navigieren. Sie bieten die Möglichkeit, wichtige Inhalte besonders hervorzuheben.

Footer

Der Footer befindet sich unten auf einer Website und beinhaltet oft die Hauptnavigationspunkte einer Website. Zusätzlich wird er durch Seiten wie Impressum, Datenschutz oder AGBs ergänzt. Bei besonders langen Seiten befindet sich im Footer häufig eine Möglichkeit, mit einem Klick an den Anfang der Seite zu springen. Dadurch wird Nutzern langes Scrollen erspart. Weitere Inhalte des Footer könnten Informationen zum Kontakt oder Links zu Social-Media-Kanälen sein. Es gibt keine vorgeschriebene Größe für einen Footer oder seinen Umfang. Ein entscheidender Faktor dafür ist die Komplexität der Website und wie viele Informationen am Ende einer Seite zusätzlich präsentiert werden sollen. Der Footer der E.ON-Website setzt sich aus zwei Teilen zusammen. Der obere Teil ist aufgebaut wie ein Mega-Menü. Hierbei handelt es sich um eine Darstellung der Hauptmenüpunkte mit Untermenüpunkten. Der untere Teil beinhaltet auf der linken Seite Links zu den Social-Media-Kanälen von E.ON. Daneben befinden sich Text-Links zu Seiten wie dem Impressum oder dem Datenschutz. Zum Schluss gibt es noch einen Copyright Hinweis und das Logo von E.ON.

EON - Navigation

Fazit

Zusammenfassend lässt sich sagen, dass kleine Websites gut und gerne auf ein Mega-Menü und Such-Menü verzichten können. Such-Menüs eignen sich auf Websites, auf denen Besucher bereits eine grobe Idee haben, und so gezielt suchen können. Kleine Websites werden gerne durch exploratives Klicken erforscht. Hier eignen sich besonders gut eine Navigation-Bar, ein Dropdown-Menü oder auch eine Side-Navigation. Zusätzlich sollten große Websites auf die Verwendung von weiteren Informationsvermittlern, wie der Breadcrumb, zurückgreifen. So verlieren Besucher nicht die Orientierung und verlassen aufgrund von Verwirrung nicht die Website. Quicklinks sind eine gute Art, um auf besonders wichtige Seite zu verlinken. Das könnten zum Beispiel die Kontaktseite oder auch die Social-Media-Kanäle sein.

Häufig sind User beeinträchtigt, wenn ein Dropdown- oder Mega-Menü durch einen Hover-Effekt getriggert wir. Nicht selten kommt es vor, dass eine kleine Mausbewegung einen anderen Menüpunkt hervorhebt oder sich das gesamte Menü schließt. Dabei wäre das ganze Problem mit einem Klick als Trigger einfach zu lösen.

Jetzt kennst auch Du die wichtigsten Navigationstypen und kannst besser abschätzen, welche Form für Deine Website geeignet wäre. Bei Fragen und Anmerkungen rund ums Thema stehen wir natürlich gerne zur Verfügung.

Autor: Laurenz Seipel

Unser erfahrenes Team steht Ihnen gerne bei der Entwicklung Ihrer Website zur Seite – von der Konzeption über das Design bis zur Codierung. Erfahren Sie mehr über unsere Dienstleistungen:  https://www.pagemachine.de/beratung/user-experience

Kontaktieren Sie gerne uns unter info@pagemachine.de

Schreibe einen Kommentar

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