Scroll-Storytelling: Ihre Marke beim Erkunden der Website erzählen

Scroll-Storytelling entwickelt eine Idee, während Besucher die Seite erkunden. Eine hilfreiche Markenerzählung braucht eine echte Entwicklung, verständliche Erläuterungen und einen passenden nächsten Schritt. Dieser Leitfaden zeigt, wie Sie die Geschichte aufbauen, Szenen auswählen und ein Erlebnis vorbereiten, das den Menschen ihr eigenes Tempo lässt.

Redaktionelle Illustration: visuelle Komposition aus MV Design Konzepten
Redaktionelle Illustration: visuelle Komposition aus MV Design Konzepten

Beim Scroll-Storytelling entwickelt sich eine Geschichte, während Besucher durch eine Webseite scrollen. Aus einer Skizze wird ein Gebäude, ein Material verändert seine Form oder ein Vorgehen wird in mehreren Etappen sichtbar. Die vertraute Bewegung der Navigation verbindet die Szenen und gibt den Menschen Einfluss auf den Fortschritt.

Dieses Format ist sinnvoll, wenn Ihre Marke etwas zeigen und erklären kann. Weniger hilfreich ist es, wenn Bewegung eine noch fehlende Idee ersetzen soll. Entscheiden Sie zunächst, was Besucher verstehen sollen. Ordnen Sie anschließend Bilder und Erläuterungen um diese Erkenntnis herum an.

Eine Veränderung finden, die eine Geschichte verdient

Eine Scroll-Erzählung funktioniert besonders gut, wenn sie eine erkennbare Entwicklung enthält. Es gibt einen Ausgangspunkt, relevante Entscheidungen und ein Ergebnis, das durch die vorherigen Schritte verständlicher wird.

Die Veränderung muss nicht materiell sein. Ein Beratungsunternehmen kann darstellen, wie aus einer unübersichtlichen Situation eine geordnete Entscheidung entsteht. Ein Hotel kann den Zusammenhang zwischen seiner Umgebung, dem Empfang und dem Aufenthalt erklären. Es geht darum, eine Beziehung sichtbar zu machen, statt möglichst viel zu zeigen.

Beginnen Sie deshalb nicht mit einer Sammlung von Effekten anderer Websites. „Wir möchten drehenden Text und danach einen waagerechten Übergang“ ist noch keine Geschichte. Hilfreicher wäre: „Interessenten sollen verstehen, warum unsere Vorbereitung ihrem Projekt eine klare Richtung gibt.“

Diese Entscheidung setzt eine produktive Grenze. Wenn eine Szene die zentrale Aussage nicht weiterentwickelt, kann sie entfallen, auf eine andere Seite wechseln oder durch eine ruhige Fotografie ersetzt werden.

Die Perspektive der Besucher einnehmen

Auch eine Geschichte über Ihre Marke sollte auf Fragen Ihres Publikums eingehen. Wer lediglich die Reihenfolge interner Arbeitsabläufe übernimmt, zeigt möglicherweise viele Handgriffe, deren Bedeutung unklar bleibt.

Betrachten wir ein fiktives Beispiel: Ein Möbelhersteller möchte einen Tisch vorstellen. Das Team könnte jeden einzelnen Herstellungsschritt beschreiben. Käufer möchten aber vielleicht vor allem wissen, wie die Platte ausgewählt wird, weshalb die Verbindungen verlässlich sind und wie die Oberfläche in einem Raum wirkt.

Die Erzählung sollte daher diejenigen Schritte auswählen, die diese Fragen beantworten. Sie kann mit dem Material beginnen, ein konstruktives Detail hervorheben und mit dem fertigen Möbel im Raum enden. Weitere Arbeitsschritte können in einem ergänzenden Beitrag erläutert werden.

Vervollständigen Sie für jede Szene den Satz: „An dieser Stelle verstehen Besucher …“. Beschreibt die Antwort nur, dass etwas erscheint oder sich bewegt, fehlt der Szene wahrscheinlich noch eine inhaltliche Aussage.

Den roten Faden vor den Medien entwickeln

Ein Storyboard benötigt keine aufwendigen Illustrationen. Einige Notizen und Referenzbilder können ausreichen, um die Logik des Weges zu prüfen. Trennen Sie dabei, was gezeigt wird, was erklärt wird und was Besucher anschließend tun können.

EtappeFrage der BesucherWas gezeigt wirdWas verständlich bleiben soll
EinstiegWas werde ich entdecken?Eine erkennbare Situation oder ein ObjektThema und Zweck
ZusammenhangWarum ist diese Entscheidung wichtig?Eine Bedingung oder ein MaterialDie konkrete Herausforderung
EntwicklungWie gehen Sie vor?Eine Entscheidung oder VeränderungDie Logik des Vorgehens
ErgebnisWas verändert sich dadurch?Eine Nutzung oder GesamtansichtEine beobachtbare Folge
Nächster SchrittWohin kann ich jetzt gehen?Ein Projekt, eine Leistung oder KollektionDirekter Zugang zu Einzelheiten

Die Tabelle ist eine Arbeitshilfe, keine Pflichtstruktur. Ein Projekt benötigt vielleicht drei Etappen, ein anderes rechtfertigt mehr. Die Anzahl sollte aus der Geschichte entstehen und nicht aus dem Wunsch, die Seite umfangreich wirken zu lassen.

Prüfen Sie außerdem, ob das Ende das Versprechen des Einstiegs erfüllt. Eine Einführung über handwerkliche Qualität, auf die nur Stimmungsbilder folgen, lässt die eigentliche Erklärung offen. Wer eine Arbeitsweise kennenlernen soll, sollte sie nach dem Besuch in eigenen Worten beschreiben können.

Dem Text eine eigene Aufgabe geben

Text muss nicht wiederholen, was ein Bild bereits deutlich zeigt. Er sollte den fehlenden Zusammenhang liefern: eine Bedingung, eine Absicht oder den Grund für eine Entscheidung.

„Außergewöhnliche Präzision“ hilft wenig, wenn das sichtbare Detail nicht erläutert wird. Eine Beschreibung darüber, wie eine Verbindung unter der Tischplatte sichtbar bleibt und zur Silhouette beiträgt, schafft einen konkreteren Bezug. Natürlich muss diese Aussage zum tatsächlich gezeigten Produkt passen.

Lassen Sie wichtige Erläuterungen lange genug zugänglich. Niemand sollte eine sehr schmale Scroll-Position treffen müssen, um einen Satz erneut zu lesen. Längere Absätze können zwischen den visuellen Szenen in ruhigen Lesebereichen stehen.

Eine klare Hierarchie unterstützt die Orientierung. Die Überschrift benennt die Etappe, eine kurze Erklärung vermittelt ihre Bedeutung und ein Link ermöglicht die Vertiefung. Nicht jedes Element muss sich bewegen, um Teil derselben Geschichte zu sein.

Das Tempo gestalten, ohne die Navigation zu übernehmen

Die Dauer eines Films wird durch den Schnitt festgelegt. Das Tempo einer Scroll-Erzählung hängt zusätzlich vom Verhalten der Besucher ab. Manche gehen langsam vor, andere bewegen sich mit wenigen schnellen Gesten durch die Seite.

Die Geschichte sollte deshalb bei unterschiedlichen Geschwindigkeiten verständlich bleiben. Wichtige Momente müssen auch bei einem schnellen Durchgang erkennbar sein. Wer anhält, sollte lesen können, ohne automatisch zur nächsten Szene weitergeführt zu werden.

Wählen Sie die Scroll-Strecke nicht allein danach, wie eindrucksvoll die Animation aussieht. Fragen Sie bei jedem Abschnitt, ob er eine Information ergänzt oder nur eine Kamerabewegung verlängert. Ein schöner Übergang kann anstrengend werden, wenn er mehrere Gesten ohne neue Erkenntnis verlangt.

Besucher müssen die Sequenz außerdem verlassen können. Das Menü und praktische Angaben sollten zugänglich bleiben. Eine selbstbewusst angebotene Geschichte lässt sich mit direkten Wegen zu Leistungen, Projekten und Kontaktdaten verbinden.

Übergänge sollen Beziehungen erklären

Ein Übergang ist besonders hilfreich, wenn er einen Zusammenhang zeigt: Ein Detail gehört zu einem größeren Ganzen, aus einem Material wird ein Gegenstand oder eine Entscheidung führt zu einer bestimmten Nutzung. Bewegung trägt dann zum Verständnis bei.

Sind Szenen voneinander unabhängig, kann ein zurückhaltender Wechsel klarer sein. Wiederholte Änderungen von Richtung, Größe und Geschwindigkeit erzeugen zusätzliche visuelle Information, die Besucher erst einordnen müssen. Diese Komplexität hilft dem eigentlichen Thema nicht zwangsläufig.

In einem fiktiven Architekturbeispiel könnte der Wechsel vom Grundriss zum Gebäude eine gemeinsame Achse oder Orientierung behalten. So erkennen Besucher den Raum wieder, obwohl die Darstellung wechselt. Eine spektakuläre Bewegung, die diese Bezugspunkte umkehrt, kann die Erklärung dagegen schwächen.

Betrachten Sie auch den Rückweg. Ein Übergang, der vorwärts überzeugend wirkt, kann beim Zurückscrollen einen harten Anschluss zeigen. Beide Richtungen gehören zum Erlebnis und sollten vor der Freigabe endgültiger Medien geprüft werden.

Eine angenehme mobile Lektüre vorbereiten

Die Erzählung muss auch funktionieren, wenn jemand das Telefon hochkant hält. Dafür können andere Ausschnitte, versetzte Beschriftungen oder weniger gleichzeitig sichtbare Elemente notwendig sein.

Eine weite Landschaft auf dem Computer kann auf dem Smartphone zu einem isolierten Detail werden. In diesem Fall erhält eine ruhige Übersicht mit anschließender Nahansicht die Geschichte möglicherweise besser als ein automatischer Zuschnitt.

Achten Sie besonders auf den Text. Er darf nicht das Detail verdecken, das gerade erklärt werden soll. Er sollte auch dann nutzbar bleiben, wenn die Browseroberfläche den verfügbaren Platz verändert. Ein senkrechtes Layout allein genügt nicht; der Ablauf muss mit tatsächlichen Gesten ausprobiert werden.

Komfort schließt eine Wahl beim Bewegungseinsatz ein. WCAG behandelt das Abschalten nicht wesentlicher interaktiver Animationen. W3C. Kennzeichnen Sie im Storyboard die Ansichten, die das Projekt auch ohne Bewegungen erklären und den Zusammenhang zwischen den einzelnen Schritten erhalten.

Geschichte und technische Umsetzung getrennt beurteilen

Eine Seite kann sich flüssig bewegen und trotzdem eine verwirrende Geschichte erzählen. Sie kann ebenso eine gute Idee enthalten, deren Bilder zu spät erscheinen. Das sind verschiedene Probleme, die getrennt untersucht werden sollten.

Zeigen Sie das Storyboard zunächst als unbewegte Bilder. Fragen Sie eine Person außerhalb des Projekts, was sie daraus verstanden hat. Ist der Gedankengang bereits hier unklar, wird mehr Animation ihn nicht unbedingt erklären.

Prüfen Sie anschließend einen funktionsfähigen Prototyp mit repräsentativen Medien. Beobachten Sie die erste Anzeige, schnelle Richtungswechsel und den Wechsel zu weiteren Seiten. Wenn jemand zögert, suchen Sie nach dem Grund: Fehlt eine Information, wird ein Bild erwartet oder ist der nächste Schritt unklar?

So vermeiden Sie, jede Schwierigkeit mit derselben Maßnahme zu behandeln. Eine schnellere Animation ersetzt keine fehlende Erklärung. Zusätzliche Bilder verbessern keinen Weg, der für zu wenig Inhalt zu viel Scrollen verlangt.

Kontrollieren Sie auch, was zu sehen bleibt, wenn eine spätere Szene noch nicht bereit ist. Besucher sollten nutzbare Inhalte vorfinden, statt auf eine unerklärte Lücke zu stoßen, die wie ein Fehler wirkt.

Die Weiterentwicklung nach dem Start einplanen

Eine Markenerzählung muss sich mit Ihren Inhalten weiterentwickeln können. Benennen Sie die Bestandteile, die voraussichtlich geändert werden: Produkt, Projekt, Text, Sprache oder Einladung zum nächsten Schritt.

Fragen Sie, wie ein neues Bild eingesetzt wird und welche Anforderungen es erfüllen muss. Hängt ein Übergang von einem präzisen Bildausschnitt ab, kann ein improvisierter Austausch den Zusammenhang zerstören. Das später zuständige Team muss diese Abhängigkeit kennen.

Auch Sprachfassungen brauchen Vorbereitung. Eine Übersetzung kann länger sein und eine andere Textanordnung verlangen. Informationen, die in mehrere Sprachen übertragen werden sollen, sollten nicht ausschließlich in einem fertig gerenderten Video stecken.

Bewahren Sie Storyboard und Ausgangsmedien im Rahmen der vereinbarten Übergabe auf. Sie erleichtern spätere Änderungen und verringern die Abhängigkeit von der Erinnerung der Personen, die die erste Fassung erstellt haben.

Legen Sie zudem fest, wer Änderungen freigibt. Eine kleine Textkorrektur kann die Bedeutung einer ganzen Szene beeinflussen, insbesondere wenn diese eine technische oder gestalterische Entscheidung erklärt. Eine klare Zuständigkeit verhindert, dass widersprüchliche Aussagen zwischen Text und Bild unbemerkt bestehen bleiben.

Aus einer attraktiven Idee eine hilfreiche Erzählung machen

Scroll-Storytelling funktioniert, wenn es einer Aussage Ihrer Marke eine sichtbare Form gibt. Jede Etappe ergänzt eine Erkenntnis, der Text vermittelt Bedeutung und Besucher bleiben frei, die für sie wichtigen Informationen aufzurufen.

Beschreiben Sie vor der Beauftragung einer langen Sequenz zunächst die Veränderung, die Sie zeigen möchten. Wählen Sie einige Szenen aus, die diese Veränderung tatsächlich erklären. Damit besitzen Sie eine konkrete Grundlage für die gestalterische Diskussion.

Wenn Sie mit MV Design eine immersive Website erwägen, bringen Sie zuerst die Geschichte mit, die Interessenten verstehen sollen. Die Bewegung kann anschließend so gestaltet werden, dass sie genau diese Absicht unterstützt.

Weitere Denkanstöße