Webdesign: so navigierst du deine Besucher durch lange Seiten

Webseiten werden immer länger: rund 3 DIN A4-Seiten reinen Text hatte 2016 die durchschnittliche Seite in den Top 10 von Google. Wie können wir da durchnavigieren?

Der Gehalt einer Website URL steigt kontinuierlich – an Inhalten und dessen Länge – und wird immer größer: dem SEO Tool Anbieter Searchmetrics zufolge, war 2016 eine Desktop Seite in den Top 10 von Google durchschnittlich rund 1.500 Wörter lang, mobile Seiten lagen bei rund 1.000 Wörtern. Bei rund 500 Wörtern pro A4 Seite in normaler Schriftgröße (12) in Word bedeutet dies zwischen 2 und 3 Din A4-Seiten „Bleiwüste“.

Diese Inhalte werden besonders vom Anspruch an Relevanz geprägt: „holistische Inhalte“, wie wir SEOs das bezeichnen, sollen das Thema, auf welches wir eine Seite optimieren (wir optimieren nicht mehr auf einzelne Suchbegriffe oder Keywords), möglichst umfangreich abdecken. Holistische Optimierung bedeutet also, möglichst auf alle Fragen und Eventualitäten innerhalb einer URL einzugehen und so relevante Inhalte zu bieten. Das bedeutet aber auch, dass wir den Nutzern eine neue Form der Navigation bieten müssen, damit sich diese einfacher zurechtfinden, oder?

Holistische Inhalte ohne Navigation

Die wohl einfachste Reaktion auf umfangreiche, holistische Inhalte bietet ausgerechnet das Design Benchmark schlechthin: Apple.

Auf der rund 1.700 Wörter langen Seite zum iPad Pro gibt’s beispielsweise keine Möglichkeit, schneller zwischen den Sektionen und Absätzen zu navigieren, außer zu scrollen. Das ist sicherlich bewusst so gewählt, um die Nutzer länger auf der Seite zu fesseln, indem sie aufmerksamer darauf surfen und wichtige Inhaltsteile selber finden müssen. Dies kann sich Apple leisten, da die Käufer meist schon treue Fans oder zumindest bereit sind, sich mit dem Angebot der Seite auseinanderzusetzen.

Bildunterschrift: Screenshot von Apple.com

Bei (deutlich) unbekannteren Marken wird dies jedoch dazu führen, dass die Absprungrate relativ hoch wird, da Nutzer im Rahmen ihrer Aufmerksamkeitsspanne – die übrigens im Durchschnitt nur 8 Sekunden im Netz beträgt – nicht die für sie relevanten Inhalte finden. Sie verlassen dann die Seite unverrichteter Dinge viel eher.

Die Lösung: der Ankerlink

Schauen wir uns mal an, wie die stärkste Seite im Netz das Thema anpackt: Wikipedia. Die Enzyklopädie ist der Vorreiter, wenn es um die holistische Optimierung geht. Denn sie zeigt uns seit Jahren, wie man mit seinen Inhalten perfekt rankt.

Und so ist es heute völlig normal für die Nutzer, einzelne Abschnitte über ein Inhaltsverzeichnis zu erreichen. Dieses wird im Fall von Wikipedia automatisch generiert und steuert einzelne Unterüberschriften (h2 und h3) mit Ankerlinks an:

Bildunterschrift: Screenshot von Wikipedia.org

Diese Ankerlink-Navigation vereinfacht nicht nur das Navigieren zwischen den einzelnen Abschnitten oder Sektionen, sondern kann auch direkten Einfluss auf das Aussehen des sogenannten Snippets nehmen – also der Webseiten-Vorschau innerhalb der Google Suchergebnisse.

Doch auch so ein Inhaltsverzeichnis ist nicht immer die optimale Lösung: denn es verschiebt wichtige Informationen und (Medien-) Elemente im Inhaltsbereich aus dem Sichtbereich der Nutzer. Zusätzlich müssen Nutzer, die zwischen verschiedenen Punkten navigieren wollen, hierbei immer wieder zum Anfang der Seite zurückkehren.

Natürlich können wir wieder sagen: Marken oder Plattformen wie Wikipedia können sich das leisten, ich glaube allerdings dass auch die Enzyklopädie dies mittelfristig durch ein Redesign lösen werden muss, da ansonsten andere Seiten mit besseren Nutzerreaktionen (sogenannten “User Signals”) und mehr relevanten Informationen im Sichtbereich (engl. “above the fold”) den Rang streitig machen werden.

Navigation im Wandel

Bedingt durch die holistischen Inhalte und Anforderungen an ein optimales Nutzererlebnis darf sich die Menüführung von Webseiten meines Erachtens nicht mehr auf URLs beschränken. Vielmehr muss sie auch eine Navigation innerhalb der jeweiligen URL durch Ankerlinks anbieten. Da ich bei Webseiten als SEO Berater keine gestalterische Funktion übernehme, gebe ich hierzu meist drei Beispiele, wie sich das lösen lässt:

1. Getrennte Navigation

Am einfachsten ist die Lösung mit nebeneinander ausgerichteten Menüpunkten oben. Ich bezeichne solch ein meist oben ausgerichtetes Menü übrigens als vertikale Anordnung, da für mich die nebeneinander-Ausrichtung auch die sogenannten “Verticals” beschreibt. Verticals sind im Marketing Anwendungsgebiete oder –Branchen. Jedes Vertical stellt eine URL dar, welche dann auf die Anwendung oder Branchenlösung (das Thema, ehemals das Keyword) optimiert wird.

Die linke (marginalien) Spalte bekommt dann die Ankernavigation “verpasst”. Ähnlich gestyled wie den aktuellen Menüpunkt schafft man so den Zusammenhang. Die Leserichtung von Links oben (Logo) nach rechts unten (URL Navigation, dann Ankernavi) schafft außerdem Orientierung (deswegen keine Ausrichtung der Ankernavigation rechts).

Die Ankerlinks orientiere ich untereinander (horizontale Anordnung), um den Zusammenhang zum eigentlichen Inhalt zu schaffen. Idealerweise färben sich die Ankerlink-Menüpunkte beim Scrollen ein oder werden ähnlich wie der aktive URL Link im Hauptmenü animiert, um die Verbindung von Menü und Inhalt zu unterstreichen.

Es bleibt genug Platz um den wichtigsten Call to Action-Button (zur Conversion Optimierung) und den Zweitwichtigsten (Sharing-Button) im Header zu platzieren. Breadcrumbs (Navigationspfade), Sprachwahl und Suche sowie ein optionaler Zurück oder Scroll Button nach oben lassen sich so ebenfalls einbringen.

Diese Navigation eignet sich vor allem für konservative Seiten, deren Nutzer meist noch an eine Bedienung per oberem und linkem Menü gewöhnt sind. Ein Beispiel für solch eine Navigation ist die Seite vom Münchner Heilpraktiker Markus Breitenberger.

Schwieriger wird es hier allerdings, wenn die Navigation responsiv umgesetzt wird: denn dann muss man die Ankerlinks in die URL Navigation integrieren.

2. Kombinierte vertikale Navigation

Eine andere Möglichkeit URL- und Ankerlinks miteinander zu kombinieren, ist alles vertikal im Header auszurichten:

Der Vorteil davon ist, dass so nur wenig Platz gebraucht wird und mehr Raum für die eigentlichen Inhalte übrig bleibt. Ob eine Seitenleiste oder der volle Raum für Inhalte genutzt wird, bleibt so beim Konzipieren völlig offen und eine hohe Flexibilität wird erreicht.

Dies eignet sich vor allem für die Darstellung auf Tablet PCs und geringen Browser-Breiten. Für meine Definition betrifft das vor allem Blogs und Konsumorientierte Seiten, die vor allem zum Recherchieren und Surfen dienen. Denn hier gibt’s öfters Couchsurfer mit Tablets oder Nutzer, die mehrere Browserfenster nebeneinander ausgerichtet haben.

Der Nachteil dieser Navigation ist, dass man nicht nur eine separate Darstellung für Smartphones benötigt (siehe getrennte Navigation), sondern auch, dass die Anzahl der Menüpunkte und Ankerlinks in der Regel begrenzt ist.

Kombinierte horizontale Navigation

Die letzte und für mich persönlich interessanteste Lösung ist die Kombination von Menüpunkten und Ankerlinks in der linken Spalte.

Dies setzt zwar voraus, dass der Inhalt auch auf geringer Browser-Breite noch ansprechend dargestellt wird, bringt aber einiges an Vorteilen mit:

Zunächst können wir durch übereinander angeordnete Menüpunkte einen “mobile first” Ansatz verfolgen: Die Navigation lässt sich sowohl auf Desktop als auch auf mobilen Auflösungen gleich darstellen (mobil idealerweise unter einem Hamburger Icon versteckt). Das kann außerdem fix mitscrollen.

Des Weiteren sind wir kaum in der Anzahl an URL- und Ankerlinks beschränkt. Marketer und Redakteure können so fast schon beliebig lange Inhalte mit vielen Unterüberschriften entwickeln. Die Navigation folgt dem Storytelling der Inhalte und führt dann zu einem URL-spezifischen Call to action-Button.

Nachteil: auch hier sind wir irgendwann beschränkt in der Anzahl an Links. Um dem zu begegnen lassen wir daher beispielsweise in unserem SEO Blog nur die Ankerlinks beim Scrollen einrasten.

Fazit

Die Navigation mit Ankerlinks steckt noch in den Kinderschuhen und es gibt (Gott sei Dank) keine allgemein gültige Lösung. Dennoch rate ich dringend beim nächsten Webdesign oder Relaunch darauf zu achten (und am besten auch noch ein paar Grundregeln zur Performance Optimierung befolgen).

Neben der besseren Nutzerfreundlichkeit bietet die URL-Ankerlink-Menükombination auch die Chance, Kommentare und Bewertungen auf einer Seite stärker zu pushen, da diese so als neben Call to Action und Conversion direkt im Menü eingebaut werden können. Insbesondere die Kombination von Kommentaren mit Sterne-Bewertungen (nach Schema.org) bringt zusätzliche Chancen, aus dem Webdesign messbaren Erfolg zu machen: denn so lässt sich eine Vorschau der durchschnittlichen Bewertung auch in die Google Suchergebnisse bringen. Die eigene Website sticht im Wettbewerb durch Bewertungssterne besser hervor und gewinnt dabei meist deutlich mehr Besucher als ohne strukturierte Daten.

Hast du noch weitere Ideen, wie man URL- und Ankerlinks für holistische Inhalte in einer einfachen Navigation kombinieren kann? Setzt du sowas schon in deinen Projekten um? Sag’s uns in den Kommentaren!