Infinite Scrolling und Parallax Scrolling

Kreative Nutzer-Erlebnisse schaffen

Internet-Nutzer stellen nicht nur an die Inhalte, sondern auch an deren Aufbereitung zunehmend hohe Ansprüche. Wer aus der grauen Masse der langweiligen Textwüsten herausstechen möchte, sollte daher mit verschiedenen Techniken experimentieren. Infinite Scrolling und Parallax Scrolling bieten hier interessante neue Darstellungsmöglichkeiten.

Was ist Infinite Scrolling?

Der englische Begriff Infinite Scrolling bedeutet übersetzt „unendliches Scrollen“. Wenn der Nutzer auf einer Website weiter nach unten scrollt, werden automatisch neue Inhalte geladen. Die Seite hat also kein natürliches Ende. Diese Technik lohnt sich für One-Page-Seiten ohne Unterseiten. Auch bei Newsportalen, die nach jedem Artikel einen weiteren einblenden, kommt das Infinite Scrolling zum Einsatz. Am bekanntesten ist die Technik allerdings dank sozialer Netzwerke wie Twitter, Pinterest und Facebook sowie dank der Google Bildersuche. Hier erscheinen kurze Beiträge in einem endlosen Feed. Ziel ist es bei allen Varianten, den Nutzer möglichst lange auf der eigenen Seite zu halten und ihn mit immer neuem Content zum Weiterscrollen zu motivieren. Für den User ist dies besonders auf Mobilgeräten mit deutlich weniger Aufwand verbunden, als wenn er verschiedene Unterseiten aufrufen müsste.

Was ist Parallax Scrolling?

Das Parallax Scrolling erhielt seinen Namen in Anlehnung an den sogenannten Parallaxe-Effekt. Dieser beschreibt die Illusion, dass ein Objekt seine Position verändert, wenn sich der Betrachter bewegt. Im Webdesign bewegen sich beim Scrollen verschiedene Elemente in unterschiedlicher Geschwindigkeit. Bilder, Videos, Text und ähnliches sind beim Parallax Scrolling auf mehreren Ebenen angeordnet. Scrollt sich der User durch den Content hindurch, bewegt sich jede Ebene in der vom Webmaster definierten Geschwindigkeit. Meist werden große Medien wie Fotos im Hintergrund langsamer bewegt, während davor angeordnete Texte schneller vorbeifliegen. Der Betrachter hat dadurch den Eindruck, dass die größeren Elemente weiter entfernt liegen, wodurch ein optisch ansprechender Tiefeneffekt entsteht.

Anwendungsgebiete und Kombinationsmöglichkeiten

Infinite Scrolling kommt sowohl bei einer Sammlung von vielen kleinen Inhalten als auch bei einzelnen langen Geschichten zum Einsatz. Parallax Scrolling wird hingegen eher bei komplexerem, längerem Content eingesetzt. Beide Techniken lassen sich einzeln verwenden. In Kombination sorgen sie jedoch für einen besonders ansprechenden Effekt. Deshalb eigenen sie sich zusammen besonders gut für das Storytelling. Wer lange Geschichten wie Reportagen oder die Unternehmensgeschichte im Web darstellen will, ohne den Leser zu langweilen und ohne ihn durch lange Ladezeiten zu verschrecken, sollte das Infinite und Parallax Scrolling gemeinsam nutzen.

Technische Herausforderungen

Wer sich für den Einsatz von Parallax und / oder Infinite Scrolling entscheidet, muss beim Programmieren einiges beachten. Um die Ladezeiten möglichst gering zu halten, sollte beim Parallax Scrolling auf JavaScript, jQuery und sonstige Plugins verzichtet werden. Besonders die Kombination verschiedener Techniken verlangsamt die Seite. Die Bewegungseffekte sollten am besten mit HTML5- und CSS3-Befehlen realisiert werden. Beim Infinite Scrolling ist besonders auf eine gute Navigation zu achten, wenn eine Website keine One-Page-Lösung nutzt, sondern mehrere Unterseiten besitzt. Dies wird am einfachsten mit einem fixierten Menü erreicht, das auch beim Scrollen immer am Bildschirmrand zu sehen ist. So muss der Nutzer nicht an den Seitenanfang springen, um eine andere Seite aufzurufen.

Zudem stellt Infinite Scrolling eine Herausforderung bei der Suchmaschinenoptimierung dar. Wer die Technik beispielsweise im Unternehmensmarketing einsetzt, möchte natürlich weiterhin über Google und Co gefunden werden. Die Crawler der Suchmaschinen erfassen jedoch nur den Content, der beim ersten Aufrufen der URL geladen wird. Beim Endlosscrollen werden die Inhalte nacheinander geladen. Eine SEO-kompatible Lösung für das Problem bietet die Paginierung. Dabei wird eine lange Seite in mehrere Unterseiten aufgeteilt. Der Nutzer bemerkt dies nicht, da er durch den Infinite-Scrolling-Effekt kontinuierlich navigieren kann. Für Suchmaschinen sind jedoch die einzelnen Seiten ersichtlich und separat erfassbar. Google empfiehlt einen speziellen Hinweis im Head-Bereich der jeweiligen Seite: Hier soll der vorhergehende und der nachfolgende Teil verlinkt werden, damit der Googlebot die korrekte Reihenfolge nachvollziehen kann. Der Hinweis muss im Head untergebracht werden, da der Crawler diesen im Body nicht ausliest.

Fazit: Einsatz von Scroll-Effekten

Wer Infinite Scrolling und Parallax Scrolling technisch sauber umsetzt, erhält eine visuell anregende Webseite mit modernen Effekten. Besonders Unternehmen und Medien, die eine innovative, experimentierfreudige Positionierung anstreben, sollten mit diesen Techniken experimentieren. Wichtig ist jedoch, dass diese nicht nur Spielerei sind, sondern den Inhalt sinnvoll unterstützen.

Mit dem Artikel “Kreative Nutzer-Erlebnisse schaffen” möchten wir informieren und aufklären. Wenn Sie weitere Fragen zu diesem Thema haben, melden Sie sich gerne bei uns.

Ihr Team von getaweb