Website Navigation: Header und Footer strategisch nutzen
Damit deine Wunschmenschen sich gerne in deinem Online-Zuhause umschauen und länger bleiben, ist die Navigation der Website wichtig.
Diese bestimmt, wie nutzerfreundlich deine Website ist und ob deine Zielgruppe einfach finden kann, was sie sucht.
Vielleicht warst du auch schon einmal auf einer Website und hast nur Bahnhof verstanden? Wo ist denn nun dieses supertolle Angebot?
Damit es deinen Wunschkund:innen nicht auch so geht, lernst du hier, wie du die Website Navigation gestaltest, um aus Header und Footer das Beste herauszuholen.
Inhalt
Eine Strategie für die Website Navigation erstellen
Haupt- und Unterziele definieren
Die Website Navigation im Header gestalten
Wie viele Links im Menü
Call-to-Action im Header
Social Media Links im Header
Benennung der Navigationslinks
Header fixieren, oder nicht?
Header Design Inspiration
Den Footer der Website gestalten
Was gehört in den Footer?
Inspiration für den Footer
Die wichtigsten Begriffe
Bevor wir uns in den Aufbau, die Strategie, Links usw. stürzen, hier erstmal ein paar Fachbegriffe.
Website Navigation
Als Website Navigation wird der gesamte Prozess bezeichnet, den deine Zielgruppe vom Aufrufen bis zum Verlassen deiner Website durchläuft. Dazu gehören nicht nur die Menüs, sondern auch die Buttons und Links auf einer Website. Manche Menschen meinen damit aber auch einfach nur den Header oder das Menü.
Header
Der Header ist die Kopfzeile einer Website, also wie in jedem Dokument einfach der Teil ganz oben. Dort befindet sich das Logo, Menü und manchmal auch Links zu Social-Media-Accounts, dem Warenkorb oder einem Regler zur Spracheinstellung.
Menü
Das Menü ist Teil des Headers und umfasst alle Links, mit deren Hilfe deine Kund:innen sich durch deine Website klicken können. Diese können auch als Drop-Down-Menü gestaltet sein. Dann befinden sich einige Links in einem Aufklappmenü oder Unterordner.
Navigationsleiste
Navigationsleiste ist ein anderes Wort für das Menü oder den Header und kann auch Menüs meinen, die seitlich auf der Website angezeigt werden.
Was ist ein Footer?
Der Footer ist die Fußzeile einer Website, also dort, wo üblicherweise die eher langweiligen Seiten wie das Impressum, die Datenschutzerklärung oder AGB verlinkt sind.
Eine Strategie Website Navigation
Damit du nicht kopflos irgendwelche Links im Header und Footer platzierst, ist eine Strategie wichtig. Diese denkt mit, welche Ziele deine Website für dich erreichen soll und was Nutzer:innen wollen und brauchen, um eine angenehme Reise durch deine Website zu erleben.
Ziele definieren
Damit du weißt, auf welche Unterseiten (Webseiten) du den Fokus legen kannst und welche Seiten am wichtigsten für deine Zielgruppe sind, erinnerst du dich zurück an deine Website Ziele. Was möchtest du mit deiner Website erreichen?
Hier habe ich Beispielziele und Seiten aufgelistet, die zur Umsetzung wichtig sein können. Deine Zielgruppe soll:
ein Erstgespräch buchen → Kontaktseite
dein Angebot kennenlernen → Angebotsseite
ein digitales Produkt kaufen → Shop
von deiner Expertise überzeugt sein → Portfolio
Vertrauen zu dir aufbauen → Blog
sich in den Newsletter eintragen → 0 € Angebot
deine Persönlichkeit und Werte kennenlernen → Über Mich Seite
für ein Projekt spenden → Spendenseite
verstehen, ob sie gut zu dir und deinem Angebot passen → Homepage
ein Dokument herunterladen → Downloadseite
Die Chance ist hoch, dass viele dieser Ziele erstmal mit dir resonieren. Wer möchte nicht, dass die Wunschkund:innen einen besser kennenlernen, die Testimonials lesen und am besten direkt kaufen?
Die Frage ist aber, welche deiner Ziele dir am wichtigsten sind? Stelle dir dafür eine Liste mit drei Hauptzielen auf. Die anderen Ziele kommen in eine zweite Liste.
Mit den beiden Listen in der Hand kannst du so überlegen, welche Seiten deine Wunschkund:innen unbedingt finden müssen, um die gewünschte Aktivität durchführen zu können.
Den Website Header gestalten
Die Seiten, die für das Erreichen deiner Hauptziele unerlässlich sind, schiebst du in den Header, denn dort sind sie am meisten sichtbar.
Wie viele Links im Menü?
Jetzt hast du zwölf Seiten im Header platziert? Upsi. 🤭 Hast du schonmal etwas von Analysis Paralysis gehört? Dieser Phänomen der Entscheidungslähmung beschreibt, dass wir bei zu vielen Auswahlmöglichkeiten schnell überfordert sind und lieber gar keine Entscheidung fällen.
Das Gleiche kann deinen Kund:innen auch auf deiner Website passieren. Bei zwölf Links im Menü, wissen sie wahrscheinlich gar nicht, wo sie zuerst hinklicken sollen.
Deshalb gibt es die Daumenregel, dass im Header maximal 7 Links platziert sein sollten. Ideal sind 4 oder 5, denn so hat deine Zielgruppe das Gefühl, die Auswahl zu haben und ist gleichzeitig noch nicht überfordert.
Mal ganz abgesehen davon wird es bei mehr Links auch schnell voll und unübersichtlich.
Hast du mehr Seiten, zum Beispiel weil du für jedes Angebot eine eigene Seite hast, kannst du dies mit einem Drop-Down-Menü lösen. Da diese aber schwieriger zu nutzen sind, als ein einfacher Link, solltest du sie sparsam einsetzen.
Ein Call-to-Action im Header
Deinem Hauptziel kannst du nochmal mehr Aufmerksamkeit verschaffen. Dazu gestaltest du den Link als Call-to-Action Button. Überlege dir also, was dein Ziel Nummer eins ist. Wenn die Menschen eine Sache auf deiner Website tun würden, welche sollte das sein?
Ich möchte zum Beispiel, dass meine Wunschkund:innen das Kontaktformular ausfüllen und ein Erstgespräch buchen, damit wir uns persönlich kennenlernen können.
Welches Ziel hast du?
Dieses platzierst du prominent als Aufforderung auf einem Button. Dieser ersetzt einen der Links aus dem Menü, sodass die Anzahl der Optionen nicht steigt.
Social Media Links im Menü?
Auf vielen Websites sehe ich außerdem die Icons für Instagram und Co im Menü. Solltest du sie dort auch platzieren? Das hängt wieder von deinen Zielen ab. Ist eines deiner Hauptziele, Menschen zu deinen Social-Media-Accounts zu lenken? Dann solltest du die Profile auch im Menü verlinken.
Wenn du allerdings möchtest, dass potenzielle Kund:innen auf der Website bleiben, weil sie dort etwas kaufen oder buchen sollen, ist die Platzierung im Menü nicht sinnvoll. Die Icons würden nur von deinen wichtigen Links ablenken. Du kannst sie dafür im Footer oder an anderen Stellen der Website verlinken.
Benennung der Navigationslinks
Und wie sollen die einzelnen Links heißen? Hier gilt es ausnahmsweise mal, die Kreativität ganz weit in die Ecke zu schieben. Das Menü ist dazu da, dass sich deine Zielgruppe schnell und unkompliziert durch die Website bewegen können.
Die Betonung liegt hier auf schnell und unkompliziert.
Gib den Links also Namen, die alle genau so erwarten und auf den ersten Blick verstehen. Über Mich, Angebot, Blog, Erstgespräch buchen und so weiter.
Ein Fotoalbum, Journal, Zauberdesign oder Soul Mind ist hier nicht hilfreich. Denn worum geht es dort? Teilst du Urlaubsfotos, dein Dankbarkeitstagebuch oder doch dein Portfolio und hilfreiche Coaching-Tools?
Auch wenn dein Angebot einen zauberhaften Namen haben mag, der total Sinn macht, sobald man ihn erstmal verstanden hat: Im Menü nutzt du besser eine leicht verständliche Beschreibung. Für die Leute, die eben noch gar nicht wissen, was du machst.
Header fixieren, oder nicht?
Bestimmt hast du es auch schon mal gesehen: Websites, auf denen der Header oben am Bildschirmrand klebt und nie verschwindet, oder Header, die wieder auftauchen, wenn du zurück nach oben scrollst. Wann macht sowas Sinn?
Wenn du einen reinen Blog betreibst oder aus irgendeinem anderen Grund sehr lange Seiten hast, kann der fixierte Header bei der Navigation helfen. Dann müssen die Leute nicht nochmal komplett nach oben scrollen, wenn sie auf eine andere Unterseite wollen.
Allerdings nimmt ein fixierter Header auch einiges an Platz weg und besonders auf Smartphones ist dieser rar. Ein Mittelweg kann der Header sein, der eben nur auftaucht, wenn sich jemand zurück nach oben bewegt. So kann der Platz auf dem Bildschirm optimal genutzt werden, das Menü ist aber trotzdem immer zugänglich.
Header Design Inspiration
Falls du nun bei all dem Gelernten gar nicht mehr weißt, wie du dir deinen Header vorstellst, sind hier einige Beispiel Designs von Websites, die wir in Squarespace umgesetzt haben. Lass dich gerne inspirieren.
Und was passiert nun mit all den anderen Webseiten? Die sind ja auch wichtig. Vielleicht ahnst du es schon.
Den Footer der Website gestalten
Im Footer finden nicht alle restlichen Seiten ihren Platz. Du kannst hier auch die wichtigsten Webseiten noch einmal verlinken. Dann kann deine Zielgruppe sie auch finden, wenn sie am unteren Ende der Seite angekommen sind. Also …
Was schreibt man in den Footer?
Immer im Footer platziert sein sollten die Datenschutzerklärung, das Impressum und ggf. die AGB und ein Cookiehinweis. Das sind all die rechtlichen Seiten, die sich kaum jemand anschaut, die du aber trotzdem auf der Website haben musst. Deshalb platziere ich sie meist ganz unten auf der Website.
Auch der Copyright-Hinweis findet hier seinen Platz. Er ändert zwar an sich gar nichts, denn das Urheberrecht hast du über deine künstlerischen Inhalte so oder so. Als Reminder wird er aber trotzdem gerne verwendet.
Dein Logo und eine kurze Beschreibung kann hier nochmal Platz finden, genau wie eine Suchleiste und deine Social-Media-Links. Wenn du Instagram nutzt, kannst du hier auch gut eine Galerie mit deinen aktuellsten Posts nutzen, die deine Zielgruppe dazu anregt, dir zu folgen. Viele Leute müssen dich erstmal kennenlernen und kaufen dann vielleicht später.
Und schließlich platzierst du alle Links. Das heißt die, die du im Header hast nochmal und die, die dort keinen Platz gefunden haben.
Als nette Geste und, um andere Selbstständige zu unterstützen, kannst du auch über eine Dankeseite oder Links zu den Websites deiner Fotografin und Texterin nachdenken.
Und zum Schluss: Vergiss den Button mit deinem wichtigsten Call-to-Action nicht.
Inspiration für den Footer
Und so könnte dein Footer aufgebaut sein:
Häufige Fragen zur Website Navigation
-
Der Footer an sich ist keine Pflicht, denn das Design deiner Website ist nicht vorgeschrieben. Du solltest aber sicherstellen, dass rechtliche Seiten wie die Datenschutzerklärung, das Impressum und die AGB auf jeder Unterseite zugänglich sind und nicht von Pop-ups wie dem Cookiebanner bedeckt werden.
-
Das am meisten verbreitete Menü ist das horizontale Menü, das mit seiner hohen Nutzbarkeit heraussticht. In einigen Fällen wird es durch Dropdown Elemente ergänzt. In letzter Zeit gibt es aber wieder einen Trend zum Mega-Menü und auch Hamburger Menüs und Sidebars werden oft auf Desktopgeräten verwendet.
-
Die Navigationsleiste wird oft als Menü, Hauptmenü, Navbar, Header oder Linkleiste bezeichnet und meint die Kopfzeile einer Website.
-
Das Menü oder Hauptmenü einer Website wird auch als Header, Kopfzeile, Website Navigation oder Navigationsleiste bezeichnet.
Viel Spaß beim Setzen oder Erinnern deiner Ziele. Ich hoffe, du hast einen guten Überblick bekommen und weißt jetzt, wie du deine Website Navigation anordnest.
Melde dich gerne bei mir, wenn du punktuelle Unterstützung an deiner Squarespace Website brauchst, oder das komplette Webdesign mit Stratgie und Umsetzung abgeben möchtest. 💜
Auf Pinterest speichern
