Die User Experience durch visuelle Elemente steigern

Storytelling im Webdesign: Dos und Don’ts
Kommentare

Das Web hat sich zum visuellen Medium gewandelt. Wurden früher aufgrund der Bandbreitenbeschränkung hauptsächlich textlastige Webseiten bevorzugt, wird heutzutage vermehrt auf die Ausdrucksstärke optischer Elemente gesetzt. Ein Trend, der sich heutzutage durchsetzt, ist das Storytelling im Webdesign.

Die Technik des Storytellings im Webdesign muss durch den Einsatz sämtlicher Medien eine logische und gleichzeitig emotionale Erzählung quasi aus dem Nichts erfinden – keine besonders leichte Aufgabe. Aber warum der ganze Aufwand? Schon immer war das Erzählen von Geschichten ein wichtiger Baustein menschlicher Kommunikation. Die Narrative haben durch die Visualisierung nichts von ihrer Anziehungskraft eingebüßt. Richtig eingesetzt können sie die User Experience des eigenen Internetauftritts enorm verbessern.

Der schwierigste Part beim Storytelling ist die Erzeugung einer kohärenten und linearen Erzählstruktur. Die Schilderung erfolgt nicht mehr von Person zu Person, sondern wird visuell umgesetzt. Dadurch ist der Nutzer in der Lage, an jedem Punkt die Ausführung willentlich zu unterbrechen. Im Storytelling ist es deshalb wichtig, vor der eigentlichen Erzählung, seine User genau kennen zu lernen.

Bevor mit der visuellen Konzeption begonnen werden kann, müssen zunächst Nutzerbefragungen, UX-Dokumentationen wie Personas und Storyboads sowie ausführliche Testings durchgeführt werden. Auch auf die Psyche der Anwender muss näher eingegangen werden. Nur wenn man weiß, wohin die Reise gehen soll, ist man in der Lage, die Narrative inhaltlich und optisch richtig umzusetzen.

Visuelle Narrative sorgen dafür, dass sich die Nutzer besser auf einer Webseite orientieren können, da sie komplexe Gehalte auf kleinsten Raum darstellen.

Psychologische Aspekte

Aber warum haben Bilder einen positiv Einfluss auf die Wahrnehmung der Menschen? Eine Antwort liefert der Picture Superiority Effect, der die Wirkung von Texten und Fotos untersucht. Wie Forscher herausgefunden haben, können wir uns nach dem Lesen von Fließtext einen Tag später nur an zehn Prozent des Inhalts erinnern. Werden die Aussagen hingegen optisch unterstützt, können wir uns sogar noch drei Tage später 65 Prozent der Gehalte ins Gedächtnis rufen.

Die These wird durch die Pavio Dual Coding Theory unterstützt. Sie besagt, dass wir uns Bilder besser einprägen können, da wir sie sowohl als verbale als auch visuelle Muster in unserem Kopf abspeichern. Ähnliches behauptet auch die Nelson Sensory Semantic Theory. Wir sind in der Lage, Unterschiede in Darstellungen eher wahrzunehmen als in geschriebenen Formulierungen. Der Effekt erlischt jedoch, wenn viele Fotos mit gleicher Aussage nacheinander gezeigt werden.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Aus den psychologischen Ergebnissen lassen sich einige Grundregeln ableiten (Infografik), die bei der Gestaltung einer visuellen Geschichte im Hinterkopf behalten werden sollten:

eindeutige-aussage-bild

Klare Aussagen generieren, Quelle: https://houseofborel.com

  • Klare Aussagen: Es sollten nur Fotos mit klarer Aussage verwendet werden, die eindeutig voneinander getrennt werden können. Je aussagekräftiger ein Werk ist, desto besser können sich die Nutzer daran erinnern.
  • Ein Konzept pro Bild: Ein Bild sollte einen Aspekt der Geschichte behandeln. Die verschiedenen Darstellungen müssen so ausgewählt werden, dass sie sinnvoll ineinander übergehen. Hierbei sollten Wiederholungen soweit es geht vermieden werden.
  • Text ist nicht verboten: Auch wenn es sich um eine optische Umsetzung handelt, muss auf Textbausteine nicht verzichtet werden. Sie können bestimmte Punkte und Bedeutungen hilfreich unterstützen.

Ein häufiger Fehler beim Storytelling besteht darin, Bullet-Points mit visuellen Elementen zu verwechseln. Sie sorgen dafür, dass Inhalte verständlicher dargestellt werden. Man sollte aber nicht den Fehler machen, sie deshalb als Ersatz für Fotos oder Videos zu betrachten.

Die Aufmerksamkeit der Nutzer

Ein weiterer wichtiger psychologischer Faktor, der nicht unterschätzt werden sollte, ist die Aufmerksamkeitsspanne der Nutzer. In der Regel dauert der Besuch einer Webseite nicht länger als 10 bis 20 Sekunden. Die Spanne kann aber durch die richtige Platzierung und Anordnung der inhaltlichen und optischen Elemente deutlich gesteigert werden. Große Textblöcke sind hier nicht von Vorteil. Visuelle Informationen können im Gegensatz zu textlichen Informationen 60.000 Mal schneller verarbeitet werden.

Und auch wenn es bis zu dreimal so lange dauern kann, die richtigen Dateien für die eigene Homepage zu finden, anstatt einen Fließtext zu schreiben, lohnt sich der Mehraufwand: 65 Prozent der Nutzer können sich an visuell unterstützte Inhalte erinnern – bei reinem Text sind es nur 10 Prozent.

Das beste Beispiel hierfür ist die Werbeindustrie. Sie vertraut seit Jahrzehnten auf eindrucksvolle Bilder und Illustrationen, um ihre Produkte und Ideen zu bewerben und zu verkaufen.

ad

Werbeplakat, © Shutterstock / lukeruk

Beim Storytelling handelt es sich im Prinzip um nichts anderes: Unabhängig vom Zweck der eigenen Webseite soll etwas angepriesen werden – und wenn es sich nur um eine vage Idee handelt.

Der richtige visuelle Auftritt

Jede Geschichte muss einzigartig und auf die Bedürfnisse der Marke und Wünsche der Nutzer zugeschnitten sein. Hierbei ist es besonders wichtig, darauf zu achten, dass die verwendeten Bilder auch in den Kontext der Erzählung passen. Zu Beginn sollten einige Fragen beantwortet werden:

  • Reflektiert das Bild die Persönlichkeit der Zielgruppe? – Wenn die anvisierte Zielgruppe beispielsweise in ihren Zwanzigern steckt, sollte man nicht auf Fotos von Senioren zurückgreifen.
  • Vertragen sich die Farben der Bilder mit dem Markenauftritt? – Setzt die Marke auf gedeckte Farben sollte man keine Darstellungen im Neon-Look verwenden.
  • Passen Bild und Webseite stilistisch zusammen? – Eine ernste Seite mit lustigen Fotos zu bestücken, ist nicht besonders sinnvoll.

Neben diesen drei grundlegenden Tipps, kann die eigene Geschichte durch weitere Schritte ausführlicher personalisiert werden:

personalisieren-storytelling

Storytelling personalisieren, Quelle: https://www.fitbit.com/

  • Individuelle Bilder erstellen lassen (wenn es das Budget zulässt): Kundenspezifische Illustrationen sind in der Regel günstiger als die Erstellung individueller Bilder. Aber oftmals lohnt sich der finanzielle Mehraufwand: Speziell für die Erzählung erstellte Fotos besitzen mehr Personalität als jedes Stockfoto.
  • Personen abbilden: Menschen identifizieren sich am leichtesten mit anderen Personen. Nicht ohne Grund wird in vielen Onlineshops die Ware an Models ausgestellt. Aber auch andere Produkte – wie zum Beispiel Fitnessartikel (fitbit) – werden auf diese Weise beworben.
  • Die Farbgebung des visuellen Designs auf die Bilder übertragen: Oftmals reicht es schon, ein Foto mit einer Farbüberlagerung im Stil des restlichen Designs zu versehen, um einen entsprechenden Effekt bei den Kunden zu erreichen.
  • White is beautiful: Der richtige Einsatz von Whitespace kann Wunder bewirken und die Aussage von Bild- als auch Textelementen unterstützen.

Mittlerweile gibt es eine Reihe von Alternativen. So ist es in der Regel konstengünstiger auf Illustrationen statt auf Bilder zurückzugreifen. Für manche Branchen ist es sinnvoll, auf Maskottchen für eine engere Kundenbindung zu setzen. In den letzten Jahren hat sich jedoch das HD-Background-Video zur populärsten Storytelling-Methode gemausert.

life-of-pi-hd-video

HD-Background-Video, Quelle: http://www.lifeofpimovie.com/

  • Die richtige Videolänge ist entscheidend: Ein Hintergrundvideo sollte den Usern innerhalb weniger Sekunden ein Gefühl für die Geschichte vermitteln. Hierbei ist es kein Problem, wenn es sich wiederholt (10 bis 30 Sekunden sind optimal). Wichtig ist, dass es scharf, klar und einfach zu verstehen ist.
  • Der Ton sollte ausgeschaltet sein: Das automatische Abspielen von Sounddateien war noch nie eine gute Idee – insbesondere auf Webseiten. Sollte sich das aber nicht vermeiden lassen, muss den Nutzern zumindest die Möglichkeit gegeben werden, den Ton selbstständig ausstellen zu können.
  • Schnelle Ladezeiten sind wichtig: HD-Videos sollten die eigene Homepage nicht ins Stocken bringen. Das Video kann noch so ansprechend sein: Lädt es nicht innerhalb von zwei bis drei Sekunden, werden die meisten Besucher es nie zu Gesicht bekommen.
  • Alternativen bereithalten: Für Geräte, die keine HD-Videos rendern können, sollten Alternativen bereitgehalten werden. Mit einem Blick auf Google Analytics kann schnell festgestellt werden, mit welchen Devices die Besucher die Webseite aufrufen. In der Regel sind statische Hintergründe eine sinnvolle Option.
  • Qualität zählt: Man sollte nicht mit der Brechstange versuchen HD-Videos in den eigenen Internetauftritt zu integrieren. Einfach irgendein Video auszuwählen, um dem aktuellen Trend zu entsprechen, ist selten von Erfolg gekrönt. Die Implementierung macht nur Sinn, wenn man auf hochwertiges Material zurückgreifen kann. Kinofilme (Life of Pi) können daher besonders stark von HD-Background-Videos profitieren.

Eine interaktive Geschichte erzählen

Eine fesselnde Geschichte muss nicht immer interaktiv sein, sondern kann auch mit nur einem Bild erzählt werden – wie es etwa Blackhouse.com tut. Das ist jedoch von Story zu Story unterschiedlich. Als Faustregel gilt: So viel wie nötig, wie wenig wie möglich. Wichtig ist es, dass die Erzählung überzeugt, sodass die Nutzer bereitwillig mir ihr interagieren und sie freiwillig mit anderen teilen.

ein-bild-geschichte

Eine Geschichte in einem Bild, Quelle: http://blackhouse.uk.com/

Eine gute Storytelling zeichnet sich durch fünf simple Regeln aus:

  1. Gute Geschichten sind simpel,
  2. emotional,
  3. glaubwürdig,
  4. authentisch,
  5. und für jedes Publikum geeignet.

Jede gute Geschichte hat einen Anfang, Mittelteil und Schluss – egal ob sie aus einem Bild besteht oder eine deutlich komplexere Handlung beinhaltet. Jeder der drei Abschnitte besitzt eine eigene Aussage. Sie beginnt damit, das Interesse der Nutzer zu wecken. Im mittleren Abschnitt folgt die Interaktion und am Schluss steht das Ziel der gesamten Erzählung.

Die Länge der unterschiedlichen Abschnitte variiert von Produkt zu Produkt und kann meistens nur durch ausführliche User-Tests und der Ausarbeitung einer Experience-Map klar festgelegt werden. Aber als Faustregel gilt: Der Anfang und der Schluss sind in der Regel kürzer als der Mittelteil.

Im Mittelteil wird die Geschichte erzählt. Was üblicherweise durch einen Erzähler erfolgt, wird im Webdesign durch visuelle Elemente umgesetzt. Hierzu gehören unter anderem die eingesetzte Sprache – einschließlich verwendeter Wörter sowie Satzstruktur -, das Erzähltempo als auch die Verknüpfung von Visualität und Intention. Die wichtigste Komponente bleibt jedoch der Nutzer:

  • Den User zum Charakter der Geschichte machen: Ein direkter Weg, um die Anwender an der eigenen Geschichte teilhaben zu lassen, besteht darin, sie zu Teilen der Erzählung zu machen. Die Personalisierung der Inhalte ist möglich durch Fragebögen oder komplexe Echtzeitdaten. Ein gutes Beispiel hierfür ist Slaveryfootprint.org:
    user-zur-geschichte-machen

    Den User zum Charakter der Geschichte machen, Quelle: http://slaveryfootprint.org/

  • Gamification: Die User zu Charakteren der Geschichte zu machen, kann durch Gamification-Elemente gestärkt werden. Sie belohnen den Nutzer für jeden gemachten Schritt und werden häufig in mobilen Apps eingesetzt. Nach der erfolgreichen Absolvierung einer Aufgabe können Punkte und Credits vergeben werden, um die Anwender bei der Stange zu halten – wie etwa auf Dropbox.com:
    gamification-dropbox

    Gamification, Quelle: Dropbox.com

  • Herkömmliche Aktionen interaktiv gestalten: Klicken und Scrollen tun die User heutzutage quasi automatisch. Die Aufgabe eines guten Storytellings besteht darin, solche herkömmlichen Gesten interaktiv zu gestalten. Um das Klickverhalten der User beeinflussen zu können, sollte die Überschrift fünf bis sieben Wörter umfassen und das dazugehörige Bild mit der Nachricht korrespondieren. Eine weitverbreitete Methode, um eine Geschichte während des Blätterns zu erzählen, ist das Parallax-Scrolling. Um eine solche Erfahrung den Nutzern liefern zu können, ist aber nicht immer eine voll ausgearbeitete Parallax-Webseite nötig. Oftmals reicht es schon, nur bestimme Bereiche auf der Homepage auf die Verschiebung der Bildschirminhalte reagieren zu lassen. Wie man das Parallax-Scrolling in die eigene Webseite einbinden kann, demonstriert Dangersoffracking.com eindrucksvoll.
    scrollen-parallax

    Herkömmliche Aktionen interaktiv gestalten, Quelle: http://www.dangersoffracking.com/

  • Visuelle Elemente auf Aktionen reagieren lassen: Das Erstellen optischer Elemente, die per Animation auf die Handlungen der User reagieren, schließt an die interaktive Gestaltung herkömmlicher Aktionen an. Neben dem Klicken und Scrollen kann eine visuelle Antwort auch nach komplexeren Aufgaben, wie zum Beispiel dem Ausfüllen eines Formulars, erfolgen. Ein besonders schönen Beispiel ist die Animation einer Katze mit Regenschirm auf Babeltheking.com, die den User beim Blättern durch die Inhalte begleitet:
    interaktive-elemente

    Visuelle Elemente auf Aktionen reagieren lassen, Quelle: http://babeltheking.com/

  • Easter Eggs: Manchmal ist es sinnvoll, Elemente auf einer Webseite zu integrieren, die nicht sofort präsent sind, sondern erst von den Anwendern entdeckt werden können. Das Aufspüren solcher Easter Eggs kann oftmals die Bindung zu den Besuchern erheblich stärken. Besonders profitieren können hiervon Gaming-Seiten (The Museum of Mario), Werbe- und Coupon-Aktionen oder auch fachspezifische Internetauftritte.
    easter-eggs-mario

    Der Einsatz von Easter Eggs, Quelle: http://mario.ign.com/

Fazit

Storytelling im Webdesing kann runtergebrochen werden auf eine simple Anweisung: Kohärenz. Eine gute visuelle Geschichte zeichnet sich durch eine gelungene Kombination erzählerischer, optischer und interaktiver Elemente aus, die zusammen ein harmonisches Ganzes bilden, das die Faszination der Nutzer auf sich zieht – und hierfür ist es wichtig, sein Publikum vor der eigentlichen Erzählung zu kennen.

Aufmacherbild: Paper cut of halloween via Shutterstock / Urheberrecht: jannoon028

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -