Web-Programmierung mit HTML und CSS

Das Website-Navi

Gute Navigationsmenüs erfüllen zwei wichtige Aufgaben: User finden Inhalte schneller und Suchmaschinen erkennen eine klare Website-Struktur.

internet, webdesign, programmierung, web, html, css, navigation, suchmaschinen

© Internet Magazin

internet, webdesign, programmierung, web, html, css, navigation, suchmaschinen

Die Navigationselemente einer Website sollen dem User in erster Linie Orientierung geben und Inhalte leicht zugänglich machen. Ein wichtiger Nebenaspekt betrifft aber auch die Suchmaschinenoptimierung: Über die Navigationselemente erkennen die Algorithmen der Suchmaschinen idealerweise eine klare Site-Struktur und können damit zusammengehörige Themenbereiche besser kategorisieren. Da eine gute Site-Struktur auch der Usability zugute kommt, gehen SEO und benutzerfreundliche Navigation meist Hand in Hand.

Mehr als nur ein Menü

Navigation besteht längst nicht mehr nur aus einem listenartigen Menü in der Randspalte einer Webseite. Zur Navigation und Strukturierung einer Website tragen vor allem auf dynamisch erzeugten Websites zahlreiche weitere Elemente bei, die dem User verschiedene Möglichkeiten und Wege bieten, auf den Content zuzugreifen.Navigation dient dazu, den User durch die Website zu begleiten und ihm so schnell wie möglich genau zu dem Content zu führen, der in interessiert beziehungsweise den er gesucht hat. Navigation ist also in höchstem Maße Dienstleistung am User und muss entsprechend benutzerfreundlich und schnell erfassbar sein. Schnörkel und Spielereien sind daher meist fehl am Platze. Es muss vor allem schnell gehen, sodass Animationen, ressourcenintensive Technologien wie Flash und JavaScript eher zu vermeiden sind.Andererseits wollen Sie als Website-Betreiber den User möglicherweise zu einem bestimmten, für Sie wichtigen Ziel führen - etwas verkaufen, zur Anmeldung bei einem Newsletter überreden oder Ähnliches. Zeigen Sie dem User also ruhig auch, wo er als Nächstes hingehen soll - allerdings ohne ihn zu sehr zu nötigen. Idealerweise sollte der User an jeder Stelle der Website maximal vier deutlich sichtbare Hauptoptionen haben, über die er sich weiterhangeln kann - nicht mehr, weil der Entscheidungsprozess sonst zu lange dauert und verwirrt.

Unterschiedliche Funktionen

Zur Navigation im weiteren Sinne zählen beispielsweise auch kurze Listen mit thematisch ähnlichen Artikeln, den meistgelesenen oder am häufigsten kommentierten Seiten, Breadcrumbs, Sitemap, Suchfunktion und aussagekräftige 404-Fehler-Seiten. Alle diese Elemente haben spezifische Aufgaben und ergänzen sich gegenseitig, wenn man ihren Zweck kennt und entsprechend geschickt einsetzt.

Pflichtprogramm

Einige Elemente wie das Hauptnavigationsmenü, Home-Link, Suchfunktion und Sitemap sollte ausnahmslos jede Website haben, andere Elemente sind optional und werden je nach Bedarf und Komplexität einer Website zusätzlich eingebaut.Grundlage jeder Navigation ist natürlich das zentrale Hauptnavigationsmenü, das zumeist in der linken Randspalte steht, manchmal auch horizontal direkt unter dem Seiten-Header.Idealerweise hat das Hauptmenü nicht mehr als zehn sichtbare Elemente, absolute Obergrenze sollte 30 sein. Denn niemand arbeitet sich gerne durch eine lange Navigationsliste. Auch Untermenüs sollten nie mehr als acht Links enthalten. Teilen Sie Rubriken also gegebenenfalls weiter auf oder verlagern Sie weniger wichtige Seiten auf eine tiefere Hierarchie-Ebene.Da das Hauptnavigationsmenü vor allem für User da ist, die neu auf Ihre Site kommen, noch unentschlossen sind, ob sie auf der richtigen Site gelandet sind, verlieren Sie viele User schon allein durch die Tatsache, dass das Menü zu groß und unübersichtlich ist.Oft ist der Home-Link letzter Rettungsanker für einen User, der sich verirrt hat. Dieser Link führt immer auf die Start-Seite zurück und bringt ihn damit wieder auf vertrautes Terrain. Auch wenn bereits Ihr Firmen-Logo links oben den Home-Link beinhaltet, bieten Sie diese Link trotzdem noch einmal als oberstes Element des Hauptmenüs an.

Suche und Sitemap

Die Suchfunktion ist auf vielen Websites das meist genutzte Navigationselement. Ein Suchfeld ist also Pflichtprogramm auf jeder Website. Wert legen sollten Sie deshalb auch auf die Qualität der Suchfunktion, also im CMS beispielsweise ein zusätzliches Such-Plugin mit einem besseren Algorithmus einsetzen. Für den Fall einer ergebnislosen Suchabfrage des Users sollten Sie beispielsweise einige Links zu beliebten Seiten sowie eine Suchmaske mit erweitern Suchoptionen anzeigen, um den User nicht in dieser Sackgasse zu verlieren. Die Standard-Position für das Suchfeld ist rechts oben, dort suchen User aus Gewohnheit als Erstes danach.Für systematisch vorgehende User und als alternativen Zugang zu Ihrem Content benötigt jede Website eine Sitemap. Je nach Größe muss diese Sitemap nicht automatisch sämtliche Unterseiten enthalten, zumindest aber die wesentlichen Navigationsebenen abbilden. Ähnlich der Sitemap funktioniert auch eine FAQ-Liste, die manchmal sogar die bessere Alternative zur Sitemap darstellt.FAQ, sprich: häufige User-Fragen, haben den Vorteil, dass sie nicht nur aus einzelnen Stichwörtern bestehen, sondern mehr Informationen zum Linkziel enthalten. Außerdem wirken sie auf viele User persönlicher, weswegen sie gerne genutzt werden.

Optionale Navigationshilfen

Vor allem für umfangreichere Websites und Sites mit vielen Unterkategorien empfiehlt sich zur zusätzlichen Orientierung für den User ein Breadcrumb-Pfad. Breadcrumbs sind üblicherweise horizontal oben angeordnet, bei langen Texten kann man sie auch am Ende der Seite noch einmal wiederholen. Basierend auf dem Märchen von Hänsel und Gretel beschreiben Breadcrumbs idealerweise den Pfad, den der User durchlaufen hat, bevor er die aktuelle Seite erreicht hat. Da dies technisch nur sehr schwer umsetzbar ist, beschreiben Breadcrumbs aber meist nur die Hierarchie, in der sich die aktuelle Seite befindet.Problematisch können Hierarchie-beschreibende Breadcrumbs auf Websites werden, die mit einer matrixartigen Struktur arbeiten und Content aus verschiedenen Hierarchie- Ebenen und verschiedenen Kategorien miteinander vernetzen. Springt der User auf diesen Wegen - ohne das direkt wahrzunehmen - kreuz und quer durch die Hierarchie, trägt ein Breadcrumb-Pfad mehr zur Verwirrung bei als er hilft.Richtig eingesetzt ist die Breadcrumb-Navigation ist ein zusätzliches Element für sehr strukturiert denkende Besucher und eine letzte Chance, verirrte User vielleicht doch nicht einzufangen, bevor sie aufgeben.Ähnlich wie bei der Breadcrumb-Funktion können Sie dem User aber auch innerhalb eines hierarchischen Navigationsbaums zeigen, wo er sich gerade befindet, indem Sie den Menüpunkt zur jeweils aktuellen Seite hervorheben. Das funktioniert sowohl über Fettung oder Einrückung als auch über farbige Hinterlegung des Linktextes. So findet der User beispielsweise Seiten zu ähnlichen viel leichter.

Teilbereich-Links

Section Links, auf Deutsch Teilbereich-Links, strukturieren eine Website für den User in verschiedene Themenbereiche. Von großen Unternehmen kennt man beispielsweise die Aufteilung in Privat- und Geschäftskunden, Unternehmens-Informationen sowie gegebenenfalls soziale Aktivitäten.

internet, webdesign, programmierung, web, html, css, navigation, suchmaschinen

© Internet Magazin

Komplexe Navigation auf mehreren Ebenen: Hauptnavi links, Sektionslinks oben und Tabs zur weiteren Untergliederung (web.de).

Sektions-Navigation ist für Benutzer, die gezielt Ihre Website angesteuert haben, indem sie beispielsweise www.ihre-firma.de eingetippt haben und etwas Bestimmtes auf Ihrer gezielt ausgewählten Website suchen. Die Sektions-Navigation führt sie idealerweise direkt in den Bereich, der für sie relevant ist. Von dort aus führt die Hauptnavigation weiter.Grundsätzliche Themenbereiche Ihrer Website sollten deshalb über einige wenige Section Links erreichbar sein. Idealerweise hat eine Website vier bis sechs, höchsten acht solche Teilbereiche. Häufig sind diese Links horizontal und Button-ähnlich auf der Homepage einer Website angeordnet, oft auch erst unterhalb des ersten Content-Blocks.Auf Content-reichen Websites wird die Section-Navigation vom User unter Umständen gar nicht als explizites Navigationselement wahrgenommen, sondern wirkt wie eine Reihe von Content- Teasern. Ein gutes Beispiel dafür ist das "Browse Categories"-Element bei www.20smoney.com .

Ähnliche Themen gruppieren

Besonders Content-orientierte Websites haben sich bei Amazon abgeschaut, wie man User dazu bringt, sich immer weiter durch eine Website zu hangeln: Contentabhängige, weiterführende Links. Was bei Amazon Bücher aus derselben Kategorie wie das gerade angesehene Buch oder zum Profil des Users passende Titel sind, sind auf einer Content-Website Links zu thematisch passenden Artikeln.Sogenannte Follow-up- oder Related-Content-Navigation spricht also diejenigen User an, die einen Text bis zum Ende durchgelesen haben, deren Interesse man also offenbar genau getroffen hat. Sie sind entweder empfänglich für noch mehr Information zu ähnlichen Themen oder wollen noch tiefer in das Thema einsteigen. Was liegt also näher als gleich am Ende des Textes auf dorthin zu verlinken?Auch in Hinblick auf Usability und SEO sind Links zu thematisch ähnlichen Artikeln sehr nützlich. Idealerweise liefert man drei bis fünf thematisch passende Links am Ende eines Textes.Für den User bieten Links zu verwandten Themen eine willkommene Möglichkeit, sich weiter ohne erneute Suche durch eine Website zu bewegen, was gleichzeitig für den Website-Betreiber bedeutet, dass er den User länger auf der eigenen Site hält und die Bounce-Rate sinkt. Diese beschreibt die Anzahl der User, die beispielsweise über eine Suchmaschine kommen und die Site nach nur einem einzigen Page-View wieder verlassen.

Struktur für die Suchmaschine

Aus Sicht der Suchmaschinen-Algorithmen gruppieren Sie damit aber auch automatisch Themengruppen, die der Suchmaschine eine zuverlässige, inhaltliche Struktur der Website vermitteln und so die Zuordnung von einzelnen Artikeln zu bestimmten Suchwörtern verbessert.In der Praxis sind solche Related-Content-Listen aber nur sinnvoll, wenn die Website auf einem Content-Management-System (CMS) basiert. Denn auf statischen Seiten würde die Pflege solcher Listen auf jeder einzelnen Content-Seite schon bei relativ wenigen Inhalten zu einem zeitaufwändigen Albtraum.Für nahezu jedes CMS gibt es für Related Content passende Plugins, die teils auf Basis von eigenen Suchalgorithmen thematisch passende Links automatisch ermitteln, meist aber auf den Tags oder Kategorien des jeweiligen Artikels beruhen. Vor allem, wer Tags ansonsten für keinen besonderen Zweck nutzt, kann das Tag-System beispielsweise bei WordPress als sehr bequemes Vehikel benutzen, um zusammengehörige Artikeln zu kennzeichnen. Für WordPress hat sich beispielsweise das Tag-basierte Plugin WordPress Related Posts bewährt (wordpress.org/extend/plugins/wordpress-23-related-posts-plugin/ ).

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".