Interaktiver Content: Grundlagen, Tipps und Tools
Interaktive Inhalte sind ein entscheidendes Mittel, um Webseitenbesucher und -besucherinnen nicht nur zu informieren, sondern auch zu unterhalten und aktiv einzubinden. Dabei gilt es heute mehr denn je, auf einzigartige, hochwertige Inhalte und Elemente zu setzen, um aus der Masse hervorzustechen.
- Kampagnen-Steuerung durch unsere Experten
- Spart Zeit: Keine Einarbeitung erforderlich
- Spart Kosten: Höchste Effizienz durch Expertise
Warum ist eine interaktive Website wichtig?
Der Hintergrund ist einfach: Interaktive Inhalte sprechen die Nutzer und Nutzerinnen auf mehreren Ebenen an. Die Besuchenden lesen nicht einfach nur einen Text oder sehen ein Bild, sondern können durch ihr Eingreifen ein Element direkt beeinflussen, den Zugriff auf weitere Informationen freischalten oder die eigenen Gedanken kundtun. Auf diese Weise wird der Content zum Erlebnis und bleibt länger im Gedächtnis. Die Interaktion mit der Website und damit auch mit den dahinterstehenden Marken bzw. Diensten ist wesentlich intensiver als beim bloßen Lesen. Und die Chance, dass der Nutzer bzw. Nutzerin zufrieden ist und die gewünschte Conversion tätigt, steigt ebenso wie ihre Verweildauer.
Welche Formate interaktiven Contents gibt es?
Es gibt viele unterschiedliche Arten, um eine interaktive Website zu realisieren, die sich auch mit unterschiedlich großem Aufwand in das eigene Webprojekt einbinden lassen. Je nach Format benötigt man dafür verschiedenste Tools oder Programmierkenntnisse. Letztlich führt das dazu, dass die einzelnen Inhaltstypen sich auch hinsichtlich der mit ihnen verbundenen Kosten erheblich unterscheiden. Die folgende Tabelle zeigt einige der interessantesten Lösungen für interaktive Website-Inhalte:
| Art des interaktiven Contents | Beschreibung | Aufwand & Kosten | Beispiel |
|---|---|---|---|
| Konfiguratoren | Web-Anwendung, über die Nutzer oder Nutzerin sich mit dem angebotenen Produkt auseinandersetzen können und direkt sehen, wie die gewünschten Konfigurationen aussehen würden, oft mit AR- und AI-Technologien | sehr hoch | Wunschfahrzeug-Konfigurator von Opel |
| Kalkulatoren | Tool zur eigenständigen Preiskalkulation, häufig auch für personalisierte Finanz-, Energie- oder Versicherungsberechnungen genutzt | hoch bis sehr hoch | Kfz-Steuer-Rechner des Bundesministeriums der Finanzen |
| Quiz | Wissenstest im Frage-Antwort-Modus, oft mit AI-gesteuerten, personalisierten Fragen | gering | ZEIT ONLINE Wissenstest des Tages |
| Slideshows | Galerien mit bewegbaren Bildern, meist in modernen Carousels oder interaktiven Galerien | sehr gering | Fotostrecken von SPIEGEL ONLINE |
| Interaktive Diagramme, Karten und Infografiken | Grafiken, die bei Klick des Nutzers oder der Nutzerin detaillierte Daten und zusätzliche Informationen präsentieren, oft mit Echtzeit-Datenintegration | hoch | „Millennials“-Infografik von Goldman Sachs |
| Spiele | Web- oder Mobile-Games, die sich an die Marke, den Dienst oder das Produkt anlehnen und zunehmend AR und VR integrieren | sehr hoch | Magnum „Pleasure Hunt 2” |
| Interaktives Storytelling | Verknüpfung verschiedener interaktiver Elemente zum Erzählen einer Geschichte, oft mit benutzergenerierten Entscheidungen | hoch | Sevenhills „Nature’s Combinations“ |
DSGVO (Datenschutz-Grundverordnung) und Interaktive Inhalte
Bei der Nutzung interaktiver Tools, die Benutzerdaten erfassen oder verarbeiten, ist es entscheidend, die DSGVO-Vorgaben einzuhalten. Interaktive Inhalte wie Umfragen, Quizze, Formulare oder die Integration externer APIs und iFrames können personenbezogene Daten betreffen. Unternehmen müssen sicherstellen, dass die Nutzer oder Nutzerinnen über die Art der Datenverarbeitung informiert sind, ihre Zustimmung zur Datennutzung eingeholt wird und die Daten sicher gespeichert werden.
Außerdem müssen Nutzer oder Nutzerinnen die Möglichkeit haben, ihre Daten zu überprüfen, zu ändern oder zu löschen. Dies ist besonders wichtig für Unternehmen, die interaktive Inhalte in der EU einsetzen oder mit Nutzern oder Nutzerinnen aus der EU arbeiten. Die Einhaltung der DSGVO ist nicht nur rechtlich erforderlich, sondern trägt auch zur Vertrauensbildung und zum Schutz der Privatsphäre der Nutzer und Nutzerinnen bei.
Interaktiven Content erstellen: Das sind die besten Tools
Die vorgestellten Inhaltstypen erfordern allesamt deutlich mehr Aufwand als gewöhnlicher Text- und Bild-Content. Und auch die Kosten sind höher, wobei insbesondere die benötigten Werkzeuge bzw. Dienste zur Erstellung der interaktiven Elemente ins Gewicht fallen. Wenn Sie keine Expertise auf dem Gebiet der Spieleprogrammierung besitzen, aber ein Spiel in Ihre Website integrieren möchten, kommen Sie beispielsweise kaum daran vorbei, eine externe Agentur zu beauftragen.
Ähnlich verhält es sich mit professionellen 360-Grad-Videos, die weit mehr Arbeit bedeuten, als es auf den ersten Blick den Anschein haben mag. Der Bedarf an hochwertigem Equipment und der Zeitaufwand für die Nachbearbeitung des Rohmaterials sorgen schnell für Kosten im fünfstelligen Bereich – und das für lediglich ein paar Filmminuten.
Einige Arten interaktiven Contents wie interaktive Grafiken, Quiz oder Slideshows können Sie allerdings häufig auch ohne die Hilfe externer Dienstleister produzieren. Zu diesem Zweck benötigen Sie lediglich ein gutes Konzept und das passende Tool. Einige der interessantesten Tools stellen wir daher im Folgenden vor.
ThingLink
2011 veröffentlichte das finnische Unternehmen ThingLink die Software Rich Media Tags, mit der man Bilder auf Webseiten und Social-Media-Plattformen verlinken konnte. Seitdem hat das Entwicklerteam die Webanwendung, die mittlerweile ebenfalls den Firmennamen ThingLink trägt, stetig weiterentwickelt: Inzwischen lassen sich mit ihr Bilder und Grafiken um zusätzliche Elemente wie Text-Boxen, Bilder, Musik, Videos oder Links erweitern. Zu diesem Zweck steht dem Nutzer ein intuitiv bedienbarer Web-Editor mit KI-Unterstützung zur Verfügung, in den die Originalgrafik bzw. das Originalbild einfach per Drag-and-Drop importiert werden kann. Die hinzugefügten, individuell gestaltbaren Buttons signalisieren dem Betrachter oder der Betrachterin später, wo sich interaktiver Content verbirgt.
Der Bild-Editor ist in Form einer kostenlosen Testphase nutzbar. Die Basisversion bietet Standard-Buttons in verschiedenen Farben zur Kennzeichnung interaktiver Elemente; die zulässige Anzahl an Views richtet sich nach dem jeweils gewählten Tarif und den aktuellen Konditionen des Anbieters.
Individuelle Gestaltung von Buttons und Zusatzinformationen, umfangreiche Analyse-Statistiken sowie das Entfernen des ThingLink-Brandings sind in den Creator- oder Elevate-Plänen verfügbar, z. B. Starter ab 29 $ pro Monat für 1 Person und Elevate ab 575 $ pro Monat für bis zu 5 Nutzende mit höheren Zugriffsquoten.
| Vorteile | Nachteile |
|---|---|
| ✓ Einfache und intuitive Verlinkung externer Inhalte | ✗ Englischsprachige Oberfläche |
| ✓ Content ist automatisch responsiv | |
| ✓ Kostenfreie Testphase, die sich optimal eignet, um interaktiven Content zu testen |
Infogram
Wer Nutzern und Nutzerinnen Daten in ansprechender Form präsentieren und dabei auf interaktive Elemente setzen möchte, hat mit Infogram das passende Werkzeug zur Hand. Das Web-Tool gehört mittlerweile dem Unternehmen Prezi, das unter anderem auch eine gleichnamige Präsentationssoftware anbietet.
Die Infogram-App selbst bietet diverse Layouts und Bausteine zum Erstellen von interaktiven Infografiken, Karten oder Diagrammen. Manuell oder per Importfunktion können diese um eigene Datensätze ergänzt werden, wobei auch Schnittstellen zu Google Drive, Google Sheets, Dropbox und OneDrive vorhanden sind. Die fertigen Grafiken lassen sich anschließend per Einbettungscode in das eigene Webprojekt einbinden oder als JPG- bzw. PNG-Datei herunterladen (nur mit Bezahlpaketen möglich).
Die Basisversion von Infogram kann komplett kostenfrei genutzt werden, um interaktiven Content zu erstellen. Der Umfang der Software ist in diesem Fall aber stark eingeschränkt: Lediglich eine Handvoll Karten (unter anderem USA, Europa und Afrika) und eine kleine Auswahl an Icons und Bildern stehen Ihnen zur Verfügung. Zudem besteht die Pflicht, das jeweilige Projekt öffentlich zugänglich abzuspeichern.
Um private Projekte anlegen zu können und den Zugriff auf über eine Million Bilder und Icons zu erhalten, werden die kostenpflichtigen Pakete „Pro“ (bis zu 100 Projekte ab 19 $ pro Monat), „Business“ (bis zu 1.000 Projekte ab 67 $ pro Monat), „Team“ (für ein Team ab 149 $) oder „Enterprise“ (unbegrenzte Zahl an Projekten; Preis auf Anfrage) benötigt. Die Pakete „Business“ und „Enterprise“ erlauben es außerdem, das eigene Logo zu verwenden. Normalerweise enthalten die Grafiken und Diagramme nämlich das Logo von Infogram.
| Vorteile | Nachteile |
|---|---|
| ✓ Über 35 verschiedene Diagramm-Vorlagen verfügbar | ✗ Begrenzte Anpassungsmöglichkeiten |
| ✓ Erstellte Grafiken können unkompliziert per Einbettungs-Code integriert werden | ✗ Projekte lassen sich in der freien Version nur öffentlich zugänglich abspeichern |
| ✓ Diverse Schnittstellen zum Importieren eigener Datensätze vorhanden | ✗ Infogram-Branding erst ab dem Business-Paket entfernbar |
Qzzr
Qzzr ist ein starkes Tool zur Kreation maßgeschneiderter Quizze, Umfragen und Top-Listen. Mit der Lösung erstellen Sie in kürzester Zeit Fragen, Antwortmöglichkeiten, erklärende Beschreibungen und Tipps – durch das Hinzufügen von Bildern, Videos oder Audiodateien lässt sich der interaktive Content zusätzlich aufwerten. Fertige Inhalte können verlinkt, per Einbettungscode direkt in das Webprojekt eingebunden oder alternativ mit einem Klick in den verschiedenen sozialen Netzwerken geteilt werden. Diese sind dabei immer auch automatisch für mobile Geräte optimiert.
Qzzr ermöglicht es aber nicht nur, interaktiven Content zu erstellen, sondern liefert auch ausführliche Statistiken zu den User-Aktivitäten. So erfährt man beispielsweise, wie viele Nutzer oder Nutzerinnen ein Quiz absolviert oder an einer Umfrage teilgenommen haben, wie viel Zeit sie dies im Durchschnitt kostete und ob sie das Quiz oder die Umfrage komplett durchgearbeitet haben (Completion-Rate). Wer eine Call-to-Action mit dem Inhalt verbunden hat, erfährt darüber hinaus auch die Conversion-Rate.
Wer lediglich ein einfaches Quiz oder eine kleine Umfrage für seine Website benötigt, kann auf das kostenfreie Basic-Paket zurückgreifen. Für professionellen, interaktiven Content sollten Sie jedoch das Pro-Abonnement (9 $ pro Monat) abschließen. Sie bekommen 1.000 Abschlüsse und können 1.000 weitere für 5 $ hinzufügen. In der Pro-Version gibt es lediglich einen kleinen Hinweis auf Qzzr (während in der Basis-Version beispielsweise auch in geteilten Inhalten die Brand auftaucht). Außerdem kann man die automatische Empfehlung anderer Quizze und Umfragen aus dem Qzzr-Netzwerk abstellen.
| Vorteile | Nachteile |
|---|---|
| ✓ Auch mit der kostenfreien Variante können beliebig viele, responsive Quizze erstellt werden | ✗ Englischsprachige Nutzeroberfläche |
| ✓ Enge Verknüpfung mit Analyse- und Lead-Management-Features | ✗ Komplette Entfernung des Qzzr-Brandings nicht möglich |
| ✓ Einfache Integration medialer Elemente wie Bilder, Videos oder GIFs |
Cincopa
Der 2006 gegründete Multimedia-Plattform-Anbieter Cincopa bietet Lösungen zur Integration und Verwaltung von Medieninhalten in Webprojekte. Nutzer und Nutzerinnen können damit ihre Website um maßgeschneiderte Video-Portale, Podcasts oder Slideshows erweitern. Cincopa stellt zu diesem Zweck einerseits spezielle Web-Editoren zur Verfügung, mit deren Hilfe sich der gewünschte interaktive Content erstellen lässt. Andererseits bietet das Unternehmen auch die benötigten Hosting-Ressourcen für die verwendeten Mediendateien (Audio, Video, Bilder etc.), die allerdings überwiegend auf Servern außerhalb der EU, insbesondere in den USA, betrieben werden.
Zudem gibt es mehrere Möglichkeiten zur Einbettung der fertigen Inhalte wie z. B. via HTML-Code, Landing-Page, Verlinkung oder CMS-spezifischem Plugin (u. a. WordPress, Joomla, Blogger, Drupal, Wix).
Zur Gestaltung des gewünschten interaktiven Mediencontents kann man aus diversen Templates wählen: So gibt es unter anderem Vorlagen für Collagen, Slideshows, Videoplayer, Playlists oder Timelines, die alle bereits in der kostenfreien Version verfügbar sind. Dieser Basistarif ist jedoch auf 50 Bilder- und jeweils 20 Audio- und Video-Dateien sowie 100 Gigabyte Traffic begrenzt. Zudem ist das Branding „Powered by Cincopa“ im Content zu sehen.
Wer also regelmäßig interaktiven Content erstellen und veröffentlichen will, sollte eines der kostenpflichtigen Angebote wählen: „Plus“ (50 Videos, 75 Audio-Dateien, 1.800 Bilder, 1.000 GB Traffic für 25 $ im Monat) oder „Corporate“ (250 Videos, 300 Audio-Dateien, 7.000 Bilder, 2.000 GB Traffic für 99 $ im Monat). Die „Enterprise“-Version kostet 350 $ im Monat, allerdings muss man Kontakt aufnehmen, um zu erfahren, was dieser Plan beinhaltet.
| Vorteile | Nachteile |
|---|---|
| ✓ Diverse Templates für maßgeschneiderten Audio-, Video- und Bilder-Content | ✗ Englischsprachige Nutzeroberfläche |
| ✓ Intuitive Web-Editoren | ✗ Hosting der Dateien auf Servern in den USA |
| ✓ Up- und Downgrade der Bezahlpakete jederzeit möglich |
Adobe Express (ehemals Adobe Spark)
Adobe ist unter anderem für seine Creative Cloud (ehemals Creative Suite) bekannt. Mit Adobe Express bietet das Softwareunternehmen jedoch auch eine leistungsstarke Lösung visuell aufbereitetes Storytelling und Content-Erstellung im Web. Ob ein Foto mit Text und Designfiltern optimiert, hochwertige Werbe- oder Informationsclips erstellt oder Inhalte in einer ansprechenden, seitenbasierten Form aufbereitet werden sollen, ist frei auswählbar. Adobe Express lässt sich auch nahtlos mit der Creative Cloud und Adobe Stock verbinden.
Um die eigenen Projekte mit Inhalten zu füllen, können Sie selbstverständlich auch eigenes Bildmaterial hochladen und verwenden. Außerdem lassen sich Überschriften, Textblöcke und Buttons erstellen und an gewünschter Stelle positionieren. Durch die Wahl eines Themes lässt sich darüber hinaus das Design beeinflussen. Clips können durch Angabe der jeweiligen URL importiert werden. Der Content kann über den automatisch generierten Link geteilt, per E-Mail versandt oder per Code in die eigene Website eingebettet werden. Die Nutzung von Adobe Express ist kostenlos, Abonnentinnen und Abonnenten können aber beispielsweise das Branding entfernen.
| Vorteile | Nachteile |
|---|---|
| ✓ Sehr einfach und intuitiv nutzbar | ✗ Keine Bulk-Downloads möglich |
| ✓ iOS-Apps verfügbar | ✗ Begrenzte Designoptionen (z. B. Schriftgröße nicht anpassbar, Fonts an Theme gebunden) |
| ✓ Mit Creative Cloud kombinierbar |
ContillaCreator
Seit 2011 unterstützt die Contilla GmbH ihre Kunden bei der Konzipierung und Durchführung von Content-Marketing-Kampagnen. Mit ContillaCreator (ehemals InteractiveCreator) bietet das in Deutschland beheimatete Unternehmen auch eine einfach zu bedienende Toolbox zur Erstellung verschiedenster Formate interaktiven Contents an. Damit lassen sich beispielsweise interaktive Grafiken, Quiz, Umfragen, Slideshows, Kontaktformulare oder Gewinnspiele gestalten. Zusätzlich enthält ContillaCreator Vorlagen für saisonale Content-Highlights wie Tippspiele für Sportevents oder individuelle Adventskalender. Die neu erstellten Elemente sind automatisch responsiv und lassen sich unkompliziert in die eigene Website oder App einbauen oder über Links in sozialen Netzwerken teilen.
Nutzer und Nutzerinnen von ContillaCreator können sämtliche Inhaltstypen um nützliche Features wie Social-Media-Buttons, Countdowns oder Verlinkungen erweitern. Es ist außerdem möglich, den interaktiven Content komplett an das Layout und das Design des eigenen Webprojekts anzupassen. Die Inhalte werden auf den Servern von Contilla (in Deutschland) gehostet, sodass keine Programmierkenntnisse erforderlich sind, um die Inhalte über HTML-Snippets oder iFrames in die eigene Website zu integrieren. Die Toolbox kann einen Monat lang kostenfrei getestet werden.
| Vorteile | Nachteile |
|---|---|
| ✓ Vereint diverse unterschiedliche Content-Formate in einer Lösung | ✗ Erweiterte Funktionen und Services (z. B. Setup, Schulungen, bestimmte Spezialformate) sind kostenpflichtig |
| ✓ Export erhobener Kontaktinformationen möglich | ✗ Preis- und Leistungsumfang individuell bzw. nicht transparent als Standardtarif einsehbar |
| ✓ Hosting des interaktiven Contents in Deutschland |
Mapme
Mit dem Web-Editor Mapme lassen sich auch ohne Programmierkenntnisse hochwertige, interaktive Karten erstellen. Nutzerinnen und Nutzer haben dabei die Auswahl aus verschiedenen Kartenstilen wie z. B. Satellitenbild, Straßennetz oder Natur. Abhängig von dem gewählten Kartentyp und Ihrem Abonnement lassen sich zwischen 30 und 20.000 Pins hinzufügen, die eine bestimmte Location markieren und Informationen zu dieser preisgeben.
Ferner ist es möglich, die Optik des Pins individuell zu gestalten (in den Premium-Paketen sind auch eigene Icons nutzbar) und Bilder, Audio- bzw. Video-Dateien sowie Social-Media-Buttons hinzuzufügen. Je nach gewähltem Layout erscheinen die interaktiven Pin-Inhalte in einem Slider-Menü im unteren Teil der Map (Slider Style) oder in einer Liste auf der linken Seite der Karte (List Style).
Wer Mapme nutzen möchte, um eigenen interaktiven Content für seine Website zu kreieren, benötigt eines der kostenpflichtigen Angebote. Die kostenfreie Variante der Webanwendung dient lediglich der Demonstration des Tools und bietet nicht die Möglichkeit, die erstellten Maps zu veröffentlichen bzw. einzubinden. Nutzerinnen und Nutzer haben die Auswahl zwischen den vier Premium-Paketen: „Starter“ (ab 30 $ im Monat), „Professional“ (ab 55 $ im Monat), „Expert“ (ab 110 $ im Monat) und „Enterprise“ (auf Anfrage).
Der „Expert“-Plan bietet im Vergleich zu den anderen Paketen erweiterte Funktionen wie mehr CSS- und Branding-Möglichkeiten, schnelleren Zugang zum priorisierten Support, detailliertere Analysen und umfangreiche Datenberichterstattung, die Möglichkeit, individuelle Integrationen mit externen Tools oder APIs vorzunehmen, sowie unbegrenzte Maps und Locations ohne Einschränkungen bei der Anzahl.
| Vorteile | Nachteile |
|---|---|
| ✓ Location-Pins können individuell gestaltet werden | ✗ Englischsprachige Nutzeroberfläche |
| ✓ Alle Karten sind automatisch für mobile Geräte optimiert | ✗ Kostenlose Nutzung nur mit eingeschränkten Veröffentlichungs- und Branding-Optionen |
| ✓ Integriertes Einstiegs-Tutorial |
- Kostengünstig: Google-Ranking verbessern ohne teure Agentur
- Effizient: Rezensionen beantworten, Posts für Social Media erstellen
- Einfach: Keine SEO- oder Marketing-Kenntnisse nötig
Webprojekte mit interaktivem Content – Best Practices und Beispiele
Die präsentierten Tools bieten unterschiedliche Optionen, um das eigene Webprojekt mit einfachen Mitteln und schmalem Budget interaktiver zu gestalten. Finanzstarke Unternehmen haben aber natürlich auch die Möglichkeit, Agenturen damit zu beauftragen, sich um die Erstellung und Pflege interaktiver Website-Inhalte zu kümmern. In jedem Fall verleiht interaktiver Content einer Webpräsenz zusätzliche Attraktivität, sofern er an passender Stelle eingesetzt wird und den Besucher oder die Besucherin nicht vom eigenen Produkt bzw. Dienst wegführt. Es gilt folglich, den passenden Rahmen für den jeweiligen interaktiven Inhalt zu schaffen und andererseits die richtige Balance zwischen Informations- und Unterhaltungsfaktor zu finden – eine Aufgabe, die auf folgenden Websites mit Bravour gemeistert wurde:
- Airbnb: In einer interaktiven Infografik mit verschiedenen Bildern, Animationen und Maps stellt der Community-Marktplatz Airbnb den wirtschaftlichen Einfluss seines Services auf die Berliner Wirtschaft vor. Airbnb setzt verstärkt auf personalisierte, datengetriebene Inhalte, etwa interaktive Übersichten und Empfehlungen, die das Nutzererlebnis individueller machen.
- Douglas: Die Homepage der Parfümerie Douglas ist ein gutes Beispiel für den Wert von Slideshows für den E-Commerce. Zusätzlich zu einer automatisch ablaufenden Bildershow, die aktuelle Aktionen und Angebote präsentiert, sind auch verfügbare Marken und empfohlene Produkte in Slideshows verpackt, durch die Besucher und Besucherinnen der Seite klicken und stöbern können. Zukünftig bieten zudem Augmented-Reality-Technologien im E Commerce zusätzliche Möglichkeiten, Produkte interaktiv erlebbar zu machen – etwa virtuelle Anproben oder Produktplatzierungen in der eigenen Umgebung.
- mymuesli: Mit dem Online-Konfigurator von mymuesli können Nutzer und Nutzerinnen sich ihr eigenes Müsli aus diversen Zutaten zusammenstellen. Wer sich für eine Müslibasis entschieden und diese mit Früchten, Nüssen, Kernen oder Schokolade verfeinert hat, kann seinen Mix direkt bestellen, abspeichern und mit den anderen Usern teilen. Der Konfigurator von mymuesli bleibt ein hervorragendes Beispiel für Produktanpassung, und diese Art von interaktivem Content wird weiterhin in der Lebensmittelindustrie und im E-Commerce breit eingesetzt.