> Einfache Navigation, Orientierung & Interaktion

Web Usability Guide – Everything-flows 3. 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.
Contents
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.

User Experience Infografik _Der erste Website-Besuch_Folgende Website-Besuch
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.
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

User Experience Infografik _Websitenavigations-Schema_Vergleich Besuch eines Elektronik- & Medienfachmarkt
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
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 UnterseitenUser 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
- 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.
Standortanzeige

User Experience Infografik: Arten der Standortanzeige in der Navigation
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.

User Experience Infografik: Breadcrumb-Navigation
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

User Experience Infografik: Beispielseiten Hierarchie-Level
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?
![User Experience Beispiel _Navigation Kategorie Herren>Sport>Jacken Westen Zalando [Bild: zalando.de/sports-winterjacken-herren]](http://geraldstade.de/wp-content/plugins/lazy-load/images/1x1.trans.gif)
User Experience Beispiel: Navigation Kategorie Herren>Sport>Jacken Westen Zalando [Bild: zalando.de/sports-winterjacken-herren]
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
![User Experience Beispiel _Hauptkategorie Damenbekleidung Zalando [Bild: zalando.de]](http://geraldstade.de/wp-content/plugins/lazy-load/images/1x1.trans.gif)
User Experience Beispiel: Hauptkategorie Damenbekleidung Zalando [Bild: zalando.de]
- 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
![User Experience Beispiel _Hauptkategorie Herrenbekleidung Zalando [Bild: zalando.de/herrenbekleidung]](http://geraldstade.de/wp-content/plugins/lazy-load/images/1x1.trans.gif)
User Experience Beispiel: Hauptkategorie Herrenbekleidung Zalando [Bild:.zalando.de/herrenbekleidung]
Was kann ich tun? Macht es Spaß, sich durch die Site zu bewegen?
> vielseitige Interaktion für eine angenehme User Experience
![User Experience Beispiel _Zalando Nutzererlebnis [Bild: zalando.de freizeitkleid]](http://geraldstade.de/wp-content/plugins/lazy-load/images/1x1.trans.gif)
User Experience Beispiel: Zalando Nutzererlebnis [Bild: zalando.de freizeitkleid]
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
Schreibe einen Kommentar