• Facebook
  • Google+
  • Twitter
  • XING
16.09.2007

Tabs (Reiter), richtig verwendet

13 Design-Richtlinien für Tab-Navigationen wurden von Yahoo Finance befolgt, aber die Usability leidet ein wenig unter übermässigem AJAX-Einsatz und schwieriger persönlicher Anpassung.

 

by Jakob Nielsen (deutsche Übersetzung) - 17.09.2007

 

Es ist ein seltenes Vergnügen, im Web einer Nutzeroberfläche zu begegnen, die Dialog-Steuerungen korrekt verwendet. Selbst so einfache Dinge wie Radio-Buttons und Checkboxen werden in der Hälfte der Fälle unkorrekt verwendet. Gar nicht zu reden von Drop-down-Menüs, die fürchterlich missbraucht werden, oder den selbst gemachten Scroll-Leisten, die viele Flash-Websites verunzieren. Yahoo Finance hat kürzlich eine neu gestaltete Startseite veröffentlicht, die Tabs (Reiter) korrekt verwendet, wie unten gezeigt in zwei verschiedenen Bereichen der Seite mit Tabs:

Es ist ein seltenes Vergnügen, im Web einer Nutzeroberfläche zu begegnen, die Dialog-Steuerungen korrekt verwendet. Selbst so einfache Dinge wie Radio-Buttons und Checkboxen werden in der Hälfte der Fälle unkorrekt verwendet. Gar nicht zu reden von Drop-down-Menüs, die fürchterlich missbraucht werden, oder den selbst gemachten Scroll-Leisten, die viele Flash-Websites verunzieren.

Yahoo Finance hat kürzlich eine neu gestaltete Startseite veröffentlicht, die Tabs (Reiter) korrekt verwendet, wie unten gezeigt in zwei verschiedenen Bereichen der Seite mit Tabs:

neu gestaltete Startseite von Yahoo Finance
Tab-Steuerungen auf der Startseite von Yahoo Finance (oben links und in der Mitte rechts)

Usability-Richtlinien für Tabs (Reiter)

Dieses Design befolgt alle 13 Richtlinien für Tabs (Reiter):

  1. Es verwendet Tabs, um innerhalb des gleichen Kontextes zwischen verschiedenen Aspekten zu wechseln (und nicht, um zwischen verschiedenen Bereichen zu navigieren - ein weit verbreiteter Fehler, den Amazon.com eingeführt hat).
  1. Es fasst den Inhalt hinter den Tabs logisch zusammen, so dass die Nutzer leicht voraussehen können, was sie finden werden, wenn sie einen bestimmten Tab auswählen. (Um dieses Problem einer Mini-Informations-Architektur zu erforschen, bietet sich Card-Sorting als Option an. Wenn Sie keine klar unterscheidbaren Gruppen finden, sind Tabs wahrscheinlich das falsche Steuerungsinstrument, um Ihre Inhalte zu handhaben.)
  1. Normalerweise müssen die Nutzer die Inhalte aus mehreren Tabs nicht gleichzeitig sehen. Wenn die Leute aber doch die Informationen hinter verschiedenen Tabs miteinander vergleichen müssen, dann stellt das Hin- und Herschalten eine zusätzliche Belastung ihres Kurzzeitgedächtnisses dar und verschlechtert die Usability, verglichen mit einem Design, bei dem alles auf einer grossen Seite zusammen steht.
  1. Die Tabs sind dem Wesen nach einigermassen parallel aufgebaut, zumindest für US-amerikanische Nutzer. (Für internationale Nutzer wäre es besser, sie hätten einen Tab "North America" oder "Americas", um die Parallelen zu "Europe" und "Asia"zu sehen.)
  1. Der aktuell ausgewählte Tab ist unterlegt. In diesem Fall wird er durch das Fehlen von Farbe unterlegt, was gut funktioniert, wenn es mindestens drei Tabs gibt. (Bei nur zwei Tabs wäre es schwerer zu sagen, welcher davon ausgewählt ist.) Zusätzlich kann man den aktuellen Tab durch seine Grösse, durch fette Schrift, ein Icon oder dadurch markieren, dass er aussieht, als würde er vor den anderen Tabs stehen.
  1. Die nicht ausgewählten Tabs sind deutlich sichtbar und lesbar und erinnern die Nutzer an die zusätzlichen Optionen. Wenn man die nicht hervorgehobenen Tabs zu stark in den Hintergrund zurückblendet, besteht die Gefahr, dass die Nutzer sie niemals anklicken und die verborgenen Funktionen niemals entdecken.
  1. Der aktuelle Tab (Reiter) ist mit dem Inhaltsbereich verbunden, ganz so, als würden wir einige physische Karteikarten mit angehefteten Reitern mischen. So wird betont, welches Element gerade gezeigt wird, und es zeigt den Nutzern an, welcher Tab ausgewählt ist, wenn es nur zwei Tabs gibt. Wenn der ausgewählte Reiter und das angezeigte Element die gleiche Farbe haben, bestätigt das die Verbindung zwischen den beiden. Dieser Grund spricht für das umgekehrte Unterlegen.
  1. Die Bezeichnungen sind kurz und verwenden gewöhnliche Worte und keine künstlichen Begriffe. Tab-Bezeichnungen sollten gewöhnlich aus ein bis zwei Wörtern bestehen. Kurze Bezeichnungen sind besser überfliegbar; wenn Sie immer wieder längere Bezeichnungen brauchen, ist das ein Hinweis darauf, dass die Auswahl zu kompliziert ist für eine Tab-Steuerung.
  1. Die Bezeichnungen im Beispiel ganz rechts verwenden die titeltypische Gross- und Kleinschreibung: Jedes Wort ist am Anfang gross geschrieben. Das Beispiel ganz links verwendet fälschlicherweise nur Grossbuchstaben, was selten eine gute Idee ist, denn die sind schwerer zu lesen.
  1. Es gibt nur eine Reihe Tabs. Doppel- und Mehrfachreihen erzeugen hin- und herspringende Elemente, die die räumliche Erinnerung zerstören und es den Nutzern unmöglich machen, sich zu erinnern, welche Tabs sie schon besucht haben. Ausserdem sind Mehrfachreihen natürlich ein deutliches Symptom für exzessive Komplexität: Wenn Sie mehr Tabs brauchen, als in eine Reihe passen, müssen Sie Ihre Struktur vereinfachen.
  1. Die Tab-Reihe befindet sich oben am Element - und nicht an der Seite oder unten, wo die Nutzer sie oft übersehen würden.
  1. Das Themenfeld, das die Tabs umfassen, sollte aus dem visuellen Design heraus klar ersichtlich sein. Metaphorisch gesprochen entspricht die Verwendung von Tabs dem Blättern in den Karteikarten eines altertümlichen Karteikastens; die Nutzer müssen also auf einen Blick erkennen können, wofür jede "Karteikarte" (d. h., jedes Tab-Element) steht.
  1. Kurze Ladezeiten stellen sicher, dass das Klicken auf einen neuen Tab sofort das korrespondierende Element erscheinen lässt. Dieser Effekt wird wahrscheinlich via AJAX erzeugt, aber die Programmtechnik ist hier nicht von Bedeutung. Wichtig ist, dass der Effekt schnell genug passiert (d. h. idealerweise in < 0,1 Sek.), damit es sich so anfühlt, als gebe es eine physische Verbindung zwischen ihrem Mausklick und dem Erscheinen des ausgewählten Elements.

Während die Tabs im Hauptinhaltsbereich der Seite korrekt verwendet werden, trifft das auf die Tabs der globalen Navigationsleiste oben auf der Seite nicht zu:

Navigationsleiste der Startseite von Yahoo Finance
Die obere Navigationsleiste der Startseite von Yahoo Finance.

Tabs sollten für Fälle reserviert sein, in denen die Nutzer die Ansicht wechseln können, während sie am gleichen Platz bleiben. Ausserdem steht das kleine Dreieck unter jeder Bezeichnung für ein Drop-down-Menü, eine Vorrichtung, die sich mit Tabs standardmässig überhaupt nicht verträgt.

Konsistenz

Yahoo Finance befolgt im Allgemeinen eine übergreifende Richtlinie: Bleibe konsistent. Die Seite enthält drei verschiedene Bereiche mit Tabs, und alle sehen gleich aus und funktionieren auf gleiche Weise (ausser der globalen Navigationsleiste, wie oben beklagt).

Leider gibt es weiter unten auf der Seite noch eine vierte Tab-Steuerung; hier haben die Tabs eine andere Farbe. Doch im Grossen und Ganzen sieht auch diese Tab-Steuerung etwa so aus wie die anderen, so dass sie keine grösseren Usability-Probleme hervorrufen dürfte. Auf jeden Fall steht sie so weit unten auf der Seite, dass viele Besucher nicht bis dorthin scrollen und sie nicht sehen dürften.

Konsistenz ist beim Gestalten von Steuerungen in grafischen Nutzeroberflächen wichtig, weil sie das Gefühl der Nutzer entstehen lässt, die Oberfläche zu beherrschen, und zwar auf verschiedene Weise:

  • Wiedererkennbarkeit: Wenn etwas immer wieder gleich aussieht, wissen Sie, wonach Sie suchen müssen, und was es ist, wenn Sie es finden.
  • Vorhersehbarkeit: Wenn etwas immer auf die gleiche Weise funktioniert, wissen Sie, was passieren wird, wenn Sie damit umgehen.
  • Ermächtigung: Wenn Sie sich auf Ihr erworbenes Wissen über alle verfügbaren Funktionen verlassen können, können Sie sich leicht einen Satz von Handgriffen zulegen, um bestimmte Ziele zu erreichen.
  • Effizienz: Sie müssen keine Zeit damit verbringen, etwas Neues zu erlernen, und sich keine Sorgen um die Wirkung inkonsistenter Funktionen machen.

Ein Übermass an AJAX

Es ist gut, wenn ein Klick auf den Tab sofort zum Erfolg führt und das Anzeige-Element verändert, ohne gleich die ganze Seite neu zu laden. Aber nicht alle Aktualisierungen innerhalb der Seite sind gut.

Auf der Yahoo-Finance-Seite werden die Aktienkurse in Echtzeit aktualisiert, und jede Änderung wird signalisiert, in dem hinter der betreffenden Zahl eine Farbe aufleuchtet (betrachten Sie als Beispiel das Element "Nasdaq Volume", das oben im ersten Screenshot hervorgehoben ist). Das ständige Geflacker überall auf dem Bildschirm wirkt schnell ermüdend, besonders bei so etwas wie Umsatzzahlen, die sich ständig ändern.

Dass man etwas machen kann, bedeutet noch lange nicht, dass man es auch machen sollte. Ja, es entspricht einer Richtlinie, die Aufmerksamkeit der Nutzer auf Aktualisierungen in der Seite zu lenken, aber nur dann, wenn es nötig ist, die Nutzer zu alarmieren. In diesem Fall reicht es, allen Nutzern zu sagen, dass alle Zahlen ständig auf dem neuesten Stand gehalten werden.

Bei einem Handelssystem für Tageshändler wäre das etwas anderes. In einem solchen Szenario müssen die Nutzer ständig die Markttrends für vielerlei Titel im Auge behalten, und dann können Farben, die in ihrem peripheren Gesichtsfeld aufblinken, sie auf kurzlebige Geschäftsgelegenheiten aufmerksam machen.

Auf der Startseite eines Finanzportals dagegen müssen die Nutzer ein umfangreiches Angebot von Überschriften und Artikeln überfliegen. Wenn sie handeln wollen, gehen sie zur Website ihres Brokers, sie könnten also gar keinen Vorteil aus etwas ziehen, das eine aus der Pistole geschossene Antwort erfordert. Kaum jemand wird sich hinsetzen und auf diese Seite starren, um mit den sekündlichen Änderungen Schritt zu halten; das mitleidlose Geflacker ist übertrieben und lenkt die Nutzer von dem ab, was sie eigentlich auf der Seite vorhatten.

Schwierigkeiten bei der persönlichen Anpassung

Yahoo Finance lässt es zu, dass die Nutzer die Tabs in der Market Summary (im Marktüberblick) persönlich anpassen, damit jeder dort einen Satz seiner präferierten Indizes sehen kann. Leider ist die Bildschirmseite für die Personalisierung zu schwierig:

Optionen für die persönliche Anpassung der Yahoo-Finance-Seite
Optionen für die persönliche Anpassung eines Teils der Yahoo-Finance-Seite.

Ein Chart begleitet das erste Thema in der Pünktchenliste, aber diese Tatsache ist nicht offensichtlich. Wenn die Nutzer den vorgegebenen Index ändern wollen, müssen sie folgern, dass sie die Reihenfolge der Elemente in der Kursliste ändern müssen. Zumindest sollte die Anleitung das erklären. Besser wäre es, die Seite böte einen Satz Radiobuttons neben den Index-Kurznamen an; dann würde der ausgewählte Radiobutton entscheiden, welcher Kurs auf dem Chart angezeigt wird.

Zwar kennen Investment-Experten die Ticker-Kurznahmen der Indices, die sie verfolgen wollen, aber die kleben an ihren Bloomberg-Terminals. Die meisten Nutzer von Yahoo Finance werden keine Ahnung haben, was sie ins Formular hineintippen sollen. Gut, dass die Seite einen Link zur Kurznamensuche anbietet (als Just-in-time-Hilfe). Doch da die Seite nur wenig andere Funktionen hat, wäre es besser, sie würde die 30 bis 40 geläufigsten Kurznamen am rechten Seitenrand auflisten. Die Nutzer könnten dann einen Kurznamen einfach anklicken und müssten ihn nicht eintippen (was fehleranfälliger ist).

Ich habe diese Seite tatsächlich persönlich angepasst, weil sie den Dow-Index vorgegeben hat. Jedes Buch über Investment, das ich jemals gelesen habe, sagt, dass der S&P 500 ein besserer Indikator für den amerikanischen Aktienmarkt ist, deshalb wollte ich natürlich diesen dort sehen.

Vielleicht hätte Yahoo den S&P 500 als Vorgabe nehmen und es mir so ersparen sollen, den Bildschirm persönlich anpassen zu müssen. Allerdings: Der S&P 500 mag theoretisch besser sein, die Presse beschäftigt sich meistens mit dem Dow, so dass Investment-Novizen den wahrscheinlich besser verstehen. Ethnographische Studien könnten uns mehr darüber sagen, was die Leute über Investment und Aktien-Indices denken, und es ist recht wahrscheinlich, dass Yahoo diese Forschung betrieben und gute Gründe hat, den Dow zu nehmen.

Zwar gibt es Usability-Probleme bei der persönlichen Anpassung, aber insgesamt macht die Seite einen sinnvollen Gebrauch von Personalisierung, was schwierig ist. (Der Artikel über Probleme bei der Personalisierung, den ich vor 9 Jahren geschrieben habe, stimmt immer noch. Die blosse Tatsache, dass sich die Personalisierung so langsam verbessert, ist ein Grund zur Skepsis, wenn einmal mehr gewaltige Verbesserungen der Personalisierungstechnik ausgerufen werden.)

Unter den personalisierten Funktionen der Seite ist eine Liste der aktuellen Kurse jener Aktien, die der Nutzer in letzter Zeit angeschaut hat (hier nicht gezeigt). Früheres Interesse ist ein guter Proxy für aktuelles Interesse, und es ist sehr wahrscheinlich, dass die Nutzer sich noch um die Kurse der jüngst aufgesuchten Aktien kümmern.

Zwar hat das neue Startseitendesign von Yahoo Finance seine Schwachstellen, aber insgesamt ist es exzellent. Besonders erfreut bin ich über den so überaus korrekten und effektiven Gebrauch von Tabs (wenn man von der globalen Navigation absieht).

 

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

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen