Navigation: Sie sind hier

by Susan Farrell (deutsche Übersetzung) - 25.10.2015

Designer erstellen Navigationsstrukturen, um Nutzern dabei zu helfen, sich durch Websites zu bewegen. Gute Strukturen und Funktionen reichen aber nicht aus. Die Navigation sollte nicht nur zeigen, wohin Sie gehen können, sondern auch verdeutlichen, wo Sie sich gerade befinden. Jede Seite einer Website könnte die erste Seite sein, die Ihre Besucher sehen, weshalb es wichtig ist, genügend Kontext zu bieten, damit die Nutzer sofort ihre Ziele verfolgen können.

Über eine Websuche im Internet zu surfen, ähnelt der Situation, an einem zufällig ausgewählten Ort in einer unbekannten Stadt abgesetzt zu werden. Gute Beschilderung ist ausschlaggebend. Foto von RK Photography

Fest montierte Lagepläne, die häufig an auffälliger Stelle in Einkaufszentren platziert werden, helfen Menschen dabei, sich zu orientieren, indem ihnen der aktuelle Standort mit „Sie sind hier“ Markierungen gezeigt wird. Foto von Britain W.

Nutzer kommen nicht immer durch die Eingangstür

In einer Welt, in der Suchmaschinen Ihre Website-Nutzer an beliebiger Stelle absetzen können, ist es wichtig, zu kommunizieren, an welcher Stelle im Informationsraum sich die Nutzer befinden, damit sie von dort aus erfolgreich navigieren können. Selbst wenn Nutzer die Website über die Startseite erreichen, benötigen sie Hilfe bei der Orientierung, während sie die Seite durchqueren.

Hinweise versichern Menschen, dass sie sich zum gewünschten Ziel bewegen. Wie in einem Bahnhof, kann eine online Positionsanzeige eine Kombination aus Farbcodes, Lichtern, Schildern, Pfeilen, Wegen und Namen von Sehenswürdigkeiten sein. Wenn Menschen verwirrt bzw. beunruhigt sind oder sich verlaufen haben, helfen ihnen Schilder und Hinweise dabei, selbstsicher die nächsten Schritte zu planen.

Unterstützen Sie die Nutzern darin, sowohl die Website als auch das Thema der Seite auf einen Blick zu erfassen. Im Internet werden „Sie sind hier“-Hinweise häufig durch eine Veränderung des Aussehens der Navigationsleiste, Symbole oder Menüs ergänzt. Diese Navigationssignale werden durch so genannte Breadcrumbs und Überschriften verstärkt. Der Check-out-Prozess bei Shopping-Websites und Apps tendieren ebenfalls dazu, Schritte mit Namen und Nummern zu versehen.

Typische „Sie sind hier“-Mechanismen

• Logo und Branding: Die Präsentation eines Logos kommuniziert den Inhaber von Inhalten. Logos sollten mit der Startseite verlinkt werden. Andere Markenhinweise, wie Handelsmarken, Farbpaletten und charakteristische Schriftarten können verwendet werden, um die Wiedererkennung der etablierten Glaubwürdigkeit eines Unternehmens zu gewährleisten. Normalerweise konzentrieren sich diese Anstrengungen auf die obere linke Ecke von Websites, welche unabhängig von der Grösse des Geräts mit grosser Wahrscheinlichkeit zuerst am Bildschirm angezeigt wird.
• Navigationsänderung: Links oder grafische Elemente (Tabs, Buttons, Beschriftungen etc.), die mit der Navigation in Verbindung stehen, werden visuell hervorgehoben, wenn der Nutzer dieses Thema auswählt. Häufig wird diese Hervorhebung durch auffällige Farben, eine räumliche Verschiebung des Elements oder beide Massnahmen realisiert (zur besseren Erreichbarkeit).
• Überschriften: Linksbündige Überschriften helfen Menschen, die von rechts nach links geschriebene Sprachen lesen, den Text schnell nach aussagekräftigen Wörtern zu durchsuchen. Es können auch mehrere Überschriftsebenen gleichzeitig angezeigt werden, um mehr Kontext und Pfadinformationen zu bieten.
• Fenster- (bzw. Seiten-) Titel: HTML-Titel erscheinen ganz oben in jedem Fenster oder Tab, in Suchresultaten, in RSS Feeds, Feed-Readern, Favoriten und Verlaufslisten. Aussagekräftige, einzigartige Titel helfen dabei, Inhaberschaft, die Organisation von Informationen und die jeweiligen Inhalte der Website zu signalisieren.
• URL: Gut ausgewählte, von Menschen lesbare Webadressen sind wichtig für das Teilen, die Glaubwürdigkeit, die Wiedererkennung und den Abruf. Die Internetadresse einer Website kann verwendet werden, um einen Teil der Informationsarchitektur zu zeigen und den Inhalt im richtigen Kontext zu sehen.
• Breadcrumbs: Die Informationshierarchie wird in einem verlinkten Pfad angezeigt. Wie URLs können Breadcrumbs-Strukturen dabei helfen, in der Nähe befindliche Inhalte anzuzeigen – aber auf besser durchsuchbare Weise.
• Kontextuelle Hinweise: Datum, Tags, Icons und andere Symbole können verwendet werden, um die Informationen im richtigen Kontext – sowohl zeitlich als auch in der Informationsarchitektur der Website – anzuzeigen.
• Visuelle Designänderungen: Farbcodierungen, Veränderungen der Markengestaltung und andere visuelle Unterschiede können eine Standortveränderung signalisieren. Die Farbcodierung (bei der  sich die Hauptfarbe abhängig vom Bereich der Seite ändert) ist normalerweise auf Websites mit klar abgegrenzten Arten von Inhalten zu finden. Zum Beispiel können Magazine, Nachrichtenseiten und viele Unternehmen Farben- und Markenveränderungen verwenden, um zwischen Funktionen, Abteilungen und Produktfamilien zu unterscheiden.
• Schritte: Zahlungsschritte oder andere sequentielle Aufgabenflüsse werden normalerweise in Fortschrittsanzeigen benannt und nummeriert. Diese Schrittanzeigen laufen normalerweise horizontal über Anwendungsseiten oder erscheinen als vertikale Liste auf der linken Seite. Sie zeigen die gesamte Schrittabfolge an und geben an, in welchem Schritt Sie sich derzeit befinden, um die richtigen Erwartungen zu wecken.

BBC News zeigt mit Hilfe von  (1) Logo und Markengestaltung, (2)Veränderungen der Navigationsleiste, (3) Überschriften und (4) kontextuellen Hinweisen an, wo Sie sich gerade befinden. Der Seitentitel und die URL inkludieren den Titel des Artikels und den Namen der Website.

Die MIT-Website OpenCourseWare verfügt über tolle Positionsanzeigen: (1) Markengestaltung, (2) Veränderungen der Navigationsleiste, (3) Brotkrümel, (4) Überschriften, Seitentitel und URL - allerdings fehlt der wichtige sichtbare zeitliche Kontext.

Seitentitel und URLs sind auch hilfreich, um den Kontext und Ort von Informationen anzuzeigen:

Seitentitel von MIT: Readings | Introduction to Technical Communication: Explorations in Scientific and Technical Writing | Comparative Media Studies/Writing | MIT OpenCourseWare (Er ist etwas lang, aber sehr anschaulich und enthält viele Schlüsselwörter.)

URL von MIT: http://ocw.mit.edu/courses/comparative-media-studies-
writing/21w-732-5-introduction-to-technical-communication-explorations
-in-scientific-and-technical-writing-fall-2006/readings/

Bei OpenCourseWare liefern die Veröffentlichungsdaten der Lehrbücher (1995-2003) Hinweise auf das Alter der Website, allerdings enthält nur die URL eine konkrete Angabe des Jahres, in dem der Kurs stattfand (2006). Es ist besser, sichtbare Daten oder Datumsbereiche auf Seiten anzuzeigen, damit Informationen, die länger Bestand haben, im Kontext ihrer Erstellungszeit verstanden werden können. Das Copyright im Seitenfooter (für die gesamte Website) nennt 2001-2015, der Zeitraum ist allerdings zu breit für technische oder wissenschaftliche Inhalte.

Die Navigationsleiste der Website der New York Public Library verändert die Farbe des Kategorienamens der aktuellen Seite von Schwarz in Rot. Farbige Buttons auf der Seite verfügen über informative Bezeichnungen, die den Zweck der Website kommunizieren – ausserdem werden sofort Beispielinhalte angezeigt. Die Markengestaltung des Logos liefert gemeinsam mit diesen Signalen einen schlüssigen Hinweise darauf, wo Sie sich im digitalen Reich der Bibliothek befinden.

Es ist schwierig, Änderungen der Navigationsleiste effektiv in den unteren Niveaus der tieferen Informationsstruktur einer Website anzuzeigen. Hier retten Breadcrums die Situation. Die Europäische Weltraumorganisation liefert in beiden Bereichen starke Signale. (Es ist allerdings etwas verwirrend, dass ein Foto, das im Jahr 2014 aufgenommen wurde, als Foto aus dem Jahr 2015 eingeordnet wurde – wahrscheinlich aufgrund seines Veröffentlichungsdatums.)

Testen Sie, ob der Standort effektiv signalisiert wird

Viele Webdesigns verwenden Positionsindikatoren, die zu subtil sind, um effektive Kommunikation zu ermöglichen. Designer kennen alle Aspekte ihres Designs und verfügen über ein robustes mentales Modell der Struktur der Seite. Sie wissen, wie man durch die Seite navigiert und benötigen keine Orientierungshilfe – daher ist es für sie schwierig, das Design so zu sehen, wie es andere tun. Besucher der Website könnten allerdings neu auf der Seite sein oder diese nur selten verwenden. Daher ist alles neu und potenziell interessant. Aus diesem Grund kann ein Signal, dass für den Designer vollkommen offensichtlich ist, vom  Nutzer gar nicht bemerkt werden. Menschen können subtile Änderungen schnell übersehen.

Wann sollten Tests durchgeführt werden

Auf bestehenden Websites können Positionssignale jederzeit getestet werden.

Auf neuen Websites können Positionsinformationen am besten getestet werden, während sich das visuelle Design Ihrer Website im High-Fidelity Stadium befindet. Zeigen Sie echte Inhalte mit allen Arten von Ablenkungen an, die zu erwarten sind, wenn die Website online ist – vor allem Werbeanimationen und Fotos – da es sich dabei um Designelemente handelt, die mit grosser Wahrscheinlichkeit beeinflussen, worauf Menschen achten.

Wie kann die Effektivität von Positionssignalen getestet werden

1. Zeigen Sie Menschen nacheinander einzelne Seiten in verschiedenen Niveaus Ihrer Website, ohne zu diesen zu navigieren.

2. Sagen Sie: „Stellen Sie sich vor, dass Sie gerade auf dieser Unterseite gelandet sind. Wo auf der Website befinden Sie sich?“ 

3. Nachdem die Person geantwortet hat (richtig oder falsch), fragen Sie: „Woher wissen Sie das?“

4. Falls die Antwort ist, dass sie es nicht wissen, fragen Sie: „Was möchten Sie an dieser Stelle sehen, um zu wissen, wo Sie sich befinden?“

5. Falls die Person immer noch nicht weiss, wo sie sich befindet, fragen Sie: „Was würden Sie normalerweise tun, um Ihre Position zu ermitteln?“

Vermeiden Sie es, Navigations-Sackgassen zu schaffen. Manchmal ist eine URL nicht mehr gültig und wird zu einem toten Verweis. Zeigen Sie Menschen in diesem Fall, wohin sie zu gehen versuchten, indem die URL in der Adressleiste sichtbar bleibt. Falls jemand einen Tippfehler macht, kann ihn der Nutzer sehen und eventuell beheben. Zeigen Sie allen anderen Nutzern hilfreiche Vorschläge und die Websites-Navigation an, damit sich Menschen schnell neu orientieren können – wie das auf der Website des Telegraph der Fall ist. Die Fehlerseite entschuldigt sich, schlägt vor, die Webadresse zu kontrollieren, zeigt einen Link zum Inhaltsverzeichnis an, präsentiert die gesamte Seitennavigation und bietet Möglichkeiten, den Systemstatus zu kontrollieren und Personen zu kontaktieren. Suchresultatseiten ohne Resultate sollten auf ganz ähnliche Weise behandelt werden.

Fazit

Nur Tests mit Nutzern können letzte Gewissheit bieten. Falls Analysen aber zeigen, dass viele Nutzer abwandern, per Pogo Sticking auf der Seite herumspringen und Schritte rückgängig machen, gibt es wahrscheinlich ein Problem mit der Informationsarchitektur, dem Sie sich widmen sollten. Die visuellen Hinweise könnten nicht stark genug oder nicht gut platziert sein, Navigationsbezeichnungen, Titel und Überschriften könnten nicht ausreichen oder irreführend sein – oder es könnten alle genannten Probleme auftreten.

Historische Anmerkung

Interessanterweise führte die Sorge, dass sich Nutzer „im Hyperspace verirren könnten“ zu vielen sehr kreativen und komplexen Lösungen in frühen Hypertext-Systemen, welche vor dem World Wide Web entstanden. Es ist gut, dass das Internet heutzutage eine praktische und minimalistische Auswahl von gängigen Wegweisern verwendet und dass Browser über einen Zurück-Button verfügen, von dem Nutzer wissen, dass er sie zurück auf bekanntes Terrain bringen wird.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.