Web Usability Guide – everything flows 3. Navigation & Orientierung

> Einfache Navigation, Orientierung & Interaktion

“ Einfache Navigation, Orientierung & Interaktion „ ist der dritte Artikel meiner fünf-teiligen Blogartikelserie über die Besucherfreundlichkeit von Websites.
Die Fragen „was ist Web Usability und wozu braucht man sie“ wurden bereits im ersten Artikel erörtert. In den Folgeartikeln setze ich mich nun genauer mit verschiedenen wichtigen Web Usability-Faktoren auseinander.
In diesem Teil zeige Ich Ihnen Maßnahmen für leichte Orientierung, Navigation und vielseitige, intuitive Interaktion auf Ihrer Website. Als Ausgangselemente für alle Handlungen von Besuchern und Kunden innerhalb Ihres Internetauftritts tragen sie maßgeblich zu einer angenehmen User Experience bei. Machen Sie sich und anderen das Leben leichter und legen so den Grundstein für eine erfolgreiche Internetpräsenz.

Einfache Navigation & Orientierung auf Ihrer Website

Eine einfache Navigation & Orientierung in einer Website zu erreichen ist eine anspruchsvolle, bedeutende Aufgabe
Das Erkunden einer Website hat in einigen Aspekten Parallelen mit der Bewegung im physischen Raum in der realen Welt. Schon allein die beschreibenden Begrifflichkeiten suggerieren das. Man surft (surfing) oder blättert (browsing) und mit Hilfe eines Links “lädt man eine Seite” nicht sondern “wird zur Seite geführt”.
Auch wenn wir auf eine gewisse Art und Weise das Gefühl haben, uns durch den physischen Raum zu bewegen, befinden wir uns tatsächlich in einem nichtphysischen Raum mit bislang 2-dimensionaler graphischer Nutzeroberfläche.

Es fehlen zahlreiche gewohnte Anhaltspunkte, die einem die einfache Orientierung im “Raum” normalerweise erst ermöglichen.

• Es gibt kein Gefühl für Größenverhältnisse. Anders als in einem Kaufhaus in dem man ein vages Gefühl dafür hat, was man gesehen hat und was noch nicht, tendiert man auch bei ausführlich genutzten Websites dazu, keine Vorstellung über den kompletten Umfang zu haben. Man weiß nicht, ob man schon alles gesehen hat.
• Es gibt kein Gefühl für Richtungen. Man kann sich lediglich in einer Hierarchie von einer allgemeineren oder spezielleren Ebene bewegen und umgekehrt, nicht aber nach links und rechts oder oben und unten bewegen
• Es gibt kein Gefühl für die räumliche Orientierung. In physischen Räumen baut man sich mit der Bewegung eine Vorstellung über die Position der einzelnen Orte im Gesamtraum auf. Das funktioniert im Web nicht, weil wir direkt von einem Ort zum anderen transportiert werden.

Aus diesen Gründen ist eine leicht ersichtliche und einfache Website Navigation notwendig, um sich in einer Website zu bewegen. Erst sie erlaubt einfache Navigation, Orientierung & Interaktion in solchen Räumen. Das gilt für den Erstbesuch einer Website genauso wie für Folgebesuche. Nur so wird der Besuch beim nächsten Mal einfacher und kontrollierter.

Ziele der Website Navigation

Im Sinne einer angehen User Experience hat die Website-Navigation in erster Linie die Aufgabe, eine einfache Orientierung sicher zu stellen. Eine weitere wichtige Aufgabe ist es, die Nutzung und Bedienbarkeit eines Internetauftritts so einfach und intuitiv wie möglich zu gestalten. Um diesen Anforderungen zu genügen, müssen die zentralen Ziele der Website Navigation darin liegen:

• ein einfaches, konsistentes und intuitives Leitsystem für die Seitenstruktur schaffen
• die Startseite als festen Orientierungspunkt bieten zu dem wir immer zurückkehren können
• den eigenen Aufenthaltsort jederzeit herauszufinden und anzeigen zu können
• eine Übersicht über bereits besuchte und nicht besuchte Bereiche zu vermitteln
• ein Gefühl des Ortsbezugs für das fehlende Ortsgefühl im nichtphysischen Raum zu schaffen
• uns zu zeigen, was die Website beinhaltet
• uns zu sagen, wie wir die Website benutzen sollen
  >> Wo fangen wir an und welche Möglichkeiten gibt es?
• bei uns Vertrauen in die Website und deren Inhaber wachzurufen

Dementsprechend sollte man bei der Website Navigation für eine angenehme User Experience verständlicher Weise auch alle unterschiedlichen Nutzertypen berücksichtigen.

• primär “Such-Dominate” Anwender, die fast immer gleich über das Suchfeld einer Site gehen >> sofort fragen
• primär “Link-Dominante” Anwender, die zuerst passende Links anklicken
  >> selbst umsehen und stöbern
• von der Stimmung abhängige Mischnutzer

Grundlagen für ein gutes Website Navigationskonzept

Da der Umgang mit einer Website beim ersten Besuch von jedem Internetnutzer immer erst erlernt werden muss, sollten Umgang sowie Orientierung immer leicht fallen und alle Grundelemente der Seite schnell einzuprägen sein. Anders gesagt sollte ein gutes Website-Navigationskonzept also grundsätzlich sicherstellen, dass:

• Ihre Website intuitiv zu bedienen ist!
  >> Niemand möchte lange suchen oder überlegen
• Ein eindeutiges, einheitlich aussehendes Leitsystem existiert, das sich immer am selben Platz befindet.
  

  User Experience Infografik: Navigationszeile mit Hauptkategorien, Unterkategorien & Utilities

  • mit guten Bedienungs-Feedbacksignalen wie z.B. Mouse-Hover-Effekten
  • hervorstechende Markierung des aktuellen Standortes
    >> Ansonsten geht der Standort im visuellen Rauschen unter.
    

    User Experience Infografik: Bsp. Mega-Navigationsmenü mit Standortmarkierung_Dreamstime.com

• Sie Ihr Logo auf allen Unterseiten an derselben Stelle positioniert und mit der Startseite verlinkt haben. So kommt man ohne lange Suche mit einem Klick jederzeit schnell und einfach zur Startseite zurück.
• Ein gut ersichtliches Suchfeld integriert ist, das dem Besucher erleichtert Dinge zu finden, die im Einzelfall aus irgendwelchen Gründen doch nicht so einfach über die Navigation zu finden sind.
  > insbesondere bei sehr umfangreichen Internetseiten mit vielen Unterseiten
  

  User Experience Infografik: Varianten Suchfeld-Kennzeichnung

  • Entsprechend den Seh-Gewohnheiten und Nutzungskonventionen sind es die User gewohnt, die “Suche” oben in der Kopfzeile mittig oder rechts in der Navigationsleiste zu finden.
    >>> Ausnahmen sind Startseiten von Suchmaschinen bei denen das Suchfeld im Seitenmittelpunkt liegt
  • Bezeichnen Sie das Suchfeld oder den Button eindeutig mit dem Wort “Suchen”. Keine fantasievollen Formulierungen.
    Falls Sie “Suchen” als vorangestellte Bezeichnung für das Feld nehmen, verwenden Sie ”Go” oder “Los” als Bezeichnung des Buttons.
    >> machen Sie es den primär “Such-Dominate” Anwendern nicht unnötig schwer

Standortanzeige

Wie schon angeschnitten, stellt die Orientierung des Besuchers im nicht physischen Raum einer Website eine besondere Herausforderung für die Informationsarchitektur und eine angenehme User Experience dar. Menschen haben das Bedürfnis, ständig im Überblick zu behalten wo sie sich momentan auf der besuchten Website befinden. Darum legen sie sich “gedankliche Landkarten” von der jeweiligen Website an.
Es gibt verschiedene Arten, den momentanen Standort in der Standortanzeige zu markieren, so dass eine einfache Navigation, Orientierung & Interaktion möglich wird. Eine sichere Methode ist es, mehrere Unterscheidungsmerkmale gleichzeitig zu verwenden.

Neben der Standortanzeige spielt die “Breadcrumb-Navigation” als weiteres Instrument zur Orientierungshilfe eine entscheidende Rolle. Sie zeigt dem Besucher den Navigationspfad von der Startseite zu der Seite auf der man sich momentan befindet. Sie befindet sich aus diesem Grund fast ausnahmslos direkt unterhalb der Navigationszeile, so dass sie dem Besucher immer sofort ins Auge fällt.

Beispielseitenkonzeption über alle Hierarchieebenen

Um die Website Navigation durch die gesamte Seitenhierarchie über alle Ebenen der Informationsarchitektur hinweg gut zum Funktionieren zu bekommen, muss man von Anfang an parallel zum Hierarchie-Flussdiagramm einige Beispielseiten für alle Hierarchieebenen konzipieren. Es sollte ein tragfähiges Gesamtgrundkonzept vorliegen, bevor man sich mit der weiteren Gestaltung befasst. Auch wenn es ziemlich schwierig ist, eine gute Navigation über alle Ebenen zu entwickeln, die Besucher verbringen in der Praxis gleich viel Zeit auf den unteren und den oberen Ebenen. Auch dort möchten sie selbstverständlich eine einfache Navigation & Orientierung.

Einfache Orientierung & Interaktion auf Internetseiten

In Hinblick auf eine angenehme User Experience sollte Ihr Internetauftritt Besuchern oder Kunden einen Einstieg auf jeder beliebigen Einzelseite so leicht wie möglich machen. Vor diesem Hintergrund sollten die Nutzer stets einfach die Orientierung erlangen wo sie sich gerade aufhalten und wie sie zu den von ihnen gesuchten Informationen, Dienstleistungen oder Produkten gelangen. Zusammen mit einem intuitiven Interaktionsrahmen erlaubt es den Nutzern ein bequemes, zügiges Erledigen ihrer Anliegen.

Wo bin ich? Wo fange ich an? Was bietet Ihr an?

Landet ein Besucher oder Kunde auf Ihrer Website, schießen ihm augenblicklich einige unausweichliche Fragen durch seinen Kopf. Wo bin ich? Wo fange ich an? Was bietet Ihr an? Viele Nutzer steigen mittlerweile über Suchmaschinenanfragen oder externe Links direkt in die anvisierte Unterseite ein, ohne die Startseite zunächst zu Gesicht zu bekommen. Diese Tatsache unterstreicht, weshalb zur Beantwortung seiner Fragen auf jeder Einzelseite Navigationselemente vorhanden sein müssen.
Anhand des Anschauungsbeispiels von Zalando lassen sich die unterschiedlichen Navigationselemente, die für eine einfache Navigation & Orientierung notwendig sind, gut verdeutlichen.

• globales Navigationsmenü im Seitenkopf
  • hervorgehobenes Logo
  • Seiten-Kennung (hier im Beispiel Zalando)
  • Suchfenster
  • Hauptkategorie-Navigationszeile [primäre Navigation];(Bsp.: Herren / Damen / Kinder) versehen mit Auswahlmarkierung und Mouse-Hover-Effekten sowie zusätzlichem Home-Button
  • Utilities-Zeile [wichtige Elemente, die nicht Teil  inhaltlicher Hierarchie sind];
    max. 4 bis 5 sichtbar, wie z.B. Warenkorb, Sitemap, Kontakt oder Anmeldung
  • sowie gegebenenfalls Prüfsiegel
• aufklappbare Dropdown-Menüs für die Begriffe der Unterkategorie-Zeile als Mouse-Hover-Effekt
• Breadcrumb-Navigation zur Seite auf der man sich momentan befindet
• lokaler Unterseitenname auf den Kategorie-Mainpages und jeder einzelnen Seite
• Hauptspalte mit Hauptbildmotiv bzw. kategorisierten Produkten oder Hauptinhalten
• Unterkategorie-Navigationszeile mit Kategorie-Filtern am rechten Bildschirmrand
• Auswahlmarkierung in der Unterkategorie-Menüseitenzeile

Wie ist die Seite Strukturiert? Wo findet man was?
> übersichtliche Aufteilung von Seitenraster und -elementen

Ein weiterer maßgeblicher Punkt ist die übersichtliche Aufteilung von Seitenrastern und Seitenelementen. Zur Gewinnung eines schnellen Gesamtüberblicks haben sich einige fast sklavisch ständig wiederkehrende Positionierungen bestimmter Seitenelemente und grundlegende Seitenaufteilungen für die Nutzer als besonders vorteilhaft erwiesen. Man sollte sich also genau überlegen, ob und warum man solche Konventionen antasten möchte.

• Logo vor der Seitenkennung bevorzugt oben links
• Suchfenster oben Mitte oder rechts oben über der Hauptkategorie-Navigationszeile einschließlich aufklappbarer Dropdown-Menüs
• Unterkategorie-Navigationspalte mit Auswahlmarkierungen am rechten Rand
• Hauptspalte für den Content in der Mitte
• Marginale Spalte mit Zusatzinformationen oder Anzeigen am linken Rand

Was kann ich tun? Macht es Spaß, sich durch die Site zu bewegen?
> vielseitige Interaktion für eine angenehme User Experience

Mit Sicherheit fragen sich einige Leser an diesem Punkt – angenehme User Experience – war da nicht noch etwas? Wo bleibt denn nun eigentlich der Spaß?

Völlig richtig, ohne spaß bleibt die Customer Experience seltsam fade. Genau genommen ist er schließlich für eine positive Besuchererfahrung unverzichtbar.
Neben einer ästhetischen Gestaltung Ihrer Website und Präsentation der Informationen, Dienstleistungen oder Produkte sind hier vor allem vielseitige, intuitive Interaktionsmöglichkeiten gefragt. Das bietet Besuchern oder Kunden zum einen die Option mehr individuell abrufbare Detailinformationen über die Angebote zu erfahren, zum anderen deutlich mehr Spielraum sich auf der Seite zu beschäftigen.

Von daher macht es durchaus Sinn, sich auch in Ihrem eigenen Interesse damit auseinander zu setzen was Nutzern Spaß macht und was nicht.

• es macht keinen Spaß, eine Seite zu besuchen und durchsuchen, wenn sie hakt und hängt
• gute übersichtliche Wahl- und Filtermöglichkeiten erleichtern die Suche
  >> Einschränkungen bei Zalando gut gelöst, Filterung nach Größe, Farbe, Marke, Preiseinschränkung
• schnelles “Stöbern” (Navigieren) durch gefilterte Produktreihen
• gute effektive Suchfunktion
  

  User Experience Beispiel: Zalando Zoom [Bild: zalando.de freizeitkleid] orange size 40_zoom]

• Vielseitige, leichtläufige Interaktionsmöglichkeiten
  • verschiedene Ansichten
  • Vergrößerungsmöglichkeiten bei Produkten

Natürlich können solche Fragen immer nur näherungsweise und nicht auf jeden Nutzer zutreffend beantwortet werden.

Fazit

Der dritte Artikel meiner fünf-teiligen Blogartikelserie über „Web Usability“ fasst die für eine einfache Navigation, Orientierung & Interaktion maßgeblichen Elemente einer Website zusammen.
Anhand wichtiger Hinweise und Praxisbeispiele wird deutlich, auf was Sie bei der Gestaltung von Webangeboten achten sollten, um eine Angenehme Besuchererfahrung zu erzielen.

• Leichtfüßige, intuitive Orientierung & Navigation macht eine vernünftige Nutzbarkeit überhaupt erst möglich. Sprich: Benutzerfreundlichkeit ist ohne sie undenkbar.
• Zusammen mit vielseitigen Möglichkeiten zur Interaktion bestimmen sie den Rahmen dafür, wieviel Spaß Besucher bei der Nutzung haben. Eben, ob es einen negative oder angenehme User Experience wird.

Faktoren, die letztlich wesentlich über Erfolg oder Misserfolg Ihrer Unternehmens- oder Institutsseite mitentscheiden.

In den ersten zwei Artikeln dieser Artikelserie habe ich mich bereits mit der Frage „was ist Usability“ sowie „gute Erreichbarkeit & klare Website-Identität“ auseinandergesetzt.
In dem vierten Blogartikel werde ich mich eingehender mit dem bereits im ersten Artikel angeschnittenen Web Usability-Faktor Darstellung von Website-Inhalten beschäftigen.

 

1. Warum Web Usability?   2. Einstieg & Identität   3. Navigation & Orientierung   4. Darstellung von Website-Inhalten  5. Responsive Design

 

Quellen:
Don’t make me think_Steve Krug
Online-Marketing Crashkurs_Video2brain
Erfolgreiche Websites_Gallileo Computing