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.
Zusammenfassung
- Interaktive Inhalte binden Besuchende aktiv ein und können die Verweildauer erhöhen.
- Formate reichen von Quizzen und Slideshows bis zu Konfiguratoren und interaktiven Karten.
- Tools und Kosten richten sich nach Format, Funktionsumfang und Nutzung.
- Datenschutz erfordert eine passende Rechtsgrundlage, transparente Informationen und sichere Verarbeitung.
- Kampagnen-Steuerung durch unsere Experten
- Keine Einarbeitung erforderlich
- Kosten sparen durch maximale Effizienz und 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, soweit diese anwendbar sind. 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, eine geeignete Rechtsgrundlage nach Artikel 6 DSGVO vorliegt und die Daten sicher gespeichert werden. Eine Einwilligung ist eine mögliche, aber nicht die einzige Rechtsgrundlage.
Nutzer und Nutzerinnen haben unter den jeweiligen Voraussetzungen Rechte auf Auskunft, Berichtigung und Löschung nach Artikel 15 bis 17 DSGVO; insbesondere das Löschungsrecht gilt nicht uneingeschränkt. Nach Artikel 3 erfasst die DSGVO unter anderem die Verarbeitung im Rahmen einer Niederlassung in der EU sowie bei Unternehmen ohne EU-Niederlassung bestimmte Angebote an Personen in der EU oder die Beobachtung ihres Verhaltens in der EU – nicht pauschal jeden Kontakt zu Personen aus der EU. Ihre Einhaltung trägt auch zur Vertrauensbildung und zum Schutz der Privatsphäre 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.
Die aktuellen Geschäftskundentarife sind Team ab 425 EUR pro Monat und Business ab 1.300 EUR pro Monat, jeweils bei jährlicher Abrechnung. Für Enterprise wird der Preis individuell vereinbart. Funktionen und Nutzungslimits richten sich nach dem gewählten Tarif.
| 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).
Der Basic-Tarif von Infogram kann für die persönliche Nutzung kostenfrei verwendet werden. Unternehmen, Organisationen und professionell Tätige benötigen einen kostenpflichtigen Tarif. Der Funktionsumfang des Basic-Tarifs ist 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 USD pro Monat), „Business“ (bis zu 1.000 Projekte ab 67 USD pro Monat), „Team“ (ab 149 USD pro Monat) oder „Enterprise“ (10.000+ Projekte; Preis auf Anfrage) benötigt. Die genannten Monatspreise gelten bei jährlicher Abrechnung zuzüglich anfallender Steuern. Die Pakete „Business“, „Team“ 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.
Qzzr bietet 300 kostenlose Abschlüsse ohne Zeitlimit und von Beginn an Zugriff auf alle Funktionen. Danach kostet Qzzr Pro 9 EUR pro Monat, inklusive 1.000 Abschlüssen pro Monat. Je 1.000 weitere Abschlüsse kosten 5 EUR.
| 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 | ✗ Nach 300 kostenlosen Abschlüssen ist ein Bezahlabo nötig |
| ✓ 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. Cincopa bietet eine kostenfreie Testphase von 14 Tagen.
Für die dauerhafte Nutzung stehen Starter für 99 USD pro Monat und Growth für 350 USD pro Monat zur Verfügung. Der Preis für Enterprise wird individuell vereinbart.
| 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 | Designoptionen unterscheiden sich zwischen allgemeinem Editor und Webseiteneditor; im allgemeinen Editor ist die Schriftgröße anpassbar |
| ✓ Mit Creative Cloud kombinierbar |
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. Die Zahl der Orte hängt vom gewählten Abonnement ab: Starter unterstützt bis zu 30 Orte je Karte, Professional bis zu 300 und Expert bis zu 500. Die Pins markieren die Orte und geben Informationen zu diesen preis.
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).
Mapme bietet eine kostenlose Testphase von 14 Tagen, in der sich eine Karte mit bis zu fünf Orten und 100 Kartenaufrufen veröffentlichen und einbetten lässt. Für die dauerhafte Nutzung stehen die Tarife Starter, Professional und Expert ab 30, 55 bzw. 110 USD pro Monat bei jährlicher Abrechnung zur Auswahl. Bei monatlicher Zahlung kosten sie 50, 90 bzw. 180 USD pro Monat. Enterprise ist auf Anfrage erhältlich.
Der Expert-Tarif bietet erweiterte CSS- und Branding-Möglichkeiten, Team-Zusammenarbeit und zusätzliche Filter. Er ist auf 500 Orte je Karte begrenzt. API- und CRM-Integrationen sowie weitergehende Berichte und Analysen führt Mapme unter Enterprise auf, nicht als reguläre Expert-Funktionen.
| Vorteile | Nachteile |
|---|---|
| ✓ Location-Pins können individuell gestaltet werden | ✗ Englischsprachige Nutzeroberfläche |
| ✓ Alle Karten sind automatisch für mobile Geräte optimiert | ✗ Kostenfreie Testphase auf fünf Orte und 100 Kartenaufrufe begrenzt |
| ✓ 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.
Reviewer
Melissa Senn
Melissa Senn ist seit 2016 bei IONOS und fokussiert sich im Digital Guide auf die Bereiche Website, E-Commerce, Social Media sowie KI. Als Digitalstrategin nutzt sie ihre umfassende SEO- und GEO-Erfahrung, um komplexe technologische Trends in praxisnahe Inhalte zu verwandeln.