Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen

Das Entwerfen der Navigation für eine Website ist wie das Legen des Fundaments für ein Haus. Wenn das Fundament nicht solide ist, kann kein noch so spektakuläres Design die potenziellen Risiken der Gebäudestruktur verbergen. Dasselbe gilt tatsächlich auch für Websites. Wenn Sie möchten, dass Ihre Website eine hervorragende Benutzererfahrung, eine gute Konversionsrate und beträchtliche Umsätze bietet, müssen Sie viel Zeit darauf verwenden, die Bedürfnisse Ihrer Benutzer zu verstehen, den Inhalt der Website sorgfältig zu gestalten und ein zuverlässiges, intuitives und effektives System zur Inhaltsorganisation zu finden. Die äußere Erscheinungsform dieser Dinge ist das Navigationsdesign der Website.

Was ist Navigation?

Viele Menschen haben unterschiedliche Vorstellungen vom Design der Website-Navigation. Einige argumentieren, dass die Website-Navigation aus zentralen Elementen einer Webseite besteht, die es den Benutzern ermöglichen, klar und intuitiv zu finden, was sie suchen. Manche glauben auch, dass das Navigationsdesign eine Methode ist, den Benutzern zu helfen, die wichtigsten Informationen auf der Website zu finden, um Verkäufe zu tätigen oder Anfragen zu beantworten. An diesen Aussagen ist nichts auszusetzen. Sie sind alle Teil des Navigationsdesigns.

Wie bei vielen Dingen im Designbereich gibt es auch für das Navigationsdesign keine einheitliche und konsistente „offizielle“ Designmethode oder -erklärung. Jede Website hat aufgrund vieler Faktoren wie Ziele, Anforderungen, Designtechniken, Vorgänge usw. ihr eigenes, einzigartiges Navigationsdesign. In Bezug auf die grundlegendsten Designideen und die Organisationsstruktur verfügt das Navigationsdesign jedoch immer noch über grundlegende Regeln und Prinzipien, um die Zuverlässigkeit der Organisationsstruktur sicherzustellen und die Wahrscheinlichkeit eines Fehlers zu verringern.

70percentpure verwendet zur Benutzerführung die einfachste und gebräuchlichste vertikale und horizontale Navigation.

1. Bestimmen Sie zuerst die Informationsarchitektur

Bei der Planung einer großen Website steht die Planung der Inhalte noch vor der Gestaltung der Navigation im Vordergrund. Die Informationsarchitektur (IA), von der wir hier sprechen, ist eine sinnvolle Möglichkeit, Informationen zu organisieren und das Grundgerüst des Website-Inhalts zu unterstützen. Die Hauptaufgabe der Informationsarchitektur besteht darin, eine reibungslose Brücke zwischen Informationen und Benutzererkenntnis zu bauen.

Das Betrachten der Website-Inhalte aus einer höheren Perspektive hilft beim Aufbau der Informationsarchitektur. Noch wichtiger ist, dass Sie lernen, die Inhalte der Website aus der Perspektive des Benutzers zu betrachten. Dies bedeutet, dass Sie manchmal dieselbe Sache sowohl aus einer positiven als auch einer negativen Perspektive betrachten müssen. Aus unterschiedlichen Perspektiven werden Sie feststellen, dass die Art und Weise, wie manche Inhalte präsentiert werden, sehr unmenschlich ist. Sie können den Rahmen verfeinern, indem Sie sich die folgenden Fragen stellen:

Welche Seiten sind für diese Website wichtig?

Hat jede Seite aus Sicht der Makroarchitektur ihren eigenen, unabhängigen Zweck? Beeinträchtigt ihre Existenz die allgemeine Kontinuität und Zuverlässigkeit?

Welche Inhalte müssen in Zukunft kontinuierlich bereitgestellt und aktualisiert werden?

Welche Benutzergruppen muss die Website ansprechen? (Angemeldete Benutzer, Abonnenten, Werbetreibende usw.)

Welche Ziele möchte die Website für jeden Benutzer erreichen?

Wenn Sie über diese Fragen nachdenken, können Sie die Informationsarchitektur Ihrer Website verbessern und das Navigationsdesign vorbereiten.

2. Mach es einfach

Die überwiegende Mehrheit der Website-Besucher wird vermutlich der Meinung sein, dass der Navigationsbereich einer Website möglichst einfach gestaltet sein sollte. Tatsächlich kann ein komplexes und überladenes Design der Navigationsleiste die allgemeine Benutzerfreundlichkeit der Website erheblich beeinträchtigen.

Dies gelingt der Website von Bloomberg, indem sie eine einfache Navigationsleiste verwendet, um die Komplexität der Site zu verbergen.

Allerdings kann die Einfachheit des Designs täuschen. Bei der weiteren Verarbeitung werden die Benutzer feststellen, dass komplexe Informationen auf scheinbar einfache Weise verpackt werden. Hier kommt die Informationsarchitektur ins Spiel.

Nehmen wir beispielsweise die Homepage von Microsoft: Die Navigationsleiste der Website ist in vier Elemente unterteilt. Angesichts der riesigen Produktpalette von Microsoft ist dies fast bis zum Äußersten vereinfacht. Aus diesem Grund ist das Dropdown-Menü jedes Elements geschickt in mehrere Abschnitte unterteilt. Auf diese Weise ist die Navigationshierarchie klar, Benutzer können schneller finden, was sie suchen, und Microsoft kann auch komplexe und vielfältige Produkte und Dienste in eine scheinbar einfache Navigationsleiste integrieren.

Auf Minisite-ähnlichen Unterseiten wird auch die Navigationsleiste im gleichen Design gestaltet. Auf den ersten Blick ähneln die Menüeinstellungen stark der Homepage, tatsächlich hat der Designer jedoch mehr Details und zielgerichtetere Funktionen und Dienste hinzugefügt.

Im Allgemeinen ist dieses Navigationsleistendesign benutzerfreundlicher und vorhersehbarer, während die Konsistenz gewahrt bleibt. Angesichts des Umfangs der Microsoft-Produkte und der für die Produkte erforderlichen Seitenzahl ist das Design der offiziellen Microsoft-Website offensichtlich das Produkt einer sehr zeitaufwändigen iterativen Entwicklung, was nicht einfach ist. Mit einer solchen Organisationsstruktur bietet die offizielle Website nicht nur ein besseres Benutzererlebnis, sondern erleichtert Microsoft auch die Verwaltung von Inhalten. Dadurch werden die Dinge nicht nur einfacher, sondern auch die Komplexität wird reduziert.

3. Wählen Sie die Richtung sorgfältig

Computerbildschirme sind traditionell horizontal ausgerichtet, weshalb vertikale Dropdown-Menüs schon seit langem die gängige Richtung beim Design von Navigationsleisten sind. Diese Gestaltung ist ausgewogen und weniger störend und stellt aus gestalterischer Sicht eine gute Wahl dar.

Als Hersteller von Virtual-Reality-Geräten hat Oculus die Navigation horizontal gestaltet, was der natürlichen Logik ihrer Geräte sehr entspricht.

Allerdings genügt die horizontale Navigation nicht unbedingt den Anforderungen aller Websites, weshalb es insbesondere im E-Commerce-Bereich so viele Websites mit vertikaler Navigation gibt. Zur Kennzeichnung der unterschiedlichen Kategorien werden farbige Beschriftungen verwendet und die vertikale Navigation entspricht den Einkaufsführern in der realen Welt. Diese Art der Navigation entspricht der Informationsarchitektur mit mehreren Kategorien und mehreren Inhalten. Die Verwendung einer horizontalen Navigation führt hier aufgrund der Kategorien und des Textinhalts zu Verwirrung.

Es ist nicht einfach, eine gute vertikale Navigation zu entwerfen, insbesondere wenn Ihre Website viele Inhalte hat. Die Website von Jack Jones ist ein guter Ausgangspunkt.

Die kleinen Icons in der Website-Navigation sind gut lesbar. Die einfachen Formen enthalten viele Informationen, die übersichtlich und aussagekräftig sind. Jedes Mal, wenn Sie auf eine Kategorie klicken, wird das Menü erweitert und zeigt Unterkategorien mit klarer Logik an.

Natürlich können Sie auf der Website von Squarepusher auch ein relativ ungewöhnliches vertikales Menüdesign sehen. Die Navigation besteht aus Registerkarten, zwischen denen Besucher durch Scrollen wechseln können. Dies entspricht einem eher linearen Design der Navigationsleiste.

Fazit: Die Regeln ändern sich

Durch die kontinuierliche Entstehung neuer Prozesse und Technologien ergeben sich ständig neue Designtrends und wir stehen vor neuen Herausforderungen. Durch Responsive Webdesign erscheint die herkömmliche horizontale Navigation auf dem Desktop eher in der Form einer vertikalen Navigation auf dem mobilen Endgerät. Das Navigationsdesign ist nicht länger durch feste Schemata eingeschränkt und eine Vielzahl von Ausdruckstechniken kann hervorragende Ergebnisse erzielen. Ein iterativer Ansatz für Design und Tests lässt sich jedoch am besten anhand der Konvertierungsraten und Statistiken der Website verfolgen.

Als Motor Ihrer Website funktioniert das Navigationsdesign am besten, wenn es vorhersehbar, übersichtlich, einfach und konsistent ist.