|
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: Benutzen 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
benutzen, 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
benutzt 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.
|
