Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Interactive Storytelling

Geschichten erzählen mit modernen Webtechniken

Interactive Storytelling

Mit modernen Webtechniken lassen sich beeindruckende multimediale Präsentationen erstellen. Aus Text, Bildern, Daten, Audio- und Video-Elementen entstehen so spannende Geschichten und Welten, die Leser interaktiv entdecken können. Die grundlegenden Techniken eignen sich auch für kleinere Projekte.

Am Anfang bestand das Web aus wenig ansehnlichen Texten, die auf andere Texte verwiesen. Seit der ersten Stunde wurde versucht, Webseiten medial anzureichern und interaktiver zu gestalten. Nach fast zwanzig Jahren Web-Geschichte ist es endlich möglich, beeindruckende Webseiten ohne Plugins zu entwickeln. Heutzutage stehen dafür leistungsfähige Webstandards und Browser zur Verfügung.

Zwar gibt es schon länger künstlerische Arbeiten und technische Demos, die Text, Grafik, Video und Audio geschickt kombinieren. Doch anspruchsvolle Webpräsentationen, die eine zusammenhängende Geschichte erzählen, sind etwas Neues. Das interaktive Geschichtenerzählen – Interactive Storytelling – ist im letzten Jahr vor allem durch Feature-Artikel und Reportagen im Online-Journalismus bekannt geworden, aber auch durch Produktpräsentationen. Diese Geschichten wollen informieren, unterhalten, aufrütteln oder schlicht verkaufen. Dabei sprechen sie die Neugier, den Spieltrieb und den Sinn für Ästhetik an.

Beispiele

Fünf Beispiele sollen die konzeptionellen und technischen Aspekte von Interactive Storytelling demonstrieren:

Snow Fall – The Avalanche at Tunnel Creek, Ende 2012

»Snow Fall« ist das bekannteste Beispiel. Die aufwändige Reportage der New York Times erzählt die Geschichte von 16 Freeskiiern, die in ein Lawinenunglück im Nordwesten der USA verwickelt waren. Der Text ist verwoben mit Illustrationen, Interviews, Steckbriefen und Fotogalerien.

Firestorm – The story of the bushfire at Dunalley, Mai 2013

Ebenfalls mit einer Naturkatastrophe beschäftigt sich »Firestorm«, eine Reportage der britischen Zeitung »The Guardian« über eine tasmanische Familie, die nur knapp einen verherrenden Buschbrand überlebt. Die Präsentation besteht aus mehreren Kapiteln, die in Screens aufgeteilt sind. Darin werden Text, Interviews, Naturaufnahmen, Fotos und Sounds gemischt.

Greenpeace: Into the Artic, seit März 2013

Die Greenpeace-Kampagne gegen Ölförderung und Industriefischerei in der Arktis ist im Stil einer Wissensdatenbank aufgebaut. Im Zentrum steht eine Karte, auf der Pfade, Standorte und Ereignisse verzeichnet sind, die mit Statusmeldungen und Artikeln verknüpft sind. Eine Geschichte ist die Reise des Greenpeace-Schiffs »Arctic Sunrise«, welches Ölbohrinseln ansteuerte. Die Medien berichteten jüngst über die Aktion, nachdem die russische Küstenwache das Schiff enterte und die Aktivisten festnahm.

National Geographic: The Serengeti Lion, August 2013

Das für spektakuläre Naturfotografie bekannte Magazin »National Geographic« liefert eine interaktive Tierdokumentation mit bildschirmfüllenden Foto- und Videoaufnahmen von Löwen im Serengeti-Nationalpark. Die Präsentation besteht aus 24 Galerien, die in keiner festen Reihenfolge stehen. Die Aufnahmen sind mit Originalgeräuschen unterlegt und werden durch zuschaltbare Audio-Kommentare und Beschriftungen ergänzt.

The Dangers of Fracking, 2012

Die kompakte Webseite der Interaktions-Designerin Linda Dong visualisiert die Funktionsweise der umstrittenen Ölabbau-Technik und zeigt deren Risiken auf. Geschickt wird das vertikale Scrolling eingesetzt, um die Geschichte fortzuerzählen.

Was ist das Neue an Interactive Storytelling?

Verschiedene Autoren sind sich einige, dass Interactive Storytelling im Web nichts fundamental Neues darstellt. Vielmehr handelt es sich um eine gekonnte und stimmige Kombination bekannter Elemente. Mit HTML5-Video und -Audio, Visualisierungstechniken wie Canvas und SVG sowie CSS-Animationen ist eine nahtlose Integration der verschiedenen Medien möglich. Mit JavaScript werden die Elemente zu einer interaktiven Präsentation verschmolzen.

Die gezeigten Beispiele sind interdisziplinäre Arbeiten. Interactive Storytelling vereint Recherche, journalistisches Schreiben, Fotografie, Filmproduktion – klassische journalistische und publizistische Arbeiten – mit Design und Programmierung fürs Web. Damit das Resultat in verschiedener Hinsicht überzeugt, sind gleichsam interdisziplinäre Teams nötig.

Nach dem phänomenalen Erfolg von »Snow Fall« und ähnlichen Veröffentlichungen wurde heiß diskutiert, ob dies nun die Zukunft des Journalismus sei. Die meisten Kommentare sind skeptisch: Wenige zeitaufwändige Multimedia-Features sind nicht in der Lage, genügend Werbeeinnahmen zu erzielen und Leser zu binden.

Es steht jedoch außer Frage, dass Interactive Storytelling das Web bereichern kann. Die gezeigten Präsentationen wirken auf verschiedenen Ebenen: Sie erzählen spannende Geschichten, machen Fakten zugänglichen, vermitteln Wissen, wecken Emotionen und appellieren an den Leser.

Typische Elemente

So zahlreich die Beispiele auch sind, es sind häufige Gemeinsamkeiten festzustellen. Die meisten Geschichten nutzen ein raumgreifendes, minimalistisches Design ohne Schmuckelemente. Anstatt die Inhalte in ein klassisches Layout mit Header, Footer und Seitenleisten zu zwängen, nehmen sie den gesamten Bildschirm ein und sprechen für sich. Dahinter steht ein Design-Trend, der Zurückhaltung und Reduktion aufs Wesentliche beinhaltet.

Auch wenn Text nur noch ein erzählerisches Element unter vielen ist ist, so gewinnt die Typographie an gestalterischer Bedeutung. Die verbleibende Schrift ist von Wichtigkeit und Aussagekraft, daher wird mit großen, fast bildschirmfüllenden Überschriften und Teaser-Texten sowie vergleichsweise großem Fließtext gearbeitet.

Das vertikale Scrolling ist eine bekannte Möglichkeit, um weitere Inhalte einer Webseite zu erreichen. Daher nutzen viele Präsentationen die Scrollfunktion, um zwischen den Kapiteln und Abschnitten zu navigieren. Manche Präsentationen wie das Fracking-Beispiel koppeln die Scrollbewegung gar an das Objekt der Erzählung, das vom Nutzer fortbewegt wird und damit die Geschichte vorantreibt.

Als visuelle Medien finden sich hochauflösende Fotos, Infografiken, Datenvisualisierung und Karten. Videos werden für informative Animationen, für Interviews oder zur Erzeugung von Stimmung genutzt. Tonaufnahmen sind zumeist O-Töne aus Interviews oder Hintergrundgeräusche zur Erzeugung von Stimmung.

Die Präsentationen entfalten ihr Potenzial dann, wenn sie Text, Bild und Ton miteinander sowie mit Zeit, Ort und Person verknüpfen. Beim Lesen des Textes wird beispielsweise das Beschriebene in einem Schaubild illustriert, ein Steckbrief des Protagonisten verlinkt oder der Ort des Ereignisses auf einer Karte fokussiert.

Was heißt Interaktivität?

Wenn hier von interaktiven Geschichten die Rede ist, so stellt sich die Frage, was das Erzählen interaktiv macht. Wie viel Entscheidungsfreiheit hat der Leser wirklich?

Zumeist bildet das Gerüst ein fortlaufender Text, der eine Geschichte mit klassischem Spannungsbogen erzählt. Dieser Text will linear von vorne bis hinten gelesen werden, hat allerdings Marginalien mit Zusatzinfos und eingebetteten Medien, die der Leser auch überspringen kann. Lorenz Matzat spricht deshalb von »Pseudo-Interaktivität«: »Man könnte bei vielen neueren ›interaktiven‹ Formaten schlicht von Slideshow 2.0 sprechen: Letztlich besteht die Interaktionen mit ihnen daraus, Abzweigungen zu nehmen, um die Erzählrichtung zu ändern oder in ein Thema tiefer einzusteigen.«

Doch es gibt auch Gegenbeispiele. Die Löwen-Aufnahmen von National Geographic haben keine lineare Struktur. Der Leser kann frei durch einen großen Fundus an verschiedenen Medien navigieren. Auch die Greenpeace-Publikation ist eher eine Wissendatenbank, die Ereignisse, Orte und Hintergrundinformationen verknüpft und zum explorativen Lesen einlädt.

Das erinnert an die ursprüngliche Idee des Hypertextes: »Jeder Leser komponiert den Gegenstand seiner Lektüre durch aktive Selektion der vorgegebenen Links. (…) Lesen ist nicht länger ein passiver Vorgang der Rezeption, sondern wird zu einem Prozeß der kreativen Interaktion zwischen Leser, Autor und Text.« (Hypertextualität im World Wide Web, Mike Sandbothe, 1996).

Storytelling: Klein anfangen

Die vorgestellten Beispiele sind sehr umfangreich und ausgereift, sollen aber nicht vom eigenen Experimentieren abhalten. Jedem Webentwickler ist es möglich, Geschichten zu erzählen. Ihr könnt einfach klein anfangen:

Zunächst einmal sucht euch Mitstreiter, deren Fähigkeiten sich ergänzen. Stellt ein Team zusammen, das verschiedene Bereiche wie Entwicklung, Gestaltung, Schreiben und Medienproduktion abdeckt.

Am Anfang der inhaltlichen Arbeit steht die Grundidee bzw. ein Thema. Der Hauptstrang und eventuelle Nebenstränge der Erzählung werden identifiziert. Welche Erzählperspektive(n) werden eingenommen? Welche Orte, Personen, Ereignisse und Daten kommen vor? Gibt es eine lineare Kapitelstruktur oder eine nichtlineare Navigation? Gibt es eine klare Absicht, gar einen Appell an den Leser? Wodurch wird eine Stimmung erzeugt, Lebendigkeit erreicht? Wie werden die Leser eingebunden?

Auf die Konzeptionsphase folgt das Sammeln von Texten, Bildern, Videos, Tönen, Gegenständen usw. Dabei können auch vorgefertigte freie Fotos, GIF-Animationen, YouTube-Videos, Vine- und Instagram-Bilder, Karten- und Kommentar-Widgets eingebunden werden.

Um die Grundstruktur der Erzählung zu skizzieren, eignet sich das aus der Filmproduktion bekannte Storyboard, auf dem die Materialien arrangiert und die Interaktionen angedeutet werden. Aus dem Webdesign sind Wireframes als Entwurfswerkzeug bekannt.

Technische Umsetzung

Für eine gelungenes Interactive Storytelling müssen verschiedene Techniken zusammengeführt werden. Die detaillierte Umsetzung des Beispiels »Snow Fall« erörtern der Artikel Snow Fall Breakdown und das Interview How we made Snow Fall.

Am Anfang steht ein HTML-Dokument, das strukturierten Text enthält, andere Medien einbettet sowie die Präsentation in Gang setzt. Neben der HTML5-Textstrukturierung können die video- und audio-Elemente zur direkten Einbettung von Video- und Audiodaten verwendet werden. Falls ein komplexer Player zur Steuerung nötig ist oder ein Flash-Fallback gewünscht ist, so hilft die Übersicht HTML5 Video/Audio Player bei der Auswahl.

Mittels CSS wird die Typographie und ein anpassungsfähiges Layout umgesetzt. Dafür können klassische Float-Layouts mit Media-Queries, aber auch das Flexbox zum Einsatz kommen. Für flüssige Übergänge und Bewegung sorgen einfache CSS3-Transitions sowie leistungsfähige Keyframe-Animationen, die von neueren Browsern hardwarebeschleunigt dargestellt werden. Bei der Erstellung von Keyframe-Animationen helfen die (kostenpflichtigen) Programme Adobe Edge Animator und Sencha Animator.

In den meisten Fällen ist JavaScript der Kleber, der alle Teile zusammenfügt und interaktiv werden lässt. Mit JavaScript wird zwischen den Kapiteln navigiert, Animationen werden angestoßen, Medien werden geladen und gesteuert. Die DOM-Bibliothek jQuery stellt eine gute Ausgangsbasis dar. Es ist ratsam, die Storyboard-Struktur in JavaScript-Code umsetzen: Der Code wird in Screens und Übergängen (Transitions) zwischen den Screens aufgeteilt. Darüber steht eine Logik, die die Screens verwaltet sowie den Initialisierungscode der Transitions und der Screens aufruft.

Für diese Zwecke kommen verschiedene jQuery-Plugins in Frage. Wenn die Präsentation auf das Scrolling reagieren soll, so eignen sich die Events scroll sowie mousewheel. jquery.inview feuert einen Event, wenn sich ein Element im Viewport befindet. Damit können automatisch Medien geladen und gegebenenfalls abgespielt werden.

Empfehlungen

Was macht das interaktive Geschichtenerzählen im Web erfolgreich?

Im Gegensatz zu vielen konventionellen Webseiten sollten Geschichten dezent statt aufdringlich sein, indem sie sich auf ihre Stärken fokussieren. Sie sollten die Neugier der Leser wecken und Entscheidungen ermöglichen. Dabei hilft eine klare Grundstruktur, z.B. ein fortlaufender Text. Gleichzeitig sollte es Seitenpfade geben, auf denen es viel zu entdecken gibt.

Zurückhaltung ist auch bei visuellen Effekten und Animationen angesagt. Insbesondere Scrolling- und Parallaxen-Effekte sind im heutigen Web allgegenwärtig, sodass Leser ihnen schon überdrüssig sind. Effekte sollten mit Bedacht als bedeutungsvolles Erzählmittel eingesetzt werden. Scrolling zum Beispiel ist eine Möglichkeit, um von einem Element der Geschichte zum nächsten zu springen. Es sollte nicht verwendet werden, um sämtliche Seitenelemente einfliegen zu lassen. Bewegung zieht Aufmerksamkeit auf sich, kann Kontraste erzeugen und Übergänge vermitteln.

Das Schreiben von Geschichten im Web ist wie gesagt eine Teamarbeit, die ein gemeinsames Verständnis erfordert. Alle Beteiligten können ihre Perspektive auf die Geschichte einfließen lassen.

Kommentare

Jeena
am 01.12.2013 - 10:55

Ich würde bei diesem Thema noch gerne auf WebGL hinweisen mit dem man super interaktive (3D) Grafiken machen kann die so eine Story noch zugänglicher machen können, als aktuelles Beispiel fällt mir da http://gravitymovie.warnerbros.com ein. Dort kann man sich das Space Shuttle, das Hubble Teleskop, die ISS und vor allem cool Tiangong, die Chinesische Raumstation wie sie in zwei Jahren aussehen wird, schwebend im 3D raum angucken. Und das ganze einfach im Browser ohne irgend ein plugin oder sonstiges Programm runterladen zu müssen.

Genauso könnte ich mir vorstellen dass man das Atomkraftwerk in Fokushima aufbereiten könnte um dem Leser ein Gefühl von der größe, etc. zu vermitteln.

Permanenter Link

nikosch
am 01.12.2013 - 23:04

Hmm, hätte nen Subtitel für diese Website: Die Rückkehr der Ladebalken. Allein für die Titelsequenz, die kaum mehr Informationsgehalt hat als ein einziges gutes HD-Bild, pumpt die Page mal eben 30MB durch die Leitung. Und auf den Spacewalk warte ich mit durchschnittlichem DSL erstmal bei bei Minimalmusik und schwarzem Screen Sekunde um Sekunde, bis ich dann endlich den Schließen-Button des Tabs finde.

Permanenter Link

Jeena
am 02.12.2013 - 16:27

Du kannst gar nicht wissen wie viel Informationsgehalt da drin ist wenn du es gar nicht ausprobieren konntest. Es ist ja nicht jeder mit einer langsamen DSL-Leitung unterwegs. Bei mir dauert es ca. 4 Sekunden und ich kann mir dann wie gesagt die einzelnen Stationen komplett in 3D anschauen. Mit etwas progressive enhancement kann man da sicher gut skalieren.

Permanenter Link

nikosch
am 01.12.2013 - 22:58

Diese Art des Story telling und die Ausbeutung von Scrolling- und Parallaxeneffekten als reines Stilmittel ist für mich jetzt schon das reinste Antipattern und verschwindet hoffentlich bald sang- und klanglos aus dem Netz. Die Bedienung solcher Seiten ist eine Zumutung, als Nutzer wird einem die Art und Reihenfolge des Informations-/Leseflusses aufgezwungen und je interaktiver die Sachen sind, umso mehr Ablenkung entsteht. Momentan der Gipfel der schlechten Themenseiten ist http://www.geheimerkrieg.de/ , keine Ahnung, warum darum so ein Bohei gemacht wird. Das Herumzoomen der Karte macht einen wahnsinnig, selbständig startende Fullsize-Videos in anderen Projekten sind allerdings auch keinen Deut besser. Aus meiner Sicht wird hier die Information dem reinen Stil-Effekt geopfert, sog. „Infografiken“ haben das ja im Grafikbereich bestens vorgemacht. Wir waren im Netz schon mal weiter mit Ansätzen zu Semantik und Barrierefreiheit. Anscheindend muss jetzt mal wieder ne runde Ecke durchs www getrieben werden, damit die Designer nicht arbeitslos werden.

Permanenter Link

Mathias Schäfer
am 03.12.2013 - 23:43

Der Kommentar geht meines Erachtens am Artikel vorbei. Was ich mit Storytelling überhaupt meine, scheinst du nicht zu würdigen.

Dass besagte Effekte mit Bedacht eingesetzt werden müssen, habe ich bereits angemerkt. Das ist nichts Neues, der sinnvolle Gebrauch von Animationen beschäftigt uns schon seit 15 Jahren, seitdem es im Browser mit Flash bzw. später mit JavaScript und CSS technisch möglich ist. Beim Interactive Storytelling werden z.B. Scrollinganimationen überwiegend mit inhaltlich-struktureller Bedeutung eingesetzt. Dies ist definitiv ein Fortschritt. Auch der Einsatz von Video ist meist inhaltlich wertvoll und eher zurückhaltend (z.B. Interviews, in denen einfach eine Person spricht, keine Schnitte, kein Kommentar aus dem Off usw.).

Dann behauptest du, die Reihenfolge der Informationen werde aufgezwungen. Das gilt für klassische Push-Medien und für lineare Online-Texte sowie z.B. YouTube-Videos. Mein Artikel dreht sich gerade um Websites, bei denen das nicht der Fall ist. Wie ich auch argumentiere, bekommen Informationen den nötigen Raum, werden kontextualisiert und können selbstgewählt navigiert werden.

Bei statischen, linearen angeordneten Inhalten gibt es zwar keine Ablenkungen, aber auch keine Verknüpfungen, Kontextinformationen und keine Interaktivität. Welche Organisationsform ich wähle, hängt von der Absicht meiner Erzählung ab. Die Bandbreite reicht von linearem Text ggf. mit Einschnitten, Marginalien und Overlays bis zu Hypermedia, einem freien Geflecht von Datenpunkten.

Es liegt mir nichts daran, über die vermeintlichen Schwächen einzelner Präsentationen zu diskutieren. In meinem Artikel habe ich Beispiele genannt, um an ihnen gelungene und bemerkenswerte Konzepte zu illustrieren. Ich hätte gehofft, dass Kommentare hier ansetzen. Gerade im Bereich der Datenvisualisierung gibt es enorme Fortschritte, die du in deiner Spitze gegen »Infografiken« zu ignorieren scheinst. Mein Artikel sollte ein Ansporn sein, sich ohne Vorurteile ernsthaft mit dem Thema auseinanderzusetzen.

Alles in allem schießt deine scharfe Polemik m.E. leider übers Ziel hinaus.

Permanenter Link

nikosch
am 02.12.2013 - 14:17

Schlaft Ihr noch oder sind hier nur positive Kommentare erwünscht?

Permanenter Link
Matthias Mees

Matthias Mees (Webkraut)
am 02.12.2013 - 14:39

Kommentare auf webkrauts.de werden erst nach redaktioneller Prüfung freigeschaltet, wie es auch in den Hausregeln steht. Auch die Redaktionsmitglieder haben im Dezember noch Arbeit auf dem Tisch, insofern kann es mitunter mal einen Moment dauern, bis ein Kommentar freigeschaltet wird.

Permanenter Link

nikosch
am 02.12.2013 - 21:00

Kein Problem. Danke für die Antwort + fürs Freischalten.

Permanenter Link
Henry Zeitler

Henry Zeitler (Webkraut)
am 03.12.2013 - 22:45

Ich finde Interactive Storytelling und/oder Bewegungsparallaxe im Webdesign durchaus ansprechend und legitim, wenn es gut und zweckmäßig umgesetzt wird. Es bildet einen netten Kontrast zu den braven, hochperformanten Seiten, die wir normalerweise coden und sehen. Wobei die Performanz nicht grundsätzlich an diesen Ansätzen scheitert, sondern eher am übermäßigen oder falschen Einsatz von Grafiken, Fotos und Videos, was dann wiederum die Herausforderung darstellt. Als positives Beispiel sehe ich http://www.rollingstone.com/feature/the-geeks-on-the-frontlines. Und hey, die ist sogar responsive (braucht aber auf dem Smartphone auch eine Weile) ;)
Permanenter Link

Jörg Hoewner
am 09.01.2014 - 10:06

Guter Beitrag, danke! Versuche das Thema gerade aus einer eher journalistischen bzw. kommunikativen Perspektive zu beleuchten: http://www.moderne-unternehmenskommunikation.de/digital-communications/d...

Permanenter Link

Die Kommentare sind geschlossen.