accessBlog

News mit dem Tag »Navigation«

05 Sep 2011

Im ersten Teil sind wir auf die Navigation und die Kategorisierung über Tags und Rubriken als Formen der Nutzerführung eingegangen. Im zweiten Teil wird es um die Nutzerführung über verschiedene Verlinkungsformen gehen.

Hin und zurück – der Brotkrumenpfad

Der Brotkrumenpfad oder der sog. Breadcrumb-Trail gehört bei vielen Seiten zu einer unauffälligen, aber wichtigen Funktion. Er verrät kurz und anschaulich, wo man sich gerade befindet und was die übergeordnete Ebene der aktuellen Seite ist. Damit ist eine wichtige Regel der Usability erfüllt: Die Breadcrumbs verraten jederzeit, wo man ist, was die nächst höhere Ebene ist und wie man auf diese Ebene gelangt. Wenn die Navigation schlüssig aufgebaut ist, lässt der Brotkrumenpfad auch die Zuordnung eines Objekts innerhalb einer Hierarchie zu. Ich befinde mich auf Seite X, X ist ein Unterelement von Y, Y ist ein Unterelement von Z und so weiter. Je tiefer eine Ebene in der Navigation liegt, desto spezifischer wird die Information. Folgerichtig sollte die Information allgemeiner werden, wenn man eine Ebene höher steigt. Ein Brotkrumenpfad wird deshalb um so wichtiger, je mehr Ebenen eine Navigation hat.

Eine ähnliche Funktion kann im übrigen auch der URL erfüllen, wenn er lesbar ist. Bei einem Dateimanager ist das ein wenig augenfälliger: hier können wir anhand des Pfades erkennen, welche Ordner und Unterordner zu einer Datei führen und bekommen ein Gefühl dafür, wie Strukturen in diesem Ordnungssystem aufgebaut sind. Weil die meisten Webseiten heute auf Redaktionssystemen basieren, spielt die klassische Ordnerstruktur im Web keine große Rolle mehr.

Weiterlesen …

Inhaltliche Links

Natürlich gehören auch die Links im Inhaltsbereich zur Benutzerführung – ein Punkt, der häufig vernachlässigt wird. Bei Wikipedia spielen zum Beispiel die Links neben der Suche die eigentliche Hauptrolle. Bei längeren Artikeln folgt nach einem einleitenden Absatz ein Inhaltsverzeichnis, welches einen schnellen Überblick über Inhalt und Aufbau des Artikels liefert und einzelne Abschnitte des Artikels anspringbar macht. Innerhalb der Artikel werden Stichworte verlinkt, zu denen Artikel in der Wikipedia existieren. Außerdem gibt es in Form von Sprungankern die Möglichkeit, zur Quellenangabe der jeweiligen Information zu springen und anschließend wieder zur Ursprungsstelle zurückzukehren. Man kann also durch die Wikipedia navigieren, ohne die Hauptnavigation zu benutzen – die eigentliche Idee hinter dem Konzept »Hypertext«.

Online-Publikationen und Online-Bücher verwenden gerne eine Blätterfunktion. Online-Publikationen wollen vor allem die Klickrate steigern, weil bestimmte Werbeformen nach der Zahl der Seitenaufrufe bezahlt werden (sog. Ad Impressions). Oder sie glauben an die irrige Annahme, dass Nutzer auf längeren Webseiten nicht scrollen.

Bei Büchern hingegen macht es Sinn, die Texte abschnittsweise bereit zu stellen, weil sich die Kapitel als natürliche Abschnitte anbieten. Ein schönes Beispiel dafür sind die kostenlos zugänglichen EDV-Bücher des Galileo-Verlages. Ein ganzes Buch samt Grafiken auf einer Seite darzustellen würde die Ladezeit unnötig verlängern und brächte nur wenige Vorteile.

Am Ende eines Artikels sollte dem Nutzer immer eine Möglichkeit angeboten werden, weiterzuklicken: das kann ein verwandter Artikel sein, ein Verweis auf Quellen oder auf interessante Artikel zum behandelten Thema auf anderen Webseiten. Viele Nutzer werden nicht wieder hoch scrollen, um nachzuschauen, ob es oben noch was Spannendes gibt. Es bietet sich immer an, einen Link zu allgemeineren und einen zu spezifischeren Informationen anzubieten, um unterschiedliche Zielgruppen zu erreichen. Ein gutes Beispiel ist die HTML-Referenz selfHTML, wo etwa im Abschnitt über Verlinkung jeweils Links zu Grundlagenwissen und tiefer gehenden Informationen angeboten werden.

Blinde Nutzer verwenden gerne die Funktion, sich alle Links einer Seite anzeigen zu lassen. Das erlaubt einen sehr schnellen Überblick über den Inhalt des Dokuments. Wenn sie die Webseite gut genug kennen und die Links schlüssig benannt sind können Blinde unwahrscheinlich schnell durch die Webseite navigieren. Das ist übrigens der Grund, warum »weiter« oder »hier klicken« kein guter Ankertext für einen Link ist.


Anzeige der Links von ›Einfach für Alle‹ durch einen Screenreader

Sitemaps und Indizes

Sitemaps und Indizes spielen bisher in der Nutzerführung eine untergeordnete Rolle. Dabei sind Sitemaps eine interessante Alternative zu Navigationen, denn sie zeigen alle Ober- und Unternavigationspunkte, ohne dass man die einzelnen Navigationspunkte aufklappen muss. Wenn die Navigationspunkte auch verständlich benannt sind, kann man das Gesuchte sehr viel schneller finden, als wenn man die klassische Navigation verwenden würde. Wenn Sie eine grafische Sitemap anbieten, sollten Sie auch eine HTML-Version für Blinde und Sehbehinderte bereit stellen.

An der Sitemap sieht man auch, wie schon im ersten Beitrag geschrieben, dass es weniger wichtig ist, wie viele Haupt- und Unternavigationspunkte man unterbringt – entscheidend ist, dass die Links schlüssig dargestellt, gruppiert und benannt sind.

Eine Alternative zur Sitemap wäre ein Index oder Inhaltsverzeichnis. Ein Index basiert meistens auf einer alphabetischen Sortierung wichtiger Begriffe. Jedem Buchstaben sind bestimmte Begriffe zugeordnet, wodurch Nutzer sehr schnell die Gruppierung durchschauen können. Solche Indizes kennen wir aus Sachbüchern, sie können aber auch im Web sinnvoll sein: Viele Leute wissen, dass sie etwas bestimmtes auf einer Webseite finden können, haben aber keine Idee davon, wie es heißt oder es ist ihnen gerade entfallen. Oder sie wissen, dass sich eine bestimmte Information auf der Website befindet, aber nicht wo. In diesem Fall ist es einfacher, über Sitemaps oder Indizes zu gehen als über Suchmaschinen. Indizes bieten sich vor allem für komplexe Webseiten mit vielen unterschiedlichen Themen an. Sie sind allerdings nur dann sinnvoll, wenn sie bei Aktualisierungen und Änderungen auf der Webseite regelmäßig gepflegt werden.

Besser statt mehr verlinken

Die Rolle der Links als Elemente der Nutzerführung wird kaum berücksichtigt. Bereiche, die zueinander in Verbindung stehen oder sich aufeinander beziehen, werden kaum miteinander verbunden. Der Hypertext ist ein hervorragendes Medium, um aufeinander aufbauende Informationen so miteinander zu verknüpfen, dass sie leichter aufgefunden werden können. Viele Webseiten sind aber eher wie Bücher aufgebaut. Wer auf einer speziellen Seite gelandet ist und nach allgemeineren Informationen sucht, darf sich erst einmal selber umschauen. Auf Behördenseiten wird sehr häufig gesagt, welches Formular man ausfüllen muss und wo es zu finden ist – wohlgemerkt anstatt es direkt zu verlinken. Wenn der entsprechende Bereich oder das Formular umbenannt wurde, hat der Nutzer keine Chance, es zu finden. Es geht also nicht darum, beliebig viele Links auf eine Webseite zu stellen. Der Anbieter muss vielmehr überlegen, welche Informationen für den Nutzer hilfreich sind. Der Autor muss also mehr nachdenken, damit der Besucher weniger nachdenken muss.

29 Aug 2011

Die erste Lektion in der Mensch-Maschine-Interaktion dürfte sein, dass die Systeme selten genauso verwendet werden, wie sie gedacht waren. Das gilt vor allem für Software und Webseiten. Die Konzepter geben sich besondere Mühe, den Benutzer auf bestimmten Wegen durch die Webseite zu leiten. Es schadet aber selten, von diesen Wegen abzuweichen – im Gegenteil: unterschiedliche Nutzungsweisen erleichtern die Nutzung des Produkts. Dem Nutzer sollten daher möglichst viele Optionen angeboten werden, denn je näher das Produkt an seinen Nutzungsgewohnheiten liegt, desto eher wird er es auch weiterhin benutzen.

Webseiten werden immer komplexer, multimedialer und vielseitiger. Dennoch bleibt die Navigation das Rückgrat der Webseite. Im folgenden werden wir uns mit einigen Navigationskonzepten und ihren Vor- und Nachteilen beschäftigen.

Weiterlesen …

Die Monohierarchie – klassische Navigation

Die meisten Webseiten basieren heute auf einer einfachen Hierarchie: Ober- und Unterkategorien. Die Kategorisierung ist ein eleganter Weg, um auch sehr große Mengen an Informationen zu organisieren. Man spricht von starker Hierarchie oder Monohierarchie, wenn jedes Objekt nur einer Ebene zugeordnet ist. Dazu ein Zitat aus Henrik Arndts Buch zur Informationsarchitektur:

»Die Strukturierung von Informationen mittels Hierarchien ist sehr effektiv. Jeder einzelnen Sektion sind nur die Eigenschaften zugewiesen, die sie von der ihr übergeordneten Kategorie unterscheidet. Alle anderen Eigenschaften ergeben sich aus der Position innerhalb der Struktur.«
(Henrik Arndt. Integrierte Informationsarchitektur. Springer 2006, Seite 135f.)

Jeder, der schon mal ein Kategorisierungssystem aufgebaut hat, ist sich der Schwäche dieses Systems bewusst. Denken wir an die Bibliothek, wo sich jedesBuch fast immer mehreren Sachgebieten zuordnen lässt und die Entscheidung, wo es schließlich eingeordnet wird, auf banalen Faktoren bis hin zur Größe des Einbands basieren kann.

Bei Webseiten haben wir im Großen und Ganzen das gleiche Problem im verschärftem Maße. Einerseits sollen zu viele Navigationspunkte auf der ersten Ebene vermieden werden, andererseits soll die Navigation nicht zu viele Unternavigationspunkte oder Unterebenen haben. Praktisch ist es kein Problem, eine einzelne Seite mehreren Navigationspunkten zuzuordnen, das widerspricht aber jeder Konzeptionspraxis.

Eine simple Regel besagt, dass die Nutzer mit maximal drei Klicks das finden sollten, was sie gesucht haben, die Regel gilt allerdings als veraltet. Es geht weniger darum, die Zahl der nötigen Klicks zu minimieren als eher darum dem Nutzer klar zu zeigen, dass er auf dem richtigen Weg ist. Zum einen werden die Nutzer das Navigationskonzept nicht auf Anhieb verstehen. Zum anderen werden sie – auch wenn sich der Webmaster das wünscht – nicht jeden Navigationspunkt einmal auf Verdacht aufklappen, um zu sehen, ob das Gesuchte dort ist. Hier gilt die Faustregel: mit jeder weiteren Hierarchie-Ebene verliert man weitere Nutzer. Wer sich hoffnungslos in der dritten Ebene verlaufen hat, macht das, was die meisten erfahrenen Internet-Nutzer von Anfang an getan hätten: Sie rufen eine Suchmaschine auf, geben den Namen der Website und den Suchbegriff ein und werden wahrscheinlich schneller das Gesuchte finden. Der weniger versierte Nutzer wird der Site auf Dauer den Rücken kehren.

Das Problem bei den Hierarchien besteht darin, dass wir nur das sehen, was in der gerade geöffneten Ebene vorhanden ist. Öffnen wir eine Ebene, schließt sich eine andere. Aber kaum ein Mensch wird es auf sich nehmen, sich durch sämtliche Ebenen zu hangeln. Frei nach Murphys Gesetz ist das Gesuchte immer dort, wo man gerade nicht sucht.

Für Blinde ergibt sich das spezielle Problem, dass sie sich linear durch die Website bewegen. Wenn sie eine ihnen unbekannte Website öffnen, müssen sie mit dem Screenreader sämtliche Navigationspunkte durchgehen, um das Gesuchte zu finden. Und das machen sie nicht einmal, sondern sie müssen das bei jedem Neuladen der Seite wiederholen, nur kommen natürlich weitere Ebenen dazu, der Prozess verlängert sich also. Das ist ein generelles Problem für Tastaturnutzer, denn sie können die Navigationspunkte nicht mit dem Mauscursor direkt anspringen, sondern müssen mit der Tastatur durchtabben, was je nach Komplexität der Webseite sehr aufwendig sein kann.

Menschen mit kognitiver Behinderung haben oft Schwierigkeiten, sich in komplexen Strukturen zu orientieren. Verschärfend kommt hinzu, dass die Anbieter möglichst originell sein wollen oder jargonlastig sind und branchentypische Sprachregister bedienen. Auch Nutzer ohne kognitive Behinderung wissen meistens nicht, was der Texter mit Brokerage oder Investor Relations meint. Die Struktur der Seite orientiert sich oft nicht an den Bedürfnissen des Nutzers sondern am Organigramm des Unternehmens oder dem Corporate Wording. Beides ist für komplett Außenstehende – und das sind nun mal die meisten Nutzer eines öffentlichen Angebots – unverständlich und undurchschaubar.

Flache versus tiefe Navigationen

Navigationen sind entweder flach oder tief. Flache Navigationen haben viele Navigationspunkte auf der ersten Ebene, haben dafür aber wenige Ebenen. Tiefe Navigationen wiederum haben eher wenige Navigationspunkte auf der ersten Ebene, haben dafür aber mehr Ebenen. Ob man dem Nutzer eher 6 oder bis zu 9 Navigationspunkte zumuten kann, wird stark diskutiert. Tatsächlich scheint aber die Schlüssigkeit des Navigationskonzeptes entscheidender zu sein als die Zahl der Navigationspunkte. Online-Shops oder -Medien zum Beispiel haben oft deutlich mehr als zehn Navigationspunkte, und allein der Erfolg großer e-Commerce-Anbieter zeigt, dass Nutzer damit in der Regel zurecht kommen.

Die Polyhierarchie

Die Polyhierarchie oder schwache Hierarchie ist die Zuordnung von Objekten zu mehreren Rubriken. Bekanntestes Beispiel bei Webseiten ist die Kategorisierung in Weblogs. Die Kategorie legt die generelle Einordnung eines Beitrags fest, während die Tags oder Labels eine präzisere Einordnung des Beitrags zulassen. Eine Tagcloud erlaubt durch die unterschiedliche Gewichtung der Worte eine schnelle Orientierung darüber, worüber der Autor hauptsächlich schreibt und gibt nebenbei auch die Möglichkeit, gezielter nach Beiträgen zu einem bestimmten Thema zu suchen, ohne sich den Kopf über den korrekten Suchbegriff zu zerbrechen. Soll man jetzt nach Barrierefreiheit oder Zugänglichkeit suchen, nach Internet oder eher nach Web? Die Verschlagwortung hilft bei der Entscheidung, denn der Autor kann echte und vermeintliche Synonyme für seine Beiträge vergeben. Ein Beitrag kann beliebig vielen Kategorien und Schlagworten zugeordnet werden.

Generell ist das Prinzip schwacher Hierarchien eine gute Lösung für Websites mit vielen Beiträgen zu unterschiedlichen Themen. Leider übertreiben es viele Blogger mit den Kategorien und Tags. Schlagworte werden eher großzügig und unsystematisch vergeben, viele Schlagworte sind so allgemein gehalten, dass sie eigentlich nicht zum Beitrag passen und dem Nutzer auch nicht weiter helfen. Das freie Redaktionssystem Drupal bietet einen systematischeren Ansatz, hier können ganze Vokabularien über ein eingebautes Taxonomie-System angelegt werden.

Auch für Menschen mit Behinderung kann eine Polyhierarchie durchaus Vorteile haben. Eine Schlagwortwolke erlaubt eine flachere Hierarchie als die Navigation. Wenn die Schlagworte präzise gewählt wurden, können die Beiträge zu einem bestimmten Thema wesentlich schneller gefunden werden als in einer verschachtelten Monohierarchie. Die allzu großzügige Vergabe von Kategorien und Schlagworten wiederum ist schwerer zu durchschauen als eine klassische Navigation.

  • Man ist sehr viel schneller dabei, eine neue Kategorie anzulegen als einen neuen Punkt in der Hauptnavigation.
  • Die Kategorien wachsen eher »wild«, Navigationen sind häufig schlüssiger aufgebaut als Kategorien.
  • Wordpress erlaubt auch das Verschachteln von Kategorien, womit das Kategoriensystem die gleichen Probleme aufwirft wie eine klassische Navigation.

Letzten Endes müssen auch bei Polyhierarchien die gleichen Regeln wie beim Aufbau einer Navigation beachtet werden: die Zahl der Elemente spielt erst dann eine Rolle, wenn das gesamte Ordnungssystem unübersichtlich, unverständlich oder ungenau wird. Wer für jeden Beitrag eine neue Kategorie eröffnet und 30 Schlagwörter vergibt, hilft dem Nutzer nicht.

21 Sep 2006

In unserer Mini-Serie geht es diesmal wieder um Hilfen, die bei unüberlegtem Einsatz selbst zur Barriere werden können. Wie schon in der letzten Woche sehen wir uns heute einige Aspekte barrierefreien Webdesigns an, die oft falsch eingesetzt werden. Ebenfalls mit dabei sind einige Barrieren wie mangelnde Skalierbarkeit und unmögliche Tastaturbedienung, die den Anbietern bei genauerem Hinsehen schon längst hätten auffallen müssen…

Zum Mithören:

Podcast vom 21. September
(.mp3, 6′49″, 6,3 MB)

Zum Mitlesen:

Die Mitschrift des Podcasts

Zum Abonnieren:

Der Podcast im iTunes Music Store

15 Sep 2006

Heute gibt es den zweiten Teil unserer kleinen Serie zum Thema »Gut gemeint ist das Gegenteil von Gut«. Nach dem erfolgreichen ersten Teil schauen wir uns diesmal ein Thema an, dass wegen seiner Ergiebigkeit ebenfalls für eine eigene Sendung reicht: Metadaten in HTML-Dokumenten. Das erste, woran Techniker beim Stichwort Metadaten denken, sind meist die bekannten Meta-Tags. Diese findet man im (unsichtbaren) Kopfbereich von HTML-Dokumenten und sie sollen dort weitergehende Informationen zu Inhalten und Funktionen der jeweiligen Seite oder Anwendung transportieren…

Zum Mithören:

Podcast vom 15. September
(.mp3, 7′39″, 7,1 MB)

Zum Mitlesen:

Die Mitschrift des Podcasts

Zum Abonnieren:

Der Podcast im iTunes Music Store

09 Jun 2006

Jede Menge Links von A wie Accessibility bis Z wie Zugänglichkeit:

16 Feb 2005

Via heise: 46 Prozent der Befragten bevorzugen die Bezeichnung ‹Startseite› für die erste Seite eines Online-Angebots, während sich nur 10 Prozent mit der englischen ‹Homepage› anfreunden können. Das sind die Ergebnisse einer Studie der Marktforscher von eResult, die sich in weiten Teilen mit den Ergebnissen älterer Studien (argonauten etc.) decken. Während einige Begriffe wie ‹Download› mittlerweile als nahezu eingedeutscht gelten können, scheitern viele Nutzer (und auch Screenreader übrigens) nach wie vor an vermeintlich originellen Wortneuschöpfungen.

24 Jan 2005

Theoretisches und Praktisches zu Usability und Accessibility:

12 Jan 2005

Die wöchentliche Linkschleuder zu Design, Standards usw.:

26 Nov 2004

Mittlerweile schon traditionell zur Usability:

Ansonsten gibt es noch ein hoffnungsvolles neues Projekt, das Usability-Experten und OpenSource-Entwickler zusammenbringen möchte: »OpenUsability.org« (gefunden via InfoDesign). Die Kostenvorteile und die freie Adaptierbarkeit von OpenSource-Software täuschen ja oftmals darüber hinweg, daß (systembedingt) eine zentrale Instanz fehlt, die das Aussehen und Verhalten von Programmen regelt – was auch unmittelbare Auswirkungen auf die Gebrauchstauglichkeit, oder besser den Mangel an selbiger hat (Stichwort: Erwartungskonformität, um nur mal ein Beispiel zu nennen).

04 Mai 2004

Navigationsmenüs sind neben der Qualität der Inhalte und den interaktiven Angeboten der Garant für den Erfolg eines Internetauftritts. Übersichtliche, zugängliche und benutzerfreundliche Menüs haben entscheidenden Einfluss auf die Orientierung, die Verweildauer von Besuchern und damit auf die Erreichung der Ziele eines Angebotes. Wie Sie benutzbare und ansehnliche Navigationen mit sauberem HTML und ein wenig CSS erstellen können, zeigen Stefan Blanz und Eva Papst in unserer neuen Serie: Barrierefreie Navigationsmenüs.

03 Mär 2004

Noch ein Versuch, Aufklappmenüs zugänglicher zu gestalten: XHTML/CSS/DHTML Semantically Correct Drop-Down Menu von Sam Hampton-Smith. Ganz ohne JavaScript geht das hier natürlich auch nicht, was zu Problemen führen könnte, wenn beim Benutzer CSS an- und JavaScript abgeschaltet ist. Daher sollten man für die oberste Menüebene unbedingt ein Fallback vorsehen, so dass hinter diesen Links tatsächliche HTML-Seiten liegen. Diese können dann z. B. nochmal die Struktur des jeweiligen Menüs in Form von weiteren Links beinhalten.