Liest du auch immer erst „Storytelling“, bevor dein Hirn das „Scroll“ verarbeiten kann? Dann bist du nicht allein. Und so ganz falsch liegst du auch nicht.
Denn der Begriff „Scrollytelling“ ist eine – mehr oder weniger kreative 😉 – Mischform aus den Wörtern „Storytelling“ (Geschichtenerzählen) und „Scroll“ (die Bewegung, mit der du dich mit der Maus über eine Seite nach unten oder oben bewegst.)
Und genau das ist Scrollytelling: Eine ganz besondere Art des Storytellings, bei dem die Geschichte durch das Scrollen auf einer Seite vorangetrieben wird.
Doch warum soll man sich überhaupt die Mühe machen? Was sind die Vorteile des multimedialen Storytellings und worauf muss ich achten? Genau das erfährst du hier:
Mehr als coole Scroll-Effekte
Wie das genau funktioniert? Ganz einfach: Scrollytelling verwendet multimediale Elemente, die im Webdesign seit langem gang und gäbe sind. Zu diesen Scroll-Effekten gehören beispielsweise:
Schau es dir gerne mal selbst an: Die Webdesign Agentur Southvision hat auf ihrer Seite das volle Potenzial von Scrollytelling ausgeschöpft.
All die oben genannten Scroll-Effekte sind also Bestandteile vom Scrollytelling, aber wie du bereits auf der Seite von Southvision siehst: Es handelt sich nicht um eine willkürliche Aneinanderreihung von multimedialen Elementen! Stattdessen wird mithilfe der Zoom-Effekte, Animationen und anderen interaktiven Bestandteilen eben eine richtige Story erzählt.
Das Geniale daran: Für unser Gehirn ist diese Art der Informationsübermittlung perfekt geeignet!
Vom Longform Journalismus zum multimedialen Storytelling
Ich sage es, wie es ist: Vorreiter des multimedialen Storytellings war der Journalismus. Du fragst dich jetzt vielleicht: WIE BITTE?! Warum waren es nicht trendige Start-Up Agenturen und pfiffige Webdesign-Freelancer, die sich mit dieser Technik auf ihren Webseiten brüsteten?
Der Grund ist, dass das Umsetzen von Scrollytelling zu Beginn technisch extrem aufwendig war. So war das multimediale Storytelling zu Beginn vor allem als Longform Journalismus in The Guardian, ARTE oder der New York Times zu sehen.
Und hier konnte es so richtig überzeugen! Denn während die News-Artikel durch diese Technik kein bisschen an Qualität oder Inhalt verloren, wird der Lesefluss und die Informationsverarbeitung hervorragend unterstützt.
Doch natürlich ist das Scrollytelling jetzt längst nicht mehr nur auf den Longform Journalismus beschränkt. Die anfänglichen Hürden für kleinere Unternehmen sind mittlerweile längst bezwungen: Durch die Entwicklungen in Sachen CSS und JavaScript kann das Scrollytelling jetzt häufiger und einfacher umgesetzt werden und überzeugt auch in mobiler Ansicht.
Warum Scrollytelling?
Du merkst, wir finden Scrollytelling ziemlich cool – aber sagen das Nerds nicht über jede technische Spielerei?
Ok, du hast schon irgendwie Recht 😉 Aber für die Verwendung von Scrollytelling spricht mehr als „weil wir es können“. Versprochen!
Erkenntnisse aus den Bereichen User Experience und Neuromarketing zeigen uns, dass Scrollytelling beim Nutzerhirn genau ins Schwarze trifft.
Anders ist besser
Unser Gehirn besteht aus verschiedenen Bereichen. Für Neuromarketer ist neben dem limbischen System vor allem das „Reptiliengehirn“ ausschlaggebend. Dieses reagiert auf alles, was anders ist – evolutionär besteht sein Zweck daraus, uns vor Gefahren zu schützen. Unterm Strich heißt das fürs Marketing: Ungewohnte Formen, Designs und Konzepte erregen Aufmerksamkeit und bleiben hängen!
Nutzer mögen sich vielleicht schnell in herkömmlichen Webdesigns zurechtfinden, doch mit einem Design à la „Text neben Bild, 2-spaltiger Text, Block“ weckst du das Reptiliengehirn nicht auf!
Und auch wenn Scrollytelling mit Sicherheit kein völlig neues Konzept ist: Es bleibt immer noch die Ausnahme. Du fällst also definitiv auf, wenn du dir die Zeit nimmst, ein cooles Scrollytelling-Konzept zu erstellen!
Längere Verweildauer
Den Nutzer von deinem Angebot zu überzeugen, ist eine Herausforderung für sich. Aber keinesfalls die erste! Denn bevor du wirklich gute Überzeugungsarbeit für deine Dienstleistung oder dein Produkt leisten kannst, musst du erstmal gewährleisten, dass du die Aufmerksamkeit deiner potenziellen Kunden lange genug behältst.
Und schon hier scheitern viele. Irgendwie scheint man es nie richtig zu machen: Lässt man Informationen passiv auf die Nutzer herunterrieseln, bekommst du als Reaktion darauf meist eine erhöhte Absprungrate. In manchen Fällen steigt vielleicht auch die Verweildauer, aber das liegt vermutlich daran, dass der Nutzer vor deiner Webseite eingeschlafen ist. Anders gesagt: Passives Informationsaufnahme ist nicht besonders vielversprechend.
Doch wenn man die Nutzer was tun lassen will, um sie ein bisschen bei Laune zu halten – wie zum Beispiel Slider anklicken oder auf andere Unterseiten klicken – dann riskiert man gleich deren Überanstrengung.
Leicht verdaulich, aber interaktiv soll es sein. Keine leichte Aufgabe!
Die Zauberformel? Scrollen statt Klicken!
Abgesehen davon wirkt auch der andere Aspekt des Scrollytellings – das Storytelling – Wunder für die Verweildauer. Gutes Scrollytelling reißt den Nutzer in seinen Bann und leitet ihn flüssig durch die gesamte Erzählung. Er wird also nicht bei jedem Informationsschnipsel mit der Entscheidung konfrontiert: Mache ich weiter oder spring ich ab?
Auf diese Art kann die Aufmerksamkeitsspanne des Nutzers ungemein verlängert werden.
Achtung: Wichtig ist natürlich, dass die Neugier des Nutzers immer weiter angefacht wird. Wenn sich Nutzer langweilen, sind sie vom Scrollytelling schnell genervt – denn das Überspringen von Elementen oder das Überfliegen von einer Seite ist hier natürlich nicht so einfach.
Schau dir nochmal das Beispiel von Southvision an: Hier hast du unter anderem ein verspieltes Element, in dem sich Punkte zu einem Bild zusammensetzen. Genau mit dieser Art von Verspieltheit kannst du das innere Kind im Nutzer zufriedenstellen.
Erhöhte Aufmerksamkeitsspanne
In Geschichten geht es um Transformationen bzw. Veränderungen. Und diese Veränderungen kommen kausal zustande. In anderen Worten: Statt Informationen einfach aneinanderzureihen, bewirkt ein Ereignis das nächste.
Und auch das siehst du schön in unserem Beispiel: Direkt zu Beginn siehst du eine Sequenz, in der eine karge Büroeinrichtung zu einem trist dreinschauenden Mitarbeitenden führt, bis „Spaß und Harmonie“ die Szene in einen Party-Raum verwandeln.
Ein Fluss, eine Geschichte!
Und das ist für unser Gehirn gefundenes Fressen. Denn wir lernen seit unserer Geburt, dass die Welt nach dem Prinzip von Ursache und Folge funktioniert. Wir schmeißen das Glas auf den Boden – es zerbricht. Ich falle hin – mein Knie tut weh. Die Welt hat ein Problem – zukunftsorientierte Unternehmen finden eine Lösung.
Unbewusst suchen wir deshalb überall nach kausalen Zusammenhängen. Wenn eine Internetseite mithilfe von Scrollytelling genau das präsentiert, macht unser Hirn Luftsprünge und fühlt sich wieder bestätigt. Die Aufmerksamkeit deiner Nutzer ist dir sicher und deine Infos können tief und langfristig ins Gehirn eindringen.
Gezielte Aufmerksamkeitslenkung
Die Chunking Hypothese von George A. Miller besagt, dass wir Informationen viel besser als Häppchen, also in kleineren Informationseinheiten, verdauen können.
Und genau darüber hast du beim Scrollytelling die Kontrolle. Du kannst den Nutzer auf diese Art und Weise also etwas entlasten.
So kannst du dafür sorgen, dass Elemente nacheinander ins Bild fahren, dass jeder einzelne Benefit seinen Moment im Rampenlicht hat und dass die Informationen den Leser nicht als Textwüste erschlagen.
Genau diese Techniken benutzt auch die Southvision Agentur. Sie müssen sich keine Sorgen machen, dass die Subline unter der Überschrift ignoriert wird oder dass etwas von ihrem CTA-Buttom am Seitenende ablenken kann. Indem diese Elemente mithilfe des Scrollytellings einzeln eingespielt werden, bekommen sie ausreichend Aufmerksamkeit!
Scrollytelling: Darauf solltest du achten!
So, wir haben jetzt das Scrollytelling in all seinen schillernden Farben hervorgehoben. Doch es gibt auch die ein oder andere Einschränkung sowie wichtige Aspekte, die du berücksichtigen solltest, wenn du Scrollytelling verwenden möchtest.
Nur für Onepager
Beim Scrollytelling wird der Nutzer auf eine Reise mitgenommen und muss sich somit keine Infos selbst zusammensuchen. Der Vorteil: Weniger Chancen, um abzuspringen. Doch natürlich ist das nur möglich, wenn es nur einen Verlauf der Geschichte geben kann – also nur eine bestimmte Conversion und nur eine Customer Journey.
Für eine ganze Webseite lohnt sich Scrollytelling also nicht. Denn hier muss der Besucher individuell entscheiden, welche Leistungen oder Produkte ihn interessieren, ob er den Wissensartikel lesen will oder nur nach einer Kontaktmöglichkeit sucht.
Doch für Onepager, wo Geschichten in einem Fluss von oben bis unten erzählt werden können und auf ein bestimmtes Ziel hinlaufen, eignet sich Scrollytelling hervorragend. Ein Beispiel sind Landingpages für Ads-Kampagnen. Interessenten klicken auf den Link auf einem Ad, der sie anspricht, und landen auf einer Seite, in der es sich nur um das beworbene Produkt oder die beworbene Leistung auf dem Ad dreht. Auch Wissensartikel sind oft gut geeignet (klar, das Ganze kommt ja auch aus dem Journalismus).
Verweise zum Seitenbeginn
Weiter oben habe ich bereits darauf aufmerksam gemacht, dass den Nutzern durch Scrollytelling auch etwas Kontrolle genommen wird. Das kann gut sein, aber es kann auch zu Unmut führen. Wichtig ist deshalb, zumindest einen Verweis am Ende der Seite einzubauen, der Nutzer wieder zum Seitenanfang zurückbringt.
Ladegeschwindigkeit
Eine Seite, die auf einem Scrollytelling Konzept aufbaut, hat in der Regel ziemlich viele Bilder zu laden. Deshalb solltest du besonders hier auf Ladegeschwindigkeiten achten. Oft macht es Sinn, auf asynchrones Laden zurückzugreifen. Somit werden zunächst die Elemente geladen, die für den Nutzer sichtbar sind, bevor die restliche Seite lädt.
Die 13 besten Scrollytelling Beispiele
Neben dem von Southvision vorgestellten Beispiel, gibt es natürlich noch viele weitere coole Scrollytelling-Seiten im Netz. Die besten, die wir (Stand Februar 2022) zu Scrollytelling gefunden haben, möchten wir gerne einmal vorstellen. Hast du selbst ein cooles Scrollytelling Beispiel, das unbedingt in diese Liste muss? Dann schreibe uns eine Mail an kontakt@waldhirsch.de
ZDFHeute Stories:
ZDFHeute setzt regelmäßig auf Scrollytelling. Unter ZDFHeute Stories Scroll finden sich viele Beispiele. Besonders gut gelungen finden wir das Scrollytelling Beispiel über Corona Mutationen:
https://zdfheute-stories-scroll.zdf.de/corona-mutation/index.html
Cable TV – The Walking Dead:
Cable TV ist ein TV & Internetprovider aus den USA. Für die Vermarktung der neuen Staffel von „The Walking Dead“ setzten sie auf ein Scrollytelling der besonderen Art. The Walking Dead – Zombified. Da bekommen wir direkt Lust auf Binge-Watching:
https://www.cabletv.com/the-walking-dead
Histography:
Eine Art interaktiver Zeitstrahl über die Geschichte der Menschheit und Erde seit dem Urknall bis ins Jahr 2015. User können zwischen den Jahrzehnten und Ereignissen hin- und herspringen und sich spezielle Daten oder ganze Jahre ansehen. Das ist definitiv einen Blick wert:
SBS Radio – The Boat:
Aufbauend auf der Geschichte „The Boat“ von Nam Le hat der Radiosender SBS aus Australien im Jahr 2016 seine erste interaktive graphische Erzählung über eine Flucht aus dem Vietnamkrieg adaptiert. Eine spannende Geschichte zusammengefasst:
https://www.sbs.com.au/theboat/
WDR – Onkel Willi:
Nominiert für den Grimme Online Award 2015: Die Geschichte des münsteraner Musikanten Onkel Willi. WDR.de inszeniert die Geschichte des Eigenbrötlers auf einzigartige Weise. Das darfst du dir nicht entgehen lassen:
https://reportage.wdr.de/onkel-willi#8659
Joshworth:
Joshworth hat auf ganz besondere Art ein „tediously accurate“ (langweilig genaues) Modell des Sonnensystems entworfen. „If the moon were only one pixel“. Schau dir den Pixel an!:
https://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html
Kalso – The Organic:
Mit einem Scrollytelling beschreibt auch die Schuhmarke Kalso die Geschichte hinter ihrem original Wellness Shoe. Von der Entstehung 1905 bis ins Jahr 2021 hinein. Genauso durchdacht, wie das Konzept der Schuhe:
Evan Halshaw – The Bond Cars:
So viele Filme wie Frauen und auch Autos. James Bond hatte nie time to die und alle Autos, die der britische Gentleman bisher fuhr wurden von Evan Halshaw als Cars Evolution dargestellt. Ein sehenswertes Beispiel:
https://www.evanshalshaw.com/more/bondcars/c26.html
Every Last Drop:
Every Last Drop beschäftigt sich mit dem Wasserverbrauch in UK und wie man Wasser sparen kann. Das haben sie anschaulich und trotzdem unterhaltsam anhand eines Scrollytellings dargestellt. Schau dir hier die Facts rund um everylastdrop an:
Tagesspiegel – Radmesser:
Fahrradfahren und Großstadt? Nicht immer so einfach! Um auf die Probleme, Planungen und Lösungen aufmerksam zu machen, hat der Tagesspiegel einen interaktiven Radmesser mit allen Fakten rund um die Radwege in Berlin zusammengestellt. Radel drauf los:
https://interaktiv.tagesspiegel.de/radmesser/index.html
Les chariots Fenwick:
Ein tolles Beispiel für ein Scrollytelling aus Frankreich bildet das Musée virtuel Fenwick. Hier kann man die Geschichte des Chariots genau anhand eines Zeitstrahls verfolgen. Ein virtuelles Museum:
https://histoire-chariots-fenwick.fr/
Hollow – an ineractive documentary:
Die Bevölkerung in McDowell County, West Virginia ging durch viele Entwicklungen in den letzten Jahrhunderten. In der interaktiven Dokumentation „Hollow“ erzählt McDowell die Geschichte:
Spiegel Online – Die Pendlerrepublik:
Spiegel Online hat die Geschichte der Pendler in Deutschland aufbereitet und zeigt so detailliert wie noch nie, wie und waren die Menschen pendeln. Klick, einsteigen und ansehen:
https://cdn.www.spiegel.de/producing/wirtschaft/2018/pendler/v1/pendler.html
Schluss für Heute!
Scrollytelling ist multimediales Storytelling, dass eingesetzt werden kann, um Nutzer auf einer Seite zu behalten, sie zu überzeugen und sich bei ihnen langfristig einzuprägen. Auch wenn es einige Einschränkungen und Vorsichtsmaßnahmen zu beachten gibt, finden wir diese kreative Form der hirngerechten Informationsvermittlung ziemlich gelungen!
Jetzt würde ich gerne von dir wissen: Stimmst du uns zu oder bist du anderer Meinung? Was sind deine Erfahrungen mit Scrollytelling und konntest du hier etwas für dich mitnehmen? Hinterlasse gern ein Kommentar!
Auch über Fragen oder Anregungen zu weiteren Themen freu ich mich übrigens! 😊
Ähnliche Artikel
