6 spektakuläre Tools für interaktive Inhalte: Möge der User mit Dir sein

10. Mai 2017  |     |  5 Kommentare
Ein Beitrag von Jessica

Interaktive Inhalte erstellen Du musst! Denn das ist gar nicht so aufwändig, wie Du vielleicht denkst. Eigentlich brauchst Du nur ein gutes Konzept und die richtigen Tools. 6 tolle Anwendungen stelle ich Dir heute vor und zeige außerdem, wo andere Online Shops gekonnt mit interaktivem Content glänzen.

Interaktive Inhalte: Darum!

Direkt auf die Plus-Buttons geklickt? Ob reine Neugier, Wissenshunger oder einfach Intuition – gewiss ist: die Grafik wirst Du nicht so schnell vergessen wie den Text, den Du gerade liest. Und das spricht eindeutig für interaktiven Content!

Auf die Vorteile von interaktiven Inhalten bin ich bereits in meinem letzten Blogpost über Engaging Content eingegangen. Um es kurz zusammenzufassen:

  • Interaktive Inhalte sprechen mehrere Sinne an und hinterlassen einen intensiveren Eindruck – dadurch werden sie zum Erlebnis und bleiben Deinem Nutzer im Kopf.
  • Sie stechen zudem aus der Masse an Inhalten hervor, unterhalten Deine Nutzer und verbessern Deine KPIs.

Klingt toll, doch der vermeintlich höhere Aufwand schreckt viele ab. Um Dir diese Hürde zu nehmen, stelle ich Dir heute 6 tolle Tools und gelungene Praxisbeispiele vor, mit denen Du direkt ins interaktive Content Marketing starten kannst:

  1. Interaktive Grafiken schicken Deine Nutzer auf Erkundungstour.
  2. Interaktive Diagramme machen mehr aus trockenen Daten.
  3. Vorher-Nachher-Bilder verdeutlichen einen Wandel.
  4. Interaktive Maps geben je nach Standort individuelle Informationen.
  5. Quizze testen das Wissen oder die Selbsteinschätzung Deiner Nutzer.
  6. Spiele setzen auf den Spieltrieb Deiner User.

Los geht’s!

1. Interaktive Grafiken: Entdeckungsreise für Deine User

Wir alle wissen: Infografiken sind ideal, um komplexere Zusammenhänge anschaulich darzustellen. Dabei bleibt die Aussage meist viel besser im Gedächtnis und auch der Share-Faktor ist um einiges höher. Trotzdem kann eine Infografik schnell überladen wirken.

Genau deshalb sind interaktive Grafiken ideal: Dein User kann sich zunächst einen Überblick verschaffen und anschließend –  und natürlich nur, wenn er will – die Informationen individuell in seinen eigenen Schritten und Tempo erkunden. Perfekt, um Prozesse oder Produkte im Detail oder in Aktion vorzustellen.

Diese Online Shops schicken gekonnt auf Erkundungstour

Kueche-co.de geht mit gutem Beispiel voran: Ich kann die Küche zunächst im Ganzen bewundern. Wenn ich dann auf die Plus-Buttons klicke, erfahre ich, warum der Jalousieschrank mir Putzarbeit erspart und welches Platzwunder sich im Eckschrank verbirgt. So werde ich in einzelnen Schritten von den Produktvorteilen überzeugt – und auch nur, weil ich diese Infos selbst erkunden wollte.

Interaktive Grafik von Küche-Co.

Kueche-co.de lässt seine User interaktiv die Küchen erkunden.

Ein Kleidungsstück allein sorgt für wenig Emotionen, dafür aber ein ganzes Szenenbild wie es auf der Website von Les Façons zu finden ist. Die Modelbilder bieten viel mehr Möglichkeiten, mich damit zu identifizieren und meine Aufmerksamkeit zu erhaschen. Fasziniert mich ein Kleidungsstück besonders, reicht ein Klick und ein weiterführender Link bringt mich zum Shop. Ein deutliches Manko ist jedoch, dass mich der Link nicht direkt zum Produkt führt – aus Usability-Sicht sicherlich nicht optimal.

Interaktive Infografik von Les Facons.

D&G Kollektion 2016: Ein Klick auf das Kleidungsstück birgt nähere Infos und bringt mich zum Shop.

Tool #1: Selbst umsetzen mit Thinglink

Mit Thinglink kannst Du Bilder, Videos und sogar 360°-Content mit Buttons und Deinen Wunschinhalten versehen Eigentlich ganz easy: Einfach Bild hochladen, Buttons erstellen und stylen, Inhalte zufügen, speichern und teilen.

Die kostenlose Version ist natürlich sehr einfach gehalten, aber ideal, um die Software zu testen. Alle Stylingoptionen erhältst Du ab 20 $ pro Monat. Willst Du auch Videos und 360°/VR Images gestalten, musst Du mit 125 $ pro Monat rechnen.

Die Oberfläche des Tools Thinglink.com

Übersichtliche Oberfläche von Thinglink.

2. Interaktive Daten: Diagramme müssen nicht immer langweilig sein

Trockene Datentabellen werden als Infografiken visualisiert, um übersichtlich und ästhetisch anzusprechen. Dabei gehen aber genaue Zahlen verloren. Interaktive Diagramme sind daher ideal, um Deinem Nutzer eine Entwicklung oder einen Überblick optisch zu verdeutlichen. Nach Wunsch kann dieser aber auch die Daten sehen, die ihn persönlich interessieren.

Einen wirklich unterhaltsamen Ruf haben Diagramme ja nicht, aber vor allem für B2B-Unternehmen oder in Content-Marketing-Artikeln können sie überzeugend sein – und elegant aufbereitet sogar alles andere als langweilig.

Daten gelungen aufbereitet

Fitch Ratings, eine Ratingagentur aus den USA, zeigt gleich mehrfach wie aus trockenen „Bond & Loan Market Data“ übersichtliche und entdeckungsfreudige Grafiken werden. Mit Sitz in New York und London kommt es den Nutzern gelegen, dass jede Grafik in Euro oder Dollar angezeigt werden kann.

Ein anderes Beispiel ist von financescout24.de und zeigt die Einbruchsstatistik in Deutschland. Die Farbgebung visualisiert mir sofort, welche Regionen stärker betroffen sind und mit einem Klick auf den Landkreis erfahre ich weitere Details.

Beispiele für interaktive Daten

Diagramme können auch Spaß machen: Links zeigt das Fitch Ratings und rechts financesout24.de.

Tool #2: Selbst umsetzen mit Infogr.am

Mit Infogr.am kannst Du verschiedenste Diagramme, aber auch Karten gestalten – und zwar mit Deinen Daten, Lieblingsfarben, -schriften und -layouts. Die Oberfläche ist logisch strukturiert: Links kannst Du die einzelnen Elemente wählen, in der Mitte auf Deiner Grafik anordnen und mit einem jeweiligen Klick auf diese dann rechts bearbeiten. Ein weiterer Klick auf Share liefert Dir dann einen Einbettungscode.

Für wenige Grafiken kann die kostenfreie Basisversion ausreichen, sonst geht es je nach Features ab 19 $ pro Monat los.

Die Oberfläche des Tools Infogr.am

Klar strukturierte Oberfläche von Infogr.am.

3. Vorher-Nachher-Bilder: Fokus auf Veränderung

Dieses Format dient nicht dazu, User möglichst lange zu beschäftigen, sondern soll als kleines „Content-Häppchen“ für Auflockerung sorgen. Im Gedächtnis bleibt das Bild aber allemal! Denn die Vorher-Nachher-Form zeigt vor allem eines: den Wandel oder die Veränderung einer Situation.

Gelungene Beispiele des Wandels

Genutzt werden diese Juxtapose-Bilder hauptsächlich in der Berichterstattung, wie eine Zeitreise des Tagesspiegels am Bahnhof Friedrichsstraße zeigt. Du kannst die Bilder also super einsetzen, um eine zeitliche Veränderung zu visualisieren.

Aber Du kannst beispielsweise auch verdeutlichen, wie das Leben Deiner User mit oder ohne Deinem Produkt aussieht. Weißere Zähne, mehr Platz im Bad oder ein neuer Job? Fiktiv habe ich ein Beispiel für einen Möbelverkäufer umgesetzt: Ausgangssituation ist ein Wohnzimmer mit kleinem, alten Sofa – mit dem neuen Sofa sieht es gleich viel stylisher aus und mehr Platz ist auch!

Tool #3: Selbst umsetzen mit JuxtaposeJS

JuxtaposeJS hat Maike schon in ihrem Blogpost zu Storytelling-Tools erwähnt. Weil die Anwendung so einfach, aber doch effektiv ist, will ich sie auch hier nicht außer Acht lassen

Das Besondere: JuxtaposeJS ist kostenfrei und superleicht zu bedienen. Denn eigentlich musst Du nur Deine beiden Bilder hochladen, die Labels ausfüllen, die Schieber-Startposition wählen und auf Publish klicken.

Kreativer Tipp am Rande: Du kannst den Slider auch auf 5% starten lassen – auf das obere Bild eine Frage packen und auf dem unteren Bild die Lösung visualisieren. Quizzen mal anders.

Screenshot des Tools JuxtaposeJS

Ein Vorher-Nachher-Bild ist mit JuxtaposeJS schnell erstellt.

4. Interaktive Maps: Individuelle Navigation

Maps sind auf dem Smartphone zu unserem treuen Begleiter geworden – und somit die perfekte Basis, um Informationen zu lokalisieren. Nutzer sehen auf einen Blick, was sich in ihrer Nähe befindet und erhalten mit einem Klick relevante Infos. So hat die Map für verschiedenste Personen bzw. Situationen einen individuellen Mehrwert.

Straßenkarten mit interaktivem Mehrwert

Wir kennen Maps von Hotelportalen oder Car2Go. Aber auch bier.de nutzt eine Map, um die Standorte von Brauereien zu visualisieren. Mit der Suchfunktion kann ich leicht die Shops in meiner Nähe finden und erhalte mit einem Klick auf die Buttons weitere Informationen.

Interaktive Map von bier.de

Ein zweites Beispiel ist vom Nürnberger Flughafen – hier zeigt die Map, welche Städte angeflogen werden. Klicke ich auf eine Stadt, wird diese automatisch in mein Suchformular übernommen und ich sehe, welche möglichen Flugdaten es gibt.

Interaktive Map des Airport Nürnbergs

Tool #4: Selbst umsetzen mit Mapme.com

Die Usability überzeugt: Ein Klick auf Create Map und los geht’s. Rechts habe ich meinen Live-Preview, den ich sogar in mobiler Version anschauen kann, und auf der linken Seite schrittweise alle Designoptionen: Ich kann meine Buttons stylen und zu jedem Ort Text, Bilder, Videos und CTAs hochladen. Ein Klick auf Publish wirft mir dann direkt den Einbettungscode aus.

Die kostenlose Basisversion bietet lediglich eine einzige Map mit Wasserzeichen, ist aber perfekt, um die Handhabung zu testen. Vollen Zugriff auf alle Designoptionen hast Du dann in den Proversionen ab 19 $ (1 Map) bzw. 59 $ (10 Maps) im Monat.

Oberfläche des Tools Mapme.com

Klare Struktur der Mapme.com-Oberfläche: Links die Bearbeitungsoptionen und rechts die Kartenvorschau.

5. Quizze: Welcher Rätsel-Typ ist Deine Zielgruppe?

Jeder quizzt gerne. Warum sonst sind „Wer wird Millionär“ oder das „Quizduell“ so beliebt? Da in beiden Fällen das Ziel ist, spielerisch sein Wissen zu testen, nennt man sie Wissensquizze.

Eine andere Form ist der Selbsttest: Hier will der User mehr über sich herausfinden, Stichwort „Selbstreferenz-Effekt.“ Er besagt, dass wir uns besser an Dinge erinnern, die für uns von Bedeutung sind – und uns deshalb natürlich auch mehr dafür interessieren.

Diese Unternehmen lassen ihre User gekonnt quizzen

Wissen lässt sich am besten zu Themen testen, für die Deine Zielgruppe brennt – oft ist auch eine Gewinnchance der Ansporn.

  • Kennst Du diese berühmten Berge? Kompass, der Kartenverlag für Wander- und Radkarten, kennt die Leidenschaft seiner Zielgruppe und lässt diese geschickt ihr Gipfelwissen testen.
  • Wie gut kennst Du Dich mit Bier aus? Im Online Shop bier.de kommen die Bierliebhaber auf ihre Kosten und können dabei sogar noch gewinnen. Die Fragen sind aber gar nicht so einfach.
  • Was weißt Du über Kaffee? Das frägt Gepa seine Webbesucher. Hier wird Content Marketing perfekt ausgeschöpft, denn nach jeder Frage gibt es noch eine weiterführende Erklärung zur richtigen Antwort.
Beispiele für Quizze als interaktive Inhalte

Das Berg-Quiz von Kompass, das Bier-Quiz von bier.de oder das Kaffee-Quiz von Gepa – teste Dein Wissen!

Mit Selbsttests hilfst Du als Experte Deinen Nutzern mehr über sich selbst herauszufinden. Aber auch Du profitierst, indem Du Daten sammeln kannst. Anschließend solltest Du noch zum Ergebnis passende Tipps und Hilfestellungen geben.

  • Welchen Hauttyp hast Du? Das fragt bebe und macht so aus dem Quiz direkt einen Produktberater. Denn je nach Ergebnis werden mir direkt die passenden Produkte vorgeschlagen.
  • Welcher Reisetyp steckt in Dir? Der Test von Momondo dient zwar eher als Unterhaltung, ist aber ganz witzig gemacht. Allerdings könnten sie am Ende noch einen Schritt weitergehen und direkt zum persönlichen Ergebnis passende Angebote präsentieren.
  • Selbstcheck zu Deinem Alkoholkonsum: Das bietet mir die DAK in ihrer Glasklar-Kampagne. In verschiedenen Tests kann ich herausfinden, ob mein Alkoholkonsum noch im Rahmen ist – anschließend erhalte ich den zum Ergebnis passenden Rat.
Beispiele für Selbsttests als interaktive Inhalte

Welcher Hauttyp bist Du? Welche Reisetyp steckt in Dir? Und trinkst Du zu viel Alkohol? Finde es heraus!

Tool #5: Selbst umsetzen mit Qzzr

Die Oberfläche führt gekonnt durch den Prozess – hat man das Prinzip einmal verstanden. Hast Du Deine Quiz-Version gewählt, kannst Du der Reihe nach das Cover gestalten, die Outcomes festlegen, die Fragen bestimmen, alles stylen und das Ganze anschließend generieren. Besonders toll ist übrigens, dass Du mit Bildern arbeiten kannst.

Qzzr funktioniert schon gut in der kostenlosen Basisversion. Willst Du alle Designmöglichkeiten und die Daten einsehen, musst Du mit Kosten von 299 $ im Jahr rechnen.

Die Oberfläche des Tools Qzzr

Die Oberfläche von Qzzr.

6. Spiele: Nutze den Spieltrieb Deiner User

Wir besitzen einen angeborenen Spieltrieb – deshalb sind Spiele ideal, damit Deine Nutzer länger auf der Seite verweilen und sich freiwillig intensiver mit Deinen Produkten oder Deiner Marke auseinandersetzen. Spiele haben oft einen Gewinn, einen Score oder mehrere Level als Motivation.

Wird ein komplett neues Spiel rund um eine Marke oder ein Produkt entwickelt, nennt man das Gamification – also Spiele, die etwas mit der Themenwelt des Unternehmens zu tun haben.

Gamebased Marketing sind Spiele, die nichts mit der Marke zu tun haben, sondern nur zu Marketingzwecken genutzt werden. Klassische Spielprinzipien wie Mahjongg oder Memory werden an die Themenwelt angepasst.

Diese Unternehmen lassen ihre Nutzer zocken

Klassische Beispiele für Gamebased Marketing sind häufig Gewinnspiele in Online Shops wie die folgenden Spiele zeigen. Allerdings geht es hier nur um reine Unterhaltung und längere Beschäftigung mit Marke oder Produkten – einen wirklichen Mehrwert zieht der Nutzer aus diesen Beispielen nicht. Diesen zu integrieren ist aber eigentlich gar nicht so aufwändig und würde Spiel und Marke sehr aufwerten.

  • Sinalco-Puzzle setzt auf ein klassisches Puzzlespiel mit Sinalco-Motiv und Gewinnmöglichkeit.
  • Auch die Kunden von Avène können gewinnen, wenn sie ein Schiebepuzzle richtig fertiggestellt haben – das ist bei dem Motiv gar nicht so einfach wie gedacht.
  • Das klassische Memory nutzt der Gabelstaplerhersteller Rema: Wer spielt, kann gewinnen und setzt sich gleichzeitig mit der Produktpalette auseinander.
Beispiele für klassiche Spiele als interaktive Inhalte

Klassische Spiele im Markenlook von Sinalco, Avène oder Rema.

Sehr viel aufwändiger für Unternehmen sind natürlich Spiele in Form von Gamification. Aber bei Zalando wurde ich fündig – ein Spiel, das auf ihrer 404-Seite erscheint und ideal zum Angebot von Zalando passt. Hilf Joe, dem Paketzusteller!

Spiel der 404-Seite von Zalando

Ein Spiel auf der 404-Seite von Zalando. Warum es sich gerade da gut macht, erklärt Steffi in ihrem Blogpost zur Joy of Use.

Tool #6: Selbst umsetzen mit H5P

Ein großes Spiel zu kreieren, ist sehr zeit- und kostenaufwändig. Game-based Marketing kannst Du schon im kleineren Rahmen umsetzen.

Das kostenfreie Tool H5P bietet dafür jede Menge Möglichkeiten: von Memory, über Drag’n’Drop-Spiele bis zu Lückentexten. Und weil H5P eine freie und quelloffene Software der Firma Joubel zum Erstellen interaktiver Inhalte ist, sind alle Anwendungen kostenlos und es existieren sogar entsprechende PlugIns für Drupal und WordPress.

Die Oberfläche kann zwar nicht mit den oben vorgestellten Tools mithalten, aber wenn ich die Navigation einmal verstanden habe, kann ich mich leicht von oben nach unten durcharbeiten, meinen Inhalt speichern und anschließend einbetten.

Sogar Quizze, interaktive Grafiken und Juxtapose-Bilder lassen sich mit H5P kostenfrei umsetzen. Große Styling- oder Brandingoptionen hast Du aber natürlich nicht.

Oberfläche des Tools H5P

So sieht die Contenterstellung mit H5P aus.

Do. Or do not. There is no try?

Yodas Aussage trifft in diesem Fall nicht ganz zu! Die Tools sollen ja helfen, den Einstieg ins interaktive Content Marketing zu finden – und anschließend musst Du Deinen Content natürlich stetig optimieren.

Aber klar ist: Der Inhalt muss für Deine Zielgruppe relevant sein und ihr einen Mehrwert bieten. Überlege Dir also zunächst ein Konzept. Ist das nicht wasserdicht, lohnt sich der Aufwand nicht. Natürlich unterstützen wir Dich dabei auch gerne – kontaktiere uns einfach.

Titelbild erstellt mit H5P: © iStock/Natalia_80; © iStock/jpgfactory; Juxtapose: © iStock/vicnt; Bild in Tool-Screenshots: © iStock/jpgfactory;

Merken

Merken

Merken

Merken

Jetzt teilen: Share on Facebook69Tweet about this on TwitterShare on Google+11Email this to someone

E-Book: Der Weg zum erfolgreichen Online Shop

  • Das 47-seitige E-Book mit 72 konkreten Tipps für Deinen Online Shop
  • Einmal wöchentlich exklusiver Content für das Marketing Deines Shops
  • Unser Newsletter (1-2x pro Woche)
E-Book kostenlos downloaden

5 Kommentare

Reaktionen auf diesen Beitrag

    • Hallo, Euer Newsletter ist wirklich klasse! Werde mich mal an meine Webseite dran machen und ein paar von diesen netten „Spielereien“ einbauen. Sonnige Grüße aus Wiesbaden

    • WOW! Danke für diese Tools! Sehr inspirierend.

      Da ich ja vom Texten her komme 😉 und nicht aus der Grafik, ist das heute ein sehr bereichernder Input für mich.

      Merci.

      Herzensgruß
      Sabine

    • Ich glaube der nächste Schrei wird definitiv dynamische Texte in Form von Chatverläufen sein. Es gibt schon ein paar wenige Tools und Webseiten die diese Form nutzen – und man bleibt da einfach dran kleben und will die Konversation weiter verfolgen. Ein perfektes Beispiel ist dafür Hooked.

      Grüße,
      Vladi

    • Bin dir sehr dankbar, für den Tipp mit h5p. Es ist genau das was ich gesucht habe. Es ist sehr nützlich für meine täglichen Tschechisch-Lektionen zum Erstellen von Übungen für die Tschechischlerner.

    • Ich werde qzzr mal testen und/oder in den WordPress-Plugins stöbern, ob es sowas gibt. Ich glaube, dass Quizzes (ist das die Mehrzahl?) eine geniale Ergänzung zum CtA sein können. Danke für diesen Beitrag!

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

    Willst Du fit in SEO werden?

    Abonniere unseren Newsletter und bleibe in Sachen SEO, Inbound- & Online-Marketing auf dem Laufenden.

    Du kannst den Newsletter jederzeit wieder abbestellen.