Wer hat Angst vorm sichtbaren Bereich?




Eines meiner Lieblingsthemen bei der Optimierung von Landingpages und Co ist der Viewport (sichtbarer Bereich). Kaum eine Optimierung ist einfacher als diese. Man verschiebt einfach die wichtigsten Klickziele, Aussagen und anderen conversion relevanten Elemente „above the fold“ und schon scheint auch die Conversion Rate mit nach oben zu wandern.

Klingt einfach, aber geht tatsächlich so einfach! Über das Scroll-Verhalten von Nutzern urteilt der Usability Papst Jakob Nielsen sehr hart:

„Benutzer sind faul und dumm. Diesen Schluss können wir daraus ziehen, dass sie noch nicht einmal das Mausrad zum Scrollen bemühen.“ (Quelle: Nielsen/Loranger, Web Usability, Seite 43). Dieses Urteil hat er später revidiert.

Wo der sichtbare Bereich tatsächlich liegt und wie man die Nutzer zum Schollen bekommt, ist dabei eigentlich sehr einfach 😉

Warum ist der sichtbare Bereich so wichtig?

Eine Studie von Jakob Nielsen aus dem Jahr 2010 zeigt, wie lange Nutzer im sichtbaren Bereich einer Website verweilen. In der Summe verweilen die Nutzer 80% ihrer Zeit above the fold. Daraus kann man ableiten, dass man sich bei der Konzeption von Websites oder Landinpages auch darauf konzentrieren sollte, wichtige Informationen hier abzubilden.

 Aufenthaltsdauer auf Webseiten von oben nach unten

Bildquelle: www.useit.com – Srolling and Attention

 

Im Falle von Landingpages ist der sichtbare Bereich essentiell. Besucher, die über ein Werbemittel auf die Landingpage kommen, sind auf der Suche nach Gründen, dort zu bleiben. Dies geschieht in der Regel in Bruchteilen von Sekunden. Wenn die wichtigsten, relevantesten und überzeugendsten Informationen nicht im sichtbaren Bereich abgebildet sind, kann dies schnell zum Verlassen der Landingpage führen. Wie die Bounce Rate von der Bildschirmauflösung abhängt und wie man dies im Webanalyse Tool berechnen habe ich auch schon als Blogartikel verfasst → Bounce Rate nach Bildschirmauflösung.

 

Wo liegt der sichtbare Bereich?

Diese Frage lässt sich nicht pauschal beantworten. Der Viewport hängt nicht allein von der Bildschirm-Diagonale des Nutzers ab. Viele Nutzer stellen ihren 24″ LCD auf 1.024×768 ein, da es sich so „schön lesen lässt“. Zum anderen gibt es dutzende Browser-Erweiterungen und Plugins, die sich noch ein gehörige Portion Pixel einverleiben. Wenn mich jetzt aber jemand doch festnageln will, so sei gesagt: Eine Breite von 1.024 Pixel sind kein Problem, bei der Höhe sollte man bei der Optimierung auf 600-768 Pixel optimieren. Wo der Bereich allerdings genau endet, sollte vor einer Optimierung oder Konzeption analysiert werden.

Variante 1 – Webanalyse

Für den ersten Eindruck reicht ein Blick in das Webanalyse Tool, das einem die häufigsten Bildschirmauflösungen seiner Besucher auflistet (Anleitung hier im Blog → Wichtige Bildschirmauflösungen).

Variante 2 – Mouse Tracking

Eine zweite und viele genauere Möglichkeit, bieten Mouse Tracking Tools.

Bei Clicktale kann man sich zum Beispiel wunderbar einen Report über die „Scroll Reach“ ausgeben lassen. Hier sieht man ganz genau, wo der sichtbare Bereich für einen Großteil meiner Besucher endet. Und man sieht auch, wie viel Prozent der Besucher bis zu einem bestimmten Bereich runter scrollen. Aus diesem Report erhält man zumindest ein paar echte Zahlen und muss nicht mehr schätzen.

Scroll Reach bei Clicktale

 

Sch*** auf den sichtbaren Bereich!

Wo der sichtbare Bereich endet, muss nicht zwangsläufig auch das Interesse der Nutzer enden! Es gibt noch ein Leben „unter den 600 Pixeln“. Die Art und Weise wie man mit dem sichtbaren Bereich umgeht, entscheidet über Scrollen oder Nicht-Scrollen. Da dieser Aspekt aber so unwichtig scheint, wird er häufig bei der Konzeption von Shops, Websites oder Landingpages vergessen.

Hier ein paar schöne Beispiele, wie man die Nutzer doch zum Scrollen bekommt.

Life Below 600px

→ http://iampaddy.com/lifebelow600/

Mademyday

→ http://www.mademyday.de/niemand-scrollt-auf-webseiten.html

 

Kann man das auch für E-Commerce adaptieren? Jup!

Ein Hinweis der Kollegen aus dem explido Conversion Team brachte mich auf die Website von Tchibo. Zugegebenermaßen tummel ich mich hier nicht so häufig rum, aber dieses Mal gab es wirklich etwas zu gucken (und das natürlich nur aus Conversion Sicht 😉 )

Der nachfolgende Screenshot zeigt die Startseite von thichbo bei einer Auflösung von 1.280 x 800 Pixel.

Man erkennt neben dem schönen Bild im Content-Bereich sofort, dass dieses so gut abgeschnitten dargestellt wird, dass man automatisch anfängt zu scrollen.

Sobald der Nutzer das Scrollrad benutzt, erscheint im rechten Seitenbereich eine Vorschauleiste mit der kompletten Website und der aktuellen Position.

Die rechte Vorschau-Leiste kann auch als Navigation verwendet werden. Mit der Maus kann man den eingerahmten Bereich (die aktuelle Position) verschieben und so die komplette Seite im Schnelldurchlauf überfliegen. Diese Art der Navigation lädt auf jeden Fall zum Stöbern ein und man schafft es, den Nutzer mit einer sehr sehr langen Seite nicht zu verprellen.

Einfach mal auf http://www.tchibo.de vorbeisurfen und ausprobieren – ein tolles Navigationskonzept, zeigt es doch, dass der richtige Umgang mit dem sichtbaren Bereich den Nutzer zum Stöbern bringt. Und dies wurde ausgelöst durch ein Bild, das nicht komplett angezeigt wurde!

UPDATE

Eine Anmerkung zur Optimierung dieses Navigationskonzepts:

Einen Button oder Textlich „nach oben“ gibt es schon (Danke an Anja via Blog-Kommentar). Dieser Hinweis fällt aus meiner Sicht leider nicht so richtig auf. D.h. Nutzer, die nach oben zurück wollen, müssen das Maus-Rad zum Glühen bringen. Ich bezweifle, dass viele Nutzer über die Vorschau-Leiste im rechten Bereich navigieren.

Was haben wir daraus gelernt?

Der sichtbare Bereich ist nach wie vor wichtig. Aber es gibt eben nicht mehr diesen „Einen“ sichtbaren Bereich. Mouse Tracking Tools können uns auf einfache Art und Weise zeigen, wo dieser Bereich bei meinen Besuchern genau liegt. Tests mit unterschiedlichen Elementen im sichtbaren Bereich lohnen auf jeden Fall immer und sorgen auch jedes Mal wieder für große Überraschung.

Den Content von Landingpages sollte man auf jeden Fall priorisieren – und anschließend neu verteilen. A/B Tests haben uns schon öfter gezeigt, wie sich der Umsatz verändern kann, wenn man die richtigen Kategorien in den sichtbaren Bereich verschiebt. Wenn Sie den Nutzer zum Scrollen bringen möchten, dann sollten Bild nicht exakt VOR dem sichtbaren Bereich enden, sondern mittendrin. Dies weckt die Neugier, wie es wohl weitergeht!

Viel Spaß beim Optimieren!

PS: Die aktuelle Themenwelt von tchibo hat uns diesen Text sehr dezent versüßt 😉








About the author
Gabriel Beck
Gabriel Beck ist Mitglied der Geschäftsleitung beim Conversion Spezialist Web Arts AG. Kontakt zu: Google+ Facebook Fanpage




10 Kommentare für: Wer hat Angst vorm sichtbaren Bereich?

Anja

Ein „nach oben“ existiert 5x auf der Startseite. 🙂

    conversiondoktor

    Danke für den Hinweis – habe den Artikel an der entsprechenden Stelle aktualisiert. Dennoch finde ich, dass das nicht auffällt.

    Gruß
    Gabriel

Monika T-S

Herr Nielsen hat seine Aussage über das Scrollverhalten von Usern selbst revidiert:

nachzulesen => http://www.useit.com/alertbox/scrolling-attention.html

lg

Conversion-Optimierung: Nutzer scrollen nicht (aber sie lassen sich austricksen) » t3n News

[…] Wer hat Angst vorm sichtbaren Bereich? – conversiondoktor.de […]

Andreas

Das Scrollverhalten ist super, jedoch beschränkt es sich bei „Tchibo“ nur auf die „Themenwelt“ – was eigentlich schade ist, denn die anderen Bereiche der Seite hätten es auch bitter nötig…

Lg,
Andreas

André Morys

Hi Gabriel, ich habe eine Beispiel, bei dem wir eine Seite „verlängert“ und die CR um +800% gesteigert haben. Natürlich war ie CTA above the fold. Zu stark „komprimierte“ Seiten wegen einer „alten“ Fold-Denke sind auch ein Conversion-Killer – genau so wie nicht sichtbare CTAs. Die beiden Aspekte sind also unabhängig voneinander. 🙂 Aloha und Danke für den guten Post.

Thorsten Wilhelm

Hallo Gabriel, hast Du Erfahrungen und vielleicht auch Daten hinsichtlich den Determinanten des Scrollverhaltens in Abhängigkeit:
* vom Produkt (z.B. Mode vs. Finanzdienstleistungen) und
* Thema bzw. Zielsetzung der Landingpage (z.B. Anfrage stellen vs. etwas anfordern)?

    conversiondoktor

    Hi Thorsten, danke für Deine Nachfrage! Zur Antwort: Wir haben verschiedene Tests mit Abverkäufen und auch Leads durchgeführt. Die Erkenntnis war jeweils gleich: Wichtige Klickziele, die abgestimmt auf die Traffic-Quelle im sichtbaren Bereich abgebildet wurden, haben zu mehr Conversions geführt, als dies die gleichen Klickziele im nicht-sichtbaren Bereich erreicht haben.

    Die Determinanten des Scrollverhaltens haben wir hierbei auf das Thema „Relevanz“ in Bezug auf Suchbegriffe beschränkt. Die Relevanz, die sich wiederum signifikant auf die Conversion Rate ausgewirkt hat, war dabei unabhängig von Produkt und auch von der Zielsetzung (Anfrage und Kauf).

    Ich hoffe, Dir mit der Antwort weitergehoflen zu haben?

    Viele Grüße aus der DMEXCO Messe Stadt Köln

Markus

Die zusätzliche Navigationshilfe ist eine gute Idee. Ich bezweifle aber, dass sich diese Navigationshilfe auf normalen Einstiegsseiten von ecommerce Seiten bewähren wird.

Tschibos Welten sind den Nutzer bekannt und die Aufmachung mit der unendlich langen „Prospekt-Seite“ durchaus gewohnt. Nehme ich einen normalen Shop so würde ich behaupten, dass die User nicht sonderlich motiviert sind ewig zu scrollen. Meine Erwartung als User ist doch in der Regel, dass das Wichtigste vorn & prominent steht – also das Risiko etwas zu verpassen nicht sonderlich hoch ist.

Außerdem kann ich mir vorstellen, dass der ein oder andere User eher abgeschreckt wird, wenn er sieht wie lang die Seite noch ist. Ohne das Wissen, dass es da wirklich gute Inhalte/Angebote gibt, wird sich die Motivation in Grenzen halten.

Der „nach oben“ Link ist meiner Meinung nach viel zu versteckt. Trotz des Kommentars hier habe ich ihn erst nach einigem Suche gefunden….

Thorsten Wilhelm

Danke für die tollen Kommentare und Deine Antworten auf meine Fragen.





Leave a comment





 

Kontakt

© Conversion und Landing Page Optimierung Blog 2016 - Conversion und Landingpage Optimierung Blog