Best Practices zum Erstellen erfolgreicher Web Storys

Web Storys sind ein immersives Storytelling Format, bei dem Benutzer Inhalte antippen und mühelos teilen können. Web Storys werden mit Features aus einer Untergruppe des AMP Frameworks erstellt. Web Storys bieten Entwicklern und Publishern die Möglichkeit, ihren Content Benutzern in einem optisch ansprechenden, interaktiven Vollbildformat zu präsentieren, bei dem die mobile Erfahrung im Vordergrund steht.

Die kurzweiligen Web Storys kommen Lesern in ihren Micro Moments gerade recht. Das Warten auf die U-Bahn oder ein schneller Kaffee sind ideal für den Konsum verdichteter Inhalte. Befolge diese Best Practices für die Erstellung köstlicher Web Storys, um den Lesern unterhaltsame und einfallsreiche Häppchen servieren zu können.

Auf einen Blick

Hier sind die wichtigsten Erkenntnisse, die dir bei der Erstellung einer überzeugenden, kurzweiligen Web Story helfen:

• Erzähle eine abgeschlossene, interessante Geschichte.
• Maximiere die Wirkung deines Deckblatts mithilfe hochwertiger Bilder und eines prägnanten Titels.
• Setze visuelle Elemente wie Videos und Bilder ein, die auf den Bildschirm der Benutzer zugeschnitten sind und ihn ausfüllen.
• Du brauchst nicht viele Worte, um Vieles zu sagen, vor allem, wenn du Bildsprache zur Unterstützung verwendest. Versuche, pro Seite nicht mehr als 10 Wörter anzuzeigen.
• Wenn du Videos verwendest, halte sie kurz: möglichst unter 15 Sekunden.
• Je nach Person oder Situation wird die Story womöglich ohne Ton angesehen. Füge den Videos Untertitel hinzu, um den Inhalt allen zugänglich zu machen.
• Gib Lesern die Möglichkeit, sich durch die Story zu tippen. 10 bis 20 Seiten sind für die meisten Autoren ausreichend, um eine gute Story zu erzählen.
• Verwende nicht zu viele Animationen und Einbettungen und achte auf das Timing der Übergänge.

Kenne deine Erzählung

Plane die Einleitung deiner Story, baue einen Handlungsbogen auf und erschaffe eine runde Erzählung. Sobald du weißt, was du sagen willst, zerlege die Erzählung in Abschnitte. Jede Seite der Web Story sollte eine einzelne Idee vermitteln und zusammen mit den anderen Seiten ein schlüssiges Gesamtbild präsentieren.

Harmonische, ausfüllende Inhalte

Jede Web Story muss mindestens 4 Seiten umfassen und sollte im Idealfall nicht über 30 Seiten hinausgehen. Web Storys müssen gut erzählt und bekömmlich sein. Wenn deine Erzählung es verlangt, kannst du auch mehr als 30 Seiten erstellen.

Einladende Verpackung

Dein Deckblatt ist die Verpackung deiner Web Story. Es ist das erste, was deine Leser sehen – und das einzige, falls sie die Story nicht öffnen. Sorge also dafür, dass diese Verpackung einladend wirkt! Ein gutes Deckblatt besteht aus zwei Elementen: einem auffälligen Bild und einem kurzen, einprägsamen Titel.

Bildersprache

Verwende ein hochwertiges Porträtbild oder ein Video, das vollbildtauglich ist. Füge ein Favicon und ein Logo hinzu, um deinen Fans deine Marke näherzubringen.

Titel

Halte den Titel kurz und bündig, idealerweise nicht länger als 10 Wörter mit höchstens 40 Zeichen. Zeige die Namen von Autor und Werk an und gib das Veröffentlichungsdatum an, falls der Zeitpunkt der Story relevant ist.

Brand und Datum

Leser müssen wissen, wer die Web Story wann veröffentlicht hat. Platziere auf dem Deckblatt also den Markennamen und das Veröffentlichungsdatum. Das fördert das Vertrauen und – wenn dein Content die Leser überzeugt – Loyalität. Bei dieser Web Story von CNN über das Reisen in Italien erkennt man auf einen Blick, wer die Story veröffentlicht hat und wie aktuell sie ist.

Ein Augenschmaus

Locke die Leser mit hochwertigen Grafiken, die ihre Aufmerksamkeit fesseln, und mit Text, der schnell überflogen werden kann. Verwende möglichst hochwertige Videos und Bilder, setze aber auch gerne hier und da Animationen ein.

Alle Bilder und Videos sollten den gesamten Bildschirm einnehmen. Verwende Letterboxing nur dort, wo es unbedingt sein muss.

Video

Da Videos sehr einnehmend auf Leser wirken, solltest du möglichst viele in deine Web Story aufnehmen. Optimal sind Videos unter 15 Sekunden. Längere Video solltest du in kürzere Abschnitte unterteilen.

Web Storys werden im Hochformat dargestellt. Beachte daher Folgendes:

• Die Videos sollten nach Möglichkeit mit hochwertigen Mobilgeräten aufgenommen werden.
• Als Auflösung sollte 480p verwendet werden.
• Eine Framerate von mindestens 24 Frames pro Sekunde ist ideal.

Stelle sicher, dass deine Inhalte barrierefrei sind. Passe die Größe der Videos so an, dass du darunter Platz für Untertitel und Begleittext hast. Nicht alle Leser können oder wollen den Ton des Videos hören.

Bilder

Verwende Porträtbilder in Vollbild mit guter Auflösung (828x1792).

Vermeide Bilder im Querformat.

Zuschneiden mit Bedacht

Konzentriere dich auf das Wichtigste. Schneide überflüssige und ablenkende Elemente weg und sorge dafür, dass das Hauptmotiv des Fotos scharf und vollständig ist. Denke daran, dass der oberste und unterste Bereich auf einigen Geräten beschnitten werden könnten, und teste die Story entsprechend.

GUT	SCHLECHT
Dieses Bild ist so zugeschnitten, dass es zum Seiteninhalt passt und den zentralen Gedanken unterstreicht.	Bei diesem Zuschnitt ist unklar, wo der Fokus der Leser liegen soll und welchen Gedanken das Bild vermitteln will.

Text

Stelle sicher, dass der Text lesbar ist. Verwende mindestens eine Schriftgröße von 24, stelle die Schrift aber so groß und lesbar dar wie nur möglich. Schaffe einen Kontrast zwischen der Textfarbe und dem Hintergrund oder Bild der Story Seite. Füge keine Bilder oder Videos hinzu, die nur aus Text bestehen.

GUT	SCHLECHT
Durch den hohen Kontrast werden die Wörter sichtbarer.	Bei schlechtem Kontrast können Wörter und Bilder miteinander verschmelzen, was Lesern Schwierigkeiten bereitet, den Text zu lesen und der Story zu folgen.
Durch Hervorheben von Text können Wörter betont werden, was Lesern hilft, sich auf deine Story zu fokussieren.	Heller Text auf einem Bild mit vielen Elementen erschwert das Lesen.

Worthäppchen

Text sollte als Häppchen serviert werden, nicht als Drei-Gänge-Menü. Versuche, pro Seite nicht mehr als 200 Zeichen zu verwenden.

Gehe mit Einzelheiten um wie mit einer Liste von Zutaten: Stelle sie nur zur Verfügung, wenn Leser danach fragen. Füge Textinhalte in Langform im Seitenanhang ein. Seitenanhänge vermitteln den Lesern, dass zusätzliche Informationen verfügbar sind. Bei Interesse können diese auf ihren Geräten nach oben wischen.

Manchmal ist es nicht zu vermeiden, dass eine Seite Text mit mehr als nur einem Satz enthält. Versuche, solche Seiten nicht mehr als 10 % der gesamten Story einnehmen zu lassen.

GUT	SCHLECHT
Beschränke dich beim Text auf das Wesentliche. Mithilfe unterschiedlicher Schriftgrößen und -stile kannst du Textblöcke optisch unterteilen und das Überfliegen von Text erleichtern.	Ein großer Textblock wie dieser kann schwer zu lesen sein und Leser abschrecken.

Animationen

Animationen sind appetitanregend, wenn sie einen Zweck erfüllen und z. B. statischen Bildern Bewegung verleihen. Animiere Bilder und Elemente gerne mit Effekten wie Einfliegen, Rotation oder Einblendung.

GUT	SCHLECHT
Die Bewegung in diesem Beispiel unterstützt den Grundgedanken und bereichert die Seite um ein dynamisches Element.	Diese statische Seite ist funktionell, lässt sich aber die Gelegenheit entgehen, die Leser noch besser anzusprechen.

Bei Animationen ist jedoch Vorsicht geboten, da zu viele Effekte störend wirken können. Würze nicht übermäßig mit einem einzigen Aroma und gehe sparsam mit Animationen um.

Timing ist alles

Seiten sollten möglichst schnell ihren Endzustand erreichen (eine Animation sollte Benutzer nicht daran hindern, zur nächsten Seite zu blättern), aber nicht zu schnell! Es ist wichtig, die richtige Kombination aus Stil und Dauer zu finden. So sollten z. B. einfache Animationen weniger als 500 Millisekunden dauern, aber das Schwenken eines Hintergrundbildes sollte mehr Zeit in Anspruch nehmen.

Bei Bewegungseffekten ist Kreativität gefragt. Animiere mehrere Objekte in einer Sequenz, anstatt sie in einem einzigen Effekt gemeinsam zu bewegen. Jedes Element kann seinen eigenen Effekt und seine eigene Dauer haben und zusammen mit anderen Elementen eine in sich geschlossene Animation liefern.

Die richtige Balance

Finde die richtige Balance zwischen Animationsstil und Ästhetik deiner Story. Nimm die verfügbare Animationsbibliothek für Web Storys zu Hilfe, um einen Stil und eine Wirkungsstärke zu finden, die für dich geeignet ist, ohne dass die Elemente vom Inhalt ablenken.

Hunger nach mehr

Ermögliche deinen Lesern, das Thema weiter zu erforschen, indem du Inhalte von Drittanbietern einbettest, zusätzliche Informationen anhängst und zu externen Seiten verlinkst.

Strategisch einbetten

Einbettungen schaffen eine zusätzliche Dimension, wenn sie sinnvoll sind und auf angenehme Weise präsentiert werden. Füge relevante Inhalte zusammen mit der Einbettung ein, um sie zu einem integrierten Bestandteil der Story zu machen. Möglicherweise musst du die Interaktivität für deine Einbettung aktivieren.

GUT	SCHLECHT
Die Einbettung auf dieser Seite lässt sich gut in das restliche Layout integrieren. Die Überschrift, das Datum und die Hintergrundgrafiken tragen zur visuellen Darstellung bei.	Die Platzierung des eingebetteten Inhalts ohne weitere Elemente auf der Seite wirkt unfertig und lässt sich nicht gut in die gesamte Story integrieren.

Zusätzliche Inhalte im Anhang

Optimiere und rationalisiere deine Web Story, indem du dazugehörige Inhalte im Anhang anfügst. Auf diese Weise können die Leser selbst nachforschen, wenn sie mehr zu deiner Story erfahren möchten. Es erleichtert die Navigation für Leser, wenn zusätzliche Inhalte an die relevanten Seiten angehängt werden.

Anhänge eignen sich gut für lange Textblöcke. Wenn deine Story ein Highlight Video enthält, kannst du das vollständige Video als Anhang hinzufügen.

Links zu externen Seiten

Überall auf einer Web Story Seite können Links platziert werden. Wird ein Link angetippt, erscheint ein Tooltip, der Benutzern mitteilt, zu welcher Website sie weitergeleitet werden, und der die Bestätigung der Aktion abwartet, bevor die Story beendet wird.

GUT	SCHLECHT
Die Links auf dieser Seite sind deutlich gekennzeichnet und von verwandten Inhalten umgeben. Sie stören die Navigation durch die Story nicht.	Die Links auf dieser Seite blockieren die Navigation vollständig. Leser können nicht einfach zur vorherigen oder nächsten Seite wechseln.

Überdenke strategisch die Größe, Position und Häufigkeit von Links. Zu viele antippbare Elemente können die Navigation erschweren und die Leser frustrieren.

Reiner Code oder Bausteine

Web Storys können von Grund auf programmiert oder mithilfe von Design Tools kreiert werden.

Wenn du eine Web Story selbst programmierst, verwendest du dazu das AMP Framework. Die Grundlagen dafür findest du im Tutorial Erstelle deine erste Web Story. Stelle nach dem Erstellen deiner Web Story sicher, dass sie gültiges AMP verwendet. Dazu kannst du sie im AMP Validator testen. Weitere Informationen findest du im Abschnitt Technische Besonderheiten von Web Storys.

• Written by @CrystalOnScript