Rechtsbündige Navigationen behindern das Überfliegen

Die Nutzer überfliegen Listen, indem ihre Augen schnell am linken Rand herunter scannen. Rechtsbündig angeordnete Menüpunkte machen das Überfliegen schwieriger.

 

by Jakob Nielsen (deutsche Übersetzung) - 28.04.2008

 

Aus Eyetracking-Studien wissen wir, dass die Nutzer dazu neigen, bei Listen ihre Augen schnell an der linken Seite herunter wandern zu lassen. Den Rest eines Listenpunktes lesen sie nur dann, wenn irgendetwas in den ein, zwei am weitesten links stehenden Wörtern den Blick auf sich zieht.

Daraus ergeben sich klare Richtlinien für das Menü-Design, zumindest für vertikal angeordnete Menüs:

• Ordnen Sie das Menü linksbündig an, damit die Augen der Nutzer sich in gerader Linie nach unten bewegen können und nicht in jeder Zeile neu nach dem Zeilenanfang suchen müssen.
• Stellen Sie in jedem Listenpunkt die ein, zwei Wörter mit dem höchsten Informationsgehalt an den Anfang.
• Lassen Sie nicht mehrere Listenpunkte mit den gleichen Wörtern anfangen, weil sie dann schwerer zu überfliegen sind.

Ein Navigationsmenü am rechten Rand auszurichten, mag cool aussehen, aber der dadurch entstehende linke Flatterrand reduziert ernsthaft die Geschwindigkeit, mit der die Nutzer das Menü überfliegen und die gewünschten Optionen auswählen.

(Natürlich gilt die Richtlinie der Linksbündigkeit nur für Sprachen, die man von links nach rechts liest. Bei Sprachen, die man in Gegenrichtung liest, gilt die Richtlinie spiegelverkehrt: Sie sollten die Menüs rechtsbündig ausrichten. In jedem Fall geht es darum, den Nutzern das Überfliegen von dem Punkt aus zu erleichtern, an dem sie zu lesen beginnen.)

Schauen Sie auf die folgenden Screenshots. Ich habe hier Websites von Universitäten als Beispiele ausgewählt, aber die Krankheit mit den rechtsbündigen Menüs tritt auch in geschäftlichen Websites auf.

 

Navigationsmenüs von drei Universitäts-Websites. Von links nach rechts:
Indiana University, University of Michigan and Vanderbilt University.

Beachten Sie, wie schwer es ist, die Menüs zu überfliegen. Paradoxerweise bietet Vanderbilt uns im selben Screenshot ein Beispiel für die korrekte Anordnung: Es ist viel leichter, das obere Menü zu überfliegen als das untere.

Um die Sache noch zu komplizieren, verstossen zwei der drei Screenshots ausserdem gegen die Richtlinie, keine TEXTE IN VERSALIEN (GROSSBUCHSTABEN) zu verwenden, was die Lesbarkeit um 10% verschlechtert. Wenn Sie die gemischte Schreibweise verwenden, entsteht durch die Mittel- und Oberlängen der Buchstaben eine differenzierte Oberkante der Wörter, während Grossbuchstaben kastenförmige Wort-Umrisse entstehen lassen. Die Nutzer erkennen die Wörter besser, wenn Sie die traditionellen Umrisse der Wörter verwenden. (Vergleichen Sie zum Beispiel das Wort "Employment" im linken Menü mit dem Wort "EMPLOYMENT" im rechten Menü.)

Ausserdem ist der Kontrast zwischen Text und Hintergrundfarbe im mittleren Menü zu gering. Da es gleich drei Lesbarkeits-Richtlinien verletzt, ist das mittlere Menü besonders schwer zu lesen, vor allem für Nutzer mit schwacher Sehkraft. In dieser Reihe gewinnt also die Universität Michigan den Preis für das schlechteste Menüdesign. (Es gibt dort übrigens ein gutes Programm für Mensch-Computer-Interaktion, aber anscheinend haben es die Website-Designer versäumt, ihre Experten vor Ort zu konsultieren.)

Die Ausrichtung von Menüs ist zugegebenermassen eher ein kleines Thema und keine Redesign-Priorität mit Spitzenrendite. Aber es ist leicht, es richtig zu machen - richten Sie Menüs einfach nicht rechtsbündig aus.

Das aktualisierte Menü

8 Stunden nachdem ich diesen Artikel veröffentlicht hatte, bekam ich eine E-Mail vom Design-Team der Universität Michigan, dass sie ihr Menü überarbeitet hätten. Schnelle Arbeit.

Das alte (links) und das neue Navigationsmenü (rechts) der Universität Michigan

Normalerweise aktualisiere ich meine Artikel nicht, nur weil jemand eine von mir kritisierte Website überarbeitet hat. Schliesslich zitiere ich jede einzelne Website nur als Beispiel für ein dahinter liegendes Prinzip, und die Kritik an einem bestimmten Designtyp bleibt gültig, egal ob der Fehler auf einer einzelnen Website noch da ist oder nicht. Doch es ist unüblich, wenn ein Usability-Problem noch am selben Tag ausgeräumt wird, und es erlaubt mir, Ihnen einen Screenshot vom verbesserten Menü zu zeigen. Ich denke, Sie stimmen mir zu, dass es viel leichter zu lesen ist als das frühere.

 

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