3 wesentliche Regeln für ein effektives Navigationsdesign
Die Gestaltung Ihrer Website-Navigation ist wie das Fundament für Ihr Haus zu legen. Wenn Sie Ihr Fundament nicht richtig planen, könnte Ihr Gebäude zusammenbrechen, egal wie schön es aussieht. Wenn Sie von den besten Verkäufen oder Conversions profitieren möchten, die auf Ihrer Website möglich sind, müssen Sie Zeit damit verbringen, zu planen, wie Ihre Zielgruppe mit Ihren Inhalten interagieren wird, und die intuitivste Art der Organisation und Darstellung ermitteln.
Denken Sie immer daran, wenn Sie diesen Teil falsch verstehen, riskieren Sie, einen großen Teil Ihres Publikums zu verprellen.
Was ist Navigation?
Es gibt mehr als eine Sichtweise auf die Navigation. Sie könnten sagen, dass es ein Schwerpunktelement auf Ihrer Website ist, mit dem Ihre Kunden ohne Verwirrung oder unnötige Klicks das finden, wonach sie suchen. Gleichermaßen könnten Sie argumentieren, dass es ein Weg ist, Ihre Kunden sanft zu den wichtigsten Informationen auf Ihrer Website zu führen, um Verkäufe oder Anfragen zu generieren.
Wahrscheinlichkeiten sind, es ist beides.
Navigationsdesign ist wie viele andere Dinge im Design: Es gibt keinen allgemein akzeptierten "richtigen Weg", es zu tun. Jede Website stellt ihre eigenen Herausforderungen dar, die auf verschiedene Arten angegangen werden können. Die gute Nachricht ist, dass es Möglichkeiten gibt, über Inhalte nachzudenken und diese zu organisieren, die das Risiko des Scheiterns minimieren.
70percentpures Website kennzeichnet einfache Navigation, die vertikal und horizontal ist.
1) Beende deine IA zuerst
Die Planung des Inhalts für eine große Website ist eine wichtige Aufgabe, die abgeschlossen sein muss, bevor Sie Ihre Navigation entwerfen. Anders als IA (Information Architecture) bezeichnet dieser Überblick, das Verständnis und die Manipulation Ihrer Inhalte das Rückgrat der Benutzerfreundlichkeit Ihrer Website. Entwerfen Sie Ihre Navigation vor - oder statt - um Ihre IA richtig zu gestalten, wäre wie ein Buchindex zu erstellen, bevor Sie die Seiten setzen. Keine gute Idee.
Eine natürliche Fähigkeit, das große Ganze zu sehen, hilft bei der Arbeit an IA. Noch wichtiger: Sie müssen den Inhalt aus der Sicht eines Benutzers sehen können. Manchmal bedeutet dies, dass man gegen die eigene Kategorisierung des Inhalts des Kunden vorgehen muss. Bereiten Sie sich auf Widerstand vor, wenn dies der Fall ist.
Hier sind ein paar Dinge, die Sie sich selbst stellen können, um bei der Vorbereitung Ihres Programms zu helfen und es gegenüber dem Kunden zu rechtfertigen:
- Welche Seiten werden für diese Seite benötigt?
- Hat jede Seite einen Zweck innerhalb des weiteren Schemas und ist der Inhalt in vernünftige, zuordnungsfähige Brocken aufgeteilt?
- Welche Vorkehrungen müssen für das Hinzufügen von Inhalten in der Zukunft getroffen werden?
- Mit welchen Benutzergruppen arbeiten Sie? (zB eingeloggt / abgemeldet, Abonnementarten, Werbetreibende, etc.)
- Was ist das primäre Ziel für jeden Benutzertyp?
Die Beantwortung aller oben genannten Punkte und das Verständnis dafür, wie sich Ihr Inhalt auf Ihre Nutzer bezieht, ist für ein gutes Navigationsdesign von grundlegender Bedeutung.
2) KISS: Mach es manchmal einfach
Jeder, der jemals eine Website benutzt hat, kann sich sicher sein: Ein Navigationsbereich sollte so einfach wie möglich sein. Es ist eine schlechte Idee, den Benutzer mit Entscheidungen zu überschütten und die Navigation mit Text zu überfrachten, was die allgemeine Nutzbarkeit Ihrer Website ernsthaft beeinträchtigen wird.
Bloombergs einfache Navigation täuscht über die Komplexität der Informationen auf ihrer Website hinweg.
Und doch kann Einfachheit täuschen. Graben Sie tiefer und Sie werden feststellen, dass das, was eigentlich ziemlich komplex ist, clever verpackt wurde, so dass es sich einfach anfühlt. Dies ist IA in Aktion.
Nehmen Sie zum Beispiel die Microsoft-Homepage. Ihre Hauptnavigation hat nur vier Elemente, die angesichts ihrer Produktpalette nicht annähernd genug klingen. Aber die Drop-Downs sind sehr geschickt in Abschnitte unterteilt und so präsentiert, dass Sie schnell und einfach finden, wonach Sie suchen.
Unterseiten sind wie Miniseiten und folgen demselben Navigationsformat. Das Menü fühlt sich an und verhält sich gleich, passt sich jedoch an, um mehr Details zu bieten, je tiefer Sie in die Site gelangen.
Es ist einfach zu bedienen, vorhersehbar und konsistent. Angesichts ihrer Produktpalette und der Anzahl der Seiten auf ihrer Website ist dies keine leichte Aufgabe und offensichtlich das Produkt vieler Stunden iterativer Entwicklung. Es fühlt sich nicht nur wie eines ihrer Produkte an - was für den Besucher sehr beruhigend ist - sondern es organisiert die Inhalte auf eine Weise, die sowohl für den Kunden als auch für Microsoft gut ist.
3) Wählen Sie die Orientierung sorgfältig
Da ein Computerbildschirm traditionell im Querformat verwendet wird, ist eine horizontale Navigation sehr sinnvoll. In den meisten Fällen fühlt es sich ausgeglichener, weniger aufdringlich und aus Designsicht einfach zu platzieren.
Oculus, Hersteller von VR-Headsets, wäre dumm, wenn sie nicht mit einem horizontalen Menü über ihre virtuellen Landschaften sprechen würden. Es enthält nicht nur eine schöne Metapher, sondern ermöglicht es dem Benutzer, durch Scrollen auf der Seite tiefer in seinen Inhalt einzutauchen.
Horizontale Menüs bieten jedoch nicht in jedem Kontext einen Mehrwert, weshalb Sie insbesondere im E-Commerce eine Vielzahl vertikaler Navigationsfunktionen nutzen. Es enthält Echos der farbigen Registerkarten, mit denen Sie Produkte in einem physischen Katalog finden können, und verhindert, dass ein horizontaler Balken mit zu viel Text und zu vielen Optionen überfüllt wird.
Eine gute vertikale Navigation ist keine leichte Aufgabe, besonders wenn Sie viele Produkte haben. Deshalb mag ich diesen von Jack Jones.
Die Symbole neben dem Text unterstützen die Lesbarkeit. Die einfachen Formen sind überraschend kommunikativ und helfen, den Navigationsbereich fokussiert und aufgeräumt zu halten. Klicken Sie auf eine Kategorie, und das Menü wird erweitert, um Unteroptionen anzuzeigen, wiederum auf eine sehr einfache Weise.
Eine ungewöhnlichere Verwendung des vertikalen Menüs findet sich auf der Website von Squarepusher. Hier wird die Navigation wie ein Tab neben dem Hauptinhalt verwendet, den der Benutzer einfach durchblättern und durchklicken kann. Es ist ein weit mehr linearer Ansatz und erinnert an die sequenzielle Art einer Squarepusher-Spur.
Die Regeln ändern sich
Wie bei allen Dingen im Web bringen neue Techniken, Technologien, Geräte und Trends ihre eigenen Herausforderungen und Innovationen auf den Tisch. Responsive Webdesign bedeutet, dass ein traditionelles horizontales Navigationsgerät jetzt auch ein vertikales Navigationsgerät (auf kleineren Bildschirmen) ist. Parallaxtechniken sehen Navigationsbereiche Ebbe und Flut wie die Flut, je nachdem, wo Sie sich auf der Seite befinden.
Es gibt keine einzige Möglichkeit, das perfekte Site-Nav zu erstellen. Aber ein iterativer Ansatz zum Entwerfen und Testen, vorzugsweise mit Zugriff auf die Statistiken und Conversion-Daten Ihrer Website, führt wahrscheinlich zu den besten Ergebnissen.
Als Motor, der Ihre Website antreibt, sollte Ihre Navigation vorhersehbar, einfach, konsistent und gut platziert sein.