t3n News E-Commerce

E-Commerce: Conversions verbessern mit neuem Design-Kniff

E-Commerce: Conversions verbessern mit neuem Design-Kniff

Parallax Scrolling ist eine Pseudo-3D Technik, die in den frühen 80ern zunächst bei Computer-Spielen eingesetzt wurde. Beim Parallax Scrolling arbeitet man mit verschiedenen Ebenen, wobei sich die hinteren Ebenen langsamer bewegen als die vorderen Ebenen. Dadurch wurde in 2D-Spielen eine Illusion von Tiefe geschaffen. Was nach Spielerei klingt, lässt sich im gezielt einsetzen.

Einer der ersten, der diese Technik im einsetzte, war Paul Annett bei der Seite von Silverback.

Bei diesem Beispiel sind die Kletterpflanzen am Seitenanfang auf verschiedenen Ebenen platziert. Die Positionierung der einzelnen Ebenen wurde mit unterschiedlichen prozentualen Werten belegt. Verändert man nun die Größe des Browserfensters, sieht man, dass die Kletterpflanzen sich unterschiedlich bewegen. Bei diesem Beispiel ist der Effekt noch ziemlich versteckt und wird erst sichtbar, wenn der Nutzer die Browsergröße ändert.

Mittlerweile hat der Einsatz dieser Technik sich auch im Webdesign weiterentwickelt. Der Effekt wird durch Scrollen ausgelöst und spielt ganze Animationen ab, die der Nutzer über die Scrollleiste steuern kann, wie zum Beispiel bei der Seite von New Zealand.

Klingt noch alles nach Spielerei? Während die Technik tatsächlich zur Zeit hauptsächlich auf Seiten zur Verbesserung des Markenimages eingesetzt werden, kann der Effekt durchaus auch für den E-Commerce interessant sein.

Den Nutzer zum Scrollen animieren

Jakob Nielsen zeigt in dem Artikel „Scrolling and Attention“, dass Nutzer 80 Prozent ihrer Aufmerksamkeit Inhalten über dem „Fold“ schenken und nur 20 Prozent unterhalb. Dies heißt jedoch nicht, dass Nutzer nicht scrollen, sondern lediglich, dass dem Inhalt über dem Fold mehr Aufmerksamkeit geschenkt wird. Die wichtigsten Inhalte sollten sich also nach wie vor im sichtbaren Bereich befinden. Der Inhalt im sichtbaren Bereich sollte das Interesse des Nutzers wecken, so dass er die Seite nicht direkt verlässt, sondern sich auch die weiteren Inhalte ansieht

Parallax Scrolling kann hier genau ansetzen und den Nutzer dazu animieren, sich die komplette Seite anzusehen. Denn bemerkt der Nutzer den Effekt, den er durch das Scrollen auslöst, weckt dies Interesse und der Nutzer möchte wissen, welche Effekte er noch durch das Scrollen auslösen kann.

Auf der Webseite „Nike Better World“ scrollt der Nutzer so ganze 14.169 Pixel zu einer besseren Welt.

Inwiefern Parallax Scrolling bei der Webseite für den VW Beetle den Nutzer zum Scrollen animieren kann, hat Gabriel Beck schon in seinem Artikel „Scrollen bis der Käfer kommt“ beschrieben.

So kann die Seite ohne Klick navigiert werden, das Produkt kann erlebt werden und das Statische einer Website wird ohne Video oder Flash aufgebrochen.

Wiedererkennungswert steigern

Durch den aufmerksamkeitssteigernden Effekt kann man einen Wow-Effekt beim Nutzer auslösen, der eher im Gedächtnis eines Betrachters bleibt. Dies kann den Wiedererkennungswert eine Seite enorm steigern. Durch detaillierte, animierte Bildwelten und die einfache Bedienung (Kontrolle) durch Scrollen entsteht ein hoher Joy of Use.

Die Trinkmarke „Activate“ verbindet zum Beispiel ihr Offline-Erlebnis mit der Webseite. So wird als Einstieg der besondere Verschluss der Flasche gezeigt, der beim Drehen dem Wasser Vitamine beisetzt. Scrollt man auf der Webseite runter, so dreht man virtuell den Verschluss auf und es werden kleine Kügelchen freigesetzt, die sich als Stilelement durch die ganze Seite ziehen.

Geschichten erzählen

Wie wichtig Geschichten für den Verkauf von Produkten ist, hat Ph.D. Susanne M. Weinschenk schon in ihrem Buch „Neuro Web Design: What Makes Them Click?“ erläutert.

Das Gehirn kann sich große Mengen an Informationen nicht so einfach merken. Deshalb bauen wir uns Eselsbrücken, um uns Dinge leichter zu merken. Das Gehirn teilt dabei Informationen auf und speichert sie. Bekommen wir Informationen in einer Geschichte vermittelt, so kann die Geschichte in einzelne Etappen aufgeteilt und so leichter behalten werden. Zusätzlich entstehen mit der Geschichte Bilder, die abgespeichert werden.

Die Sicherheitssoftware „Ben the Bodyguard“ nutzt Parallax Scrolling, um eine Geschichte von einem Bodyguard zu erzählen. Durch das Scrollen der Seite läuft der Bodyquard eine Straße hinunter und weist auf die Gefahr hin, dass einem das iPhone geklaut werden kann und sich auf diesem sensible Daten befinden können, zu denen der Dieb dann freien Zugriff hat. Seine Erzählung wird dabei durch ablaufende Animationen bildlich unterstützt.

Die Geschichte rund um einen Bodyguard, der die Daten auf dem iPhone sicher verwahrt, bleibt mit Sicherheit leichter im Gedächtnis, als eine stupide Auflistung von Vorteilen, die sich mit den Vorteilen der Konkurrenzprodukte deckt.

Fazit

Aktuell wird Parallax Scrolling noch selten für direkte Verkaufszwecke verwendet. Dass dieser Effekt aber durchaus Sinn macht, zeigen einige gute Beispiele. Gerade eine lange Landingpage für ein erklärungsbedürftiges Produkt könnte durch die Technik aufgelockert und für den Nutzer interessanter gestaltet werden, so dass das Interesse des Nutzers bestehen bleibt. Aufpassen muss man in diesem Fall nur, dass der Effekt den Inhalt auch in den Fokus rückt und nicht nebensächliche Animationen in den Vordergrund geraten und der eigentliche Inhalt in den Hintergrund rückt.

Was haltet ihr von Parallax Scrolling und die Möglichkeiten für den E-Commerce?

Über den Gastautor

Manuel Ressel ist Conversion Designer bei der Web Arts AG und Autor bei konversionsKRAFT. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen.

Dieser Beitrag erschien zuerst auf konversionsKRAFT.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von christian.baer am 25.11.2011 (09:52 Uhr)

    Naja, ruckeln ganz schön, die Seiten... Aber hey: hauptsache innovativ :)

    Antworten Teilen
  2. von Dirk Unger am 01.12.2011 (09:17 Uhr)

    Bei Schiesser findet Parallax Scrolling Einsatz:
    http://www.schiesserag.com/hautnah-schiesser.php

    zwar nicht im eigentlichen Shop, dafür aber sehr unprätentiös, funktional und hübsch gemacht.

    Ich denke aber, dass der Effekt ausschliesslich für Image-Bildung genutzt werden kann. Wenn es ums Verkaufen geht, wollen wir Fakten und keine tollen Animationen (in welcher Form auch immer). Ich lasse mich aber gerne eines besseren belehren.

    Vielen Dank für den interessanten Artikel.

    Antworten Teilen
  3. von Zinit Solutions am 11.05.2012 (16:50 Uhr)

    Die Idee ist gut, gilt aber nicht für alle Onlineshops. Ich glaube, dass lenkt die Aufmerksamkeit der Benutzer von den Waren ab und dient eher zu einer Art Entspannung. Ich wage zu behaupten, dass sogar Webdesign für Onlineshops nicht zu schreiend sein soll, ohne zusätzlichen Technologien zu verwenden.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema E-Commerce
PR, Online-Marketing, E-Commerce oder Redaktion: 24 neue Stellen für Webworker
PR, Online-Marketing, E-Commerce oder Redaktion: 24 neue Stellen für Webworker

Zweimal pro Woche verweisen wir hier auf aktuelle und interessante Jobangebote aus unserer Stellenbörse „t3n Jobs“. Heute können wir euch 24 Angebote aus den Bereichen „Marketing“ und … » weiterlesen

E-Commerce: Wie du deinen Shop für Kunden zum Erlebnis machst
E-Commerce: Wie du deinen Shop für Kunden zum Erlebnis machst

Wenn es ein Thema gibt, bei dem der stationäre Handel dem E-Commerce gegenüber noch deutlich die Nase vorn hat, dann ist es der Event-Charakter des Einkaufens. Deshalb sollten sich auch … » weiterlesen

E-Commerce: Die große t3n-Umfrage für Shopbetreiber
E-Commerce: Die große t3n-Umfrage für Shopbetreiber

Wer sind die Shopbetreiber, die das E-Commerce-Ressort bei t3n lesen? Welche Lösungen setzt ihr ein und wohin liefert ihr? Wir würden es gern erfahren. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?