„Hinter jeder großen Marke steht eine gut designte Website.“ Irgendjemand Wichtiges muss das doch mal gesagt haben, oder? Ein übersichtliches, benutzerfreundliches Design ist für deine Marke und deine Website unverzichtbar und der erste Schritt dazu besteht darin, eine großartige Website-Navigation zu erstellen. Lass uns dir zeigen, wie erfolgreiche, digitale Navigation aussieht, einschließlich unserer besten Designtipps, um deine Marke auf Kurs zu halten.

Navigation? Wie Karten und Boote? 

So in der Art, ja. Im Webdesign bezieht sich der Begriff „Navigation“ auf die Art und Weise, wie der Nutzer sich auf deiner Website bewegt. Es beginnt damit, eine Informationshierarchie zu etablieren, das perfekte Menü zu kreieren und sicherzustellen, dass der Nutzer problemlos überall dort hinkommt, wo er hinkommen muss.

Intelligentes Navigationsdesign ist für den Erfolg deiner Marke von wesentlicher Bedeutung. Die Navigation hilft dem Nutzer dabei, den Inhalt deiner Website zu verstehen, und sorgt dafür, dass er dort bleibt, wo du ihn haben möchtest – nämlich auf deiner Website und nicht auf der Website von jemand anderem. Vergiss nicht: Navigation ist kein Anhängsel. Was den gesamten Designprozess angeht, sollte die Navigation von Beginn an durchdacht werden.

Zur Bedeutung der Website-Navigation

Sagen wir mal, ein potenzieller Kunde möchte Laufschuhe kaufe. Er landet also bei einem Onlineshop, der Sportbekleidung und -Equipment verkauft. Nun muss der Kunde herausfinden, wie er von der Landingpage zu der Auswahl der Laufschuhe kommt. Es ist Aufgabe der Navigation, ihn in die richtige Richtung zu führen. Im Idealfall ist dieser Prozess klar, deutlich und schnell.

Gut designte Website-Navigation bringt den Nutzer schnell und intuitiv von A nach B und das ist dein Ziel!

Wenn dieser Weg nicht reibungslos funktioniert, bedeutet das, dass die Navigation schlecht designt ist und die Website als Ganzes schwerfällig und unprofessionell wirkt. Das frustriert den Kunden und er nimmt an, dass das ineffiziente Design stellvertretend für die Qualität des Services und/oder der Produkte der Sportbekleidungsmarke steht. Das führt schließlich dazu, dass er wahrscheinlich zu einem Konkurrenten der Seite geht und ihnen ein Verkauf durch die Lappen geht.

Betrachte die Homepage als Punkt A und den Content jeder nachfolgenden Landingpage als Punkt B. Eine gut designte Website-Navigation bringt den Nutzer schnell und intuitiv von A nach B und das ist dein Ziel!

Die Grundprinzipien der Website-Navigation

Agency X Website
Agency X Webdesign von arosto

Beginnen wir mit ein paar Grundprinzipien guter Website-Navigation: logische HierarchieEinfachheit und Anpassungsfähigkeit.

Hierarchie

Die Erstellung eines gut designten Navigationsmenüs beginnt damit, eine Informationshierarchie für deine Menübezeichnungen aufzulisten. Sagen wir, deine Marke ist eine Anwaltskanzlei. Das Navigationsmenü sollte das Rechtsgebiet, auf das du dich spezialisiert hast, dein Anwaltsteam, ein paar Bewertungen von Klienten und deine Kontaktinformationen hervorheben. Liste alles auf und versuche, logische und leicht verständliche Bezeichnungen für alles in deinem Menü zu finden. „Unsere Kontaktinformationen“ klingt beispielsweise ein bisschen spießig, wohingegen „Kontaktieren Sie uns“ charmant und freundlich ist (außerdem spart es Buchstaben, was dir mehr Freiheiten im Design lässt).

Einfachheit

Weniger ist mehr. Wenn du deine Menüoptionen begrenzt und einfach hältst, kommt deine Botschaft klar und deutlich rüber, ohne dass etwas davon ablenkt. Du musst in deinem Navigationsmenü nicht 20 Optionen anzeigen. Überlege, welche Informationen am wichtigsten sind, und hebe sie gezielt und ohne viel Schnickschnack hervor. Vergiss nicht: Einfachheit sollte von Anfang an in deiner gesamten Planung ein Faktor sein.

Anpassungsfähigkeit

Responsives Webdesign soll dafür sorgen, dass eine Website immer dasselbe Nutzererlebnis bietet, egal auf welcher Plattform sie betrachtet wird (Computer, iPad, Telefon etc.). Die beste Website-Navigation ist anpassungsfähig und responsives Design unterstützt diese Anpassungsfähigkeit. Egal wie der Nutzer auf dein Navigationsmenü zugreift, das Erlebnis sollte immer großartig sein. Denke daran, wie oft wir unsere Telefone nutzen, um auf eine Website zu gehen, statt unseren Laptop zu nutzen. Es ist unglaublich frustrierend, wenn eine Website auf einem Telefon nicht gut funktioniert. Das schmälert das Nutzererlebnis und die Markenwahrnehmung.

Illustration website-navigation designen: tipps, beispiele, anwendung
Von OrangeCrush

Arten der Website-Navigation

Ein weiterer wichtiger Aspekt bezüglich der Anpassungsfähigkeit ist der visuelle Stil des Navigationsmenüs selbst. Schauen wir uns 3 beliebte Optionen an: HamburgerDropdown und  Fußzeilen-Navigation.

Hamburger-Menüs

345 Systems Website mit Hamburger-Menü
345 Systems Webdesign von Mila Jones Cann

Das Hamburger-Menü hat in letzter Zeit an Beliebtheit gewonnen. Diese Technik versteckt das Navigationsmenü auf den ersten Blick. Der Nutzer kann das Menü ausklappen, indem er auf das Hamburger-Symbol klickt. Das Webdesign von 345 Systems ist ein gutes Beispiel dafür, wie das Hamburger-Menü dazu beitragen kann, dass eine Website weniger chaotisch aussieht und sich intuitiver navigieren lässt.

Dropdown-Menüs

Puma Website mit dropdown-menü
Puma-Website via cssmenus.com

Die Website von Puma (und den meisten großen E-Commerce-Seiten) verwendet eine Dropdown-Navigation. Das Schöne an einer Dropdown-Navigation ist, dass du viele Informationen auf kleinem Raum präsentieren kannst. Fasse dich bei diesem Stil kurz und beachte, dass keine Menü-Option aus mehr als zwei Worten besteht.

Fußzeilen-Navigation

Blue Fountain Media Website mit Fußzeilen-Navigation
Blue Fountain Media Website via colibriwp.com

Zu guter Letzt gibt es die Fußzeilen-Navigation, so wie wir sie auf der Website von Blue Fountain Media sehen. Die Fußzeile ist ein wichtiger Bestandteil des Navigationserlebnisses und sollte nicht vernachlässigt werden, auch wenn sie in Sachen Hierarchie nicht an erster Stelle steht. Bei der Fußzeile können verschiedene Ansätze gewählt werden. Sie kann all deine Navigationsbezeichnungen enthalten oder nur die besonders Wichtigen.

So oder so, der untere Teil einer Website sollte immer wichtige und nützliche Informationen enthalten, zum Beispiel wie der Kunde dich erreichen kann, falls er Fragen hat. Natürlich fühlt es es sich weniger wichtig an als das Hamburger- oder Dropdown-Menü, aber unterschätze es nicht: Die Fußzeile ist deine letzte Chance, einen guten Eindruck zu hinterlassen.

Beispiele für Website-Navigationen

Da wir uns nun einige Grundprinzipien guter Navigation angesehen haben und wissen, welche Arten von Navigation es gibt, lass uns mal ein paar konkrete Beispiele anschauen.

1000 Challenge webdesign mit Hamburger-Menü
1000 Challenge Webdesign von Dilyana H.

Die Website von 1000 Challenge zeigt ein großartiges responsives Design: Egal ob man vom Desktop oder Mobilgerät auf die Seite geht, der Content der Website ist leicht verständlich. Achte darauf, wie sich das Navigationsmenü verändert, je nachdem welches Gerät verwendet wird. In der Desktop-Ansicht gibt es ein simples und prägnantes Navigationsmenü am oberen Bildschirmrand. Auf dem Mobilgerät verbirgt sich dieses Menü hinter einem Hamburger-Symbol, wodurch sich die Informationen leichter auf einem kleinen Bildschirm anzeigen lassen. Auch wenn sich ein paar Grafiken abhängig von der Art des Geräts ändern, ist die Botschaft und das Erlebnis nahezu identisch. Das sorgt für einen zufriedenen Nutzer und lässt die Marke als Ganzes in einem positiven Licht erscheinen.

IWA webdesign mit dropdown-menü
IWA Webdesign von KR Designs

Das Layout der Navigation auf der Website von IWA ist für den Nutzer leicht verständlich. Alle Dienste werden unter fünf Reitern aufgelistet und der Nutzer kann sich unter jedem Reiter weitere Optionen anzeigen lassen. Eine Suchleiste und ein Login-Button befinden sich direkt neben dem Navigationsmenü (vergiss nicht: Kunden sollten nicht nach der Suchleiste suchen müssen).

Das Menü fasst die wichtigsten Punkte zusammen, über die IWA informieren muss, und wenn der Nutzer runterscrollt, kann er mehr über die gesamte Marke erfahren. Oben befinden sich nur wenige Informationen, doch im weiteren Verlauf der Website erfährt er mehr. Diese Website nutzt einen Slider auf der Landingpage; das bedeutet, dass der Nutzer alles in einer Slideshow-artigen Umgebung entdeckt, was super ist, um Platz zu sparen, und außerdem hilft es, den Nutzer bei der Stange zu halten.

Figgy Plum Website
Figgy Plum Webdesign von DSKY

Das Navigationsmenü auf der Website von Figgy Plum beweist, dass Einfachheit dennoch interessant und ansprechend sein kann. Mit fünf klaren Menüpunkten ist der Nutzer problemlos in der Lage zu verstehen, wohin er als Nächstes soll. Die wie mit Kreide gezeichneten Kreise verleihen dem Nutzererlebnis einen unerwarteten Charme.

Kurze, auffällige und simple Header ziehen sich durch das Landingpage-Design und passen so zum Navigationsmenü. Die Einfachheit steht im Kontrast zu den äußerst detaillierten Bildern der Website und erzeugt einen guten Rhythmus für den Nutzer.

Arca Webdesign von Cosmin Capitanu on Dribble

Und dann haben wir noch die Navigation, die im besten Sinne völlig andere Wege geht. Arca revolutioniert mit einem beeindruckenden Mix aus Bildern, Text und Animation die Art und Weise, wie ein Nutzer sich auf einer Website bewegen kann. Achte nur darauf, dass es den Nutzer nicht verwirrt, wenn du etwas besonders Kreatives in deiner Navigation versuchst.

Wir sehen zudem unkonventionelle Arten der Navigation mit multidirektionalen Web-Umgebungen und zentraler Navigation in unseren E-Commerce-Trends 2021.

Um die perfekte unkonventionelle Navigation für deine Website zu bekommen, musst du aufhören, deinen Content lediglich als Content zu betrachten. Es handelt sich bei ihm nicht bloß um Information – er ist ein visueller Weg; ein einprägsames Erlebnis.

Das Website-Erlebnis und der Nutzer

Capri on Via Roma website design
Capri on Via Roma Webdesign von Hitron_eJump

Lass uns über das Nutzererlebnis sprechen. Dabei dreht sich alles darum, wie sich jemand fühlt, wenn er deine Website besucht, und wie er auf die Informationen reagiert, die ihm präsentiert werden. Sieh es mal so: Es geht darum, menschlichen Kontakt in einer digitalen Umgebung zu verstehen.

Navigation ist das Rückgrat des Nutzererlebnisses auf einer Website.

Navigation ist das Rückgrat des Nutzererlebnisses auf einer Website. Wenn er erfolgreich dorthin kommt, wo er hin will, erfreut das den Nutzer. Wenn das Nutzererlebnis im Gegensatz dazu schlecht ist, könnte das den Nutzer nerven oder dazu führen, dass er komplett das Interesse verliert. Diese Wahrnehmung des Nutzers hat Einfluss auf deine gesamte Markenpositionierung. Dies ist deine Gelegenheit, den Nutzer dazu zu bringen, das zu tun, was er tun soll: mit dir interagieren.

Darüber hinaus ist es für das Nutzererlebnis unerlässlich, in allen Bereichen deiner Website den Prinzipien des UX Designs zu folgen – von deiner Website über das Design und den Content bis hin zur Nutzerfreundlichkeit und der Zugänglichkeit.

Und vergiss nicht, dass das Erlebnis deines Kunden über deine Website hinausgeht. An dieser Stelle kommen Branding, Marketing und Suchmaschinenoptimierung (SEO) ins Spiel.

Nehmen wir mal an, du hast ein Boutique-Hotel auf den Bahamas. Versetzen wir uns nun in die Lage des Kunden, den du auf deine Website locken willst. Indem du deine Website entsprechend bewirbst, sie einheitlich brandest und die richtigen SEO-Schlagwörter einbaust, ziehst du potenzielle Kunden an. Sobald sie dann deine Website besuchen, werden eine gute Navigation, klar verständlicher Text und ein verlockender User Journey sicherstellen, dass sie problemlos finden, wonach sie suchen.

Hotel website in Pastellfarben
Von Achraf Elkaami via Dribbble

Oh, und vergiss nicht, Bilder des fantastischen Pools auf deiner Landingpage unterzubringen (lass dich von unserer Auswahl der besten Landingpage-Designs inspirieren).

Zusammenfassung

Egal ob du eine Marke von Grund auf neu aufbaust oder dein bereits bestehendes Unternehmen stärken möchtest – eine saubere, nachvollziehbare Website-Navigation wird ein wesentlicher Bestandteil deines Erfolgs sein. Schon klar: Webdesign kann kompliziert sein und dich überfordern und manchmal bist du dir nicht sicher, wo du anfangen sollst. Und genau darum geht’s: eine gut gemachte Website beginnt mit einer hervorragenden Navigation.

So abgedroschen es auch klingen mag: Das Leben ist eine Reise, kein Ziel. Während manche dieses Zitat Ralph Waldo Emerson zuschreiben und andere eher Steven Tyler (warum auch nicht?), gilt dieses Mantra durchaus auch für Website-Navigation. Selbst wenn der Nutzer sich nicht sicher ist, welches Ziel er hat, sollte die Struktur der Navigation ihn mit auf einen ansprechenden, zielsicheren Weg mitnehmen. Und wenn er doch seinen Punkt B kennt und einfach seinen Weg von Punkt A aus finden muss, wird eine gut designte Navigation ebenfalls dafür sorgen.

Du benötigst eine gute designte Website-Navigation?
Unsere Designer kennen sich mit digitalem Design bestens aus.