Parallax Scrolling Webdesign

Neben Webdesign Trends wie Flat Design, Minimalistisches Webdesign, Infografiken, Storytelling Webdesign und Ghost Buttons erfreut sich auch das Parallax Scrolling Webdesign großer Beliebtheit. Bereits in den 80er Jahren kam die Technik in Videospielen, bei denen sich die Hintergrundebene langsamer bewegt, zum Einsatz. Bei Jump’n’Run Games mit langen horizontalen Levels (wie Super Mario) verlieh der Effekt dem Spiel mehr Tiefe, fast schon einen 3D-ähnlichen Touch. Seit Nike den Effekt für die NikeBetterWorld Kampagne 2011 verwendete, steigt die Zahl der Parallax Websites stetig; genau wie die Freude an den visuellen Entdeckungsreisen, die sich dem User auf immer kreativer umgesetzten Seiten eröffnen.

Die Freese Coffee Co. zeigt auf sehr anschauliche Weise mit Ihrer Website forbetter.coffee 5 Regeln für größeren Kaffeegenuss.

Was steckt hinter dem Parallax Scrolling?

Bewegungsparallaxe – der wahrnehmungspsychologische Effekt, mit dem Long Scrolling Websites funktionieren, lässt sich am besten mit dem Aus-dem-Fenster-Schauen während einer Auto-, Zug- oder Busfahrt erklären: Wenn ein Beobachter sich parallel zu zwei Objekten bewegt, erscheinen ihm die Objekte, als ob sie sich mit verschiedenen Geschwindigkeiten bewegen. Denn nahe Gegenstände (etwa Straßenschilder, Menschen, Häuser und Bäumen in naher Umgebung) scheinen um einiges schneller an einem vorbeizuziehen als weiter entferntere Objekte (wie ganze Wälder oder Weinberge in der Ferne).

Auf der Scrolling Website für die Ben the Bodyguard App etwa folgt man Ben durch dunkle Straßen, aus denen laufend Kleinkriminelle springen, bis man
kurz vor der letzten Kreuzung in den Menüpunkten erfährt, dass es um eine App zum Schutz sensitiver Daten geht.

Genau diese optische Illusion greift in der virtuellen Welt auch beim Parallax Scrolling: Die Designer kreieren verschiedene aufeinander liegende Ebenen – zum Beispiel Hintergründe, Bilder, Inhalte – auf der Seite. Diese bewegen sich beim Scrollen in verschiedenen Geschwindigkeiten und hinterlassen beim Betrachter dadurch den Eindruck von mehr Tiefe, Dynamik und Bewegung. Der User selbst bestimmt dabei die Geschwindigkeit, mit der er durch die Page scrollt und wird somit selbst Teil der “Geschichte”. Mithilfe von Animationen und spielerischen Übergängen wird das Überraschungsmoment und die interaktive Erlebbarkeit auf besonders ideenreichen Seiten noch größer. Dadurch sollen die User den Webseiten-Besuch als positives Erlebnis empfinden.

Die Agentur La Moulade verwendet auf Ihrer Website den Effekt nicht etwa auf einer senkrechten Achse, sondern lässt den
Seiten-Inhalt umso dynamischer beim Scrollen wie eine Windmühle gegen den Uhrzeigersinn drehen.  

Vorzüge von Long Scrolling und Parallax Webdesign

Einer der größten Vorzüge beim Parallax Webdesign ist der Faktor des Geschichten-Erzählens und damit einhergehend die positiven Emotionen, die sich beim Besucher einstellen: Dem roten Faden der Webseite folgend, werden das innere (Spiel-)Kind und Neugierde geweckt. In Vorfreude auf das, was beim Scrollen als nächstes passiert, verweilt der Besucher gespannt auf der Seite und lässt sich allzu gerne an die Hand nehmen. Eine Website wirkt dadurch umso liebevoller gestaltet.

Gerade in Zeiten, in denen One-Pager zur Mode geworden sind und die Bedeutung von Storytelling im Marketing GROß geschrieben wird, bietet Parallax Webdesign großartige Möglichkeiten, Botschaften mithilfe des Scrolling-Effektes auf beeindruckende Art und Weise als interaktive Geschichten ins Web zu übertragen. Weitere Vorzüge sind:

• der Storytelling-Ansatz bindet den User in die Webseite ein
• vereinfachte Navigation
• das scheinbar unendliche Scrolling schafft einen Spannungsbogen und ein Überraschungselement bei der User Experience  
• lässt sich gut für mobile Endgeräte umsetzen
• überzeugt den Betrachter durch Tiefe und Animation
• durch den Ansporn, sich durch die gesamte Seite zu srollen, hält sich der User länger auf der Website auf
• steuert den Besucher direkt zum call-to-action
• verstärkt die Glaubwürdigkeit und Authentizität der Webseite durch eine innovative Gestaltung und interaktive Elemente

Best Practice bei Scrolling Websites

Ebenso wie bei anderen Webdesign Stil-Richtungen gibt es bei Scrolling Websites Herausforderungen, die es bei der Gestaltung zu beachten gilt. So sollte man sich dessen bewusst sein, dass Parallax Webdesign – gerade auf One-Pagern – zu einem weniger suchmaschinenfreundlichen Webdesign zählt. Von Kritikern wird die Parallax Website gerne auch als “Usability-Hölle” mit langen Ladezeiten bezeichnet, die durch verwirrende Effekthascherei und langsame One-Pager-Navigation überhaupt gar keinen Inhalt transportiert, sondern einzig auf den “Wow!-Faktor” spekuliert.

Doch funktioniert der Effekt ja nicht nur auf One-Pagern. Dezent und clever eingesetzt kann Parallax Scrolling vielmehr Botschaften oder Inhalte so unterstreichen, dass sie nicht in den Hintergrund treten, sondern durch die positive Assoziation eher in Erinnerung bleiben. Auch unser Webdesign Berlin macht es sich zur Aufgaben, Webseiten zu gestalten, die übersichtlich, aufgeräumt und klar wirken sowie Informationen ansprechend zugänglich machen ohne abzulenken.

Um beim Parallax Scrolling Webdesign für größere Usability zu sorgen, sollte man daher folgende beiden Punkte beachten:

• Subtiler aber klarer Anhaltspunkt: Damit der User weiß, dass er aufgefordert ist zu srollen, braucht er einen “Hinweis”, etwa durch die unverblühmten Aufforderung “scroll down”, oder aber etwas subtiler mit einem Pfeil, der nach unten zeigt.

• Feste Navigation: Um Verwirrung zu meiden und dem Besucher Orientierung zu geben, sollte mit “sticky” Navigationsmenüs gearbeitet werden, die jederzeit an derselben Stelle des Bildschirms bleiben.