Scrollytelling: Intuitives, kreatives Design für alle

Das Storytelling-Konzept, bei dem Du entscheidest, wie Du die Story erleben möchtest

Scrollytelling macht Webdesigner*innen und Usern Spaß

Wer von Scrollytelling bislang noch nichts gehört hat, kann beruhigt sein: Dieses Designkonzept hat sich subtil und peu à peu entwickelt. Es entstand durch verschiedene Anwendungen, vornehmlich im World Wide Web. Typische Merkmale des Scrollytellings sind:

• Eine lange Geschichte, welche durch Scrollen und Animationen zu einem interaktiven Erlebnis wird.
• Audio- und visuelle Inhalte fügen eine tiefere Bedeutungsebene hinzu. Sie vermitteln, was mit Worten allein nicht erfasst werden kann. Auf diese Weise können auch Provenienzsammlungen (Datensammlungen) visuell ansprechbarer und verständlich dargestellt werden.
• Gut umgesetzt, präsentiert Scrollytelling die Details einer Story oder eines Produkts packend und/oder emotionalisierend: Auf diese Weise bleiben die User dran!
• Das Scrollen triggert Aktionen. Dies geschieht so intuitiv, dass sowohl digital Natives als auch digital Rookies damit auf Anhieb klarkommen.

Das Web ist ein Medium des Geschichtenerzählens. Die meisten Menschen arbeiten in einem Storytelling-Modus. Es ist die Art und Weise, wie wir Ideen umfassend kommunizieren und wie wir unsere Gedanken strukturieren. Ich habe noch nie einen großartigen Lehrer, einen großartigen politischen Führer oder einen großartigen Militärführer gekannt, der nicht auch ein großartiger Geschichtenerzähler war. Bildung ist ein Storytelling-Problem. Führung ist ein Storytelling-Problem. Letztendlich ein CIO zu sein ist ein Storytelling-Problem. Die meisten CIOs verstehen das jedoch nicht.

Brian Ferren

Scrollytelling wird immer beliebter – aus gutem Grund

Im Zeitalter des Informationsüberschusses sticht man im Internet-Meer der Individualisten mit einer visuell hochwertigen und authentisch erzählten Geschichte hervor. Sie triggert die Neugier, mehr zu erfahren, Inhalte zu entdecken und zu erleben. Wer wünscht sich dies nicht für den eigenen Webauftritt?

Art und Ausmaß der Interaktivität lassen sich immer spezifischer bestimmen und anwenden. Man kann zum Beispiel die Scroll-Richtung individuell anpassen. Das verleiht dem Beitrag mehr Dynamik.

Zudem machen ihn Gamification-Elemente zu einem angenehmen und kurzweiligen Erlebnis. Das gilt auch für faktenlastigen Content.

Weil sich Geschichten so wunderbar als universelle Träger von Informationen anbieten, ist es kein Wunder, dass Storytelling seit ein paar Jahren immer mehr an Schwung aufgenommen hat.

Darüber hinaus begünstigen viele neue Technologien die Weiterentwicklung dieses Design-Konzepts und das Erschließen neuer Anwendungsbereiche.

Schön, dass Scrollen so einfach ist

Die Stärken von Scrollytelling liegen in diesen zwei Besonderheiten: Scrollen

• ist eine über Jahrzehnte erlernte und somit natürliche Bewegung, die keinen besonderen Lern-Aufwand erfordert,
• vermittelt das Gefühl von Kontrolle beim Erforschen des Inhalts
• und sorgt für mehr Immersivität.

Scrollverhalten und Design

Ich stelle hier verschiedene Scroll-Möglichkeiten vor, die sich beim Scrollytelling etabliert haben und auf das Design der Story auswirken:

Kontinuierliches Scrollen

Diese ist eine der gängigsten Methoden, eine Geschichte durch die kontinuierliche Scroll-Bewegung zu erzählen. Verschiedene Techniken helfen, die Datenvisualisierungen fortwährend transformiert darzustellen. So können die User Tempo und Richtung selbst bestimmen, mit denen sie diese Geschichte erleben möchten. Das verbessert die User-Bindung.

In Schritten scrollen (Step-by-Step)

Ähnlich wie bei einer Diashow aktualisiert sich das visuelle Material bei jedem Schritt. Diese Technik erleichtert die Navigation, wenn sie mit einem Zusatzmodul zur Veranschaulichung des geschichtlichen Handlungsverlaufs versehen ist. In Schritten kann man die gesamte Seite recht schnell durchklicken bzw. erleben.

Als Auslöser Scrollen

Um die Aufmerksamkeit der User effektiv zu lenken, lässt sich Scrollen mit dem „Auslösen einer Aktion“ koppeln. Beispiele dafür sind: eine Animation aktivieren, ein Video abspielen, Daten in der Visualisierung hervorheben. Bei diesem Scroll-Verhalten verlieren die User einen Teil ihrer Kontrolle. Nutze diese Funktion daher fokussiert und überrasche sie dabei positiv! Dann bleiben sie gern dran.

Gemischtes Scrollytelling

Man kann auch eine gemischte Tüte mit allem bestellen: Eine Geschichte kann durch verschiedene Scrollytelling-Techniken komponiert werden. Während des Scrollens präsentiert sich Bildmaterial, starten Videos und Animationen, und die User klicken sich durch die Story wie durch eine Diashow – vielleicht sogar alles gleichzeitig. Klug eingesetzt, ist der Effekt stark.

Unterschiedliche Designs des Scrollytellings

Gerade weil es so viele Gestaltungsmöglichkeiten gibt, sollte man diese zwei Kategorien unterscheiden:

Visuelle Geschichten

Wird eine (chronologische) Geschichte überwiegend durch visuelle Darstellungen vermittelt, ohne direkten Datenbezug, bezeichnet man das als visuelle Geschichte. Günstig, aber keine zwingende Voraussetzung:  eine logische Abfolge. Ganz wichtig: thematisch bezogene Design-Elemente, die aufeinander aufbauen und ansprechend dargestellt werden.

Beispiel: Proud and Torn. Besondere Merkmale: angepasste Scroll-Richtung, grafisch aufbereitet, historische Jahreszahlen im Menü als Navigationshilfe.

Narrative Visualierung

Das datenbezogene Pendant nennt sich narrative Visualisierung. Sie unterscheidet sich von der visuellen Geschichte durch eine strikt logische Abfolge datenbezogener visueller Elemente.

Beispiel: Unser Sonnensystem. Besondere Merkmale: horizontale Scrollrichtung; das Scrollen veranschaulicht, welche Distanz man in Relation zum dargestellten (Welt-)Raum zurücklegt.

Scrollytelling – dies sind meine Lieblingsbeispiele

Dies sind die coolen Seiten, die ich so auf meinem Streifzug gefunden habe und gern hervorheben möchte:

• Huffington | Thema: Inequality | Design: Line-Art als „Roter-Faden“ + Ton. Das Thema Ungleichheit ist aktueller denn je und durch den roten Faden perfekt in Szene gesetzt. Lauscht einem Auszug aus den vom Host bereitgestellten Inhalten!
• I am Binadam | LGBTQ+ Tansania | Design: Art Overlay Animation. Dezent gestaltete Überblendungen im illustrativen Stil erzählen die verschiedenen Facetten des Queerseins in Tansania.
• Readymag | Thema: Designer Kazumasa Nagai | Modern, schlicht, stark.
• Kalso | Thema: Geschichte von 1905-2021 | Retro mit wechselnden Animationen.

Fallstricke beim Scrollytelling

Bei jedem Scrollytelling-Feature kommt es darauf an, Nutzen, technischen Aufwand und erforderliche Ladezeiten gegeneinander abzuwägen. Dies hilft bei der Auswahl der schier unendlichen Möglichkeiten des Scrollytellings. Sind Features und Ressourcen nicht effizient eingesetzt, wirkt die Geschichte in ihrer Erzählweise schlecht. Hakelt das Scroll-Verhalten, ist es nicht verständlich oder intuitiv genug, müssen viele Grafiken oder Animationen geladen werden, dann bedeutet dies eine negative Nutzungserfahrung. Und Scrollytelling will und soll ja genau das Gegenteil davon erreichen!

Viele Bilder? Dann asynchron laden!

Im Scrollytelling ist meist viel Content in sehr vielen Bildern verpackt. Die wiederum müssen geladen und positioniert oder animiert werden. Um stockendem Tempo entgegenzuwirken, kann man asynchron laden. Das bedeutet, dass der Content verfügbar ist, den die User gerade auf dem Bildschirm sehen, und sich der Rest später lädt. Dies erspart frustrierende Wartezeiten, die entstehen, wenn sich der Content komplett auf einmal lädt.

Achtung, Plug-ins haben auch Nachteile!

Lösungen für lange Ladezeiten können später selbst zu einem Problem werden. Das zeigt sich insbesondere bei der Pflege von vielen Plug-ins, wenn durch Automatismen benutzerdefinierte Einstellungen gelöscht und manuell wiederhergestellt werden müssen. Darum: Optimierungen per Plug-in möglichst kompakt halten. Hier kommt es nicht auf Quantität, sondern auf Qualität an.

Provenienzsammlungen

Provenienz (von lateinisch provenire „herkommen“) bezeichnet allgemein die Herkunft einer Person oder Sache. Und eine Sammlung dieser Daten, nennt sich Provenienz-Sammlung. In wissenschaftlichen Arbeiten ist es von grundlegender Bedeutung, reproduzierbare und transparente Ergebnisse effektiv zu kommunizieren. Um dies zu erreichen, werden daher in letzter Zeit einige Visualisierungstools mit Datenaufzeichnungssystemen ausgestattet und in die Analyseworkflows und Designprozesse integriert. Damit können User aus dem Visualisierungsprozess abgeleitete Daten vor allem verstehen, aber auch verwalten, überprüfen und wiederverwenden.

Zahllose Features und Tools fürs Scrollytelling

Scrollytelling findet man vornehmlich im Web. Daher sind die Möglichkeiten der Umsetzung dieses Konzepts so vielfältig wie das Web selbst. Auswahlkriterien für die Features sind:

• Anwendungsgebiet,
• Aufwand,
• Nutzen und
• Wirkung.

Möchtest Du auf kreativste Weise ein Bild einblenden? Die Typo so schräg und groß animieren, wie es ins Bild passt? Einfach ein Video abgespielen? Welche Werkzeuge sind nützlich, wenn Deine Geschichte einen Erzähl-Charakter bekommen soll?

Dies ist eine Auswahl gängiger Tools für die Planungs- und Umsetzungsphase:

Wisemap

Wisemap nutzt die Methoden, die jede gute Mindmap mitbringt, und ist ein visuelles Tool, um komplexe Gedanken, Ideen und Assoziationen in einem zentralen Thema oder Begriff darzustellen.

Storyform

Storyform ist ein Plug-in zur Erstellung von ersten Geschichts-Drafts in Form von Text und Bild, kostenlosen und responsiven Templates mit WordPress-Anbindung.

Shorthand

Die Plattform Shorthand erlaubt nicht nur Designer*innen und Entwickler*innen, sondern auch Autor*innen, Redakteur*innen und Marketingleuten, auf der Basis zahlreicher Templates Scrollytelling-Seiten zu erstellen.

Im digitalen Raum existiert kein Stein, den man meißeln kann…

Im Webdesign entwickeln sich digitale Trends passend zu den Real-Life-Trends. Neue Technologien machen das Scrollytelling immersiver und plattformübergreifender. Man greift auf immer mehr miteinander verbundene Ressourcen zurück, die Methoden und Techniken miteinander verschmelzen (Metaverse).

Während ich diesen Blog-Artikel schreibe, entstehen Subgenres dieses Designkonzepts, werden getestet, angewendet etc.

Möchtest Du heute ein Produkt ansprechend und immersiv verpacken, stehen Dir unendlich viele getestete und erprobte Möglichkeiten offen.

Liegt der Fokus auf dem Spaß am Erleben der Seite, ist es sinnvoll, die Ressourcen-Frage in regelmäßigen Abständen immer wieder aufzubringen. Denn: Wird eine Seite zu groß und benötigt zu lange, um Inhalte zu laden, ist die Geschichte dahinter irrelevant, und die User werden abspringen.

Ist Scrollytelling was für Dich?

Meine Antwort ist ein definitives Vielleicht!

Die Vorteile sind schlichtweg:

• die Unverwechselbarkeit eines solchen Auftritts,
• bei richtiger Umsetzung: der bleibende Eindruck,
• originelle, positive Produktpräsentation,
• Spaß, wiederkehrende Besuche, längere Verweildauer.

Die Nachteile:

• Aufwand bei der Erstellung,
• anspruchsvolle Pflege.

Mögliche Lösungen:

• Per One-Pager oder Micro-Site den Aufwand vertretbar machen,
• die Träger-Plattform sinnvoll auswählen.