UX Trend Parallax Scrolling – so bringen Sie Nutzer unter den Fold

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. Einer der ersten, der diese Technik im Webdesign einsetzte, war Paul Annett bei der Seite von Silverback.


Silverback - Parallax Scrolling

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% Ihrer Aufmerksamkeit Inhalten über dem Fold schenken und nur 20% 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 14169 Pixel zu einer besseren Welt.

Nike Better World - Parallax Scrolling

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.

Beetle - Parallax Scrolling

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 Sachen 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 werden 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 auf diesem sich 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.

Ben the Bodyguard - Parallax Scrolling

Weitere Beispiele

The Art of Flight

Art of Flight - Parallax Scrolling

Finger Billiards

Finger Billiards- Parallax Scrolling

Gidsy Handbooks

Gidsy - Parallax Scrolling

iutopi

iutopi - Parallax Scrolling

Jan Ploch

Jan Ploch - Parallax Scrolling

Laurentius

Laurentius - Parallax Scrolling

manufacture d’essai

manufacture d'essai - Parallax Scrolling

Mario Kart

Mario Kart - Parallax Scrolling

Moods of Norway

Moods of Norway - Parallax Scrolling

netlash bSeen

netlash bSeen - Parallax Scrolling

Row to the Pole

Row to the Pole  - Parallax Scrolling

Smokey Bones

Smokey Bones - Parallax Scrolling

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 halten Sie von Parallax Scrolling und die Möglichkeiten für den E-Commerce?

  • Send to Kindle
  • https://www.konversionskraft.de/?p=10764
Manuel Ressel Manuel Ressel ist Head of UX Design bei der Web Arts AG. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen. Manuel Ressel ist unentwegt auf der Suche nach einzigartigen Shop-Perlen und neuen Design Trends im E-Commerce und sammelt diese in dem E-Commerce Showcase conversiondesign.de. Folgen Sie ihm auf Twitter, Google+ oder Facebook.

, , , ,

7 Reaktionen auf  “UX Trend Parallax Scrolling – so bringen Sie Nutzer unter den Fold”

Kommentare

  1. tk-kommunikation tk-kommunikation

    schöner Artikel! Wir spielen auch mit dem Gedanken den Parallaxeffekt unserer Homepage auch auf den Shop zu übertragen. Die Vorteile hast du ja überzeugend dargestellt =)

  2. Frank P. Frank P.

    Schöner Beitrag Manuel. Habe das Thema gerade für die neue Webmaking aufgearbeitet. Wer sich selbst daran versuchen will geht auf: http://webdev.stephband.info/parallax.html
    (Ist nicht von mir, sondern von einem klugen Schweizer)
    Das funktioniert ziemlich einfach.

  3. Thorsten Wilhelm Thorsten Wilhelm

    Hervorragende Anregungen, hab jede Menge Ideen bekommen. Vielen Dank. Ich denke auch, dass wir auch auf E-Commerce Portalen und mobilen Sites immer mehr solche Techniken im Einsatz sehen werden.

  4. Peter Ludwigs Peter Ludwigs

    man muss gar nicht so weit wegschauen: http://www.palmengarten.de

  5. Ben Ben

    Unsere Konferenz Seite kombiniert mit Glühbirne:
    http://www.ideenbeleben.de

Trackbacks/Pingbacks

  1. […] häufiger werden neue Webtechnologien wie Parallax Scrolling dazu verwendet auch auf Webseiten aufmerksamkeitsstarke Geschichten zu erzählen. Und das eben […]

Hinterlassen Sie einen Kommentar