Navigationsmuster für zehn gängige Arten von Websites
Navigation ist einer der wichtigsten Aspekte einer Website. Ohne gute Navigation wird eine Site für Besucher nutzlos. Sie können nicht die Informationen finden, die sie benötigen, und suchen dann stattdessen konkurrierende Websites. Es ist wichtig, dass Ihre Websites einfach zu navigieren sind, wenn Sie ein erfolgreicher Designer sein möchten.
Aber es gibt keine Einheitslösungen für die Navigation. Was auf einer Nachrichten-Website gut funktioniert, funktioniert möglicherweise nicht gut für eine persönliche Website. Etwas, das in einem Blog unglaublich benutzerfreundlich ist, kann auf einer E-Commerce-Website frustrierend sein.
Im Folgenden finden Sie zehn gängige Arten von Websites mit Vorschlägen für die Arten von Navigationsmustern, die für jeden gut funktionieren.
Es gibt auch Beispiele, um Ihnen eine bessere Vorstellung davon zu geben, worüber wir sprechen. Fühlen Sie sich frei, mehr großartige Beispiele in den Kommentaren zu teilen!
Alle Standorte
Es gibt bestimmte Navigationsmuster, die auf nahezu allen Websites funktionieren. Anstatt die gleichen Informationen in jeder der folgenden Kategorien erneut zu hashen, werde ich sie einfach hier einfügen.
Das erste Muster ist Tabbed Navigation. Tabs sind perfekt für die Navigation geeignet, da sie die Besucher psychologisch an Papierregister erinnern und zu einem neuen Abschnitt eines Notizbuchs oder einer Sammelmappe navigieren, etwas, was Schaltflächen oder Klartextlinks nicht tun. Tabs sind fast immer die bevorzugte Methode zum Formatieren der Hauptnavigationslinks, obwohl sie natürlich am besten funktionieren, wenn die Anzahl der Links in einem Menü begrenzt ist.
Das zweite Muster ist die Kopfzeilennavigation. Wenn Ihre Website eine Kopfzeile hat (und die meisten Websites tun dies), dann ist die Kopfzeilennavigation eine gute Idee. Besucher sind es gewohnt, den Header für Navigationslinks zu betrachten. Dieses vordefinierte Verhalten erleichtert es Ihnen, Ihre Website benutzerfreundlicher zu machen, indem Sie Ihre Navigation in oder in der Nähe der Kopfzeile finden.
Das endgültige Muster, das für praktisch alle Websites gilt, ist die Fußnavigation. Viele Benutzer (wenn auch nicht alle) suchen in der Fußzeile nach einem Link, wenn sie in der anderen Navigation nicht das finden, wonach sie suchen. Viele grundlegende Seiten sind oft von einer Fußzeile aus verlinkt, einschließlich "über", "Kontakt" und "Sitemap" -Links, unabhängig davon, ob sie an anderer Stelle in der Navigation verlinkt sind oder nicht.
1. Blogs
Blogs haben in der Regel eine große Menge an Inhalten in umgekehrter chronologischer Reihenfolge. Dies stellt sowohl einen logischen Rahmen für Ihre Navigation als auch einige einzigartige Herausforderungen dar, abhängig von der Art des Blogs.
Die meisten Blogs verwenden eine Kombination aus Paginierung (oder kontinuierlichem Scrollen), einer Archivseite, Seitenleistennavigation für Kategorien und / oder Tags und möglicherweise auch Kopf- und Fußzeilennavigation. Es ist wichtig, genau zu überlegen, wie Ihre Besucher wahrscheinlich auf die Inhalte in Ihrem Blog zugreifen möchten.
Zum Beispiel benötigt ein persönlicher Blog möglicherweise keine Kategorien- oder Tag-Navigation außerhalb von Links in den Metainformationen für jeden Beitrag. In diesen Fällen möchten Sie, dass Besucher auf Inhalte in umgekehrter chronologischer Reihenfolge zugreifen, anstatt nach Themen zu springen. Ein Themenblog muss auf der anderen Seite eine Kategorien- und Tag-Navigation haben, da Besucher wahrscheinlich nach Informationen zu bestimmten Themen innerhalb des Gesamtthemas suchen.
Auf einem Minimum sollten Blogs eine Navigation enthalten, um sich chronologisch durch den Inhalt zu bewegen (Paginierung, nächste / vorherige Links oder kontinuierliches Scrollen), sowie Kopf- oder Seitenleistennavigation für bestimmte Seiten außerhalb der Hauptblogseite.
Themenblogs (und manchmal auch Firmenblogs) sollten in ihrer Navigation auch Kategorie- oder Tag-Menüs enthalten, entweder in der Kopfzeile oder in der Seitenleiste. Besonders große Blogs sollten darüber nachdenken, eine Suchfunktion zu implementieren, um es den Nutzern zu erleichtern, schnell das zu finden, wonach sie suchen. Stellen Sie nur sicher, dass die Suchfunktion wie gewünscht funktioniert und alle relevanten Ergebnisse angezeigt werden.
Ecoki , unten, enthält Top-Level-Kategorien in der Kopfzeilennavigation mit Navigation zu wichtigen Seiten in einer sekundären Kopfzeilennavigationsleiste. Es ist ein effektives Layout, das eindeutig auf die am häufigsten verwendeten Links verweist.
2. Nachrichtenseiten
Nachrichtenseiten ähneln Blogs, indem sie im Allgemeinen Geschichten in umgekehrter chronologischer Reihenfolge präsentieren. Nachrichtenwebsites sind häufig stark kategorisiert und verfügen über eine komplexere Informationsarchitektur als viele andere Arten von Websites. Aus diesem Grund sind ihre Navigationsmuster oft komplexer.
Der Schlüssel macht die Navigation nicht komplizierter als nötig. Drop-Down- und Fly-Out-Menüs sind beide gute Möglichkeiten, mit größeren Menüs umzugehen, ohne die Seite zu überladen. Wenn Sie sich die größeren Nachrichtenseiten ansehen (wie beispielsweise Google News unten), teilen Sie die Nachrichten in breite Kategorien wie Politik, Lokal, Welt, Sport, Unterhaltung usw. auf. Welche Kategorien Sie verwenden, hängt davon ab, ob die Website ist eine allgemeine Nachrichtenseite oder eine aktuelle Nachrichtenseite.
Tags können auch die Navigation wesentlich verbessern. Durch das Taggen jeder Geschichte erleichtert es den Benutzern, verwandte Geschichten zu finden, ohne eine komplizierte oder aufgeblähte Kategoriestruktur zu erzeugen. Es ist eine gute Idee, nicht nur Tag-Links in jeden Artikel aufzunehmen, sondern auch eine Liste von Tags oder eine Tag-Cloud irgendwo einzufügen (nur für beliebte Tags kann eine gute Idee für Sites mit Hunderten von Tags sein).
Durch die direkte Verknüpfung in Artikeln wird die Benutzererfahrung erheblich verbessert. Viele der größeren Nachrichtenwebsites tun dies, sodass Benutzer sofort Zugriff auf alle Artikel zu einem Thema erhalten. Es ist dem Einschließen von Tags sehr ähnlich, aber anstatt einer Liste am Anfang oder Ende des Artikels befinden sich die Links im Text selbst.
3. E-Commerce-Websites
E-Commerce-Websites sind manchmal unglaublich komplex und haben Hunderte (oder Tausende) einzelner Seiten für Produkte und andere Informationen. Aus diesem Grund ist die Art und Weise, in der die Navigation gehandhabt wird, sowohl für die Benutzererfahrung als auch für das Endergebnis von entscheidender Bedeutung. Ohne eine hervorragende Navigationsstruktur wird es für Besucher einer E-Commerce-Website schwieriger, die gesuchten Produkte zu finden, was bedeutet, dass sie sich aus Frustration an die Konkurrenz wenden können.
Die Hauptsache jeder E-Commerce-Site mit mehr als einer Handvoll Produkten ist ein gutes Suchsystem. Die unterstützte Suche ist der Schlüssel, bei dem Benutzer nicht nur nach Schlüsselwörtern suchen, sondern auch ihre Ergebnisse basierend auf Faktoren wie Preis, Größe, Kategorie oder anderen Messwerten (abhängig von Ihren spezifischen Produkten) verfeinern können.
Die Kategorie Navigation ist auch ein Muss für Benutzer, die durchsuchen möchten. Abhängig davon, ob Sie Unterkategorien verwenden, ist auch die Navigation mit Brotkrümeln eine gute Idee (wenn Ihre Website mehr als zwei oder drei Ebenen tief ist, können Breadcrumbs die Benutzerfreundlichkeit verbessern).
Wenn Sie Ihren Besuchern mehrere Möglichkeiten bieten, die gewünschten Produkte zu finden, können Sie den Umsatz steigern. Stellen Sie jedoch sicher, dass auf jeder Methode alle relevanten Produkte angezeigt werden. Wenn Besucher feststellen, dass die Suche einen Satz von Produkten zurückgibt, während das Surfen einen anderen Satz zurückgibt, wird dies nur zu Frustration führen.
Das Blik Die Website unten ist ein großartiges Beispiel für eine Website, die eine Seitenleiste mit Filtern zum Verfeinern der Produktergebnisse verwendet. Es ist das geführte Suchmuster, ohne dass die Suche erscheint.
4. Informations- und Referenzseiten
Referenzseiten haben in der Regel eines gemeinsam: eine Menge Informationen über viele Seiten hinweg. Dies macht es schwierig, irgendeine Art von Standardmenü zu erstellen. Kategorien können beim Browsen hilfreich sein, aber wenn Sie anfangen, Tausende, Zehntausende oder sogar Millionen von Seiten (wie Wikipedia) zu haben, bricht das Kategoriesystem zusammen. Außerdem gehen die meisten Leute zu Referenzzwecken für einen bestimmten Zweck und nicht zum Durchsuchen, was Kategorien nicht besonders hilfreich macht.
Es ist wichtig, dass Referenz-Websites ausgezeichnete Suchfunktionen haben. Geführte Suche, ähnlich wie auf E-Commerce-Sites, kann ebenfalls nützlich sein, besonders wenn sie in Verbindung mit einer guten Tagging- und Kategoriestruktur verwendet wird.
Es ist klar, dass Referenz.com , unten, möchte Besucher die Suche verwenden, um zu finden, was auch immer sie suchen, da es prominent oben auf dem Bildschirm platziert ist.
Seiten auf einer Referenzseite sollten auch eine Inline-Verknüpfung zu verwandten Informationen verwenden. Dies erleichtert es den Besuchern, alle Materialien zu finden, die sie benötigen, um zu verstehen, was sie lesen, ohne dass mehrere Suchen durchgeführt werden müssen. Die Notwendigkeit der Inline-Verknüpfung ist der Grund, warum Wiki-Plattformen im Allgemeinen eine Standard-Syntax zum Verknüpfen innerhalb des Textes eines Artikels haben, so dass Inhaltsentwickler nicht die Zeit brauchen, um die relevanten Links nachzuschlagen.
Wikipedia , unten, und andere Wiki-Seiten nutzen die Inline-Verknüpfung zum Hinzufügen von Kontext zu Artikeln.
5. Unternehmensstandorte
Die Struktur und Größe von Unternehmensstandorten ist sehr unterschiedlich. Manche sollen einfach neue Kunden anlocken. Andere sind geschaffen, um aktuelle Kunden auf dem Laufenden zu halten. Wieder andere müssen als Verlockung für neue Kunden, als Nachrichtenportal für bestehende Kunden und als Frontend für ein Firmenintranet dienen.
Unabhängig vom Zweck der Unternehmens-Website ist eine klare Navigation der Schlüssel. Sie möchten nicht, dass Benutzer Zeit damit verbringen müssen, nach Ihrer Navigation zu suchen oder herauszufinden, auf welchem Link Sie klicken müssen, um dorthin zu gelangen, wo sie hingehen müssen. Stellen Sie sicher, dass Links logisch angeordnet sind, dass sie eine leicht verständliche Bedeutung haben und dass sie sich an logischen Orten befinden (der Header und die Seitenleiste sind hier Ihre Freunde).
Alle unten aufgeführten Websites zeigen, dass die Navigation an den häufigsten Orten nicht bedeutet, dass sie nicht kreativ sein kann. Solange es benutzbar und leicht zu finden ist, kannst du etwas Einzigartiges erschaffen.
Auf Sites mit mehr als einem Dutzend Seiten empfiehlt es sich, Suchfunktionen einzubeziehen. Es ist auch eine gute Idee, eine Sitemap einzufügen, um es Benutzern, die Probleme mit Ihrer normalen Navigation haben, zu erleichtern, genau das zu finden, wonach sie suchen.
6. Websites der Community oder des sozialen Netzwerks
Im Allgemeinen ist bei großen sozialen Netzwerken die Suche das wichtigste Navigationsmittel. Es macht Sinn, wenn Millionen (oder sogar Milliarden) Seiten auf der Website sind. Die standardmäßige menübasierte Navigation ist im Umgang mit dieser Informationsmenge ziemlich sinnlos.
Die Suche übernimmt also die gesamte Websitenavigation. Aber das lässt immer noch Mitglied Profilseiten. Hier ist es wichtig, dass Konsistenz über die gesamte Website hinweg besteht. Unabhängig davon, ob Ihre Website es Mitgliedern erlaubt, ihre Profile anzupassen oder nicht, müssen Links auf jeder Seite an derselben Stelle stehen.
Nehmen Sie zum Beispiel Facebook: Jedes Mitgliedsprofil und jede Seite hat Links zu Dingen wie Fotos und Informationen auf der linken Seite. Benachrichtigungen, Nachrichten und Freundschaftsanfragen sind immer oben verknüpft, ebenso wie Links zu Kontoeinstellungen und zum Abmelden. Eine Standard-Navigationsleiste wie diese, die immer mit dem Konto und den Informationen des Besuchers verknüpft ist, ist zu einer Hauptstütze für gut gestaltete soziale Netzwerke geworden.
Inline-Links sollten ebenfalls konsistent sein. Wenn beispielsweise ein Benutzername als Link angezeigt wird, sollte er mit dem Profil dieses Benutzers verknüpft werden, unabhängig davon, welchem Inhalt er zugeordnet ist. Überlegen Sie, welche Informationen logisch mit welchen Seiten verknüpft werden sollten, und stellen Sie dann sicher, dass sie konsistent sind, unabhängig davon, wo diese Links angezeigt werden.
7. Veranstaltungsorte
Ereignisseiten sind in der Regel einfach und haben keine große Anzahl an Seiten. Es ist jedoch wichtig, darüber nachzudenken, wie Ihre Besucher die Website nutzen. Wahrscheinlich werden sie eines der folgenden Dinge tun wollen: Melden Sie sich für die Veranstaltung an, sehen Sie, wer an der Veranstaltung teilnimmt oder sprechen Sie Informationen über die Teilnahme (einschließlich Kosten und Dinge wie Lage und Hotels in der Umgebung) und sehen Sie sich den Zeitplan für die Veranstaltung an.
Die Anmeldung für die Veranstaltung, auch wenn es sich um eine kostenlose Veranstaltung handelt, sollte als E-Commerce-Transaktion betrachtet werden. Aus diesem Grund möchten Sie eine prominente Call-to-Action-Schaltfläche für Anmeldungen.
Standard-Header und / oder Sidebar-Navigation ist eine ausgezeichnete Wahl für Links zu anderen Seiten. Die lokale Navigation kann auch erforderlich sein, wenn Sie einzelne Seiten für bestimmte Workshops oder Referenten einschließen möchten. Drop-Down- oder Fly-Out-Menüs können in diesem Fall nur funktionieren, wenn Sie eine begrenzte Anzahl von Unterlinks haben. Andernfalls ist es besser, die Unter-Navigation in einer Seitenleiste oder auf einer Hauptseite zu verwenden.
Das Rumpf Digital Live 10 Website hat eine prägnante, einfach zu bedienende Header-Navigation, die es einfach macht, genau das zu finden, wonach ein Besucher suchen könnte.
Tipp: Wenn Ihre Ereignissite einen Teilnehmerbereich oder ein Intranet enthalten soll, sehen Sie sich die Navigationsvorschläge in einem sozialen Netzwerk oder einer Community-Site zur Navigation an.
8. Überprüfen Sie die Websites
Review-Sites werden in der Regel auf zwei Arten verwendet. Der erste ist, wenn Nutzer an einem bestimmten Produkt interessiert sind und Bewertungen für diesen Artikel sehen möchten. In diesem Fall ist eine ausgezeichnete Suchfunktion die beste Navigation. So können Benutzer schnell auf genau das Produkt zugreifen, das sie suchen.
Die zweite Verwendung ist die Erforschung bestimmter Arten von Produkten. Für diese Verwendung ist die Suche immer noch eine wertvolle Navigationsmethode. Aber genauso wichtig sind Kategorien und geführte Suche. Wenn die Nutzer Bewertungen nach Kategorie und Unterkategorie durchsuchen können, können sie eine Vielzahl von Produkten finden, die ihren Bedürfnissen entsprechen. Indem sie sie weiter verfeinern, basierend auf Dingen wie Preis oder Marke, ermöglicht sie eine noch bessere Benutzererfahrung.
Blippr , darunter, enthält sowohl die Kategorienavigation (mit Dropdown-Menüs für die Subnavigation) als auch eine prominente Suchleiste.
9. Persönliche Seiten
Persönliche Seiten sind wirklich die wildesten Karten der Welt des Webdesigns. Sie können so ziemlich jedes gewünschte Navigationsmuster verwenden. Mainstreams wie Header und Sidebar-Navigation werden immer noch am brauchbarsten sein, aber es ist nichts falsch daran, etwas komplett anderes zu machen.
Persönliche Websites sollten eine Reflektion des Websitebesitzers sein. Wenn etwas Unerwartetes in die Persönlichkeit der Site passt, dann sollten Sie es unbedingt tun. Es kann dennoch eine gute Idee sein, einen Link zur Sitemap einzubinden, wenn Sie eine nicht standardmäßige Navigation verwenden, damit Besucher, die sie nicht "finden", das Gesuchte leichter finden.
Daniel Malls Portfolio-Seite hat eines der einzigartigsten Navigationsmuster, die ich gesehen habe. Es ist einfach zu bedienen und dennoch sehr unterschiedlich von der Norm.
10. Galerien
Bildergalerien Portfolio-Websites sollten in der Regel eine Kombination aus standardmäßiger Kopfzeilen- oder Seitenleisten-Navigation, Tagging und Kategorien verwenden. Den Besuchern die Möglichkeit zu geben, die angezeigten Bilder anhand eines Tags oder einer Kategorie einzugrenzen, ist wichtig für eine gute Benutzererfahrung, insbesondere wenn das Volumen der Bilder zunimmt.
Die Paginierung wird auch für größere Standorte wichtig sein. Continuous Scroll scheint eine gute Idee zu sein, aber da Galerien und Portfolio-Sites von Natur aus mit Medien gefüllt sind, kann kontinuierliches Scrollen mit einer Menge Systemressourcen enden. Ich würde es für jede Seite empfehlen, die mehr als ein paar Dutzend Bilder enthält (obwohl es auf kleineren Galerien und Portfolioseiten eine wirklich nette Geste sein kann).
Minimal Ausstellung verwendet Kategorien, Suche und Seitenumbruch.
Das wegnehmen
Wenn es ein Navigationskonzept gibt, das ein absolutes Muss ist, unabhängig davon, welche Art von Website Sie entwerfen, ist es das: Konsistenz!
Sie erhalten die meisten logischen Navigationsoptionen, solange sie auf Ihrer gesamten Website konsistent sind. Beginnen Sie nicht mit der Sidebar-Navigation für die Hälfte Ihrer Site und der Header-Navigation für die andere Hälfte, ohne irgendeinen logischen Grund dafür zu haben. Wenn der Home-Link immer oben links ist, dann stelle sicher, dass er oben links bleibt. Dies gilt für jedes Element Ihrer Navigation und wird mit zunehmender Größe der Site exponentiell wichtiger.
Bei der Gestaltung Ihrer Navigationsmuster ist es nicht nur wichtig, dass Sie sich Gedanken darüber machen, wie Besucher Ihre Website tatsächlich nutzen. Haben Sie keine Angst vor A / B oder multivariaten Tests, um herauszufinden, ob Ihre Navigationsmuster tatsächlich so funktionieren, wie sie sollten.
Unabhängig davon, wie cool oder neu Ihre Navigation ist, wenn Ihre Hauptfunktion nicht darin besteht, dass Besucher sich von einem Bereich Ihrer Website zu einem anderen bewegen können, ist Ihre Navigation fehlgeschlagen.
Fühlen Sie sich frei, Beispiele für großartige Navigationsmuster in Aktion in den Kommentaren unten zu teilen! Teilen Sie uns auch mit, wenn Sie weitere Tipps für geeignete Navigationsmuster für bestimmte Arten von Websites haben.