Fünf Schritte, um Ihr Produkt mit aussagekräftigem Storytelling zu gestalten

Ich kann mir die digitale Welt ohne den Zauber des Geschichtenerzählens, des Storytelling nicht vorstellen. Ich betrachte das Geschichtenerzählen zwar als Kunst, aber es ist auch eine Disziplin, die ihre Wurzeln im antiken Griechenland und in den Schriften des Aristoteles hat: Poetik:

“Eine ganze [Geschichte] ist das, was einen Anfang, eine Mitte und ein Ende hat.

In diesem Essay identifizierte der griechische Philosoph zum ersten Mal die drei Hauptbestandteile einer Geschichte: Anfang, Mitte und Ende, und wie sie jeweils zueinander in Beziehung stehen.

Fünf Schritte, um Ihr Produkt mit aussagekräftigem Storytelling zu gestalten

“Ein Anfang ist das, was nicht notwendigerweise nach etwas anderem kommt, und was natürlich etwas anderes nach sich hat. Ein Ende ist das, was von Natur nach etwas selbst ist, entweder als dessen notwendige oder gewöhnliche Folge und ohne etwas anderes nach ihm. Und eine Mitte ist das, was von Natur aus nach einer Sache ist und auch eine andere nach ihr hat.”

Die Drei-Akt-Struktur von Aristoteles zum Storytelling ist seit 300 v. Chr. unverändert geblieben. Obwohl viele Schriftsteller, Drehbuchautoren und Filmregisseure eine Vielzahl komplexer Experimente durchgeführt haben, weichen die erfolgreichsten Geschichten nie von diesem Grundgerüst ab.

Heute verwenden Designer dieselbe Struktur, um die Erfahrungen der Nutzer zu erfassen und nutzerzentrierte Produkte zu entwerfen. Ein bemerkenswertes und einprägsames Beispiel für die Macht des Geschichtenerzählens ist der Wechsel in der Kommunikationsrichtung von Apple nach der Rückkehr von Steve Jobs. Er hatte eine Zeit lang Pixar geleitet, und seine Erfahrungen mit den Geschichtenerzählern des Unternehmens waren ausschlaggebend für das, was als Nächstes bei Apple geschah: die Überzeugung, dass man mehr Computer verkaufen würde, wenn man sich auf die Bedürfnisse der Kunden konzentrierte und sich ihre Geschichten zu eigen machte. (Das taten sie natürlich auch!)

Designer können jedoch nicht allein durch die Anwendung der Drei-Akt-Struktur von Aristoteles zu guten Geschichtenerzählern werden. Wir müssen auch spezifische Elemente des Geschichtenerzählens identifizieren, die uns bei der Entwicklung unserer Erzählung helfen.

In den folgenden fünf Schritten werden wir jedes der verschiedenen Elemente des Geschichtenerzählens angehen, mit einem laufenden Beispiel des Ansatzes, der beim Storytelling verwendet wurde, um das Erlebnis und die Schnittstelle hinter der Landing Page für den Videokurs.

Schritt 1: Verstehen Sie Ihren Protagonisten und den Zweck des Produkts

Als Designer von Erlebnissen müssen wir schöne Schnittstellen schaffen, die sinnvolle Interaktionen mit unserem Publikum ermöglichen. Bevor ich mir also das Layout der Landing Page vorstellen konnte, musste ich eine Antwort auf eine entscheidende Frage finden: Wer ist unser Protagonist?

Der Protagonist ist der Held unserer Geschichte. In der Geschichte geht es also nie um das Produkt, das wir verkaufen. Es geht immer um den Protagonisten, der die eigene Interaktion des Publikums mit diesem Produkt widerspiegelt.

Um also die erste Frage zu beantworten, müssen wir die Bedürfnisse, Ziele, Ängste und Frustrationen unserer Protagonisten kennen. Dies ist die Regel Nummer eins für jeden UX-Designer, genauso wie für jeden Geschichtenerzähler.

Wenn Sie Erkenntnisse über Ihren Protagonisten benötigen, können Sie mithilfe einer Reihe von Fragen eine höchstwahrscheinliche Persona herbeizaubern. Wenn das Produkt bereits auf dem Markt ist, können Sie andere Forschungsinstrumente wie Usability-Tests oder Heatmaps verwenden. In meinem Fall hatte Vitaly Friedman, der Erfinder des Videokurses, seine Zielgruppe bereits im Vorfeld identifiziert, und zwar während der Workshops und Konferenzen, die er im vergangenen Jahr besucht hatte. Storytelling heisst also sich im Vorfeld einige Gedanken machen.

Wenn man sich die Videokapitel des Kurses ansieht, versteht man, dass die Protagonisten unserer Geschichte UX- und UI-Designer mit einem Anfänger- bis fortgeschrittenen Wissensstand über Design und Interface-Design-Muster sein würden.

Die Frustration dieser Protagonisten besteht in der Regel darin, dass ihnen die Zeit zum Forschen und Lernen fehlt. Insbesondere diejenigen, die versuchen, sich die Welt des UX-Designs vollständig zu eigen zu machen, möchten Designmuster schnell erlernen, damit sie herausfinden können, warum ein Muster eine bessere Erfahrung bietet als ein anderes. Andererseits hat eine erfahrenere Zielgruppe nicht die Zeit, sich zwischen den Projekten über die neuesten UX-Best-Practices auf dem Laufenden zu halten.

Die Protagonisten unserer Geschichte: UX- und UI-Designer (und Studenten) mit grundlegenden bis mittleren Kenntnissen über Entwurfsmuster.

Die Bedürfnisse und die Geschichte unserer Protagonisten definieren daher den Zweck unserer Geschichte: Warum ist diese Geschichte für sie wichtig?

Das Warum der Geschichte zu definieren, ist immer ein schwieriger Schritt beim Geschichtenerzählen. Er wird erst dann einfach, wenn Sie Ihren Protagonisten gut kennen. Das Publikum wird nur dann bei der Stange bleiben, wenn die Geschichte bei ihm Anklang findet. Außerdem ist eine Geschichte ohne ein klares Ziel verschwommen und irrelevant, daher muss die Absicht der Geschichte im Voraus definiert werden.

Neu artikulieren Simon Sinek‘s Goldener Kreis. Eine glaubwürdige Geschichte muss den Zweck ihrer Existenz kennen, d. h. das Problem des Publikums, das sie zu lösen versucht (warum), was sie von anderen unterscheidet (wie) und am Ende das Produkt und die Dienstleistung, die sie zur Lösung des Problems verkauft (was). Storytelling muss Sinn machen.

So sieht der Goldene Kreis aus, wenn er auf das Erlebnisdesign für die Landing Page angewendet wird:

Warum ist diese Geschichte für sie wichtig? Finden Sie immer den Zweck Ihrer Geschichte.

• Das Warum unserer Geschichte knüpfte an die Frustration unserer Protagonisten über den Mangel an Zeit an. In unserer Geschichte geht es also erstens darum, zu vermitteln, dass Lernen eine Investition ist. Zweitens werden sie durch Vitalys eigene Erfahrung und Forschung Zeit und Mühe sparen.
• Das Wie reflektiert ihre Lernziele und hält sie auf dem Laufenden: Wenn sie wissensdurstig sind, werden sie zufrieden sein.
• Das Was ist eine Reflexion über das WARUM und WIE. Wir möchten, dass die Leute den Videokurs erst abonnieren, nachdem sie seine Vorteile bewertet und das Material probiert haben (indem sie einige wertvolle Funktionen während der Navigation mit Vorschau-Funktionen, zusätzliche Geschenke und überzeugende Elemente wie Testimonials).

Der Protagonist und das Ziel sind die Elemente, die uns zum nächsten Schritt unserer Erzählung führen: die Handlung.

Schritt 2: Definieren Sie die Struktur Ihrer Erzählung

Aristoteles lehrt uns, dass Geschichten eine Kette von Ursache-Wirkung-Momenten sein müssen. Jede Szene muss zu dem führen, was als Nächstes passiert, und darf nicht als eigenständige Episode funktionieren, ganz gleich, wie attraktiv und gut ausgeführt sie ist. Denken Sie daran, dass die Handlung auch einen Anfang, eine Mitte und ein Ende haben muss. Storytelling kann so einfach sein, wenn diese drei Elemente beinhaltet sind.

In seinem Buch, “Building a Story Brand” untersucht Donald Miller die Ursache-Wirkungs-Struktur wie folgt: Eine Protagonistin hat ein Ziel, stößt aber bei ihrer Suche auf ein Problem. Während ihrer Reise tritt ein Führer in ihr Leben und zeigt ihr einen Plan, der sie zum Handeln auffordert. Indem sie handelt, vermeidet die Protagonistin ein Scheitern und beendet ihre Geschichte mit einem Erfolg. Er nennt diese Struktur die StoryBrand-Struktur.

Bei jedem Projekt, egal ob es sich um ein digitales Produkt oder ein Markendesign handelt, kombiniere ich Millers StoryBrand-Format mit der Drei-Akt-Struktur von Aristoteles, um ein klares Gefühl für die Kontinuität der Erzählung zu vermitteln. Er nutzt das Storytelling:

Die Kombination von Millers StoryBrand-Format mit der Drei-Akt-Struktur von Aristoteles vermittelt ein klares Gefühl von Kontinuität in der Erzählung.

Dann bearbeite ich jeden Akt einzeln und analysiere jedes Element der Erzählung.

Der Anfang

Der Anfang, auch als erster Akt bezeichnet, ist der Aufbau.

Im UX-Design ist dies der Moment, in dem wir unseren Protagonisten (den Helden) mit seinen Problemen und Zielen treffen, wie im vorherigen Schritt analysiert.

Am Ende des ersten Aktes trifft unser Protagonist einen Führer. Der Führer ist kein weiterer Held. Er fungiert einfach als helfende Hand, die der Protagonistin zeigt, wie sie auf ihrer Transformationsreise vorankommen kann. Sie könnten die Handlung Ihres Lieblingsfilms als Beispiel dafür verwenden, wie dies geschieht.

Hier ist ein Beispiel aus dem Lieblingsfilm meiner Kindheit, Die unendliche Geschichte. Die kindliche Hauptfigur, Bastian, wird von seinem Vater vernachlässigt und in der Schule schikaniert (Problem). Um den Tyrannen zu entkommen, betritt Bastian eine Buchhandlung und ärgert den Buchhändler (den Führer), der gerade ein interessantes Buch liest, das nicht für Kinder geeignet ist. Heimlich nimmt Bastian das Buch mit dem Titel Die unendliche Geschichte mit und liest es auf dem Dachboden der Schule.

Das Buch beschreibt die Fantasiewelt Fantasia, die langsam von einer bösartigen Macht namens “Das Nichts” verschlungen wird. Die kindliche Kaiserin, die Fantasia regiert, ist erkrankt, und der junge Krieger Atreyu wird beauftragt, ein Heilmittel zu finden, da er glaubt, dass das Nichts keine Bedrohung mehr darstellt, sobald die Kaiserin gesund ist.

Bastian begreift bald, dass das Buch, das er liest, Fantasia vor dem Verschwinden bewahren wird (der Plan), und er muss der Prinzessin einen neuen Namen geben (Aktion), um Atreju zu helfen, seinen Kampf gegen das Nichts zu gewinnen (Misserfolg vermeiden). Dann wird er die Kindliche Kaiserin und ihr Reich retten (Erfolg). Storytelling…

Ich kombiniere den StoryBrand und die 3-Akte-Struktur von Aristoteles für die Handlung meines Lieblingsfilms aus Kindertagen, Die unendliche Geschichte.

Wenn Sie also den Führer Ihrer Geschichte bestimmen, sei es eine Person, eine Dienstleistung, ein Produkt oder eine Marke, stellen Sie sicher, dass es sich um jemanden handelt, dem das Publikum vertraut und folgt, weil es sich verstanden und gut aufgehoben fühlt. Die inneren Qualitäten des Guides sind Empathie und Autorität, die sich in jedem Kommunikationsmaterial widerspiegeln sollten, das er mit seinem Publikum teilt.

Im Beispiel der Landing Page ist Vitaly Friedman der Führer unserer Geschichte. Bei der Untersuchung seines Profils stellte ich fest, dass er in der Vergangenheit bemerkenswerte Arbeit geleistet hat, indem er Ressourcen und Best Practices in Magazine, Publikationen und auf vielen Konferenzen, Workshops und online geteilt hat. In den sozialen Medien hat sich Vitaly Friedman in seiner Community einen guten Ruf als UX-Experte und äußerst sachkundig auf diesem Gebiet erworben. Er besitzt daher alle Eigenschaften eines Ratgebers. Eine gute Voraussetzung für das Storytelling.

Von Twitter bis Linkedin ist Vitaly seit mehr als 15 Jahren im Bereich Webdesign und UX tätig.

Die Mitte

Die Mitte, auch als zweiter Akt bezeichnet, ist die Konfrontation. In diesem speziellen Teil der Geschichte begleiten wir die Veränderung der Protagonistin und ihres emotionalen Zustands (diese Veränderung wird auch als Charakterbogen bezeichnet).

Zu Beginn des zweiten Aktes gibt der Führer dem Protagonisten einen Plan. Die Frage, deren Beantwortung der Protagonist vom Führer erwartet, lautet: “Was soll ich jetzt tun?”

In der Mitte der Unendlichen Geschichte erfahren wir, dass Bastian einen genauen Plan verfolgen muss: Er muss der Kindlichen Kaiserin einen neuen Namen geben, um die Auflösung von Fantasia zu verhindern.

Der Plan muss also klar sein, jeden Schritt hervorheben und dem Protagonisten jegliches Gefühl des Risikos oder Zweifels nehmen, indem Sie Ihren Nutzern einen Plan geben, der ihnen hilft, auf ihrer Reise voranzukommen.

Im Falle der Landing Page bat ich Vitaly, den Inhalt seines Angebots aufzulisten und die einfachen Schritte zu erklären, die für ein Abonnement der verfügbaren Pläne erforderlich sind. Ich habe dann die einzigartigen Werte und den Plan für jedes Abonnement unterstrichen und eine einfache Übersicht entworfen.

Der Inhalt der verschiedenen Angebote, mit den verfügbaren und möglichen Aktionen.

Am Ende des zweiten Aktes muss der Leitfaden klar vermitteln, welche Handlung der Protagonist mit dem Plan durchführen muss.

In Die unendliche Geschichte ist der Protagonist Bastian völlig ungläubig, dass er Teil der Lösung ist, und bewegt von der flehenden Kaiserin ruft er den neuen Namen, indem er zum Dachbodenfenster rennt und “Mondkind” ruft.

Wenn wir eine Dienstleistung oder ein Produkt verkaufen, müssen wir die Nutzer einladen, sich mit uns auf eine Reise zu begeben, so wie wir es auf der Landing Page getan haben. Wenn wir es ihnen klar und deutlich sagen, werden sie wissen, was sie mit unserem gut durchdachten Plan anfangen sollen.

Vitaly lädt das Publikum auf zwei Arten zum Handeln ein. Die eine ist ein direkter Aufruf zum Handeln durch eine “Kaufen”-Schaltfläche, die an verschiedenen Stellen der Landing Page platziert ist. Die andere ist ein vorübergehender Aufruf zum Handeln durch kostenlose Videoepisoden, E-Mail-Newsletter und Inhaltsproben.

Übergangsaktionen gibt es auch in anderen Formen:

• Zeugnisse von anderen Fachleuten auf diesem Gebiet und
• unbegrenzten Zugriff auf die UX-Checklisten, ein elegantes Kartenspiel mit 165 Karten zum Erlernen und Abrufen grundlegender Designmuster für erfolgreiche digitale Erlebnisse.

Zwei Möglichkeiten, die Nutzer zu einer Reise mit uns einzuladen: direkte Aktionen und Übergangsaktionen.

Das Ende

Das Ende ist der dritte und letzte Akt der Geschichte.

Hier entscheiden wir, wie unsere Protagonistin ihr Ziel erreichen oder ein Scheitern vermeiden wird. Dabei müssen wir den Höhepunkt oder Klimax unserer Geschichte erreichen, indem wir angeben, was auf dem Spiel steht, wenn der Nutzer (oder die Protagonistin) sich nicht auf uns einlässt.

Es ist wichtig, das richtige Gleichgewicht bei der Einführung negativer Konsequenzen zu finden, um zu vermeiden, dass die Protagonistin durch Angst gelähmt wird und auf ihrem Weg nicht vorankommt.

Als die Kindliche Kaiserin in Die unendliche Geschichte Bastian anfleht, sagt sie ihm, dass Fantasia ohne seine Hilfe verschwinden wird, ebenso wie sein Lieblingsheld Atreyu und sein Drache Falkor. Sie greift Bastians Wunsch auf, zu etwas Größerem als sich selbst zu gehören und so zu beweisen, dass er würdig ist. Diesen Wunsch verspürt der Protagonist schon zu Beginn des Films, wenn er die Aufmerksamkeit seines Vaters sucht oder versucht, seinen Tyrannen zu entkommen.

Für den Videokurs erinnern wir den Nutzer daran, dass er erst nach einer Weile zum Experten werden kann und dass es wahrscheinlich viele Jahre der Forschung, des Lesens und Studierens braucht, um gut in UX zu werden. Warum also nicht das Wissen auf einer gut erklärten, kuratierten Grundlage aufbauen und in einen Kurs mit Vitaly einsteigen, der die besten Rezepte und kugelsicheren Designmuster über 15 Jahre “gekocht” hat?

Wir sollten uns daran erinnern, dass das Ziel unserer Geschichte darin besteht, unsere Nutzer zu motivieren, eine bessere Version ihrer selbst zu werden, und dass sie nur diese Reise mit uns beginnen müssen, um eine solche unglaubliche Veränderung zu erreichen!

Aus diesem besonderen Grund wird der dritte Akt beim Storytelling auch als Auflösung bezeichnet. Bei der Gestaltung einer User Journey definieren wir auch eine Liste von Lösungen für das Problem des Protagonisten. Bei der Gestaltung des Nutzererlebnisses für die Landing Page wurde die Liste aus einer Mischung aus Status- und Inspirationslösungen erstellt:

• Selbstverbesserung: Werden Sie ein einflussreicher und sachkundiger UX-Designer und erhalten Sie ein UX-Zertifikat.
• Gelegenheiten zum Networking: Nehmen Sie an einem UX-Workshop für Fortgeschrittene teil, bei dem Sie Vitaly treffen, Feedback von ihm persönlich erhalten und mit anderen Designern aus der ganzen Welt zusammenarbeiten.
• Verbessern Sie das Web: Arbeiten Sie selbstbewusst an der Gestaltung besserer digitaler Erlebnisse im Web.

Diese Vorsätze wurden an verschiedenen Stellen der Landing Page präsentiert, um den Nutzer daran zu erinnern, warum er sich auf dieser Reise mit uns befindet und wohin wir ihn bringen wollen.

Schritt 3: Verbinden Sie den Plot mit einem Drahtgitter

Nun, da alle Storytelling-Elemente vorhanden sind, ist es wichtig zu verstehen, wie sie zusammenpassen und auf der Landing Page verbunden werden. Normalerweise betrachte ich jede Seite der Website als eine einzelne Aufnahme mit Anfangs-, Mittel- und Endszene. Viele dieser Aufnahmen ergeben eine Szene, und eine Reihe von Szenen ergibt eine ganze Website oder Anwendung.

Anhand des im vorherigen Schritt erstellten Plots begann ich damit, den Inhalt zu ordnen und wichtige Handlungspunkte hinzuzufügen.

Handlungspunkte in der Dramaturgie sind Ereignisse, die sich direkt auf das weitere Geschehen in einer Geschichte auswirken. Wenn sie gut eingesetzt werden, helfen sie dem Protagonisten, auf seiner Reise voranzukommen. In der UX funktionieren die Plot Points auf genau dieselbe Weise. Es handelt sich um Aktionen (z. B. “Jetzt kaufen”-Schaltflächen “CTA Call to Action”), Barrieren (Anmeldungen oder auszufüllende Formulare), Freuden (unerwartete Interaktionen oder kostenlose Proben), Systemereignisse (Bestätigungsmeldungen und E-Mails) und Auslöser (Benachrichtigungen), die der Benutzer ausführen muss, um auf seiner Reise voranzukommen.

Mit einem einfachen Stück gepunktetem Papier beginne ich normalerweise damit, zu skizzieren, wie der Inhalt meiner Geschichte idealerweise zwischen den verschiedenen Teilen der Seite angezeigt werden soll. An dieser Stelle werden Sie sich vielleicht über den Mobile-First-Ansatz wundern. Bei der Gestaltung eines Erlebnisses, wie wir es gerade tun, kommt es darauf an, dass es mit unserer Geschichte übereinstimmt und dass es auf jedem Medium reproduziert werden kann, unabhängig von der Pixelgröße oder der verwendeten Unterstützung.

Wenn Sie also mit einem Mobiltelefon oder einem großen Bildschirm beginnen möchten, ist es unser Ziel, die User Journey so zu definieren, dass sie in eine Schnittstelle für die Landing Page (wie in unserem Fall), in eine Broschüre oder in eine Marketingkampagne umgewandelt werden kann.

Eröffnungsszene

Die Eröffnungsszene des digitalen Storytelling stellt die Prämisse der Geschichte dar und ist das erste Element der Seite, das der Nutzer sieht, unabhängig davon, auf welcher Website oder Anwendung er landet. Im oberen Bereich der Seite wird dem Publikum das Produkt oder die Dienstleistung vorgestellt.

Wir wollten unseren Protagonisten in diesem speziellen Teil der Seite neugierig machen. Aus diesem Grund muss der Inhalt ansprechend und fesselnd sein und den Nutzer dazu bringen, nach unten zu scrollen, um mehr zu erfahren. Ich würde einen Auslöser hinzufügen, der den Nutzer aktiv dazu einlädt, zum nächsten Teil der Aufnahme, der mittleren Szene, “herunterzuscrollen”.

Die Eröffnungsszene legt die Prämisse der Geschichte fest.

Mittlere Szene

Die mittlere Szene unserer Aufnahme ist der Ort, an dem sich der größte Teil unserer Erzählung abspielen wird. Wir stellen unserem Protagonisten den Leitfaden, den Plan und die Aktion vor, die er ausführen soll. Es wird einen Abschnitt geben, der den Videokurs und den Inhalt in allen Einzelheiten erklärt, mit Inhaltsbeispielen und anderen Elementen, die den Nutzern helfen, den Videokurs besser zu verstehen und zu erkunden.

Um Autorität und Vertrauen in unsere Erfahrung aufzubauen, stellen wir nicht nur Vitaly vor, sondern auch eine Reihe von Erfahrungsberichten anderer Experten. Wir schaffen Glaubwürdigkeit im Storytelling. Unsere Protagonistin ist nicht mehr neugierig, sondern mit relevanten Informationen ausgestattet! Sie braucht einen klaren Grund, sich mit unserem Produkt zu beschäftigen. Aus diesem Grund sollte jede Handlung oder jeder Plotpoint, der hinzugefügt wird, dieses spezifische emotionale Ziel erfüllen.

Die mittlere Szene ist der Ort, an dem sich der größte Teil unserer Erzählung abspielt.

Schluss-Szene

Die Schlussszene ist die Auflösung der Handlung.

Wie bereits erläutert, bieten wir zwei Pläne an, die zwei bestimmte Ergebnisse hervorrufen; wir fragen nicht einfach, welche Pläne unsere Protagonistin möchte, sondern welche Art von Veränderung sie anstrebt. Hier ist der Nutzer achtsam, also müssen wir sicherstellen, dass nichts sie von der Entscheidungsfindung ablenkt.

In dieser speziellen Szene ist der “Kaufen”-Button die einzige Aktion, auf die sich der Nutzer konzentrieren soll.

Die Schlussszene ist die Auflösung der Handlung.

Die Fußzeile und die obere Navigation sind komplementäre Elemente unserer Erzählung. Die Navigation erleichtert die Reise durch das Storytelling, während die Fußzeile für mehr Engagement sorgt, falls unser Held mehr Zeit braucht, um sich zu entscheiden oder sich der größeren Gemeinschaft anschließen möchte, der Vitaly dient.

Kopf- und Fußzeile: ergänzende Elemente der Erzählung.

Schritt 4: Fügen Sie eine emotionale Verbindung hinzu, um eine einprägsame Geschichte zu schaffen.

Die ersten drei Schritte konzentrierten sich auf die User Journey und den Seiteninhalt. In diesem Schritt denken wir darüber nach, wie wir die Geschichte für unsere Nutzer einprägsam machen können. Andernfalls wird unsere Landing Page wie jede andere beliebige Seite aussehen!

Die emotionale Bindung ist ein wesentlicher Bestandteil des Storytelling-Prozesses und kann durch visuelle Elemente wie Farben, Klänge, Illustrationen, Animationen und Bilder vermittelt werden. Diese spielen eine große Rolle bei der Motivation und der Absicht, die der Nutzer mit seinen Handlungen verfolgt.

Um den roten Faden unserer Landing Page zu finden, konzentrierte ich mich auf kritische Elemente und entwarf eine Karte mit Schlüsselwörtern, die mir helfen sollten, eine erzwungene Verbindung herzustellen – ein weiterer wunderbarer Aspekt des Storytellings, der auf der Kombination unterschiedlicher Funktionen, Materialien oder Prozesse beruht.

Dieser Prozess wird genutzt, um bahnbrechende Ideen und originelle Konzepte zu entwickeln:

• Die Bedürfnisse unserer Nutzer (hungrige Nutzer): schnell lernen, die besten Lektionen in UX erhalten und wissenshungrig sein.
• Das Set (Küche): eine freundliche und informelle Küche.
• Vitaly‘s Rolle (Chef): erfahrener Lehrer, UX-Experte und Führer.
• Die Werkzeuge (Rezepte): Beispiele in Echtzeit, Tafel, Notizen, Videokurse und Folien.

Eine Karte mit Schlüsselwörtern, Prozessen und Materialien, die mir hilft, einen roten Faden für die Landing Page zu finden.

All diese Elemente erinnern mich an ein gut gestaltetes Essenserlebnis, das bequem direkt nach Hause geliefert wird: Unsere “wissenshungrigen” Nutzer können Vitalys Rezepten (den Videos) in ihrem eigenen Tempo folgen. Jedes Rezept wurde von Vitaly zubereitet und gekocht, vollgepackt mit den besten Ernährungselementen (Tipps, Werkzeuge, Beispiele, Folien usw.), die ein starkes und überzeugendes Design schaffen.

Die Farbpalette ist eine Mischung aus Inspirationen von der Tafel, die jede Episode des Kurses eröffnet, dem primären Rot des Magazine-Themas und den wunderbaren Videokurs-Illustrationen von Guillaume Kurkdijan.

Die Farbpalette ist eine Mischung aus Inspirationen aus bestehenden Elementen (die Tafel, die rote Farbe des Magazine und die Illustrationen von Guillaume Kurkdijan).

Der Designer verwendete dann das vorherige Drahtgitter und ergänzte es mit Skizzen, die die Szene vervollständigen und verdeutlichen konnten. Diese Skizzen dienten als Blaupause für die endgültigen Illustrationen.

Einige Skizzen des Storytellings auf Papier von einigen der wichtigsten Illustrationen, die auf der Landing Page verwendet werden.

Eröffnungsszene

Ein guter Einstieg, um einige der im Kurs gelehrten Entwurfsmuster vorzustellen, ist Akkordeon UX (die Feder mit dem Fisch), Rezensionen und Bewertungen (Sterne), Kekse (der Keks), Hamburger-Menüs (die Spaghetti), das Hinzufügen von Persönlichkeit zum Web (Salz und Pfeffer).

Die Illustration entspricht dem emotionalen Zustand des Nutzers, der Neugier, indem sie ihn mit einem unerwarteten Essensthema überrascht.

Die Hauptillustration, die die Szene stiehlt.

Mittlere Szene

Wir haben beschlossen, Vitaly mit Bildern vorzustellen, die ihn beim Unterrichten zeigen, während die Kurskapitel wie Kochbücher im Regal stehen und durch ein Karussell gezeigt werden.

Die Kapitel im Rahmen des Storytellings werden wie Kochbücher im Regal präsentiert.

Meine Lieblingsillustration ist die Buddha-Schale, mit der alle im Kurs vermittelten Inhalte eingeleitet werden. Diese Illustration befriedigt das Bedürfnis unseres Protagonisten nach mehr Informationen. Sie ist interaktiv, so dass das Publikum von den Ravioli bis zur kleinen Ölflasche die Ernährungselemente erkunden kann, die diesen Kurs so einzigartig und schmackhaft machen!

Eine köstliche Buddha-Schale zur Einführung in den Inhalt des Kurses.

Ende Szene

Drei kleine Illustrationen stellen die verfügbaren Pläne vor, die sich auf die in Schritt 2 erwähnten Entschlüsse beziehen. Die Illustrationen für jeden Plan sind relevant für die Pläne, werden aber klein dargestellt, um den konzentrierten Zustand unseres Protagonisten nicht zu stören.

Welche Art von Veränderung streben Sie an? Die Illustrationen greifen die Vorsätze auf.

Eine leere Schale bedeutet, dass unsere Nutzer einen Teil des Inhalts bereits gegessen haben. Wenn sie aber immer noch hungrig sind, gibt es weitere Möglichkeiten, sich mit Vitaly zu beschäftigen.

Immer noch hungrig? Die letzte Illustration der Landing Page suggeriert, dass es noch mehr zu “essen” gibt. Das Storytelling zeigt visuell, es ist noch nicht das Ende.

Zusätzliche kleine Illustrationen, die alle mit Lebensmitteln zu tun haben, stellen die verschiedenen Abschnitte der Landing Page und deren Inhalt vor. Talentierte Animatorin, Cassie Evans erweckte diese Illustrationen mit subtilen Animationen zum Leben, so dass die gesamte Landing Page spielerisch und ansprechend wirkt.

Verschiedene Illustrationen, die die verschiedenen Bereiche der Landing Page vorstellen.

Schritt 5: Testen Sie unser Narrativ, bevor Sie mit unseren Kunden in Kontakt treten

Bevor ich eine Idee dem Kunden präsentiere, führe ich in der Regel eine detaillierte Prüfung durch, um sicherzustellen, dass der endgültige Entwurf immer noch die Geschichte des Nutzers wiedergibt, wie in den vorherigen Schritten beschrieben.

Einige der Fragen, die ich mir stelle, sind die folgenden:

Welche Hauptaktion soll der Benutzer auf dieser Seite ausführen?

Die Antwort bezieht sich auf das Storytelling-Element Action. In der Regel prüfe ich, ob es auf der Seite genügend Handlungspunkte, wie Schaltflächen und Auslöser, gibt, um den Nutzer in den verschiedenen Phasen seiner Reise zu beschäftigen.

Direkte Aktion: der Kauf-Button.

Welche sekundäre Aktion soll der Benutzer ausführen?

Diese Antwort bezieht sich auf die Übergangshandlungen, d. h. alles, was den Nutzer dazu einlädt, sich auf andere Weise mit uns zu beschäftigen, bevor er auf den “Kaufen”-Button klickt.

Verschiedene Übergangsaktionen, die auf der Landing Page verfügbar sind.

Wie unterstütze ich das Bedürfnis, für mehr Details zu scrollen?

In diesem Fall richtet sich meine Aufmerksamkeit auf die Handlung und die Ursache-Wirkungs-Elemente, die die Erzählung definieren. Mit Blick auf die in Schritt 2 festgelegte Struktur überprüfe ich, ob die in der Landing Page enthaltenen Szenen immer noch der Logik der User‘s Journey folgen und ob es genügend Handlungspunkte gibt, um die Erzählung im Rahmen des Storytelling zu tragen.

Andere Handlungspunkte, die die Erzählung tragen.

Lenkt irgendein Inhalt den Nutzer ab oder hindert ihn daran, seine Aufgabe zu erledigen?

Bei dieser Frage geht es um die Klarheit der Botschaft und unserer Entschließungen. Im Allgemeinen sollte sich jede Seite auf ein bestimmtes Ergebnis konzentrieren. Alles, was unsere Absichten verwischt, sollte daher entfernt werden.

Verschiedene Teile der Landing Page beziehen sich auf unsere drei Entschließungen, und die gesamte Seite ist um sie herum aufgebaut.

Verschiedene Teile der Landing Page, die sich auf unsere drei Entschließungen beziehen.

Können wir die letzte Aktion vorhersehen?

Die Antwort auf diese Frage hängt in der Regel von der Fähigkeit des Nutzers ab, schnell zum Höhepunkt der Geschichte, zur Handlung (in unserem Fall: zu den verfügbaren Plänen mit “Kaufen”-Buttons) zu gelangen. Denken Sie an den schnellen Vorlauf Ihres Lieblingsfilms, um zur spannendsten Szene zu gelangen, oder an das Blättern auf der letzten Seite eines Buches, um herauszufinden, wer der Mörder ist!

Im Falle einer Landing Page befindet sich der “Kaufen”-Button am Anfang der Navigation und folgt dem Nutzer beim Scrollen… so kann er jederzeit zum dritten Akt der Geschichte springen, wenn er möchte.

Sowohl in der Desktop- als auch in der mobilen Ansicht kann der Nutzer schnell in den Höhepunkt der Geschichte springen!

Schlussfolgerung

Wie wir festgestellt haben, ist Storytelling mehr als nur ein weiteres Modewort aus der Wirtschaft. Storytelling ist ein spannender und strategischer Ansatz mit Regeln und klaren Prinzipien, der, wenn er richtig eingesetzt wird, Marken helfen kann, sich mit einer klaren Botschaft und einem nutzerzentrierten Ansatz von der Masse abzuheben. Es ist eine wesentliche Fähigkeit, die Designer unabhängig von ihrer Spezialisierung oder ihrem Profil beherrschen sollten.

Die verschiedenen von mir dargestellten Schritte werden Ihnen dabei helfen:

• Identifizieren Sie Ihren Protagonisten und entwickeln Sie eine starke, zielgerichtete Geschichte, die seine Frustrationen und Ziele anspricht.
• Erstellen Sie eine User Journey, die sich direkt auf die Geschichte des Protagonisten bezieht.
• Strukturieren Sie diese Reise als Wireframe, um den von Ihnen gewählten Inhalt der Geschichte auf der Grundlage der narrativen Struktur zu identifizieren.
• Schaffen Sie eine emotionale Bindung zum Nutzer, indem Sie aussagekräftige Illustrationen hinzufügen.
• Überprüfen Sie die Erzählung der Geschichte anhand von Fragen, die Ihren Einsatz des weiteren Erzählprozesses bewerten.

Genau wie in den berühmtesten Filmen der Welt hilft Ihnen der Aufbau einer soliden Erzählstruktur beim Erstellen von Szenen und Kapiteln, die mit der eigenen Geschichte übereinstimmen.

Auf diese Weise können Sie die Handlung einer soliden, wiedererkennbaren und beliebten Geschichte als Grundlage verwenden, um zusätzliche Szenen und Kapitel und sogar aufeinander folgende Fortsetzungen zu erstellen – wie es viele Film-Franchises mit spannenden Effekten geschafft haben.

Tatsächlich ist die gleiche Darstellung, die in diesem Beitrag für die Landing Page half mir, ein warmes und sofort erkennbares Design für Vitalys bevorstehendes geheimnisvolles neues Projekt zu entwerfen. Doch wie die Erzählerstimme der Unendlichen Geschichte uns daran erinnert:

“Das ist eine andere Geschichte, die ein anderes Mal erzählt werden soll!”