In 5 Schritten zum interaktiven Storytelling im Web

Interactive Storytelling ist ein mächtiges Werkzeug im Design. Gut erzählte Geschichten merkt man sich und gibt sie gerne weiter. Richtig eingesetzt führt es den Kunden gekonnt durch die Webseite und macht das Surfen zum Erlebnis – eine eigene interaktive Welt öffnet sich.

Geschichten waren schon immer ein wichtiges Tool, um zu unterhalten, zu erziehen und moralische Werte zu vermitteln. Heutzutage übernehmen Massenmedien die Funktion des Geschichtenerzählers und so auch das Web. Es ist Verteiler und Erzähler zugleich. Jonathan Gottschall beschreibt das Web sogar als «The Ultimate Weapon».

Eine gute Geschichte baut einen Spannungsbogen auf. Der Leser möchte wissen, was als nächstes passiert und wird so zum Weiterlesen animiert. Vergleichbar mit dem Lesen eines Buches springt der Leser von Kapitel zu Kapitel – liest es im Idealfall zu Ende und erinnert sich auch später noch an die Geschichte. Gute Web-Geschichten spielen mit Neugier, Ästhetik, gekonnter Animation und gut strukturiertem Inhalt.

Storytelling im Web ist nichts grundlegend Neues. Vielmehr ist es ein gekonntes Arrangement stimmiger, gut aufbereiteter Inhalte. Mit HTML5, SVG und CSS ist eine nahtlose Integration dieser Inhalte möglich.

Die Gestaltung der Online-Geschichten ist derzeit eher minimalistisch – Weißraum wird großzügig verwendet. Die Seite nimmt den ganzen Bildschirm ein, passt sich an verschiedene Devices an und arbeitet stark mit Typographie. Die Schrift verleiht der Seite Charakter, Stimme und Aussagekraft und wird zugleich zur Stimme des Erzählers.

Durch vertikales Scrolling navigiert der Leser durch die Geschichte. Inhalte reagieren auf Scrollbewegungen des Lesers und werden zu einem wichtigen Werkzeug des Erzählers.

Die Anordnung der Inhalte ist – im Vergleich zu gesprochenen oder geschriebenen Geschichten – nicht linear. Besucher steigen häufig über unterschiedliche Touchpoints ein, wie Suchmaschinen, Newsletter oder Social Media Kanäle. Darum ist es wichtig, dass sich der Leser schnell zurecht findet und sich orientieren kann. Die Inhalte sollten über die Überschriften, Navigation Labels, Breadcrumbs, Hyperlinks oder Button-Texte miteinander vernetzt sein und leicht zu navigieren. Der Besucher muss stets darüber informiert werden, was als nächstes passiert.

Im Web werden die einzelnen Informationen in leicht erfassbare Einheiten unterteilt. Eine tragende Rolle spielen dabei die Überschriften: Sie sollen den Inhalt des jeweiligen Abschnitts zusammenfassen und leicht lesbar sein, sodass ein Überfliegen der Seite möglich ist.

Geschichten entfalten ihr Potential, wenn der Text durch Bild, Ton, Video und Illustration ergänzt wird – also möglichst viele Sinne adressiert werden. Das freut nicht nur den Leser, sondern auch die Suchmaschinen. Und hier ein gutes Beispiele:

• «Snow Fall» der New York Times: Die Geschichte von 16 Freeskiiern, die im Nordwesten der USA in ein Lawinenunglück verwickelt waren. Dieser Beitrag gilt als einer der ersten, guten Interactive-Storytelling-Beispiele.

Bilder werden entweder eingesetzt um die Geschichte illustrierend zu unterstützen, oder um sie selbst zu erzählen. Haben Sie gewusst, dass Leser etwa 75 Prozent mehr Informationen über Bilder aufnehmen, als über andere Content-Arten? Der Einsatz von Icons und Illustrationen kann sowohl die Lesbarkeit verbessern als auch Abläufe darstellen. 

Eine schöne Variante, im Web eine Geschichte zu erzählen sind sogenannte One-Pager. Diese ermöglichen durch Scrollen ein durchgängiges Nutzererlebnis – besonders bei Produktseiten oder Unternehmensgeschichten.

Bei der Entwicklung von Websites muss deren Gebrauchstauglichkeit beachtet werden – im Fachjargon spricht man von «Usability». Diese ist eng mit dem Benutzungserlebnis, der «User Experience», verbunden. Digitale Produkte und Websites sollen den Besucher faszinieren und nicht zum Nachdenken bringen. Neben den objektiven Faktoren spielt eine ganze Reihe subjektiver Faktoren eine Rolle – wie Design, Emotion, Interaktion, Nutzererlebnis, Kontext oder Joy-of-Use.

Das Erleben und die Emotionen sind maßgeblich für die User Experience. Diese emotionale Ebene ist auch der Faktor, der eine Geschichte in der Informationsflut erinnerungswürdig macht. 

Beim Storytelling im Webdesign sind 3 Fragestellungen essentiell:

1. Wer ist meine Zielgruppe (Leser)? Wen möchte ich ansprechen?
2. Was sind die Ziele der Webseite? 
3. Was möchte ich vermitteln? Was ist der Sinn der Seite? Was möchte ich erzählen? 

Storytelling ist eine wirkungsvolle Methode, um ein Produkt oder eine Dienstleistung bedeutungsvoll zu machen. Das Web ist nicht mehr dieser gefühllose Raum, der es einst war. Die Kunden wollen wissen, mit wem sie es zu tun haben. Wer hinter einer Dienstleistung steht, woher die Ressourcen kommen, wie ein Produkt gebaut wurde und vielmehr: Sie wollen dran teilhaben. 

Das Web 2.0 bietet dem Kunden die Möglichkeit zu interagieren, zu kommunizieren, zu teilen und zu bewerten. Beliebte Instrumente sind Case Studies, Testimonials oder Trust Elemente.

Storytelling besteht nicht nur darin, eine gute Idee zu haben. Die Information muss gut aufbereitet werden – sowohl visuell als auch inhaltlich. Bilder und Illustrationen verhelfen zu schnellerem Erfassen und Verständnis. Umso genauer man sein Publikum kennt, desto exakter können Geschichten adressiert werden. Das Web bietet die ideale Umgebung Geschichten zu erzählen – mit Ton, Video, Text, Bild, Illustration und Animation.

Zurückhaltung ist vor allem mit Parallax- oder übertriebenen Scrollingeffekten gefragt. Der Nutzer wird dessen schnell überdrüssig und die Seite ist veraltet, sobald der Trend vorüber ist. Gut eingesetzte Effekte sind ein bedeutungsvolles Erzählmittel und übertragen den Look & Feel einer Seite.

«Amélie liebt die kleinen Dinge, die leisen Töne und die zarten Gesten. Sie hat ein Auge für Details, die jedem anderen entgehen, und einen Blick für magische Momente, die flüchtiger sind als ein Wimpernschlag.» Zitat aus dem Film: Die fabelhafte Welt der Amélie (Hoffmann 2010, S6)

Wie Amélie es so treffend beschreibt, sollte man auch beim interaktiven Storytelling den Zauber im Alltäglichen suchen – diese magischen Momente einfangen und durch Bewegung und Ruhe betonen. Andernfalls blieben sie in unserer hektischen Zeit wohl unseren Augen verborgen. 

------------

Quellen:

• dtelepathy.com/blog | 30 Compelling Examples of Visual Storytelling on the Web
• blog.usabilla.com | 10 Ways To Incorporate Storytelling In Web Design 
• webstandardssherpa.com | Storytelling in Web Design
• medani.at | Storytelling im Web – ein Portfolio an Möglichkeiten
• thenextweb.com | 10 Web design trends you can expect to see in 2015
• webkrauts.de | Interactive Storytelling