Ein effektives Navigationssystem zu erstellen, ist jedoch viel leichter gesagt als getan. Deshalb haben wir einige Vorschläge zusammengestellt, die den Nutzern die Navigation erleichtern.
Die Bedeutung der Website-Navigation
Besucher werden deinen Blog, die Seite für die E-Mail-Anmeldung, die Produktlisten, die Preisgestaltung, die Kontaktinformationen oder die Hilfedokumente nicht finden, wenn es auf deiner Website keine Navigation gibt. Gehe von der folgenden Faustregel aus: Ein Besucher sollte in der Lage sein, zu jeder Seite deiner Website zu navigieren und mit drei Klicks das zu finden, was er sucht.
Die Navigation ist einer der am meisten unterschätzten Aspekte der Benutzerfreundlichkeit und des Website-Designs. Denke daran, dass du möchtest, dass deine Besucher auf deiner Website bleiben und sich umsehen. Wecke ihr Interesse und locke sie mit tollen Angeboten, damit sie auf Links klicken.
Arten der Webnavigation
Die Website-Navigation wird in drei Typen unterteilt. Wenn sie richtig eingesetzt werden, erleichtern sie es deinen Besuchern, sich auf deiner Website zurechtzufinden und an die gewünschte Stelle zu gelangen. Kommen wir nun zu den Einzelheiten.
1. Globale Website-Navigation
Bei der globalen Website-Navigation sind das Menü und die Links auf allen Seiten der Website identisch. So sind viele moderne Menüs aufgebaut.
2. Hierarchische Website-Navigation
Bei der hierarchischen Navigation ändern sich die Menüs je nach dem Kontext der einzelnen Seiten. Die meisten Zeitungen und Websites, die sich ausschließlich auf den Inhalt konzentrieren, verwenden eine hierarchische Navigation. Wenn du z. B. eine Zeitung öffnest, enthält das Kopfmenü in der Regel Links zu den neuesten Nachrichtenkategorien.
3. Navigation auf einer lokalen Website
Die lokale Website-Navigation bezieht sich im Gegensatz zur hierarchischen und globalen Navigation auf interne Links, die in den Inhalt eingebettet sind. Dem Benutzer werden in der Regel Optionen auf der gleichen oder einer niedrigeren Ebene der Hierarchie sowie Links zu anderen relevanten Seiten angezeigt.
Auf Zeitschriften-Websites werden beispielsweise häufig Links verwendet, die den Lesern helfen, den Kontext eines bestimmten Artikels zu vertiefen. Wenn sie ein Ereignis ansprechen, über das sie bereits berichtet haben, verlinken sie zu diesem Artikel, anstatt es im Detail zu erklären.
Bewährte Praktiken der Website-Navigation
Was ist, wenn du mit deiner Website ganz neu anfängst? Vielleicht hast du beschlossen, die Navigation deiner Website zu verbessern, um bessere Ergebnisse zu erzielen. Womit solltest du beginnen? Die Wahrheit ist, dass die Navigation einer Website sich selbst trägt und das Interesse der Besucher an der Website aufrechterhält. Ein einziges Versäumnis in Bezug auf die besten Praktiken der Website-Navigation kann zu einem Verlust an Konversionen führen.
Hier ist dein Spickzettel für die besten Website-Navigationstechniken. Achte auf jeden einzelnen Punkt, um das Nutzererlebnis zu verbessern:
1. Hypertext leicht auffindbar machen
Eines der häufigsten Probleme ist, dass das Design der Benutzerfreundlichkeit in die Quere kommt. Wenn Besucher einen Hyperlink nicht aus dem Text herauslesen können, hast du ein Problem. Am einfachsten ist es, wenn sich der Hypertext vom Rest der Seite abhebt und nicht nur dann, wenn der Besucher über den Link fährt. Mache ihn fett, unterstreiche ihn, oder ändere die Farbe der Schrift. Wenn du möchtest, kannst du deine Navigationslinks in der Kopfzeile sogar in Schaltflächen verwandeln.
2. Mache deine Navigationsleiste benutzerfreundlicher
Viele Websites haben entweder viele oder wenige Unterüberschriften in ihrer Kopfnavigationsleiste. Überlege nicht nur, was deine Besucher auf deiner Website tun sollen, sondern auch, was sie sich wünschen könnten. Zum Beispiel möchtest du vielleicht, dass deine Besucher konvertieren, aber sie möchten vielleicht auch mehr über dein Unternehmen oder deine Philosophie erfahren. Ziehe eine Umstrukturierung deiner Website in Betracht, wenn dein Navigationsmenü unübersichtlich wird. Füge die Hauptüberschrift ein, gefolgt von einem Untermenü mit zusätzlichen Links, die darunter angeordnet sind.
3. Trenne die Sidebars
Eine Seitenleiste sollte nicht dieselbe Farbe haben wie der übrige Inhalt der Seite. Sie sollte eindeutig sein. Der Designer kann für die Seitenleiste eine andere Hintergrundfarbe wählen als für den Haupttext. Weißer Raum - oder besser gesagt, negativer Raum - funktioniert gut. Achte darauf, dass zwischen deiner Seitenleiste und anderen Elementen genügend Platz ist.
4. Lege eine Standardposition für deine Navigation fest
Kreativität ist bewundernswert, aber sie darf nicht auf Kosten der Benutzerfreundlichkeit gehen. Platziere die Navigation dort, wo die Nutzer sie wahrscheinlich suchen werden.
Es gibt eine Kopfnavigationsleiste, eine Seitenleiste und eine Fußzeile. Nutze diese Bereiche, um den Besuchern zu helfen, das zu finden, wonach sie suchen. Wenn du eine kreative Navigation verwenden möchtest, wie z. B. Multimedia, mache deutlich, dass die Besucher darauf klicken können.
5. Mache alles für den Benutzer klar und einfach
Das Navigationsmenü einer Website ist nicht für clevere oder witzige Tricks gedacht. Gestalte dein Design und deinen Text so klar wie möglich, damit die Besucher wissen, was du sagen willst. Es gibt einen Grund, warum die meisten "Über uns"- oder "Über mich"-Seiten auf Websites "Über" heißen; es ist eindeutig und leicht zu merken. Einfache Wörter wie "Kontakt" und "Dienstleistungen" fallen in dieselbe Kategorie.
6. Vergiss nicht, eine Fußzeile einzufügen
Wenn du WordPress verwendest, gibt es Tausende von Themes mit fetten Fußzeilen. Mache das Beste aus ihnen. Du bist nicht verpflichtet, Dutzende von Links einzubauen, aber du solltest den verfügbaren Platz nutzen. In einigen Fällen kannst du einfach die Navigationsleiste in der Kopfzeile wiederholen. Die Besucher müssen dann nicht mehr nach oben scrollen, um den gesuchten Link zu finden. Die Kopfnavigationsleiste kann auch erweitert werden. Und zusätzliche Links zu wichtigen Seiten deiner Website sollten aufgenommen werden.
7. Richte die Navigation an den Prioritäten des Unternehmens aus
Die Benutzerfreundlichkeit ist zwar wichtig, aber du willst deine Besucher auch zu den wichtigsten Konversions- und Verkaufsseiten leiten. Die Steigerung der Besucherzahl auf diesen wichtigen Seiten kann sich erheblich auf das Endergebnis deines Unternehmens auswirken. Achte auf ein ausgewogenes Verhältnis zwischen Seiten, die das Interesse deiner Besucher wecken, und Links, die sie durch deinen Trichter leiten. Füge Seiten wie "Über" und "Kontakt" sowie einen Link zu deinem Blog ein. Wenn du eine mobile Anwendung verkaufst, füge eine überzeugende Handlungsaufforderung hinzu, wie z. B. "Herunterladen" oder "Testen", wenn du einen SaaS-Service verkaufst.
8. Vergewissere sich, dass die Website-Navigation mobilfreundlich ist
Wenn die Navigation deiner Website auf dem Handy nicht funktioniert, hast du ein großes Problem. Nutze die Vorteile der responsiven Designs und Themen, die in jedem größeren Content-Management-System verfügbar sind. Manchmal wird das Navigationsmenü einer Website einfach gestrafft. Vergewissere dich, dass die Links groß genug sind, um von Menschenhand leicht angetippt werden zu können. Es ist auch wichtig, daran zu denken, dass manche Menschen größere Daumen haben als andere.
9. Hebe die Schaltflächen für die Handlungsaufforderung auf
Vor zehn Jahren hatten die meisten Websites Navigationsschaltflächen in der Kopfzeile. Heutzutage wirkt all dieses visuelle Durcheinander jedoch unbeholfen. Es macht es auch unmöglich, einen bestimmten Link in der Navigation deiner Website hervorzuheben. Diese Schaltflächen sollten nur für aktivierbare Elemente verwendet werden.
Besucher können aufgefordert werden, sich in deine E-Mail-Liste einzutragen, eine Produktdemo anzusehen oder einen Anruf zu vereinbaren. In jedem Fall sollte die Schaltfläche kräftiger und heller sein als die übrigen Links.
Hervorragende Beispiele für Website-Navigation
Wie bereits erwähnt, gibt es keine "richtige" Art und Weise, eine Website-Navigationsleiste zu gestalten, solange sie es deinen Besuchern ermöglicht, die benötigten Informationen zu finden, und sie zum Handeln auffordert - egal, ob diese Handlung darin besteht, etwas zu kaufen, zu spenden oder ein Konto zu erstellen. Werfen wir einen Blick auf einige der besten Beispiele für Website-Navigation, die genau das tun.
∙ Propa Beauty
Die horizontale Navigationsleiste von Propa Beauty zielt darauf ab, Verkäufe zu generieren oder Besucher in Mitglieder zu verwandeln. Das Logo befindet sich auf der linken Seite. In der Mitte befindet sich ein Link zur Produktarchivseite. Auf der rechten Seite befinden sich drei Symbole, die in dieser Reihenfolge ein Suchfeld, einen Link zu einer Anmeldeseite für Mitglieder und einen Link zu einem Warenkorb darstellen.
∙ NWP
NWP ist eine weitere eCommerce-Website, die eine horizontale Navigationsleiste verwendet. Die Navigationsleiste der NWP-Website ist im Gegensatz zu Propa Beauty ein kombiniertes Menü. Wenn die Seite geladen wird, sind nur die primären Navigationslinks sichtbar. Wenn du mit dem Mauszeiger über "Shop" fährst, erscheint ein Dropdown-Menü, in dem die verschiedenen auf der Website verfügbaren Unterkategorien für Kleidung aufgelistet sind.
∙ Shade Room
Shade Room verwendet ebenfalls zwei verschiedene Arten von Navigationsmenüs. Oben auf der Seite erscheint eine horizontale Standardüberschrift. Rechts von der Kopfzeile befindet sich eine Hamburger-Schaltfläche. Wenn du auf diese Schaltfläche klickst, erscheint auf der rechten Seite eine zweite Navigationsoberfläche. Diese verhält sich ähnlich wie ein Leuchtkasten-Popup, indem sie einen Teil des Inhalts blockiert und den Rest des Hintergrunds abdunkelt. Sie enthält außerdem weitere Navigationslinks, die dich bei der Navigation auf der Website unterstützen.
Wie kann ich die Kopfzeile/Navigationsmenü auf Strikingly anpassen?
Ein gut organisiertes Navigationssystem macht es den Besuchern leichter, sich auf deiner Website zurechtzufinden. Du solltest diesen Bereich deiner Business-Website-Vorlagen so übersichtlich wie möglich halten. Die Seiten und Abschnitte sollten in der Reihenfolge ihrer Wichtigkeit angeordnet sein, und die Menüoptionen sollten auf ein Minimum beschränkt werden. So können sich deine Kunden ausschließlich auf die wichtigsten Informationen auf deiner Website konzentrieren, ohne von den Optionen überwältigt zu werden. Das Navigationsmenü auf Strikingly ist einfach zu bedienen. Auf Strikingly verwendest du den Styles-Editor, um Website-Vorlagen anzupassen und ein Navigationsleistenformat auszuwählen. Dein Navigationsmenü kann auf verschiedene Weise angepasst werden, einschließlich des Layouts, der Abstände, der Farbe und der Schriftgröße. Hier sind nur einige der vielen verfügbaren Layout-Optionen.
Wenn du einen längeren Inhalt hast, solltest du das Menü am oberen Rand fixieren, damit es dort bleibt, egal wie weit der Besucher nach unten scrollt.
Das Bild stammt von Strikingly
Wenn deine Website übermäßig viele Grafiken enthält, wie z. B. bei Online-Portfolios, solltest du stattdessen eine vertikale Navigation in Betracht ziehen. Dies ist besonders nützlich für Menüpunkte mit längeren Titeln oder wenn du eine große Anzahl von Menüeinträgen hast.
Fazit
Die meisten Websites haben eine übermäßige Anzahl von Links in ihrer Kopfnavigationsleiste. Wir nehmen sie häufig als selbstverständlich hin. Anstatt einfach andere Websites zu kopieren, weil sie gut aussehen, solltest du herausfinden, welche Navigationselemente für dein Unternehmen und deine Zielgruppe am wichtigsten sind. Binde Links zu Websites ein, die für beide Personengruppen attraktiv sind. Du möchtest, dass deine Kunden deine Angebote wahrnehmen und deine Produkte kaufen, aber deine Zielgruppe ist vielleicht noch nicht so weit. Navigationslinks sollten ihnen zusätzliche Gründe liefern, um auf deiner Website zu bleiben. Mithilfe von Snapshots, Aufzeichnungen und A/B-Tests kannst du die Navigation deiner Website optimieren und sicherstellen, dass du deiner Zielgruppe die bestmögliche Benutzererfahrung bietest.
