Suchst Du noch oder findest Du schon? Navigationsmechanismen im WWW: Teil 1 – Grundlegendes

Eine benutzerfreundliche Navigation ist das A&O einer Website

Navigation ist die Grundlage jeder Website. Sei es eine eher einfach aufgebaute Corporate Website oder eine komplexere Website wie es bei Onlineshops der Fall ist, die Navigation dient dazu den User durch die Website zu „führen“ und zwar so einfach und benutzerfreundlich wie möglich. Das Design kann noch so ästhetisch und ansprechend gestaltet sein, die Inhalte können noch so fachgemäß sein; über kurz oder lang werden User, die sich auf einer Site nicht gut zurechtfinden, verzweifeln und nicht wieder kommen.

In der heutigen Zeit rückt das Internet immer weiter in den Vordergrund. Viel Alltägliches wird zunehmend online erledigt (Emails, Online-Banking, Online-Shopping, Informationssuche, soziale Kontakte usw.). Demzufolge gibt es auch immer mehr Anbieter, die darauf achten, ihre Website gut aussehen zu lassen und ihre User mit einem klar strukturierten, gut bedienbaren Menü zufrieden zu stellen.
Denn es ist nicht nur für den User wichtig an sein Ziel zu gelangen und die Informationen zu erhalten nach denen er sucht. Noch viel wichtiger ist es für den Anbieter eine benutzerfreundliche Website zur Verfügung zu stellen, die gern und folglich auch oft besucht wird um bereits vorhandene Kunden zu behalten und weitere dazu zu gewinnen. Von einer benutzerfreundlichen Website kann ein Unternehmen also erheblich profitieren.

Auftakt einer 4teiligen „Navigationsreihe“

Ausgehend von der Tatsache, dass die Navigation einer Website maßgeblich an deren Erfolg beteiligt ist, bildet dieser Artikel die Einleitung zu einer „Navigationsreihe“ auf dem Usabilityblog.de, die die Vor- und Nachteile von horizontalen und vertikalen Navigationen sowie deren Einsatzbereiche beleuchten soll. Die einzelnen Artikel basieren auf wissenschaftlichen Erkenntnissen – gepaart mit Experteneinsichten aus der Praxis – und sollen eine Grundlage für die berühmt-berüchtigte Frage schaffen: Horizontal oder vertikal?

Der erste der vier Artikel zum Thema Navigationsmechanismen im WWW beschäftigt sich mit der etwas staubigen „Theorie“. Die nachfolgenden Teile mit der „Praxis“.

„Den Nutzer zufrieden stellen“: grundlegende Guidelines zur Gestaltung einer benutzerfreundlichen Navigation

Im Idealfall sollte die Benutzeroberfläche „verschwinden“, der User soll sich nicht auf die Navigation, sondern auf seine Aufgabe/sein Vorhaben – den Content – konzentrieren.
Dabei sollte er möglichst nicht durch zu viele, überflüssige Informationen – über verschiedene Kanäle, wie zum Beispiel Werbung als Pop-Up – oder eine Überladung an Informationen, die nicht alle auf einmal verarbeitet werden können, abgelenkt werden. Eine Reizüberflutung solcher Art sollte stets vermieden werden, um Fehlern vorzubeugen.
Ein schwerer Fehler führt dazu, dass das Ziel des Benutzers gar nicht erreicht wird. Ein leichter Fehler führt dazu, dass ein größerer Aufwand benötigt wird, um das Ziel zu erreichen (beispielsweise um den Fehler zu korrigieren). Zudem hat jeder Fehler negative Auswirkungen auf die Zufriedenheit des Anwenders [1].

Anbei einige grundlegende Guidelines zur Gestaltung einer benutzerfreundlichen Navigation – unabhängig davon, ob sie nun horizontal oder vertikal gestaltet, rechts oder links angeordnet ist.

„Wählen Sie Ihre Oberbegriffe eindeutig verständlich und überschneidungsfrei“

Die Navigation sollte klar strukturiert und die Oberbegriffe treffend gewählt sein. Dies ist wichtig, damit sich der User von vornherein gut zurechtfindet und nicht lange suchen oder überlegen muss, wie er zu seinem Ziel gelangt. Zu viele Optionen im Menü machen die Benutzung unnötig kompliziert. Teilweise werden Menüpunkte gar nicht genutzt, weil es zu viele (unbrauchbare) gibt. Weitere Folgen sind längere Suchzeiten, eine erforderliche gedankliche Reorganisation, wertlos werdendes Altwissen sowie mehr potenzielle Fehler des Users.

„Der Irrglaube von der 7+/-2 Regel“

Psychologen haben festgestellt, dass Menschen Gruppierungen von 5-9 Objekten noch gut überschauen können. Wenn uns eine größere Anzahl von Objekten präsentiert wird, neigen wir dazu, sie gedanklich in Gruppen eben dieser Größe zu unterteilen. Die „7+/-2-Regel“ besagt also, dass das menschliche Gehirn sieben Elemente am besten aufnehmen kann.
Auf eine Webseite bezogen können dies beispielsweise sieben Menüpunkte in einem abgegrenzten Bereich sein. Die Regel besagt weiter, dass das menschliche Gehirn fünf Elemente kaum als Auswahl wahrnimmt. Mit anderen Worten, ein Navigationsbereich mit derartig wenig Menüpunkten geht fast schon unter. Sind es allerdings mehr als neun, reagieren menschliche Denkzentralen mit Verwirrung bis Überforderung [6].

Deshalb raten viele Experten, bei der Gestaltung einer Website auf diese Regel zu achten. Was sicher nicht falsch ist. Allerdings ist sie bei Navigationen zu vernachlässigen, da sie sich auf Gedächnisleistung bezieht. Anders läge der Fall, wenn man den Usern nach dem Anschauen das Menü wegnehmen würde und sie sich dann erinnern sollten. Da man aber die Hauptnavigation immer sieht, trifft die „7+/-2-Regel“ auf sie nicht zu..

„KISS“

Grundsätzlich kann man das KISS-Prinzip zur Hilfe nehmen. Dieses Akronym steht für „keep it simple and short“, „keep it small and simple” oder auch “keep it simple and straightforward”. Diese Grundsätze sind in jeder Art und Weise bei der Gestaltung einer Website wörtlich zu nehmen.

„Der Mythos der 3-Klick Regel“

Die 3-Klick-Regel besagt, dass ein Nutzer mit 3 Klicks zum Gesuchten finden soll. Schafft er es mit 3 Klicks nicht, gibt er wahrscheinlich auf. Tatsächlich stimmen die Aussagen der 3-Klick-Regel nicht unbedingt. Grundsätzlich ist es vorteilhaft, wenn der Nutzer mit wenigen Klicks zum Ziel kommt, aber die Regel trifft nicht den wirklichen Usability-Punkt: Die Nutzer mögen keine frustrierende Links. Sie wollen eindeutige Links, die sie sicher zum Ziel führen. Dabei spielt die Anzahl der Links nur eine untergeordnete Rolle. In Usability-Tests wurde der Mythos der 3-Klick-Regel untersucht. Nachzulesen in „Testing the Three-Click Rule“ [8] sind u.a. anderem folgende Ergebnisse

  • Nutzer geben nicht grundsätzlich nach 3 Klicks auf.
  • Die Zufriedenheit der Nutzer steht in keinem Zusammenhang mit der Anzahl an Klicks bis zum gewünschten Ziel.

Ziel ist es, den Nutzern eindeutige Linkbezeichnungen und Wege für ihre Ziele anzubieten. Wenn dieser Weg kurz ist – gemessen an der Anzahl der Klicks – umso besser. Auch wenn sich die 3-Klick-Regel als ein Mythos herausgestellt hat, sollten allerdings zentrale Prozesse der Website nicht beliebig weit von der Starseite entfernt sein (z.B. per Klick auf das Logo).

“Den Breadcrumb-Pfad (immer) anbieten“

Es ist sinnvoll, wenn man zu jedem Zeitpunkt zum Hauptmenü zurückkehren kann und darüberhinaus auch ein Verlaufspfad angezeigt wird. Breadcrumb-Navigationen zeigen den Weg des Benutzers auf der Homepage meist horizontal an. Zu Beginn die Home-/Startseite, am Ende die aktuelle Seite („hierarchische Verschachtelung“).

Breadcrumb des Onlineshops baur.de

Oftmals werden die Breadcrumbs übersehen, doch ihr Fehlen fällt deutlich negativer auf als ihre Existenz. Sie haben den Vorteil dem User eine klare Visualisierung der aktuellen Position zu ermöglichen, sie bieten ihm einen „Rettungsklick“ zurück in die übergeordneten Ebenen der Website und zudem sind sie platzsparende, problemfreie und eindeutige Navigationshilfen.
So kann sich der User gut orientieren an welcher Stelle des Menüs oder der Website er sich gerade befindet und welche Schritte er bereits vorgenommen hat.
Zu beachten ist, dass die aktuelle Seite nicht klickbar oder unterstrichen gestaltet werden sollte, um falsche Erwartungen des Users zu vermeiden. Die rückwärts gerichteten Links hingegen sollten unterstrichen und anklickbar sein und somit die Möglichkeit des „Zurückgehens“ signalisieren.

„Beachten Sie die klassischen Gestaltgesetze“

Auch die sechs Gestaltgesetze spielen bei der Navigation eine Rolle, denn sie sorgen für eine übersichtliche und nachvollziehbare Anordnung der einzelnen Elemente[1].

  1. Gesetz der Ähnlichkeit – ähnliche Dinge werden in einer Gruppe zusammengefasst.
  2. Gesetz der Nähe – niedriger Abstand von Objekten verweist auf Zusammengehörigkeit.
  3. Gesetz der Prägnanz oder guten Gestalt – Jede Figur wird so wahrgenommen, dass sie in einer möglichst einfachen Struktur resultiert
  4. Gesetz der durchgehenden Linie – man sieht eher einfache Formen als komplexe.
  5. Gesetz des gemeinsamen Schicksals – mehrere Objekte, die sich gleichförmig bewegen, werden als zusammengehörig aufgefasst, auch wenn keine Ähnlichkeit ersichtlich ist.
  6. Gesetz der Vertrautheit – Figuren, die einmal als vertraute, bekannte Formen oder Figuren erkannt worden sind, sind ab diesem Zeitpunkt eine zusammengehörige Figur.

„Weitere Tipps & Tricks“

Bedenken Sie auch folgende, allgemeingültige Guidelines bei der Gestaltung einer benutzerfreundlichen Navigation:

  • Hierarchien müssen als solche erkennbar sein. Unterebenen sollte man am besten einrücken und bestenfalls zusätzlich mit Icons (wie z.B. Pfeilen) auszeichnen.
  • Es sollte immer mindestens zwei Unterscheidungsmerkmale geben (beispielsweise bei der Unterscheidung einer aktiven Kategorie (aktuelle Position) und den übrigen Rubriken).
  • Beim Überfahren mit der Maus muss erkennbar sein, welchen Navigationspunkt man gerade überfährt (Highlighting).

Ausblick auf den nächsten Artikel der Navigationsreihe

Als nächstes folgt die Betrachtung horizontaler Navigationsmechanismen. D.h. was gibt es für Arten (Mega-Dropdown, kaskadierende Menüs, zweizeilige horizontale Listen, etc.) und was sind ihre Stärken/Schwächen in Bezug auf eventuelle Einsatzbereiche (Restriktionen).

gute-nav2

Eine gelungene Navigation auf der Website ww.scientificamerican.com

Was jetzt jedoch vor dem Hintergrund der bereits genannten und der in den nächsten Teilen dieser Artikelreihe genannten Guidelines & Co. zu beachten ist:
Die Auswahl einer Navigationsart bzw. eines Mechanismus ist immer Kontext- und Zielgruppenbezogen! Das heißt es kommt auf die Nutzergruppe, deren Anforderungen und Gewohnheiten sowie deren Erfahrung und Umgang mit dem Internet an. Hinzu kommen User mit Seh- oder Wahrnehmungsschwächen, Kinder, die auf spielerische Art und Weise mit dem Internet umgehen und Senioren, die beim Surfen durch das WWW etwas mehr Zeit und sehr klare Anweisungen benötigen. Zudem hängt die Auswahl der Navigationsart stark vom Umfang und der Architektur der Informationen ab.
Darüber hinaus ist eine Navigation so zu wählen, dass sie dem Handlungskontext bzw. den Zielen der Nutzer Rechnung trägt.

Sie sehen, die Entscheidung für eine Navigationsart und die anschließende Konzeption ist alles andere als trivial. Die nächsten Teile der Artikelreihe sollen dabei zumindest eine Entscheidungsgrundlage bieten.

martyna„Hinweis: Der vorliegende Artikel und auch die restlichen Teile der Navigationsserie wurde in Kooperation mit Martyna Wasserfurth, Studentin des Internatonalen Informationsmanagement mit Schwerpunkt Sprachwissenschaften an der Universität Hildesheim, verfasst. Ihr Interesse liegt besonders bei den interkulturellen Aspekten des Studiums. Momentan absolviert sie ein studienbegleitendes Praktikum bei der eResult GmbH.
Auf diesem Weg schon einmal vielen Dank für die konstruktive
Zusammenarbeit.“

Quellen/weiterführende Links:

[1] Dahm, Markus: Grundlagen der Mensch-Computer-Interaktion. Verlag: Pearson Studium, München 2006

[2] Kalbach, James: Designing Web Navigation. Verlag: O’Reilly, China, 2007

[3] Unterlagen aus der Vorlesung „Mensch Maschine Interaktion“, geleitet von Thomas Mandl an der Uni Hildesheim im Sommersemester 2008

[4] Vor- und Nachteile vertikale vs. horizontale Navigation https://www.xing.com/net/userexperience/discuss-board-1522/vor-und-nachteile-vertikale-vs-horizontale-navigation-16944817/16944817/#16944817

[5] Interview mit Jakob Nielsen – Usability geht immer http://createordie.de/cod/news/Interview-mit-Jakob-Nielsen-–%3B-Usability-geht-immer-051540.html

[6] Die magische Zahl 7 und die Gedächtnisspanne http://www.kommdesign.de/texte/gedaechtnisspanne.htm

[7] Barrierefreies Internet — Beratung und Umsetzung http://www.webaccessibility.de/

[8] Testing the Three-Click Rule http://www.uie.com/articles/three_click_rule

[9] Jakob Nielsen’s Website http://www.useit.com

[10] A Pattern Library for Interaction Design http://www.welie.com

12 Gedanken zu „Suchst Du noch oder findest Du schon? Navigationsmechanismen im WWW: Teil 1 – Grundlegendes

  1. Pingback: Twitter Trackbacks for Suchst Du noch oder findest Du schon? Navigationsmechanismen im WWW: Teil 1 - Grundlegendes | [usabilityblog.de] on Topsy.com

  2. Pingback: uberVU - social comments

  3. Pingback: Suchst Du noch oder findest Du schon? Navigationsmechanismen im WWW: Teil 2 - Horizontale Navigation(en) | usabilityblog.de

  4. Pingback: Themen im November 2009: Hotel-Websites, Navigation im Web, Formulargestaltung und Leseverhalten | usabilityblog.de

  5. Pingback: Suchst Du noch oder findest Du schon? Navigationsmechanismen im WWW: Teil 3 - Vertikale Navigation(en) | usabilityblog.de

  6. Pingback: Suchst du noch oder findest du schon? Navigationsmechanismen im WWW: Teil 4 - Fazit und Ausblick | usabilityblog.de

  7. Pingback: Jahresrückblick 2009 - Leser, Themen und Funktionen | usabilityblog.de

  8. Pingback: Nutzerführung durch Links – Content-, Sitemaps und Brotkrummen | Blind-Text

  9. Pingback: WordPress: Homepage erstellen leicht gemacht | rueth online

  10. Pingback: Suchst Du noch oder findest Du schon? Navigationsmechanismen im WWW: Teil 1 – Grundlegendes | usabilityblog.de – uxMemo

  11. Pingback: Mega-Dropdown-Menüs - Der Teufel steckt im Detail - Usabilityblog.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.