Scrollen und Aufmerksamkeit

Die Webnutzer verbringen 80% ihrer Zeit damit, sich Informationen oberhalb der Bildschirmkante anzusehen. Die Nutzer scrollen zwar auch, aber sie widmen nur 20% ihrer Aufmerksamkeit den Inhalten unterhalb der Kante.

 

by Jakob Nielsen (deutsche Übersetzung) - 22.03.2010

 

Beim Webdesign gibt es viele Unklarheiten über das Konzept der Bildschirmkante (page fold) und die Notwendigkeit, die entscheidenden Informationen stets innerhalb des, auf den ersten Blick, sichtbaren Bereichs einer Seite anzuordnen. (In der Tat ist das die Definition: "oberhalb der Bildschirmkante" bedeutet einfach: "sichtbar, ohne dass dafür eine weitere Aktion nötig ist".)

In den Anfangsjahren des Webs haben die Nutzer auf Webseiten häufig überhaupt nicht gescrollt. Sie haben sich einfach die sichtbaren Informationen angesehen und darauf basierend entschieden, ob sie bleiben oder gehen wollten. Demnach sind Websites in Usability-Studien zu der Zeit (1994-1996) oft durchgefallen wenn sie wichtige Informationen unterhalb der Kante platzierten, weil die meisten Nutzer diese nicht gesehen haben.

Diese Zurückhaltung beim Scrollen machte zu der Zeit Sinn, weil die Leute es gewohnt waren, dass der Computer ihnen alle Optionen anzeigte. Dialogfenster, CD-ROM-Multimedia-Shows und HyperCard-Stapel liefen alle auf diese Weise und verlangten von den Nutzern keinerlei Scrollen. (Obwohl die Nutzer manchmal auf längere Textblöcke trafen, mussten sie nicht scrollen, um die Befehle und Optionen zu sehen, und konnten so anhand der sichtbaren Informationen alle Entscheidungen treffen.)

Doch schon 1997 habe ich die Richtlinie, dass Seiten mit Scrollingfunktion zu vermeiden seien, zurückgezogen, weil sich die Nutzer an das Scrollen im Web gewöhnt hatten. Dies war einer der seltenen Fälle, in denen sich Usability-Richtlinien schnell verändert haben. Normalerweise sind Usability-Ergebnisse über viele Jahre stabil: heute gelten immer noch 80% der Web-Usability-Richtlinien aus den 1990er Jahren.

Heutzutage scrollen die Nutzer. Dennoch sollten Sie die Kante nicht völlig ausser Acht lassen und aus zwei Gründen keine endlosen Seiten entwerfen:

• Lange Seiten bleiben weiterhin problematisch, weil die Aufmerksamkeitsspanne der Nutzer begrenzt ist. Die Leute bevorzugen Websites, die auf den Punkt kommen und es ihnen ermöglichen, ihre Dinge schnell zu erledigen. Abgesehen von dem grundlegenden Widerstreben, zusätzliche Wörter zu lesen, bedeutet Scrollen auch einfach einen Extra-Arbeitsaufwand.
• Der Platz oberhalb der Kante ist wertvoller als der darunter, wenn es darum geht, die Aufmerksamkeit der Nutzer auf sich zu ziehen und zu halten.

Also ja: Sie können Informationen unterhalb der Kante platzieren, anstatt sich auf häppchenförmige Seiten zu beschränken.

Tatsächlich ist es zum Beispiel bei einem langen Artikel besser, ihn als eine Scroll-Arbeitsfläche zu präsentieren, anstatt ihn auf mehrere Seiten zu verteilen. Scrollen ist besser als erneute Seitenabrufe, weil es für die Nutzer einfacher ist, entlang der Seite einfach immer weiter nach unten zu scrollen, statt entscheiden zu müssen, ob sie sich zur nächsten Seite des zerstückelten Artikels weiterklicken sollen. (Alles unter der Voraussetzung, dass sich das Design an den Richtlinien für Scroll-Leisten und dergleichen orientiert.)

Die Tatsache, dass die Nutzer scrollen, befreit Sie jedoch nicht davon, Prioritäten zu setzen und sicher zu stellen, dass alles wirklich wichtige oberhalb der Kante bleibt.

Die Theorie des "Information Foraging" besagt, dass die Leute anhand der Informationsfährte der aktuellen Inhalte entscheiden, ob sie einem Pfad weiter folgen sollen (einschliesslich eines Scrollpfades entlang einer Seite). Mit anderen Worten, die Nutzer werden nur dann in den Bereich unterhalb der Kante scrollen, wenn die Informationen weiter oben sie annehmen lassen, dass der Rest der Seite für sie von Nutzen sein wird.

Eyetracking-Datenmaterial

Letzten Monat haben wir eine umfassende Eyetracking-Studie zum Nutzerverhalten auf einer grossen Vielzahl von Websites durchgeführt. Um zu untersuchen, ob die Bildschirmkante nach wie vor relevant ist, habe ich Teile der Studie mit insgesamt 57.453 Fixierungen (Momente, in denen die Nutzer etwas auf der Seite ansehen, normalerweise für weniger als eine halbe Sekunde) analysiert.

Unsere Studie beinhaltete auch eine Komponente, die es den Nutzern erlaubte, jede Website zu verwenden, die sie wollten - hier hatten wir unser breit gefächertes Seminar "Grundlegende Richtlinien für Web-Usability" im Kopf. Diese ungezwungenen Aufgaben sind die Quelle für das Datenmaterial, das ich hier analysiere, weil sie die normalen Websites getestet haben, die die Leute von sich aus nutzen, im Gegensatz zu Websites, die wir aufgrund ihrer Designelemente ausgesucht hatten.

Die Aufmerksamkeit konzentriert sich auf den oberen Bereich

Die folgende Grafik zeigt die Verteilung der Fixierungen der Nutzer entlang von 100 Pixel breiten Streifen. Die Balken repräsentieren die gesamte Blickdauer und nicht die Anzahl der Fixierungen. (Oder mit anderen Worten, zwei Fixierungen von 200 ms zählen genauso viel wie eine Fixierung von 400 ms.)

Obwohl die Nutzer 5% ihrer Gesamtzeit jenseits der 2.000-Pixel-Markierung verbringen, neigen sie dazu, Informationen, die so weit unten angesiedelt sind, eher flüchtig zu überfliegen: Einige Seiten sind sehr lang (oft über 4.000 Pixel in meiner Stichprobe), und somit sind diese 5% Aufmerksamkeit der Nutzer sehr dünn verteilt.

In unsere Studie war die Betrachtungszeit der Nutzer wie folgt verteilt:

• oberhalb der Kante: 80,3%
• unterhalb der Kante: 19,7%

Wir haben einen Eyetracker mit einer Auflösung von 1.024 x 768 Pixel verwendet. Heutzutage haben viele Nutzer grössere Bildschirme, und wir haben schon viele Usability-Studien - keine Eyetracking-Studien - mit grösseren Auflösungen durchgeführt. Auch wenn die Verwendung eines grösseren Monitors an meinen Schlussfolgerungen nichts ändern würde, würde sie doch den Anteil der Aufmerksamkeit, die der Nutzer dem Bereich oberhalb der Kante widmet, etwas erhöhen, ganz einfach weil, in dem zunächst sichtbaren Bereich mehr Informationen zu finden wären.

Das Scroll-Verhalten

Manchmal lesen die Nutzer tatsächlich eine ganze Seite. Es kommt vor. Selten.

Typischerweise sehen wir eher eine der beiden Verhaltensweisen, die in den folgenden Blickverläufen dargestellt wird:

Blickverlaufsprotokolle, die anzeigen, wo drei Nutzer hingeblickt haben, während sie Seiten für drei unterschiedliche Aufgaben aufriefen (ein Testteilnehmer pro Seite). Jeder blaue Punkt repräsentiert eine Fixierung, wobei grössere Punkte eine längere Blickdauer anzeigen.

Links sehen wir einen Nutzer, der sehr weit hinunterscrollte und plötzlich auf etwas Interessantes stiess. Dieser Blickverlauf zeigt uns viele Fixierungen, die weit unterhalb der Kante gehen. Dieses Muster sieht man häufig bei gut gestalteten FAQ-Seiten; die besten FAQ-Seiten allerdings ordnen die wirklich am häufigsten gestellten Fragen ganz oben an (damit viele Nutzer nicht viel scrollen müssen).

Der linke Blickverlauf verdeutlicht noch einen weiteren Punkt: Das letzte Element einer Liste zieht oft besondere Aufmerksamkeit auf sich. Die ersten Elemente sind definitiv die wichtigsten, aber das letzte bekommt wieder mehr Beachtung als das vorletzte. (Das ist auch der Grund, warum das Balkendiagramm mehr Aufmerksamkeit für den Pixelbereich 701-800 anzeigt als für den Bereich 601-700: der untere Teil unseres Testmonitors fiel in den ersteren Bereich.) Die wichtige Rolle, die das Ende einer Liste spielt, wird durch den Rezenzeffekt noch verstärkt, welcher besagt, dass das Letzte, was eine Person sieht, ihr besonders gut im Gedächtnis bleibt.

Die anderen beiden Blickverläufe zeigen ein typischeres Scroll-Verhalten: intensives Betrachten des Seitenanfangs, mittelmässiges Betrachten der Mitte, und ziemlich oberflächliches Betrachten des Seitenendes. (Ich habe Beispiele ausgesucht, bei denen die Nutzer mehr oder weniger bis ganz nach unten gescrollt haben - oft betrachten sie das Seitenende gar nicht, weil sie gar nicht erst soweit herunterscrollen.)

Es ist fast so, als ob die Nutzer mit einer bestimmten Menge Sprit in ihrem Tank auf einer Seite landen. Während sie die Seite "hinabfahren", verbrauchen sie Treibstoff, und früher oder später geht er ihnen aus. Die Menge an Sprit variiert und hängt ganz von der inneren Motivation und dem Interesse des Nutzers an dem spezifischen Thema der Seite ab. Auch kann das Benzin ganz verdampfen oder sich noch mal auffüllen, wenn sich Inhalte weiter unten auf der Seite als relevanter oder irrelevanter herausstellen, als der Nutzer erwartet hatte.

In jedem Fall versiegt die Aufmerksamkeit des Nutzers nach und nach, und je weiter nach unten der Seitennutzer kommt, desto weniger Zeit widmet er in der Regel jeder zusätzlichen Informationseinheit.

Der mittlere Blickverlauf zeigt eine Kategorienseite mit 50 Sofas:

• Die ersten 2 Reihen bekommen ca. 5-10 Fixierungen pro Sofa.
• Die nächsten 4 Reihen bekommen ca. 2-4 Fixierungen pro Sofa.
• Die nächsten 8 Reihen bekommen typischerweise 1 Fixierung pro Sofa.
• Die letzten 3 Reihen bekommen 2 Fixierungen für ein Sofa und keine Fixierungen für die übrigen 7 Sofas.

Dies ist lediglich ein grobes Muster, und die Nutzer werden je nach Inhalt auch davon abweichen. So bekommen zum Beispiel der Cameon Loveseat und der Custom Hugo Loveseat beide 4 Fixierungen obwohl sie sich 2.750 Pixel weiter unten auf der Seite befinden. Vermutlich fand der Nutzer diese beiden Sofas besonders ansprechend.

Design-Implikationen

Die Implikationen sind eindeutig: Das Material, das für die Ziele des Nutzers oder für Ihre Unternehmensziele am wichtigsten ist, sollte sich oberhalb der Bildschirmkante befinden. Die Nutzer schauen sich zwar auch unterhalb der Kante um, aber nicht annähernd so viel wie darüber.

Die Leute werden sich die Inhalte auch sehr weit unten auf einer Seite anschauen, wenn (a) das Layout zum Überfliegen animiert, und (b) die zuallererst sichtbaren Informationen sie vermuten lassen, dass sich das Weiterscrollen lohnt.

Und nicht zuletzt: die wichtigsten Dinge ordnen Sie zwar ganz oben an, aber vergessen Sie nicht, einen feinen Leckerbissen ganz unten zu platzieren.

 

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