Art-Direction, Webdesign und Grafiker / Strategie, Kunst und Design

Blog

Web Design

So planen Sie die Navigation Ihrer neuen Website

Ein Artikel von .

Bevor das Design der Website anfällt, müssen zunächst eine Reihe von Planungsaufgaben erledigt werden, damit die Website Ihren späteren Besuchern eine zufriedenstellende Benutzererfahrung bietet. Unabhängig davon, ob für die Darstellung Online-Editoren wie Squarespace, Wix, Jimdo eingesetzt werden, ein CMS wie WordPress, Drupal, Typo3 oder ob manuell mit Dreamweaver oder Notepad ++ programmiert wird. Die inhaltliche Planung der Website beginnt idealerweise mit der Navigation.

Wenn die Navigation im Voraus geplant wird, existiert bereits eine Struktur, in die dann alle weiteren Inhalte und Einzelschritte organisiert aufgeteilt werden können. Eine solche Vorarbeit trägt außerdem zu einer verbesserten Designauswahl bei, da bereits die ersten Vorüberlegungen angestellt wurden.

Planung der Websitenavigation
Planung der Websitenavigation

Organisierte Websites führen zu einer verbesserten Usability

Nachdem der Inhalt der Website in einem ersten Schritt grob umrissen wurde wird er als nächstes in einer inhaltlichen Hierarchie erfasst und vordefiniert, um eine Organisation, Struktur und Übersicht hinzuzufügen. Nun müssen Inhalte separiert, sortiert und neu bewertet werden. Anschliessend lassen sich passende Seiten definieren. Hier sollten wir dem menschlichen Verständnis vorbeugen, indem wir korrelierende Informationen und Aussagen zusammenfassen und ergänzen. Themen, die in eine andere Kategorie fallen sollten separiert werden. In dieser Ordnungsphase werden Inhalte neu bewertet und umsortiert. So erhöht sich schrittweise die Usabilty für den zukünftigen Leser. Dieser Prozess führt schliesslich zu einem verbesserten Informationsfluss und zu dem Aufbau einer besseren Website.

User über die richtige Navigation entscheiden lassen

Eine weitere Möglichkeit die Navigation zu organisieren besteht in der Verwendung einer einfachen Karteikartensortierung. So können Sie eine logische und einfache Methode zum Festlegen der Navigation bereitstellen. Ihre eigene Bewertung über die Informationsstruktur wird zurückgestellt und diese wird von Testpersonen durchgeführt. Durch die externe Perspektive lässt sich nicht selten eine einfache und logische Möglichkeit für die Websitenavigation finden. Bei diesem Vorgehen werden einige Karten mit den Themen und Informationen der Unterseiten beschriftet (und ggf. Unter-Unterseiten), welche User erwartungsgemäß auf der Website sehen möchten. Dann lassen Sie ihre Stamm- oder Testkunden die Inhalte in einer Hierarchie zueinander platzieren, indem sie einen geeigneten Platz für die Informationen finden. Möglicherweise werden nun komplett neue Kategorien oder Bezeichnungen vorgeschlagen.

Websitestruktur mit Karteikarten
Websitestruktur mit Karteikarten

Das Endergebnis lässt sich je nach Vorgehensweise noch weiter einschränken und beeinflussen. Wenn man seinen Testnutzern die komplette Entscheidung über Reihenfolge und Hierarchie überlässt fällt das Ergebnis möglicherweise komplett anders als vermutet aus. Indem man bestimmte Kategorien oder Kategoriereihenfolgen vorgibt überlässt man den Usern nur die Einordnung in diese vordefinierten Kategorien.

Navigationsleisten, Suchfelder und Aktionsschaltflächen

Im vorangegangenen Schritt wurde der Inhalt definiert und organisiert. Dann wurde die Navigationsstruktur und innere Ordnung festgelegt. Nun ist der Zeitpunkt gekommen, um über die Funktionsweise der Navigationsarchitektur nachzudenken. Sobald jemand die Website mit dem Wunsch nach einer bestimmten Information aufruft sollten wir ihm einen Weg anbieten, um möglichst schnell zu seiner gesuchten Information zu gelangen. Die Art der verwendeten Navigationsführung entscheidet darüber wie effizient der User zu seiner Information gelangt.

Navigationsmenüs

Es gibt stets mehrere Möglichkeiten, die Navigation einer Website einzurichten. Standardmässig sind das zunächst horizontale und vertikale Navigationsmenüs, welche die einzelnen Unterseiten in einer Ordnung auflisten und eine Übersicht über die Informationen der Website bieten.

Ein Homebutton zum direkten Aufruf der Startseite stellt eine weitere weitverbreitete Funktion dar. Dafür hat es sich bewährt, das eigene Logo auf der Website mit der Seite zu verlinken, so dass ein Klick darauf stets zur Hauptseite zurückführt.

In den unteren Beispiel wird deutlich, dass der Klick auf das Logo zum Hauptbereich der Seite zurückführt.

Horizontale Navigation
Horizontale Navigation

Der gesamte Inhalt der Website darf in diesem Beispiel höchstens ein bis zwei Hierarchieebenen und Klicks entfernt sein, um die Übersichtlichkeit und Usability nicht zu gefährden. Wenn User selbstständig nach Inhalten auf der Website suchen müssen und diese nicht überall intuitiv zu finden sind, werden sie wahrscheinlich proaktiv nicht viel Zeit dafür aufwenden durch Versuch und Irrtum danach zu suchen.

Suchfelder

Wenn der Inhalt einer Website konstant aktualisiert wird oder inhaltlich zu umfangreich ist, um alles in einem einfachen Navigationsmenü zu erfassen, fügt man ein Suchfeld ein. Suchfelder werden üblicherweise im rechten Bereich der Navigationsstruktur angeordnet.

Suchfeld
Suchfeld

Aktionsschaltflächen

Bei Websites, auf denen bestimmte Useraktionen beabsichtigt werden können Vorkehrungen getroffen werden, um erwartbare Maßnahmen wie den Aufruf bestimmter Unterseiten oder E-Commerce-Features zu betonen. Dafür werden auffällige Schaltflächen platziert. Diese Schaltflächen werden normalerweise im rechten Bereich der Website angeordnet. Gestalterisch ist darauf zu achten, dass die Schaltflächen einerseits deutlich genug sind um aufzufallen und sich andererseits selbst harmonisch in das Websitelayout einfügen.

Call to Action
Call to Action Button

Im oberen Bild ist ein Beispiel für einen einfachen Call to Action Button abgebildet. Die Usererfahrung lässt sich bereits im Vorfeld verbessern, indem typische Aktionen antizipiert und vorausgeplant werden.

Treffende Kategoriebezeichnungen

Die Unterseitenbezeichnungen innerhalb der Navigation sollten logischen und vereinfachenden Anforderungen genügen. Allgemeine Bezeichnungen sind besser geeignet als die Verwendung interner Sprachregelungen und die Nennung von Firmen-, Produkt- und Designbezeichnungen. Bei der Navigationsplanung ist es hilfreich sich eine Übersicht über thematisch verwandte Websites zu verschaffen. Oft sieht man, dass die meisten Unterseiten ganz ähnliche Namen tragen. Allgemeine typische Namen sind: Home, Unternehmen, Portfolio, Kontakt usw. Geeignete Bezeichnungen sollten immer kurz und logisch sein.  Auf dem unteren Bild sieht man ein einfaches Beispiel. Die Kategorien weisen einfache Namensbezeichnungen auf und die Unterlinks erklären um welches Thema es auf der betreffenden Einzelseite geht.

Menü mit Dropdown Navigation
Menü mit Dropdown-Navigation

Die Namen der Unterseiten lassen sich testen, indem man vorab Testuser befragt, welchen Inhalt sie auf der gleichnamigen Unterseite vermuten würden. Wenn es eine Übereinstimmung in der Seitenbezeichnung und der Erwartungshaltung gibt sind die Bezeichnungen richtig gewählt.

Was ist besser geeignet: Vertikale oder horizontale Navigation?

Die Wahl der richtigen Navigationsdarstellung unterliegt nicht allein einem optischen Anspruch, sondern hängt auch von dem geplanten Seitenumfang ab. Welche Art der Navigation idealerweise für die eigene Website geswählt wird hängt von der Inhaltsmenge, ästhetischen Gesichtspunkten und einer Verbesserung der Usability ab. Die Auswahl eines horizontalen Navigationsmenüs ist optimal, wenn die Seite wenige Unterseiten enthält, die als Übersicht ständig angezeigt werden sollen. Die Unterseiten lassen sich hier als Reiter, Sektionen oder Container voneinander absetzen.

Horizontale Navigation
Horizontale Navigation

Die vertikalen Navigationsmenüs funktionieren besser bei umfangreichen Seiten und stetig wachsenden Inhalten. Durch diese Art der Menüanordnung können mehr Unterseiten übersichtlich dargestellt werden. Die vertikale Navigation benötigt viel Platzbedarf auf dem Bildschirm und schränkt somit den Gestaltungsspielraum für den übrigen Informationsteil ein.

Vertikale Navigation
Vertikale Navigation

Fazit

Dies waren einige grundlegende Navigationskonzepte, die dabei helfen sollen eine bessere Navigation für die eigene Website zu planen. Aus meiner Sicht macht es fast immer Sinn die Erwartungshaltung seiner User zu erfüllen, auch wenn dies die eigene Kreativität einschränken mag. Die Berücksichtigung von Usererwartungen äußert sich später auch in verbesserten Konvertierungsraten. Ein Websitelogo sollte beispielsweise im linken oberen Bereich der Website platziert werden und stets zur Startseite zurückführen. Alle Menüelemente sollten anklickbar sein. Außerdem macht es Sinn, die Navigationsleiste beim Seitenaufruf zu fixieren, so dass sie auch bei Scrollenden Seiten stehenbleibt. Verwenden Sie Dropdown-Navigationen, um Unterkategorien und Unterseiten darzustellen. Halten Sie die Seitenbezeichnungen eindeutig und prägnant. So ist es nicht schwierig, typische Fehler bei der Planung der neuen Navigationsstruktur zu vermeiden. Wer seine Navigation bereits im Vorraus plant kann den Erstellungsprozeß seiner Website nach meiner Erfahrung drastisch beschleunigen und erhält eine Website mit deutlich besserer Usabilty.

Abgelegt in: Web Design Datum: 22. Juni 2019 Erstellt von Stephan Bender

Schreibe einen Kommentar

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

Dok: Ben.design Web DesignSo planen Sie die Navigation Ihrer neuen Website