Lade dir unser kostenloses Handbuch herunter, das dir bei der Gestaltung deiner Website helfen wird.
Die eingegebene E-Mail-Adresse ist ungültig.
Vielen Dank für deine Anmeldung.
Mit der Angabe deiner E-Mail bestätigst du, dass du unsere Datenschutzerklärung gelesen und verstanden hast und einverstanden bist, Marketing-E-Mails von Squarespace zu erhalten.
Wenn du deine Website einrichtest, solltest du dir Gedanken darüber machen, wie die Besucher:innen online mit deiner Marke interagieren sollen. Hier kommt das Navigationsdesign ins Spiel, das es Besucher:innen ermöglicht, sich auf deiner Website zu bewegen. Ganz gleich, ob du einen Blog startest, online verkaufst oder ein Portfolio deiner Arbeit erstellst: die Website-Navigation ist für die Effektivität deiner Website entscheidend.
Hier erfährst du alles, was du über die Gestaltung der Website-Navigation wissen musst. Dazu gehören Best Practices und Beispiele, die dir dabei helfen, eine Online-Präsenz aufzubauen, die zu dir und deinen Besucher:innen passt.
Was versteht man unter dem Navigationsdesign einer Website?
Das Navigationsdesign ist die Summe aller Elemente, die zur Navigation auf einer Website genutzt werden. Dazu gehören:
Primärnavigationsleiste oder Website-Header
Dropdown- oder Hamburger-Menü
Hauptmenü-Elemente
Handlungsaufforderung bzw. (CTA)-Buttons und Text
Interne Hyperlinks
Webseiten-Layouts
Website Footer-Menü
Je benutzerfreundlicher deine Website ist, desto länger werden Besucher:innen darauf verweilen und eine Beziehung zu deiner Marke aufbauen – und genau deshalb ein gutes Navigationsdesign so wichtig.
Eine gute Navigations-UX (User Experience bzw. Benutzererfahrung) sollte intuitiv sein. Im Idealfall finden die Besucher:innen ganz leicht, wonach sie suchen, ohne sich über das Navigations-Design deiner Website Gedanken zu machen. Wenn das Navigations-Design deiner Website unzureichend ist, verlassen Besucher:innen deine Website, weil sie das Gesuchte nicht finden. Das führt wiederum zu weniger Interaktionen mit deinen Angeboten und Produkten, und insgesamt zu geringeren Conversion-Rates.
Jedes Website-Template von Squarespace ist mit einer integrierten Navigationsstruktur und einer optimierten Benutzeroberfläche ausgestattet, damit die wichtigen Seiten und Seitenfunktionen im Mittelpunkt stehen.
Best Practices für die Website-Navigation
Es gibt kein Patentrezept für das Website-Design, aber es gibt Best Practices für die Website-Navigation, die du zu Rate ziehen kannst, um eine Website-Struktur aufzubauen, zu testen und weiterzuentwickeln.
Beginne bei deinen Zielen
Besteht dein Hauptziel darin, Produkte zu verkaufen? Möchtest du, dass sich mehr Leute für deine Mailingliste anmelden? Mit deiner Navigation solltest du die genau die Aktion unterstützen, die deine Besucher:innen ausführen sollen, wenn sie deine Website aufrufen. Dabei kann es sich um Kleinigkeiten handeln. E-Commerce-Websites können bspw. das Wort „Shop“ in der Navigationsleiste fett hervorheben, damit es Besucher:innen sofort ins Auge fällt.
Gestalte ein übersichtliches Menü
Sorge dafür, dass dein Hauptnavigationsmenü leicht zu erkennen ist, wenn Besucher:innen zum ersten Mal deine Website aufrufen – idealerweise befindet es sich oben auf der Seite oder in der Seitenleiste. Stell dir die Navigation deiner Website wie eine digitale Landkarte vor. Am besten ist es, wenn du deinen Besucher:innen eine klare, leicht verständliche Wegbeschreibung an die Hand gibst. Wenn du deine Navigationsleiste am unteren Rand deiner Startseite platzierst oder sie als Dropdown-Menü in deinem Logo versteckst, kann das zu Verwirrung bei den Besucher:innen führen. Sie möchten gerne schnell finden, wonach sie suchen.
Setze auf eine leicht verständliche Sprache
Die Kreativität sollte natürlich nicht zu kurz kommen, aber die Texte für die Website-Navigation sollten immer auf den Punkt gebracht werden. Wenn du Online-Workshops anbietest, sollte deine Handlungsaufforderung möglichst eindeutig sein, wie zum Beispiel „Workshops ansehen“ oder „Für einen Workshop anmelden“. Formulierungen wie „Unserer Community beitreten“ oder „Mit dem Lernen loslegen“ könnte Besucher:innen verwirren und letztlich dazu führen, dass weniger Anmeldungen für deine Kurse eingehen.
Teste deinen Aufbau
Um die Benutzerfreundlichkeit deiner Website-Navigation zu messen, solltest du sie einem Test unterziehen. Bitte ein paar Freund:innen, sich auf deiner Website umzusehen und zu notieren, wo sie sich verzetteln oder nicht weiterkommen. Bitte sie darum, sowohl die Desktop- als auch die Version auf Mobilgeräten auszuprobieren und erkundige dich genauer, an welchen Stellen deine Website für Verwirrung gesorgt hat. Liegt es an den Formulierungen auf deiner Website? An der Positionierung der Navigationsleiste? An einem Link, der ins Leere führt? Je mehr Details du bekommst, desto einfacher wird es, die Navigation auf deiner Website zu optimieren.
Einfach & eindeutig
Achte vor allem darauf, dass deine Navigation einfach zu bedienen ist. Je komplizierter es für deine Besucher:innen ist, zu finden, wonach sie suchen, desto wahrscheinlicher ist es, dass sie die Seite verlassen und auch nicht wieder zurückkommen. Angefangen bei der Sprache, die du wählst, bis hin zur Platzierung deiner Navigationsleiste und dem Menüdesign: Gestalte die Navigation auf deiner Website so, dass sich deine Besucher:innen leicht zurechtfinden.
Beispiele für eine benutzerfreundliche Navigation
Achte bei der Erstellung deiner Website darauf, dass sie alle wichtigen Elemente für eine benutzerfreundliche Navigations-UX enthält: Hier sind ein paar Schlüsselfunktionen, die du in Beispielen für eine gute Webnavigation finden wirst.
Responsive Design
Eine Website mit einer gelungenen Navigation passt sich an verschiedene Geräte an. Die Website sollte immer gut strukturiert und übersichtlich sein und über ein einheitliches Menü verfügen, ganz gleich, ob man sie auf dem Handy, einem Tablet oder einem Desktop-Computer aufruft. Achte darauf, dass deine Website ein responsives Design hat, damit deine Navigationsleiste, Bilder, Buttons mit Handlungsaufforderungen und andere Inhalte auf allen Geräten einheitlich aussehen.
Sticky-Navigationsleiste
Eine Sticky-Navigationsleiste wird immer oben auf deiner Website angezeigt. So können deine Besucher:innen unabhängig von ihrem Gerät schnell dorthin gelangen, wo sie hin möchten. Zur Anpassung an kleinere Bildschirme, wie beispielsweise einem Smartphone, kann deine Sticky-Navigation als Symbol mit einem Dropdown-Menü in der oberen rechten oder linken Ecke des Bildschirms erscheinen.
Breadcrumbs
Breadcrumbs oder Brotkrümel sind kleine Text-Links, normalerweise in der oberen linken Ecke des Bildschirms, die einer Person zeigen, wo diese bestimmte Seite innerhalb der verschiedenen Unterseiten deiner Website angeordnet ist. Ein Beispiel für einen Brotkrümel-Pfad könnte sein: Startseite > Shop > Produkt-Seite.
Brotkrümel zeigen den Besucher:innen deiner Website, wo sie sich befinden. Sie sind auch für die Suchmaschinenoptimierung (SEO) von Vorteil. Suchmaschinen können die Brotkrümel durchsuchen, um einen besseren Überblick über deine Website-Struktur zu bekommen und dein Angebot so zu kategorisieren, dass es bei den Suchergebnissen besser platziert wird. Dadurch ist es wahrscheinlicher, dass mehr Menschen auf deine Website aufmerksam werden. Und wenn sie deine Website besuchen, finden sie problemlos, was sie suchen.
Wenn du professionelle Hilfe bei der Gestaltung und Navigation deiner Website benötigst, empfehlen wir dir, einen Squarespace Expert zu beauftragen.
Hier erfährst du, wie du die Startseite deiner Website einrichtest
Dieser Beitrag wurde am 23. Januar 2023 aktualisiert.