Webseitennavigation ist etwas, das viele erst im Nachhinein nach Seiten und Inhalten erstellen. In einer kürzlich durchgeführten Umfrage konnten nur 50 % der Internetnutzer vorhersagen, wo relevante Inhalte auf der Basis einer Standard-Webseitennavigation zu finden sein würden.

Wo finde ich Antworten auf spezifische Fragen?
Wo finde ich Antworten auf spezifische Fragen?

Wenn die Hälfte deiner Besucher die Seite, die sie suchen, nicht finden kann, ist das ein riesiges UX-Problem.

Es führt zu höheren Absprungraten, weniger Zeit auf der Webseite und niedrigeren Conversions.

Wenn du einen E-Commerce-Shop betreibst, kann sich eine schlechte Navigation auch negativ auf dein Endergebnis und deinen Umsatz auswirken.

In diesem Beitrag beschäftige ich mich mit der Webseitennavigation von A bis Z. Das heißt, du lernst die besten Methoden, verschiedene Arten der Navigation und genau, was du tun solltest, um die perfekte Navigation für deine Webseite zu erstellen.

Los geht’s!

Was ist Webseitennavigation?

Webseitennavigation ist der Prozess des Navigierens durch Seiten, Anwendungen und Webseiten im Internet. Die Technologie dahinter wird Hypertext oder Hypermedia genannt.

Hypertext oder Medien sind textbasierte Webseiten, die Hyperlinks verwenden, um sie mit anderen Seiten im Internet zu verbinden. Ein Hyperlink ist ein Link, der deinen Webbrowser zu einer URL führt.

Die URL gibt an, auf welche Datei der Browser vom Server zugreifen soll und lädt die Daten herunter und rendert sie so, dass der Benutzer sie sehen kann.

Interne Links führen zu verschiedenen Seiten auf derselben Domain. Externe Links führen zu verschiedenen Seiten auf einer anderen Domain, einer völlig anderen Webseite und einem anderen Server.

Die Webseitennavigation verwendet Menüs mit internen Links, die es den Besuchern leicht machen, die gesuchte Seite zu finden. Eine gute Navigation ist ein wesentliches Element einer benutzerfreundlichen Webseite.

Was ist ein Webseitennavigations-Menü?

Ein Webseitennavigationsmenü ist eine Reihe von Links, normalerweise zu internen Seiten, die in einem Menü organisiert sind. Die meisten Webseiten, einschließlich unserer eigenen, haben ein Menü ganz oben auf ihrer Webseite.

Kinsta Header-Menü
Kinsta Header-Menü

Dieser Abschnitt wird als „Header“ einer Webseite in Webdesign und -entwicklung bezeichnet. Einige der häufigsten Seiten, auf die in diesen Menüs verwiesen wird, sind

  • Über Uns.
  • Blog.
  • Kontakt.
  • Besonderheiten.
  • Pläne/Preise.

Das Menü kann natürlich auch Links zu anderen Seiten enthalten.

Was ist die Navigationsstruktur einer Webseite?

Die Webseitennavigation einer Webseite beschreibt, wie verschiedene Seiten auf deiner Webseite organisiert und miteinander verbunden sind.

Zum Beispiel können einige Seiten und Inhalte nur durch den Besuch einer bestimmten Seite erreicht werden. Designer und Webentwickler planen die Navigationsstruktur oft schon bei der Erstellung einer neuen Webseite.

Struktur der Webseitennavigation
Struktur der Webseitennavigation

In diesem Beispiel sind die Seiten „Über„, „Pläne„, „Kontakt“ und „Blog“ vom Startmenü aus verlinkt. Um auf die Missions– und Teamseiten zuzugreifen, musst du zuerst die Über-Seite besuchen.

Warum ist Webseitennavigation auf einer Webseite wichtig?

In der Einführung zu diesem Beitrag hast du gelernt, dass 50% der Internetnutzer nicht in der Lage sind, ein Standardmenü richtig zu benutzen. Stell dir vor, wie wenige Leute den richtigen Inhalt ohne jegliche Navigation finden würden.

Mit der richtigen Herangehensweise an Navigation und Menüs kannst du den Prozentsatz weit unter 50% bringen. Das wird deine Absprungraten reduzieren, deine durchschnittliche Verweildauer auf deiner Webseite erhöhen und zu mehr Traffic, Leads und Kunden führen.

Arten der Web-Navigation

Es gibt drei Haupttypen der Webseitennavigation. Sie sind:

Wenn sie richtig kombiniert werden, helfen sie deinen Besuchern, auf deiner Webseite zu navigieren und ihr Ziel ohne Probleme zu finden. Schauen wir uns jede einzelne näher an.

1. Globale Webseitennavigation

Bei der globalen Webseitennavigation sind das Menü und die Links auf allen Seiten der Webseite identisch. Viele moderne Menüs sind so gestaltet, so auch das Menü unserer eigenen Webseite hier bei Kinsta: Wenn du die Seite nach unten scrollst, „folgt“ das Menü.

Globales Header-Menü von Kinsta
Globales Header-Menü von Kinsta

Auf dem Screenshot seht ihr unser einfaches und leicht verständliches Header-Menü. Es ist auf allen unseren Seiten gleich und führt zu einigen unserer wichtigsten Seiten und Inhalte.

Wir kennen die entscheidenden Informationen, die ein potenzieller Kunde über eine Hosting-Firma wissen möchte, bevor er eine Entscheidung trifft. Deshalb haben wir es potenziellen Kunden leicht gemacht, unsere Angebote und Funktionen zu finden und uns zu kontaktieren. Und für bestehende Nutzer haben wir die Login-Option, mit der sie sich in ihr MyKinsta-Dashboard einloggen können.

Unser Fußzeilenmenü ist ebenfalls global und hebt wesentliche Bereiche unserer Webseite und einige der vorgestellten Inhalte hervor.

Fußzeilen-Menü
Fußzeilen-Menü

Globale Menüs sind der Standard für die meisten CMS-Lösungen „out of the box“.

Jedes WordPress Theme ermöglicht es dir, verschiedene Typen und Bereiche für Navigationsmenüs anzubieten. Wenn du mehr brauchst, kannst du ein Menü-Plugin verwenden, um mehr Optionen zur Verfügung zu haben.

2. Hierarchische Webseitennavigation

Hierarchische Navigation bedeutet, dass die Menüs je nach dem Kontext jeder Seite wechseln.

Die meisten Zeitungen und rein inhaltsbasierten Webseiten verfügen über eine hierarchische Navigation. Wenn du zum Beispiel die oberste Seite einer Zeitung besuchst, siehst du normalerweise Links zu den wichtigsten Nachrichtenkategorien im Header-Menü.

Beispiel einer hierarchischen Navigation aus der NYT
Beispiel einer hierarchischen Navigation aus der NYT

Wenn das Menü global wäre, würde es auch nach einem Klick in eine andere Kategorie gleich bleiben. Aber weil es hierarchisch ist, zeigt es neue Links an, die zu Unterkategorien der Kategorie-Seite führen, die wir besuchen.

Beispiel einer hierarchischen Navigation
Beispiel einer hierarchischen Navigation

Auf der Wissenschaftsseite der New York Times siehst du das Top-Level-Menü überhaupt nicht. Stattdessen siehst du Links zu verschiedenen Unterabschnitten der wissenschaftlichen Forschung und Artikeln.

Diese Änderung trennt dieses Menü von einem normalen globalen Menü, das du auf den meisten kleineren Webseiten findest.

3. Lokale Webseitennavigation

Im Gegensatz sowohl zur hierarchischen als auch zur globalen Navigation bezieht sich die lokale Webseitennavigation auf interne Links, die im Inhalt selbst enthalten sind. Gewöhnlich werden dem Benutzer Optionen auf der gleichen oder einer tieferen Hierarchieebene oder Links zur Navigation zu anderen relevanten Seiten angeboten.

Ein gutes Beispiel sind Webseiten von Zeitschriften, die oft Links verwenden, um den Lesern zu helfen, den tieferen Kontext eines bestimmten Artikels zu erkunden. Wenn sie einen Vorfall erwähnen, über den sie in der Vergangenheit berichtet haben, werden sie auf diesen Artikel verlinken, anstatt es eingehend zu erklären.

Beispiel für verwandte Inhalte, die auf einer Seite verlinkt sind
Beispiel für verwandte Inhalte, die auf einer Seite verlinkt sind

Aber es ist nicht nur für Zeitschriften und Webseiten mit Nachrichten reserviert. E-Commerce-Shops verlassen sich stark auf diese Art von Navigationsmenü, um Produkte der gleichen Kategorie zu präsentieren.

Beispiel für lokale Navigation im E-Commerce
Beispiel für lokale Navigation im E-Commerce

Interne Verlinkung ist auch ein entscheidender Aspekt von SEO im Allgemeinen und speziell von WordPress SEO, daher ist es mittlerweile Standard für jeden, der eine Webseite verwaltet.

Beispiele für Webseitennavigation

Anstatt über Theorie zu quatschen, lass uns lieber tief in einige Beispiele eintauchen. Ich werde über eine Webseite für Nachrichten und das Twenty Twenty WordPress Theme berichten.

Nachrichten Webseite: New York Times

NYT Homepage-Menü
NYT Homepage-Menü

Auf den ersten Blick mag es so aussehen, als würde die New York Times hauptsächlich ein einziges, globales Header-Menü ihrer Kategorien verwenden.

Aber das ist nicht das Ende. Die NYT verwendet alle Arten der Navigation auf ihren Hunderten von Kategorieseiten und Millionen von Artikeln.

Verwendete Arten der Navigation:

  • Hierarchisch.
  • Global.
  • Lokal.

Sehen wir uns die unterschiedliche Kopfnavigation für jede Seite an.

Homepage

Im Header-Abschnitt ihrer Webseite gibt es zwei Menüs, ein erweiterbares globales Menü über dem Logo und ein hierarchisches Menü unter dem Header. Im Wesentlichen ist es wie ein Header-Menü und ein Unter-Header-Menü aufgebaut.

NYT-Startseite - Header-Menüs
NYT-Startseite – Header-Menüs

Wenn man das Header-Hamburger-Menü erweitert, verwandelt es sich in eine Sidebar auf der linken Seite, wo bei den meisten modernen Auflösungen ein breiter Rand vorhanden ist.

Es verschwimmt nicht/verwendet kein Overlay, um Inhalte auf der Webseite zu verbergen.

Homepage (Mobile)

Betrachten wir den gleichen Kopfabschnitt auf dem Handy. Die Mehrheit der Internetnutzer greift über ihr Smartphone auf Nachrichten-Webseiten zu, so dass die mobile Erfahrung möglicherweise wichtiger ist als die auf dem Desktop.

NYT-Startseite - mobil
NYT-Startseite – mobil

Das Unter-Header-Menü der Nachrichtenkategorie ist nicht Teil der Homepage auf dem Handy. Stattdessen steht dir nur die erweiterbare Option zur Verfügung.

Wenn es erweitert wird, wird es zu einem Vollbildmenü und deckt den gesamten Inhalt der Homepage vollständig ab.

Erweitertes Menü - NYT Homepage (mobil)
Erweitertes Menü – NYT Homepage (mobil)

Es enthält alle Optionen aus dem Hauptmenü auf Desktop-Computern, und die Links sind übersichtlich nach Kategorien geordnet.

Kategorie Seite

Auf der Kategorieseite, unterhalb des Hamburger Header-Menüs, siehst du einen Link zu einer weiteren Untergruppe von Kategorien.

NYT Wissenschaftsseite - Hauptmenü
NYT Wissenschaftsseite – Hauptmenü

Es macht es für Leute, die sich nur für einen bestimmten Bereich innerhalb des breiteren Themas interessieren, einfacher, Artikel zu finden, die ihren Interessen besser entsprechen.

Kategorie-Seite ( Mobile)

Auf dem Mobiltelefon enthalten diese Kategorieseiten dasselbe Header-Menü und dieselbe Struktur wie die Desktop-Version. Das sekundäre Header-Menü ist überhaupt nicht versteckt, um die Navigation und das Auffinden von Inhalten zu erleichtern.

NYT Wissenschaftsseite - Hauptmenü (Mobile)
NYT Wissenschaftsseite – Hauptmenü (Mobile)

Ein weiterer Grund könnte sein, dass viele mobile Erlebnisse über die Suche oder Social Media starten, anstatt direkt die NYT-Homepage zu besuchen.

Einzelner Artikel

Bei einzelnen Artikeln zeigt das schwebende Header-Menü den Abschnitt an, in dem du dich gerade befindest, aber es enthält nur das erweiterbare globale Menü (zusammen mit dem Suchfeld).

NYT Artikel - Header-Menü
NYT Artikel – Header-Menü

Einzelner Artikel (Mobile)

Auf dem Handy wird eine saubere Navigation beibehalten, da das einzige Menü das Header-Menü der Hamburger ist.

NYT Artikel - Header-Menü (Handy)
NYT Artikel – Header-Menü (Handy)

Fußzeile

Das NYT-Fußzeilenmenü ist auf der gesamten Homepage, den Kategorieseiten und den einzelnen Artikeln gleich.

NYT-Artikel - Fußzeilenmenü
NYT-Artikel – Fußzeilenmenü

Fußzeile (Mobile)

NYT-Artikel - Fußzeilenmenü ( Mobile)
NYT-Artikel – Fußzeilenmenü ( Mobile)

Auf dem Handy zeigt das Fußzeilenmenü nur fünf Menüpunkte, die sich nach dem Anklicken in Unterabschnitte aufteilen.

Wenn du zum Beispiel auf die Sektion „Arts“ klickst, kannst du durch diese Untersektionen blättern:

NYT Artikel - Fußzeilenmenü erweitert (Mobile)
NYT Artikel – Fußzeilenmenü erweitert (Mobile)

Da die Webseite JavaScript verwendet, um dynamisch mehr Inhalt zu laden, während du nach unten scrollst, könnte es so aussehen, als ob die Fußzeile gar nicht existiert.

Es ist ein netter Trick, der mit der Zeit vor Ort helfen kann und die Leser dazu bringt, mehr Artikel zu lesen, aber es macht die Webseitennavigation etwas schwieriger.

Content Layout

Manche könnten argumentieren, dass das primäre Navigationstool, das Online-Zeitungen und Blogs benutzen, nicht nur das Menü ist. Es ist das Zeitungslayout selbst, das das Navigations-Backbone für NYT und andere ähnliche Webseiten darstellt.

NYT Homepage
NYT Homepage

Alle hervorgehobenen Elemente sind anklickbar und führen zu verschiedenen internen Seiten innerhalb der Webseite der New York Times.

Das Content-Layout ist ein weiteres Schlüsselelement der Webseitennavigation, das sie auf ihrer Homepage und ihren Kategorieseiten implementieren.

Das Twenty Twenty WordPress Theme

Ein weiteres Jahr, ein weiteres Standard-Theme von WordPress. Dieses Mal ist es Twenty Twenty, und wir werden tief eintauchen und sehen, was sich mit der Navigation geändert hat.

Ich werde untersuchen, ob sich etwas daran geändert hat, wie die Entwickler beschlossen haben, die Menüs und die interne Verknüpfung mit dieser neuesten Instanz von WordPress anzugehen.

Header-Menü

Wie jedes normale WordPress Theme hat die neue offizielle Version ein schnörkelloses Menü im Header-Menü. Du kannst verschiedene Darstellungsorte auswählen und so sieht die Option Horizontales Desktopmenü aus:

Beispiel eines Header-Menüs im Twenty Twenty Theme
Beispiel eines Header-Menüs im Twenty Twenty Theme

Auf der anderen Seite gibt es mit der Option Desktop Expanded Menu die Möglichkeit, deine Menülinks in einer begründeten Leiste oben rechts zu erweitern.

Beispiel eines erweiterten Header-Menüs im Twenty Twenty Theme
Beispiel eines erweiterten Header-Menüs im Twenty Twenty Theme

Der Hauptinhaltsbereich ist dunkelgrau eingefärbt, was den Fokus des Users auf das Menü auf den Links lenkt.

Fußzeile

Beispiel eines Fußzeilenmenüs im Twenty Twenty Theme
Beispiel eines Fußzeilenmenüs im Twenty Twenty Theme

In der Fußzeile gibt es keine Links für die interne Navigation, außer einem einfachen „Nach oben“-Link, der dich wieder an den Anfang der Seite bringt.

Was macht eine gute Webseitennavigation aus?

Eine gute Webseitennavigation wird immer mit Blick auf den Benutzer entworfen. Es verwendet eine klare, leicht verständliche Sprache und Links zu den wichtigsten Seiten.

Es nutzt viel Weißraum, Farbwechsel oder andere Gestaltungstechniken, um sich klar vom Hauptinhalt zu trennen. Außerdem ist es auf allen Geräten (Handy und Desktop) leicht zu lesen und zu verwenden.

Benutzerfokussierte Navigation bedeutet auch, dass es kontextbezogen ist. Es berücksichtigt die Erfahrungen und Erwartungen des Benutzers. Das könnte ein Grund dafür sein, dass Online-Zeitungen immer noch nicht von ihrem „überfüllten“ Design loskommen.

Im Kontext des Zeitungslesens ist es genau das, was ihre Nutzer und potentiellen Kunden erwarten, wozu auch ihre sehr umfangreichen Menüs mit Kategorien und Unterkategorien gehören.

Im nächsten Abschnitt werde ich die Grundlagen behandeln, wie man eine gute Navigation für deine Webseite erstellt.

8 Prinzipien für eine verbesserte Webseitennavigation

Selbst wenn du ein absoluter Anfänger bist, kannst du die Webseitennavigation für deine Webseite mit den folgenden Tipps hinbekommen.

1. Plane deine Seitenstruktur und Navigation

Bevor du überhaupt anfängst, Inhalte für deine Webseite zu schreiben, solltest du dir überlegen, wie deine Seitenstruktur und Webseitennavigation aussehen soll.

Die Planung ist ein wesentlicher Teil des Prozesses, um deinen Besuchern eine zufriedenstellende Navigation zu bieten. Du kannst einen Sitemap-Ersteller verwenden, der dir dabei hilft, schnell Mockups für das zu erstellen, was du dir für deine Webseite wünschst.

Ein Beispiel für ein gutes Sitemap-Tool ist GlooMaps.

GlooMaps
GlooMaps

Du kannst kostenlos so viele Dokumente erstellen, wie du willst. Jedes wird eine eindeutige URL haben, die du dann teilen kannst, um Feedback zu sammeln und es von anderen bearbeiten zu lassen. Einmal erstellt, wird deine URL 14 Tage lang verfügbar sein, sofern sie nicht erneut besucht wird. Jeder neue Besuch verlängert die Lebensdauer des Links um weitere 14 Tage.

GlooMaps ist nicht das einzige Tool, das ihr benutzen könnt, es gibt noch viele weitere wie Octopus, VisualSitemaps, Creative, um nur einige zu nennen.

2. Befolge etablierte Standards

Versuche nicht, das Rad neu zu erfinden. Bei der Webseitennavigation geht es mehr um Benutzerfreundlichkeit als um Kreativität.

Für wesentliche Designelemente wie z.B. wo du dein Menü platzierst und wie du darauf hinweist, dass es erweiterbar ist, halte dich an bekannte Standards.

Drei horizontale Streifen oder das „Hamburger“-Zeichen ☰ ist eines der am besten erkennbaren Symbole zur Kennzeichnung eines erweiterbaren Menüs. Das andere sind die drei Punkte, die eine horizontale Linie bilden.

Wenn du versuchst, kreativ zu werden und ein eigenes Icon zu entwickeln, stehen die Chancen gut, dass viele Besucher den Zweck deines Designs nicht verstehen und Schwierigkeiten haben werden, dein Menü zu finden.

3. Benutze das Vokabular deiner Benutzer

Anstatt einfach nur auf die gleichen alten Seiten zu verlinken, den üblichen Jargon der Webentwicklung zu verwenden oder allzu kreative Texte zu verfassen, solltest du eine Sprache verwenden, die näher an dem ist, was deine Nutzer verwenden und wonach sie suchen und wollen.

Dieser Ansatz ist sowohl für SEO als auch für die Benutzerfreundlichkeit vorteilhaft. Erstelle Seiten, die das widerspiegeln, wonach deine User online suchen.

Du kannst dann auf dieselben Seiten verlinken, indem du dieselben Wörter und Ausdrücke verwendest, die den Nutzern helfen, deine Webseite auf Google zu finden.

4. Responsive Menüs benutzen

Da über 52% des gesamten Online-Traffics mittlerweile mobil ist, ist ein responsive/mobile-first Design ein absolutes Muss geworden.

Anstelle von Menüs, die im mobilen Webbrowser aus dem Rahmen fallen oder zu unübersichtlich sind, solltest du erweiterbare mobile Menüs implementieren.

Es ist aus gutem Grund zu einem Industriestandard geworden. Horizontale Menüs mit winzigem Text sind schwer zu lesen, zu klicken und auf dem Handy korrekt zu benutzen.

Die gute Nachricht ist, dass die besten WordPress Themes standardmäßig ein ansprechendes Design und ansprechende Menüs haben. Wenn du deine Webseite nicht von Grund auf neu entwirfst, hat WordPress hier für dich vorgesorgt.

5. Nutze die Vorteile deines Footer-Menüs

Leser, die ständig lesen und bis ans Ende deiner Webseite scrollen, sind engagierter als der durchschnittliche Benutzer. Mach dir das zunutze und nutze den Platz am Ende jeder Seite, um wertvolle Inhalte hervorzuheben.

Da die Fußzeile nicht den Platz „above the fold“ auffrisst, kannst du granular vorgehen und mehrere Kategorien einbeziehen und sogar wichtige Eckpfeilerseiten oder Artikel hervorheben.

Schaut euch zum Beispiel an, wie wir mit der Fußzeile auf dieser Seite umgehen. Wir behandeln wichtige Seiten, unser Unternehmen, unsere Ressourcen und vieles mehr.

In der Fußzeile kannst du die Inhalte hervorheben, die du einfach nicht in deine Kopfzeile einfügen konntest“.

6. Benutze Farbe und Weißraum, um die Navigation von anderen Elementen zu trennen

Benutze Farbe, Schriftarten und Weißraum, um deine Menüs von deinem Hauptinhalt und deinen Sidebars zu trennen. Mache es deutlich, wo die Navigation beginnt und endet.

Es spielt keine Rolle, welche Sprache du in deinen Menüs verwendest oder auf welche Seiten du verlinkt bist, wenn die Besucher deiner Webseiten das Menü gar nicht erst finden können.

7. Dropdown-Menüs vermeiden

Für die meisten Webseiten (nicht alle) sind Dropdown-Menüs nicht notwendig oder nützlich. Wenn Benutzer einen Link in einem Menü sehen, wird davon ausgegangen, dass es anklickbar ist. Wenn das Design es nicht von anklickbaren Links trennt, kann es zu Verwirrung führen.

Wenn du zu viele Links in deinem Hauptmenü hast, kann sich das auch negativ auf die Benutzerfreundlichkeit deiner Webseite auswirken.

Die Implementierung einer hierarchischen und lokalen Navigation anstelle von Dropdown-Menüs kann zu einem reibungsloseren Benutzerfluss führen. Es ermöglicht es den Benutzern auch, mit mehreren Seiten zu interagieren und mehr Zeit auf deiner Webseite zu verbringen, anstatt durch eine riesige Linkliste zu browsen.

8. Verflache deine Struktur

Wenn du es den Besuchern so einfach wie möglich machen willst, alle Seiten deiner Webseite zu erkunden, solltest du die Webseitennavigation so flach wie möglich halten.

Anstatt von deiner Homepage auf eine Handvoll Seiten zu verlinken und dann mit immer mehr Unterseiten und Kategorien zu erweitern, halte die Dinge einfach.

Achte darauf, dass du von deiner Homepage aus Links zu wichtigen Kategorien und von dort aus Links zu einer einzelnen Ebene von Unterkategorien oder einzelnen Artikelseiten anbringst.

Flache Webseiten-Struktur
Flache Webseiten-Struktur

Es gibt Anzeichen dafür, dass eine solche Abflachung der Struktur einen positiven Effekt auf SEO hat und zu Google Sitelinks führen kann. Also lass deine Webseitenstruktur nicht zu unordentlich werden!

Webseitennavigation Menü Trends 2020

Obwohl die breiteren Webdesign-Trends der letzten Jahre Dinge wie 3D-Designelemente und das Einbinden von maßgeschneiderten Fotos in kreative Designs beinhalten, hatten die Menüs kein besonders aufregendes Jahr.

Aber das heißt nicht, dass sich nichts geändert hat. Hier ist unser kurzer Überblick über einige der wichtigsten Menütrends der letzten Jahre.

Erweiterbare Kategorien in Vollbildmenüs für Mobilgeräte.

Uber - Mobile-Menü
Uber – Mobile-Menü

Uber und andere gigantische Unternehmen mit überarbeitetem, modernem Design, haben ihre Menüs aktualisiert, um sie benutzerfreundlicher zu gestalten.

Ein Problem für diese Unternehmen ist, dass sie so viele verschiedene Produkte und Kategorien haben, dass es unmöglich sein kann, sie sinnvoll in ein einziges Menü aufzunehmen.

Dies führt zu übersichtlichen, kategorisierten, erweiterbaren Mobile-Menüs, statt nur einer endlosen Liste von Links.

Floating Header-Menüs

Vielleicht ist der universelle Trend für Menüs in den letzten Jahren das schwebende Header-Menü.

Ein schwebendes Header-Menü ist ein Menü, das am oberen Rand des Webbrowser-Fensters angezeigt wird, wenn man die Seite nach unten scrollt (wie das, das wir für kinsta.com verwenden). Normalerweise ist es Teil eines Kopfbereichs, der ein kleines Logo und vielleicht auch eine Suchleiste enthält.

Es ist schwer dagegen zu argumentieren, da der ständige Zugriff auf ein Menü die interne Navigation so viel einfacher macht. Diese Art von Menü ist in vielen WordPress Themes enthalten und der Trend zeigt keine Anzeichen, dass man damit aufhört.

Overlay Dropdown Menus am Desktop

Einer der grundlegendsten Ratschläge zur Webseitennavigation ist, sich von Dropdown-Menüs fernzuhalten. Und das aus gutem Grund.

Aber das bedeutet nicht, dass sie von Natur aus schrecklich sind. Dropdown-Menüs sind nur schwierig auf eine Weise zu implementieren, die auf dem Computerbildschirm Sinn macht.

Mit einer farbigen Überlagerung des Hauptinhalts können sie 100% der Aufmerksamkeit des Benutzers auf das Menü lenken. Sie haben auch bessere Optionen für erweiterbare Kategorien als die Anzeige weiterer Links beim Hovern.

Diese Faktoren haben sich zu einem wachsenden Trend im Jahr 2019 zusammengefügt. Tatsächlich enthalten viele innovative Webseiten und Templates überlagerte Dropdown-Menüs auf dem Desktop.

Zusammenfassung

Dieser Beitrag sollte dir ein klares Verständnis davon vermitteln, was Webseitennavigation ist und einige der wichtigsten Punkte.

Webseitennavigation sollte immer auf Einfachheit, Klarheit und nicht auf intensive Farben und kreatives Design ausgerichtet sein. Da die Navigation und die Menüs deiner Webseite sowohl Desktop- als auch Handynutzer berücksichtigen müssen, können die Dinge kniffliger werden und es kann eine gute Entscheidung sein, einen Webentwickler zu engagieren.

Versuche immer, die besten Methoden für das Design von Webseiten-Menüs zu befolgen, um sicherzustellen, dass deine Besucher und Suchmaschinen problemlos durch deine Inhalte browsen können.

Benutzerfreundlichkeit und Klarheit werden auch in Zukunft Prioritäten sein. Wenn du also die Sprache deiner Benutzer beherrschst und eine Struktur schaffst, die für sie Sinn macht, kannst du deine Menüs zukunftssicher gestalten.

Matteo Duò Kinsta

Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.