Die richtige Navigationsart für Ihre Webseite

Landingpages

 

Der Erfolg einer Website hängt maßgeblich auch von deren Benutzerfreundlichkeit und der damit verbundenen Navigation ab.

Die Konzepter geben sich besondere Mühe, den Benutzer auf bestimmten Wegen durch die Webseite zu leiten. Webseiten werden immer komplexer, multimedialer und vielseitiger. Dennoch bleibt die Navigation das Rückgrat der Webseite.

Die wesentlichen Unterscheidungsmerkmale einer Navigation sind deren Aufbau sowie die Positionierung. Viele Webseiten nutzen den oberen Bereich einer Webseite zur Platzierung des Navigationsmenüs. In diesem Bereich erwarten die meisten Besucher die Navigation. Aber nicht immer steht die Navigation an der gewohnten Stelle. Folgende Navigationsmöglichkeiten möchte ich euch vorstellen:

 

Top-Navigation

 

top-navigation-morefiremedia

 

Die Position der Navigationselemente ist entweder direkt oben am Anfang der Webseite im Headerbereich oder direkt unter dem Logo angeordnet. Kleineren Webseite genügt eine einstufige Navigationsstruktur, größere Seiten greifen in der Regel auf Drop-down-Menüs oder eine zweite Hierarchiestufe für die Abbildung weiterer Ebenen zurück.

Die einstufige Navigation eignet sich besonders für Webseite mit einer überschaubaren Anzahl von Rubriken oder Oberbegriffen, die Sie auf der ersten Ebene unterbringen müssen. In der Praxis hat sich eine Obergrenze zwischen zehn und zwölf Elementen bewährt. Sollten Sie mehr Navigationspunkte benötigen, können Sie entweder weitere Ebenen aufbauen, unwichtige Punkte in den Footer verschieben oder eine andere Navigationsstruktur wählen.

 

Sidebar-Navigation

 

sidebar-navigation-zalandoshop

 

In der Regel wird diese Navigationsstruktur in der linken oberen Ecke einer Webseite platziert, da die Links-nach-rechts-Leser Ihren ersten Blick auf diesen Bereich des Fensters lenken. Die Sidebar kann beliebig viele Elemente aufnehmen, was natürlich auch ein entsprechendes Risiko darstellt. Der Besucher möchte nicht erst lange suchen, bevor er zu den gewünschten Inhalten kommt. Versuchen Sie, die Punkte der ersten Ebene in der Top-Navigation auf ein Minimum zu begrenzen, strukturieren Sie Ihre Inhalte sinnvoll und arbeiten Sie mit einer zweiten Gliederungsebene.

 

Breadcrumb-Navigation

 

breadcrumb-navigation-asosshop

 

Mit der Breadcrumb behalten Sie immer den Überblick über die Position innerhalb derWebseite, an der Sie sich gerade befinden. In der Regel wird diese Art der Navigation ergänzend zu einer übergeordneten Navigation eingesetzt. Die Breadcrumb empfiehlt sich besonders bei komplexen Webseiten.

 

Tag-Cloud-Navigation

 

tagcloud-navigation-awwwards

 

Bereits ein wenig aus der Mode gekommen ist die Navigation über Tag-Elemente, also Klassifikationsmerkmale zu den Inhalten einer Webseite. Diese Tag-Clouds können Sie automatisch aus den beschreibenden Attributen der Inhaltsseiten einer Webseite erstellen lassen. Die Tag-Cloud wird in der Regel nicht als einzige Navigationsform einer Webseite angeboten, sondern dient immer nur als Alternative und ergänzt die primäre Navigation. Manche Tag-Clouds stellen die Bedeutung einzelner Begriffe durch eine unterschiedliche Größe und Formatierung dar – je häufiger das Wort in den Beschreibungen oder den Texten vorkommt, desto auffälliger wird es in der Tag-Cloud dargestellt.

 

Suche als Navigation

 

suche-amazon

 

Kann eine Suche wirklich als Navigationselement dienen? Wenn Sie eine Webseite besuchen wo Sie genau wissen was Sie suchen,  gelangen Sie durch die Suche in den meisten Fällen am schnellsten ans Ziel. Im optimalen Fall ist die Suche zusätzlich mit einer Vorschlagsliste gekoppelt, damit Sie bereits bei der Eingabe sehen, welche Optionen Ihnen zur Verfügung stehen. Diesen Komfort bieten vorrangig größere Shopping-Seiten. Damit Sie nicht zu lange suchen müssen, erlaubt Ihnen die Suchmaschine zusätzlich eine Filterung.

 

Aufklappende Menüs

aufklappende-navigation-mightynice

 

Eine spezielle Ergänzung für horizontale und vertikale Navigationsstrukturen sind die aufklappenden Menüs. Diese unterscheiden sich von einer Navigation über mehrere Ebenen vor allem durch die Anzahl von Menüpunkten. In dieser Form der Implementierung wird die erste Ebene durch eine Vielzahl von Elementen auf der zweiten ergänzt. Auf der ersten Ebene finden Sie die einzelnen Produktgruppen (bspw. bei Shops), Links zum Shop oder weiteren Unterseiten. Ein großes Problem dieser Art von Menüs ist der Hinweis auf ihre Existenz. In der Regel klappt das Menü auf, wenn Sie den Menüpunkt der ersten Ebene mit dem Mauszeiger berühren. Sie müssen Ihrem Besucher einen entsprechenden Hinweis auf die weiteren versteckten Inhalte geben. Dies kann über einen Pfeil an der rechten unteren Ecke eines Navigationspunktes gelöst werden.

 

Geführte Suche

 

gefuehrte_suche-adidasshop

 

Eine weitere Alternative bei der Navigation ist die geführte Suche. Diese finden Sie oftmals in Shops, die Kleidungsstücke oder Schuhe verkaufen. Anhand mehrerer Parameter werden die Treffer eingeschränkt, bis Sie zum gewünschten Ergebnis oder zumindest der eingeschränkten Ergebnismenge gelangen. Vor allem große Shopping-Seiten mit einer umfangreichen Auswahl innerhalb einer Rubrik werden nur schwer umhinkommen, spezifischere Filter auf die Ergebnismenge anzubieten als eine reine Suche. Werden diese Filterkriterien geschickt eingesetzt, wird eine Suche sogar überflüssig.

 

 

Navigation im Footer-Bereich

 

footer-navigation-computerwissen

 

Eine sinnvolle Ergänzung zur Header- oder Sidebar-Navigation sind Navigationselemente im Footer-Bereich. An dieser Stelle finden Sie oftmals Navigationspunkte, die zwar für eine Webseite wichtig sind, jedoch nicht das primäre Geschäft abdecken wie „Presse“, „Impressum“ oder „Karriere“, aber auch Verlinkungen zu Social-Network-Diensten wie Twitter oder Facebook. Diese Navigationsebene wird von den meisten Webseite genutzt und fast alle Betreiber bauen inzwischen darauf, dass Ihre Kunden bis zum Ende scrollen um alle Inhalte zu sehen.

Schreibe einen Kommentar

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



Weitere Artikel zu Landingpages

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »

CSS – das Design der Website Im ersten Teil der HTML Blogserie habe ich... Mehr lesen »


Weitere Artikel von Alexander
Design Landingpages Online Marketing
Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Design Landingpages
Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »

Landingpages Online Marketing
Mit Hilfe von Eye-Tracking Studien können Sie Webseiten analysieren und... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
Facebook

Bilder einfügen in Facebook-Kommentaren – Gut oder schlecht?

Bereits im Juni war es bei Facebook-Profilen schon möglich Kommentare mit Bildern zu versehen. Für... Mehr lesen »
^