Navigation auf der Website
Orientierungshilfen

Nicht übertreiben

Navigation auf der Website

Neben den klassischen Navigationsinstrumenten, die in den vergangenen Folgen dieser Serie vorgestellt wurden, gibt es noch weitere Orientierungshilfen, die man den Besuchern einer Website anbieten kann und die ihnen bei der Suche nach der gewünschten Information helfen können.

Man sollte dabei allerdings beim Einbau von Navigations- und Orientierungshilfen nicht deren Hauptzweck aus dem Auge verlieren. Bei einem Übermaß an solchen Elementen kann der Effekt eintreten, dass der Besucher vor lauter Bäumen den Wald nicht mehr erkennt. Die Dichte der Navigations- und Orientierungshilfen sollte also in einem gesunden Verhältnis zum insgesamt angebotenen Informationsvolumen stehen.

Eine Suchmaschine auf der eigenen Website ist nur dann sinnvoll, wenn auch ein Volumen an Daten und Fakten zur Verfügung steht, das sich auf anderem Weg nicht sinnvoll erschließen lässt. Schon eine »Not found«-Quote, die über zehn Prozent liegt, kann kontraproduktiv sein. Im Zweifelsfall sollte man also besser auf das Element Volltextsuche verzichten. Auch eine Sitemap ohne ausreichendes Volumen wirkt eher lächerlich, als dass sie den Besuchern eine zusätzliche Navigationshilfe bieten würde. Ähnliches gilt für eine Breadcrumb-Navigation, wenn es ihr an der nötigen Hierarchie-Tiefe mangelt.

Grafische Übersichten

Navigation auf der Website

Gerade bei kleineren Sites mit einer überschaubaren Hierarchie kann es zum Beispiel besser sein, diese in einer Grafik auf einer Seite darzustellen. Orientieren kann man sich dabei an Website-Tools wie Netobjects Fusion, Frontpage oder Dreamweaver, die dem Entwickler zur besseren Orientierung ein solches Diagramm in der Website-Verwaltung zur Verfügung stellen.

Eine solche grafische Übersicht über die Hierarchie, die einzelnen Knoten und Verzweigungen sowie die einzelnen Informationsseiten, nachgebaut mit HTML-Mitteln, kann gerade bei kleineren und mittleren Sites ? bei denen sich diese Informationen noch auf einer Webseite unterbringen lassen ? dem Surfer eine gute zusätzliche Orientierungshilfe bieten.

Es bietet sich auch an, in diesem Zusammenhang Farben ins Spiel zu bringen. Jeder Knoten erhält eine bestimmte Farbe, die sich dann auf den darunter liegenden Seiten jeweils wiederfindet. Der Besucher bekommt dadurch in jedem Fall einen Hinweis auf eine der Grundfragen, die sich ein Surfer in einem via Hypertext verknüpften, mehrstufigen Informationssystem immer wieder stellt: »Wo bin ich?«

Das System lässt sich natürlich auch noch verfeinern, indem man mit verschiedenen Grundfarben für die Hauptknoten und Farbabstufungen innerhalb eines Hierarchieknotens arbeitet. Auf der obersten Hierarchiestufe sind die kräftigsten Farbtöne vertreten, auf der untersten die hellsten. Im Printbereich bei Zeitschriften ist dieses Prinzip übrigens gängige Praxis und kann auch beim Design einer Webseite für den Surfer von Vorteil sein. Auch bei Top-Sites wie zum Beispiel Amazon wird das Spiel mit Farben in weit reichender Weise praktiziert: Grün signalisiert Bücher, Hellblau Musik, Dunkelblau PC- und Videospiele. Daran kann man sich orientieren, auch wenn die eigentlichen Navigationselemente schon längst aus dem Browserfenster gescrollt sind.

Icons als Orientierungshilfe

Navigation auf der Website

Eine weitere Variante von grafischen Orientierungshilfen sind Icons. Bei zahlreichen Desktop- oder Server-Anwendungen (zum Beispiel Plesk) wird mit diesem Mittel sehr umfassend gearbeitet. Auch beim Webdesign lässt sich dieses Instrument einsetzen, um zum Beispiel den Surfern visuelle Hinweise zu geben, in welchem Knoten sie sich gerade befinden und welche Optionen es für das weitere Vorgehen gibt. Am Ende eines Artikel können zum Beispiel einfache Pfeil-Icons den Weg zum nächsten Artikel, zum vorigen Artikel oder zur nächsthöheren Hierarchieebene weisen.

Bei Icons besteht jedoch latent die Gefahr, dass sie von den Surfern nicht verstanden oder falsch interpretiert werden. Daher ist der Aufwand für die Gestaltung verständlicher Icons und damit für ein Navigations- und Orientierungssystem auf dieser Basis enorm. Dazu kommt noch das grundsätzliche Problem bildgestützter Navigationshilfen: Können sie auf Grund von Browsereinstellungen nicht angezeigt werden, können sie die gewünschte Wirkung auch nicht entfalten. Der konsequente Einsatz des Alt-Tags kann diesen Nachteil zumindest abmildern.

Eine Alternative, die weitgehend unabhängig von Release und Einstellungen eines Browsers funktioniert, sind textuelle Orientierungshilfen. Der Hyperlink »mehr?« am Ende eines Teasers ist ein typischer Vertreter dieser Variante. Genau so gut kann man natürlich Pfeil-Icons zum Beispiel mit den Textvarianten Vor, Zurück oder Startseite ersetzen.

Aussagekräftiger URL

Navigation auf der Website

Durch eine kluge Wahl von Verzeichnis- und Dateinamen auf dem Server oder Webspace kann man dem Besucher einer Website ebenfalls interessante Zusatzinformationen liefern, und zwar über den URL, der im Adressfenster des Browsers erscheint. Wenn dort zum Beispiel http://www. meinedomain.de/verzeichnis1/datei1.html steht, kann der Besucher daraus keinerlei Informationen gewinnen. Bei der Variante http://www.meinedomain.de/nachrichten/ aktuelle_news.html sieht die Sache schon anders aus. Der Surfer kann hier zumindest erkennen, dass es sich gerade im Bereich Nachrichten auf der Seite mit den aktuellen News befindet.

Durch eine kluge Namenswahl kann der Designer einer Website also schon in der Entwicklungsphase ohne viel Zusatzaufwand zusätzliche Orientierungs- und Navigationshilfen für die späteren Besucher implementieren. Allerdings ist die Realisierung nur bei einem System statischer Seiten einfach zu realisieren. Bei dynamisch aus Datenbankinhalten generierten Seiten kann dies aufwendiger werden, da bei einem CMS die URL-Systematik in der Regel feststeht und sie oft wenig Aussagekraft besitzt. Notfalls bleibt kein anderer Weg, als mit Hilfe von URL-Rewriting die Web-Adresse in die gewünschte Form zu bringen. Der Aufwand kann sich auch im Hinblick auf die Suchmaschinen-Optimierung der Site durchaus lohnen. Auf die Orientierungshilfe anhand des URLs verzichten muss man dagegen beim Einsatz von Frames, da im Adressfeld nur der URL des Framesets erscheint.

Bookmarks

Navigation auf der Website

Eine weitere Methode, den Besuchern einer Website nützliche Navigations- und Orientierungshilfen zu bieten, sind die Bookmarks. Allerdings hat der Designer einer Site, darauf nur indirekten Einfluss. Üblicherweise ist das Bookmarking eine Aktivität, die vom Surfer selbst mit Hilfe von Browserfunktionen ausgeführt werden muss. Dennoch kann der Designer einer Website den Aufbau eines solchen Navigationssystems auf Client-Seite nachhaltig unterstützen, und zwar durch konsequente und sinnvolle Nutzung des Title-Tags in einem HTML-Dokument. Der Title wird nämlich beim Aufruf der Bookmark-Funktion in einem Browser generell als Namensvorschlag angezeigt. Wenn hier dem Surfer gleich ein aussagekräftiger Vorschlag gemacht wird, ist dies ein guter Beitrag zu einem effektiven Navigationssystem einer Website. Dies gilt in gleicher Weise auch für andere Browserfunktionen wie History-List oder Verlaufsfunktion, in der die Title-Tags der jeweiligen Seiten mit eingeblendet werden.

Eingebettete Verweise

Navigation auf der Website

Nicht zu unterschätzen sind im Hinblick auf eine effektive Navigation auch in die Seiten eingebettete Verweise. Diese können auf vielfältige Weise realisiert werden. Beispielsweise durch klassische Hyperlinks innerhalb des Textes, wobei hier allerdings die Gefahr besteht, dass der Lesefluss gestört wird und der Surfer zu einem wilden Hin-
und Herspringen verleitet wird, bei dem er schließlich jede Orientierung verliert.

Die Gefahr lässt sich partiell durch Tabbed Browsing, neue Fenster (target=”_blank”) oder Popups abmildern. Eine weitere sinnvolle Variante sind Fußnoten am Ende einer Seite oder ein Kasten mit einer Link-Sammlung innerhalb der Seite. Sehr schön lässt sich diese Variante von Orientierungshilfen auf Wikipedia nachvollziehen. Hier wird sehr intensiv mit Hyperlinks innerhalb der Beiträge gearbeitet, außerdem finden sich am Ende der Texte in der Regel ein verlinktes Literaturverzeichnis und eine Sammlung mit weiterführenden Links.

Guided Tour und Hilfe

Navigation auf der Website

Bei manchen Sites kann es sinnvoll sein, dem Surfer einen virtuellen Kurztrip durch die Site anzubieten ? eine Guided Tour. Vor allem neue Besucher können sich damit einen schnellen Überblick über das Informationsangebot einer Website verschaffen. Umsetzen lässt sich eine solche Tour am einfachsten mit Hilfe einer Sammlung von Webseiten, in denen die Highlights des Angebots kurz angerissen werden und durch die sich ein Besucher im Stil einer Diashow durchklicken kann.

Gern wird dafür auch die Flash-Technik eingesetzt. Sie bietet einerseits zwar gute Möglichkeiten, optisch ansprechende und mit interaktiven Elementen angereicherte Präsentationen zu erzeugen, ist aber zwangsläufig mit einem Medienbruch verbunden, da für die Betrachtung der Player von Macromedia notwendig ist. Unter dem Aspekt der Usability ist in jedem Fall eine HTML-Lösung vorzuziehen.

Eine Guided Tour kann ganz einfach dadurch realisiert werden, dass die betreffenden Knoten über Links- und Rechtspfeile, die mit Verweisen hinterlegt sind, verknüpft werden. Alternativ ist jedoch auch die Generierung völlig neuer Seiten für diese Tour möglich. Diese Variante erlaubt es, mehr Erläuterungen in die einzelnen Schritte zu integrieren und gezielter auf das Informationsbedürfnis eines neuen Besuchers einzugehen, der sich einen Überblick über die Site verschaffen will.

Hilfe-System

Navigation auf der Website

Schließlich bleibt als weitere Orientierungshilfe, die man den Besuchern einer Website anbieten kann, noch eine Hilfe-Funktion. Dieses Instrument gehört bei Desktop-Anwendungen zum Standard und kann bei Websites immer dann von Nutzen sein, wenn das Angebot an die Bedienung höhere Anforderungen stellt. Typischerweise ist dies bei E-Shops der Fall, wo viel mit Formularen gearbeitet wird und sich vor allem Neukunden vorab über das Prozedere eines Bestellvorgangs gerne ein Bild machen wollen.

Überflüssig ist eine solche Hilfe in jedem Fall, wenn sich die Interaktivität eines Besuchers auf Klicks auf Links, Menüs und andere Navigationselemente beschränkt, also das klassische Surfen.

Auch bei solchen Help-Files stellt sich wieder die Frage des Formats. Neben reinem HTML findet man hier das von Microsoft entwickelte komprimierte HTML-Format (CHM) sowie Online-Hilfen als PDF-Dokumente. Mit beiden Formaten ist wieder ein Medienbruch verbunden. CHM nutzt zur Darstellung Komponenten des Internet Explorers, und für PDF ist der Adobe Reader notwendig. Wer möglichst plattformunabhängig operieren will, sollte in jedem Fall die HTML-Variante vorziehen.