Scrollytelling –mit Inhalten Geschichten erzählen

Der Name Scrollytelling könnte für viele erstmal sehr eingeschränkt klingen: Geschichten durch Scrollen erzählen – toll und jetzt? Natürlich, diese direkte Anwendungen gibt es als Teil dieses Trends natürlich auch, allerdings könnte hinter dem Prinzip von Scrollytelling für das Web Design eine große Chance liegen: Individualität!

Seit mehreren Jahren finden wir in den zahlreichen Web Design Trends immer wieder den Punkt, der über vorgefertigte Templates und Themes schwadroniert (wie auch bei mir, wie ihr hier nachlesen könnt). Neben großer Zeitersparnis und Kosteneffizienz kommt es einem allerdings immer mehr so vor, als würde man immer wieder dieselbe Website in verschiedenen bildlichen und farblichen Gewändern betrachten. Klar, gute Web Designer individualisieren diese Templates so weit, bis es ihr eigenes Baby ist, der Allgemeineindruck bleibt jedoch.

Da kommt für uns der Scrollytelling-Trend gerade richtig: wieder mehr aufbereitete Inhalte, die den Nutzern in idealen Häppchen vor die Füße geworfen werden und somit auch leichter verständlich rüber- und vor allem ankommen.

Das Paradebeispiel: Storys per Scrollen erzählen

Schauen wir uns zunächst den Elefanten im Raum an, der einfach auf der Hand liegt: Websites, die Geschichten per Scrolling erzählen. Dieser Einsatz des Trends ist relativ selbsterklärend und dabei total spannend. Ein geniales, preisgekröntes Beispiel ist hierbei die Website The Boat.

Auch wenn die Seite auf dem Smartphone gut funktioniert – schaut sie Euch am besten mit Kopfhörern am Desktop-Rechner an! Der Website gelingt es einen immersiven Sog zu erzeugen, den ich sonst nur aus Games kenne.

The Boat verwendet komplexe Animationen und handgezeichnete Storyboard-Bilder, um eine Geschichte zu erzählen. Indem wir nach unten scrollen, schreiten wir in der Geschichte voran. Zudem haben wir die Möglichkeit über das Menü zu bestimmten Kapiteln zu springen. Wem das zu anstrengend ist, der hat zudem die Möglichkeit „Auto Scroll“ zu verwenden und die Geschichte in einer vorgegebenen Geschwindigkeit erzählt zu bekommen.

Speziell ist für dieses Beispiel, dass Audio-Elemente nahezu perfekt eingebunden werden. Das sieht man im Web tatsächlich mittlerweile sehr selten. Die Soundeffekte und die Musik reagieren zudem auf den Scrollfortschritt und blenden nahtlos ineinander über. Ebenfalls werden Audioelemente mit den Animationen verknüpft: rumort es im Hintergrund sehr laut, wackeln einzelne Bildelemente stärker hin und her.

Timelines durch Scrollytelling

Ein weiteres tolles Beispiel, das den Trend in einer anderen Weise verwendet, ist 20 Years of Hip-Hop Culture. Die Seite verwendet das Scrollytelling um einen historischen Zeitstrahl zu präsentieren. Wir werden, indem wir scrollen, durch die Jahre in der Geschichte des Hip Hop und dessen Kultur geführt. Besonders bei 20 Years of Hip-Hop Culture ist die einwandfreie responsive Ausführung, wodurch wir die Seite auch auf Smartphone und Tablet bestaunen dürfen. Genau das ist bei interaktiven Websites mit Zeitstrahlen oft das Problem, da in der Vergangenheit oft nur in Zeitstrahlen gedacht wurde, ohne die Funktionalität im Responsive UI Design im Auge zu haben.

Besonders ist an diesem Beispiel vor allem das Navigationskonzept. Wir sind standardmäßig im ersten Jahr 1997 und scrollen uns durch dieses Jahr. Am Ende jeder Jahresseite finden wir einen auffallenden Link, der uns zum nächsten Jahr lenkt. Oben sehen wir konstant einen Fortschrittsbalken, der uns aufzeigt, wie weit wir in diesem jeweiligen Jahr bereits gescrollt haben. So wissen wir stets wo wir uns auf der Seite befinden, obwohl wir die Struktur so nicht oft sehen. Zudem können wir jederzeit ins Menü gehen und, wer hätte es gedacht, per Scrollen eine Jahreszahl auswählen (ähnlich wie bei einem Datepicker für Geburtstage).

Emotionale Themen emotional erzählen

Ein recht einfaches weiteres Beispiel ist die Website für eine LGBTQ-Kampagne für Tanzania: I am Binadam.

Hierbei finden wir eine tatsächlich eher klassische Website vor: der Inhalt wird uns ganz normal von oben nach unten präsentiert. Allerdings steckt auch hier der Web Design Trend Scrollytelling dahinter.

Scroll-Animationen sind hier zentral: wenn wir scrollen, bewegt sich der Inhalt, bzw. wird animiert. Solche Scroll-based Animations sind ein Trend für sich und machen einiges her. Man hat zunehmend das Gefühl die Website selbst zu erkunden und tatsächlich interaktiv etwas zu verändern.

I am Binadam stellt mit diesem Prinzip auch Daten via animierten Diagrammen schön dar. Häppchen für Häppchen werden uns Informationen vermittelt, anstatt uns mit allen Daten direkt zu erschlagen.

Für den alltäglichen Gebrauch: Unternehmens­darstellung per Scrollytelling

Wir hatten uns das Beispiel bereits in einem anderen Beitrag angeschaut, dennoch nutzt auch Everpost das Prinzip des Scrollytellings.

Everpost präsentiert all Ihre Referenzprojekte und Leistungen über Ihre Startseite in kurzer und immersiver Form. Wir scrollen durch ein Karussell einiger Referenzen und schließlich nach unten. Hier erfahren wir nach und nach welche Leistungen Everpost bietet und bekommen hierfür sogar zeitweise eine Subnavigation explizit für diese Scrollbereiche.

Animationen werden in diesem Beispiel exakt eingesetzt: an bestimmten Bereichen bleiben Animationen als Ebene im Screen stehen, während andere Inhalte weiter nach unten laufen. Alles scheint genau durchgeplant und durchgetaktet zu sein. Gleichzeitig erhalten wir alle nötigen Inhalte, die uns interessieren, per Animationen präsentiert – genial.

Und wie geht’s? Einfaches Prinzip mit komplexer Umsetzung

Die anderen Trends von Micro-Interactions und vielen Animationsteilchen auf Websites sind ausschlaggebend dafür, dass ich diesen Trend auf jeden Fall als zukunftsträchtig und wichtig empfinde. Scrollytelling macht Web Design spannender und individueller. Allerdings ist die Umsetzung aufwändiger, als wenn wir den Content einfach runterbetend darstellen, klar.

Scrollanimationen und Scrollereignisse können je nach Umgebung programmiert werden. Ins Detail kann ich an dieser Stelle nicht gehen – es kommt eben darauf an wie und wo ihr arbeitet. In WordPress könnt ihr z.B. bei manchen Themes & Builder-Plugins wie z.B. Elementor Scrollbereiche definieren und auch entsprechende Animationen einbauen. TYPO3-Websites können mit Extentions für komplexe Animationseinbindungen oder einfachen CSS- und Javascript-Interaktionen ebenfalls mit Scrollytelling mithalten. Auch Webflow bietet sehr intuitive Keyframe-Animationen in Verbindung mit Ereignissen an, die sehr gut mit Scrollfunktionen verwendet werden können.

Die Herausforderung ist allerdings tatsächlich die genaue Planung der Scrollereignisse: was geschieht wann und zu welchem Zeitpunkt beziehungsweise in welcher Scrolltiefe? Die jeweilige Animation oder Interaktionsmöglichkeit muss zudem sinnvoll sein und eine sinnvolle Funktion bieten. Überfrachtet Ihr Eure Website mit Scroll-Stopps, die sich unnötig anfühlen, kann die Magie der Website schnell verfliegen. Konzeption ist hierbei alles.

Fazit

Wie man an den genannten Beispielen erkennt, haben Scrollytelling-Websites einen gewissen Wow-Effekt. Per se sind alle Websites in gewisser Weise interaktiv, auch wenn die Interaktivität nur aus Link-Klicks besteht. Wirkliche Immersion erzeugen allerdings die wenigsten Seiten.

Websites sollten uns in ihren Bann ziehen, überraschen und auf eine Reise mitnehmen. Genau das verspricht Scrollytelling uns und wir sehen darin sehr viel Potenzial.

In diesem Sinne möchte ich zum Schluss noch eine Mind-Explosion mit auf den Weg geben – viel Spaß mit If The Moon Were Only 1 Pixel.

Neueste Artikel
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.