- Conversion Killer Viewport › Webstandard-Blog

Conversion Killer Viewport

Usability - 23 Jun, 2010

Twittern
Kommentare (8)

"Ich sehe was, was du nicht siehst"- so scheint die Botschaft auf vielen Website, Shops und Landing Pages zu lauten. Denn häufig werden wichtige Botschaften, Klickaufforderungen und weiterführende Links irgendwo im nicht sichtbaren Bereich des Users versteckt. Dabei kann mit einfachen Werkzeugen darauf geachtet werden, wichtige Elemente im Viewport (Darstellungsfeld) des Users zu positionieren. Bei der Conversion Optimierung ist der Viewport bzw. häufig gleichzusetzen mit der Bildschirmauflösung eine der Basisfaktoren zur Optimierung von Websites, Online Shops und Landing Pages. Warum der Viewport bei der Steigerung der Conversion Optimierung so immens wichtig ist, soll euch der folgende Beitrag verdeutlichen.

Warum ist der sichtbare Bereich so wichtig?

Der Usability Guru Jakob Nielsen hat in seinem Artikel Scrolling and Attention eindrucksvoll aufgezeigt, dass die User 80% ihrer Zeit im sichtbaren Bereich verbringen.

Aufenthaltsdauer auf Webseiten von oben nach unten
Bildquelle: www.useit.com - Srolling and Attention

Nun könnte man meinen, dass diese Erkenntnis nichts Neues ist. Aber in einer zweiten Studie hat Jakob Nielsen herausgefunden, in welchem horizontalen Bereich sich der Blick des Users die meiste Zeit "aufhält".

Aufenthaltsdauer auf Webseiten von links nach rechts
Bildquelle: www.useit.com - Srolling and Attention

Das Ergebnis: Die User schauen mit 69% Ihrer Zeit mehr in die linke Hälfte des Bildschirms.

Erkenntnisse zur Gestaltung von Websites und Landing Pages

So banal die Botschaft auch klingen mag, eigentlich reicht es, die Elemente einer Website an der richtigen Stelle zu positionieren ;-) Die Absprungrate auf Websites, Shops und Landing Pages wird häufig davon beeinflusst, ob der User "Interessantes" im sichtbaren Bereich findet. Folglich ist die Conversion Rate bei Seiten, die wichtige Elemente im nicht sichtbaren Bereich "verstecken" deutlich geringer als bei Seiten, die auf die richtige Auflösung optimiert werden. Ich möchte etwas weiter ausholen: Um die Elemente einer Website, eines Online Shops, oder einer Landing Page richtig positionieren zu können, muss man sich zunächst einige Frage stellen:

Checkliste zur Priorisierung von Website-Elementen

Relevanz und Interesse
Klickaufforderungen
Qualitäts- und Vertrauenssignale
Layout und Orientierung
Bildelemente
Shop Elemente

1. Relevanz und Interesse

Welche Elemente (Text, Bild) sind für die Relevanz einer Seite wichtig? Dabei ist es unabhängig davon, ob es sich um eine Inhalts-Seite oder eine spezielle Landing Page handelt. Elemente, die das Produkt abbilden, sind immer relevant. Darüber hinaus sind u.a. Preise und Versandkosten in Online-Shops kaufentscheidend. Auf Websites sind es beschreibende Texte, Videos, grafische Elemente und Bilder, die dem User den Inhalt näher bringen und Relevanz zu seinem Interesse herstellen. Häufig gilt dabei: Gesichter erzielen eine höhere Aufmerksamkeit als Texte.

Gesichter wirken immer magnetisch - zu viele davon zerstreuen den Blick des Users.

Bei Texten ist es wichtig, dass diese die Vorteile des Produktes oder der Dienstleistung kurz zusammenfassen. Details können im unteren Bereich angeteasert werden. Laden Sie dem User zum Scrollen ein, in dem Sie eine interessante weiterführende Headline (eventuell mit Bild) am Ende des sichtbaren Bereichs positionieren.

2. Klickaufforderungen

Ohne Klickaufforderungen wissen die User nicht, wo es weiter geht. Leider wird dieser Punkt nur all zu häufig von Webentwicklern vernachlässigt. Wichtige Links, Buttons und klickbare Bilder müssen im sichtbaren Bereich sein. Wie man diesen ermittelt, findet man hier - Landing Page Tools

3. Qualitäts- und Vertrauens-Signale

User haben Angst im Internet. Dies liegt noch immer am ungewohnten Medium - bei manchen mehr und bei manchen weniger. 35% der Nutzer gehören zur Gruppe der digitalen Außenseiter (Zusammenfassung der Studie der Initiative D21). Daher suchen viele User nach Elementen und Hinweisen, die bezeugen, dass das Angebot auf ihrem Bildschirm vertrauenswürdig und gut ist. Diese Elemente sollten auch leicht zu finden sein. Da Elemente, die die Aufmerksamkeit im ersten Moment erregen sollen, müssen Qualitäts- und Vertrauenssignale nicht zwingend direkt im Content-Bereich abgebildet werden.

4. Layout und Orientierung

Die Anordnung von Website-Elementen gibt dem User einen ersten Eindruck von der Struktur einer Seite. Wirkt das Layout ruhig und aufgeräumt, so kann sich der User schneller orientieren. Ist dieses Konzept darüber hinaus auch noch konsistent über die Seiten hinweg, so kann sich der User von Seite zu Seite besser orientieren, da gewisse Elemente wiedererkannt werden. Der kognitive Aufwand, eine Seite zu überfliegen, sinkt daher mit der Anzahl der Seiten, die man betrachtet. Eine einfache Struktur sollte das Ziel einer jeden Optimierung oder Konzeption sein.

5. Bildelemente

Bildelemente sollten ganz bewusst und sparsam eingesetzt werden. Sie können als Eyecatcher dienen, um gezielt die Aufmerksamkeit auf einen Bereich zu lenken, aber auch eine Werbebotschaft unterstützen. Da Bilder auch Emotionen transportieren können, sollte die Wahl der Bilder nicht zufällig passieren. Gesichter wirken immer magnetisch - zu viele davon zerstreuen den Blick des Users. Um den User zum Scrollen zu animieren, können Bildelemente im Content-Bereich verwendet werden, die direkt am Ende des sichtbaren Bereiches beginnen. Auf diese Weise wird der User neugierig auf den unteren Bereich gemacht.

6. Shop-Elemente

Wichtige Shop-Elemente wie Kauf-Buttons, oder der Warenkorb sollten sichtbar sein. Wie man der Imagery Studie von eresult entnehmen kann, muss man nicht alle Elemente immer links abbilden. Warenkorb, Suche und Kontakt können durchaus auch weiter rechts positioniert werden. Wie man eine Online Shop Startseite gestaltet, kann man auf der eCommerce Lounge nachlesen.

7. Design-Elemente

Das Webdesign sollte darauf ausgerichtet sein, einen guten Eindruck beim User zu hinterlassen. Häufig ist weniger mehr, denn zu viele Elemente lenken schlichtweg ab. Dabei kann mit einfachen schwarz-weiß Kontrasten oder mit großzügigen Flächen Ordnung hergestellt werden, ohne dass alles in Rahmen und mit Farbverläufen "zugekleistert" wird. Diese verschwenden häufig den wichtigen Platz auf einer Website. Ein Design vermittelt auch das gute Gefühl, bei einem vertrauenswürdigen Anbieter zu sein. Daher sollten Farben bewusst gewählt und auf die Botschaft der Website und die Zielgruppe ausgerichtet werden.

Und wie soll ich all' das sichtbar abbilden?

Bei der Konzeption einer Website hängt vieles von der Priorisierung der Inhalte ab. Hier sollte man sich die Zeit nehmen, um verschiedene Alternativen einfach mal aufzuzeichnen und anschließend gedanklich zu durchlaufen. Sollten dabei Fragen auftreten, so müssen wichtige Elemente verschoben werden. Nummeriert man nun die Elemente durch, so ergibt sich automatisch eine Verteilung von oben nach unten. Ist mein Hauptziel, ein Produkt zu verkaufen, so sollte der Button direkt nach der Navigation, dem Logo, dem Preis und der Produktabbildung aufgezählt werden. Dabei fällt schnell auf, dass Tutorials nicht kaufentscheidend sind, die Neuigkeiten-Box, der Karriere-Bereich und Presse-Mitteilungen auch nicht so prominent abgebildet sein müssen, wie sie häufig sind.

Um den User zum Scrollen zu animieren, können Bildelemente im Content-Bereich verwendet werden, die direkt am Ende des sichtbaren Bereiches beginnen.

Scribbles sollten bewusst auch bei einer Auflösung von 1024x768 Bildpunkten betrachtet werden. Diese Auflösung ist immer noch weit verbreitet. Um aber auf Nummer sicher zu gehen, können Webanalyse Tools eingesetzt werden, um die häufigste Auflösung der User herauszufinden. Ein Landing Page MockUp findet man im Conversiondoktor Blog – Landing Page Optimierung

Fazit

Während der Konzeption von Websites, Shops und Landing Pages hilft es oft weiter, den Blickwinkel zu wechseln. Das bedeutet, dass wir uns als "Webprofis" auch darauf zurückbesinnen müssen, welche Faktoren für weniger versierte User wichtig sind. Argumentationsketten im Inhalt können auch durch Design und Layout unterstützt werden. Der Viewport als Conversion-Faktor hat sich meiner Meinung nach fest etabliert. Eine Optimierung auf die richtige Auflösung bei vielen Projekten zu dramatischen Steigerungen der Conversion geführt.

Informationen über den Gastautoren

Verfasst hat diesen Beitrag der Gast-Blogger Gabriel Beck, den wir über diesem Wege auf dem Webstandard-Blog herzlich willkommen heißen. Gabriel ist als Senior Consultant bei explido WebMarketing Experte für Conversion Optimierung, Landingpage Optimierung, Shop Optimierung und Testing. Seit 2009 betreibt er mit dem Conversiondoktor einen eigenen Conversion Optimierung Blog. Aktuelle Informationen gibt es laufend über Twitter und Facebook.

Buch-Tipp - Conversion Optimierung für Landing Pages

Mehr Leads, mehr Sales, mehr Profit? Dann hilft nur noch Website-Testing und -optimierung. Mit dem folgenden Buch "Website-Testing: Conversion Optimierung für Landing Pages"* erfahrt ihr, mit welchen Verfahren in Sachen Optimierung von Landing Pages Online-Angebote auf Herz und Nieren getesten werden können. Für Online-Profis ist dieses Buch eine unentbehrliche Lektüre in der die Autoren zeigen, wie Klick- und Konversionsraten von Landing-Pages, Bestellprozessen und Anmeldeformulalen gezielt optimiert werden und welche Testverfahren die besten sind. Zudem enthält das 328 Seiten starke Werk von Frank Reese praxisorientierte Einführungen und ausführliche Fallbeispiele erfolgreicher Unternehmen wie Neckermann, Autoscout24 bis hin zur Deutschen Post illustrieren, wie professionelle Website-Optimierung* funktioniert.