Scrollen und Scrollbalken

by Jakob Nielsen (deutsche Übersetzung) – 11.07.2005

Es gibt fünf grundsätzlich Usability-Richtlinien fürs Scrollen und für Scrollbalken:

Bieten Sie einen Scrollbalken an, wenn man wegen des Inhalts scrollen muss. Verlassen Sie sich nicht auf Auto-Scrolling, da die Nutzer das eventuell nicht bemerken.
Blenden Sie Scrollbalken aus, falls der ganze Inhalt aufs Mal sichtbar ist. Wenn die Nutzer einen Scrollbalken sehen, vermuten sie noch mehr Informationen und wenn dem dann nicht so ist, sind sie frustriert.
Halten Sie sich an GUI-Standards und verwenden Sie Scrollbalken, die auch so aussehen wie Scrollbalken.
Vermeiden Sie horizontales Scrollen auf Webseiten, aber auch in anderen Software-Produkten sollten Sie das horizontale Scrollen möglichst minimieren.
Platzieren Sie sämtliche wichtigen Informationen oberhalb auf der Seite. Die Nutzer scrollen meist nicht, bis sie sich entscheiden, ob sie gerade auf dieser Seite bleiben wollen.

Obwohl horizontales Srollen bereits 2002 zu den zehn häufigsten Webdesign-Fehlern des Jahres zählte, treffe ich dieses Übel heute immer noch an. Es lohnt sich also, erneut davor zu warnen.

Häufige Probleme

Aus Nutzertests wissen wir, dass die Leute horizontales Scrollen hassen und sich immer negativ äussern, wenn sie das antreffen. Die Kundenzufriedenheit alleine ist sicherlich schon Grund genug, auf vertikales Scrollen zu verzichten. Doch es gibt noch zwei weitere Gründe:

Auf dem Web erwarten die Anwender, dass sie vertikal scrollen müssen. Wie mit allen Standard-Designelementen, so ist es auch hier besser, die Erwartungen der Nutzer zu erfüllen als davon abzuweichen.
Wenn eine Seite sowohl vertikales wie auch horizontales Scrollen erfordert, so müssen die Nutzer ihren Ausschnitt in zwei Dimensionen bewegen, was den Raum als Ganzes schwerer fassbar macht. Für Leute mit einer Schwäche in räumlichem Vorstellungsvermögen im Speziellen ist schwierig, die Bewegungen in einer teilweise versteckten Ebene auf zwei Achsen zu koordinieren. (In räumlichem Denken und Visualisierungstests schneiden Durchschnittsnutzer typischerweise schlechter ab als Designer.) Im Gegensatz dazu ist eindimensionales Scrollen eine simple Möglichkeit, um sich durch Inhalte zu bewegen, ohne gross nachdenken zu müssen: Man geht einfach immer schön weiter runter.

In jedem Fall aber sollte die zentrale Information im oberen Bereich ohne Scrollen zu sehen sein, da Scrollen Probleme bei der Accessibility verursachen kann.

Für Nutzer mit motorischen Problemen kann das Scrollen schwierig sein.
Nutzer mit einer Leseschwäche bekunden Mühe, eine Textstelle wieder zu finden, nachdem sich der Text bewegt hat.
Ältere Leute haben oft Schwierigkeiten, den richtigen Ort in Scrollmenüs oder andern kleinen Scrollobjekten zu treffen.

Auch wenn die meisten Kinder keine Accessibility-Probleme im traditionellen Sinn haben, so senkt Scrollen doch häufig die Usability für Kinder, da diese in der Regel unmittelbarer als Erwachsene sind und aufgrund dessen handeln, was sie sehen. Für Teenager ist Scrollen weniger problematisch als für Kinder, doch auch sie ziehen Websites mit weniger Scrollaufwand vor.

Die besten Scrollbalken halten sich ans Standard GUI Design

Die wichtigste Guideline für das Erscheinungsbild eines Scrollbalkens ist einfach: Nutzen Sie den Standard-Scrollbalken der Plattform – das ist das, was die Anwender erwarten. Wenn Sie für Windows designen, verwenden Sie das entsprechende Design von Microsoft. Wenn Sie für Mac designen, dann nehmen Sie das Design von Apple. Wenn Sie Flash nutzen, bedienen Sie sich der standardmässig vorhandenen GUI-Elemente.

Mit speziell entworfenen Scrollbalken wird man sehr wahrscheinlich Usability-Probleme hervorrufen. In unseren Nutzertests mit Flash-Usability verwendeten die Leute die selbst gemachten Scrolldesigns meist gar nicht. Im Folgenden drei Beispiele:

Scrollbalken, die nicht funktionierten

Das Beispiel ganz links zeigt ein Tool zum erstellen eines Avatars. Wie sich herausstellte, konnten einige Nutzer ihren virtuellen Charakter nicht konfigurieren, weil sie nicht bemerkten, dass die verschiedenen Optionen für Kleidung, Haare, Farbe usw. durch Klicken auf die kleinen Dreiecke links und rechts der Bilder geändert werden.

Beim Produktkonfigurator in der Mitte übersahen einige Nutzer die Scrollbalken aufgrund ihrer rechwinkligen Form, die sich optisch stark an die Farbquadrate anlehnen. Die Lösungen, die die Anwender wählten, beschränkten sich daher auf die paar Farben, die sichtbar waren. Damit waren die Produkte auch nicht so ansprechend, wie sie es mit der vollen Farbauswahl gewesen wären.

In der interaktiven Karte rechts bemerkten die meisten Nutzer den Scrollbalken nicht, weil er aussah wie ein Nord-Süd Richtungsanzeiger auf der Karte. Weitere Probleme sind hier z.B. auch: Der Scrollbalken lag ausserhalb des Bereichs, für den er eigentlich dient; der obere und der untere Knopf sehen aus wie Kompassnadeln; zudem fehlt im Scrollbar ein Schieber.

Vergleichen Sie die missratenen Scrollbalken mit den folgenden funktionierenden Beispielen, die ebenfalls handgemacht sind:

Scrollbalken, die funktionierten

In diesen drei Beispielen für gutes Design bemerkten die Nutzer die Scrollbars jeweils sofort und nutzten sie auch ohne Probleme. Durch einen Vergleich dieser paar Beispiele hier sowie einiger anderer Designs, die wir bereits getestet haben, bestimmten wir vier Anforderungen an einen guten Scrollbalken:

Verwenden Sie einen eigentlichen Balken in Form einer rechteckigen Rinne, möglichst in einer Farbe, die mit dem Hintergrund kontrastiert.
Verwenden Sie am jeweils am oberen und unteren Ende Pfeile.
Schaffen Sie auch einen Schieber (Slider) (manchmal auch «thumb» oder «elevator» genannt), möglichst in einer Farbe, die mit dem Balken selber kontrastiert. Die Position des Schiebers sollte die relative Position des gerade sichtbaren Bereichs innerhalb des Gesamtdokuments anzeigen. So können die Nutzer erkennen, wie viel Inhalt sie insgesamt durchzuscrollen haben.
Erlauben Sie den Nutzern zu scrollen durch:
- Klicken auf den Balken
- Klicken auf die Pfeile
- Bewegen des Schiebers.

Scrollbalken gut zu gestalten ist eigentlich ganz leicht. Es ist sogar so, dass der Balken umso besser ist, je weniger Arbeit man darin investiert. Die Usability ist beinahe immer höher, wenn man den im System vorhandenen Scrollbalken nutzt und keinen eigenen entwirft.

Wenn Sie trotzdem eigene Scrollbalken entwerfen müssen, dann halten Sie sich so nahe wie möglich an die Erwartungen der Anwender. Denn: Wenn Ihre Scrollbalken nicht wie solche aussehen, werden die Anwender sie möglicherweise nicht erkennen. Wenn Ihre Scrollbalken sich nicht wie solche verhalten, werden die Anwender Mühe haben, sich den gewünschten Inhalt anzeigen zu lassen. In beiden Fällen sind Ihre Kunden an genau die Informationen gebunden, die sie ohne Scrollen wahrnehmen – und es kann sehr leicht passieren, dass sie sich nie das ganze Angebot durchlesen können.

Zweifellos erreicht man durch das Einhalten der Usability-Richtlinien für Scrollbalken noch mehr bei vielen anderen Richtlinien.