Digitale Toolbox: Überraschend, unterhaltsam, aufmerksamkeitsstark

Das ist die digitale Toolbox für unsere Fachmedien-Online-Portale.

Alle regulären Redaktionsartikel oder redaktionellen Sonderwerbeformen (Advertorials) können mit unserer digitalen Toolbox aufgewertet werden. Von der Slideshow bis zum Video, von der Umfrage bis zum "Vorher-Nachher-Slider": Kleine digitale Elemente machen Inhalte unterhaltsam und interessant und erhöhen die Verweildauer. Technisch laufen alle Elemente im "iFrame"-Modul unserer Website. In dieses iFrame werden die kleinen Tools von innovativen Drittanbietern wie Flourish, Datawrapper oder Lamapoll geladen. 

Die Position der kleinen Tools ist in der Regel zwischen dem zweiten und dritten Absatz des Artikels oder Advertorials. Dort sind die kleinen Tools dauerhaft zu sehen und bleiben im Artikel eingebunden. Auch die mobile Darstellung ist optimiert: Die Tools sind sowohl auf dem Desktop als auch in der mobilen Darstellung nutzbar.

Die Bandbreite der Tools ist sehr groß: Nicht nur die Art und Darstellung lassen sich anpassen, auch Farben und Unternehmenslogos können eingebunden werden. Die Tools können daher ganz redaktionell aussehen – sie können aber auch in der CI eines Kunden ausgestaltet werden, wie die folgenden Beispiele zeigen.

Beispiel 1: Video-Element mit festem Footer

Dieses Video-Element lässt sich mit einem dauerhaft sichtbaren Footer anlegen. Es kann daher ein wenig mehr als ein üblicher Video-Player, der hier natürlich auch möglich wäre:

• Das Video läuft im Auto-Play-Modus, sobald der User über das Video scrollt.
• Audio ist zunächst auf "mute", kann aber aktiviert werden.
• Der Footer zeigt die Werbebotschaft, eine Zusammenfassung oder einen Kontext direkt unter dem Video.
• Auch ein Link als Call-to-Action lässt sich hier platzieren.
  
  
  

Beispiel 2: Video-Element mit festem Footer im Fachmagazin-Look

Das zweite Beispiel zeigt ebenfalls das Video-Element, hier in der Variante als "Slideshow-Video" im Look des Fachmagazins Verkehrsrundschau und mit stetigem Call-to-Action unter dem Video zur zugehörigen Landingpage. Auch dieses Video läuft im Auto-Play-Modus direkt beim Scrollen ohne weiteren Klick.

Beispiel 3: Video-Slider mit festem Header

Beispiel 3 zeigt das Prinzip "Bildergalerie" – hier allerdings ausgeführt mit kurzen Videoclips bzw. Animationen. Jedes Slide zeigt eine kurze Animation bzw. GIF. Anwendungsfall war hier die Illustration von Zahlen, Daten und Fakten.

• Die Slides laufen im Auto-Play-Modus.
• Der Header lässt sich mit Text bestücken und im CI des Kunden gestalten.
• Die Bedienelemente zeigen die Position des Sliders oder erlauben schnelles eigenes Durchklicken.
  
  
  

Beispiel 4: Bilder-Slide mit festem Header

Beispiel 4 ist ebenfalls eine "Bildergalerie im Auto-Play-Modus" – hier allerdings ausgeführt mit einfachen Bildern. Das macht die Bestückung etwas einfacher, dennoch wird eine "reguläre Bildergalerie" durch den automatischen Start und den frei gestaltbaren Header-Bereich aufgewertet.

Beispiel 5: Bilder-Slide mit "morph-look"

Beispiel 5 zeigt schön, wie eine Bildergalerie im "Morphing-Look" genutzt werden kann. Header und Footer sind "feststehend", nur die Prozentzahlen ändern sich. Theoretisch hätte das auch als GIF eingebunden werden können. Die Slides haben jedoch viele Vorteile bei der Bearbeitung und Freigabe: Es können jederzeit Slides hinzugefügt oder entfernt werden.

Beispiel 6: Slider Reveal

Beispiel 6 zeigt einen unterhaltsamen "Vorher-Nachher-Vergleich" mit einem "Schieber", den der User selbst bedient. Dieser Slider verdeckt bzw. enthüllt das Motiv "unter" dem oberen Motiv. Ideal eignet sich dieser Slider für die Einführung eines neuen Markenlogos wie hier im Beispiel zu sehen. Aber auch die Modelleinführung eines neuen Fahrzeugs (vorher/nachher) ist ein Beispiel für einen Slider.

• Sehr einfache, aber auch sehr intuitive Darstellung.
• Der Slider lädt zur Interaktion ein: Jeder will wissen, wie es weitergeht.
• Feststehender Header schafft Kontext, darstellbar in der CI des Unternehmens mit Logo.
  
  
  

Beispiel 7: Zahlen-Visualisierung

Beispiel 7 zeigt eine intuitive Visualisierung von Zahlen oder KPI-Kenngrößen oder Anteilen. Die Größe des dargestellten Kreises korrespondiert mit der Prozentzahl des dargestellten Fakts.

• Als optisches Element sind Zahlen mit einer Visualisierung schneller und attraktiver zu erfassen.
  
  
  

Beispiel 8: Racing Bar

Beispiel 8 zeigt eine "fortgeschrittene" Visualisierung von Daten, die aber sehr attraktiv ist. Zu sehen ist hier die Entwicklung von Fahrzeugsegmenten über einen Zeitraum von 10 Jahren. Die Zahlen "laufen" durch diesen Zeitraum und entsprechend ordnen sich die Diagramm-Balken neu an.

• Starke Visualisierung von Zahlen, wenn es darum geht, Anteilsveränderungen über einen längeren Zeitraum darzustellen. 
• Voraussetzung ist gutes Zahlenmaterial über 5 bis 10 Jahre, das sich stark genug verändert (kleine Änderungen ohne einen sichtbaren "Sieger" sind optisch nicht so spannend).
• Ideal sind Zahlen, die einen starken Umbruch oder Wechsel eindrucksvoll inszenieren.
  
  
  

Beispiel 9: Racing Lines

Beispiel 9 zeigt erneut die große Bandbreite und Variabilität der digitalen Tools: Hier wurde die "Racing"-Idee umgesetzt mit einem völlig anderen Look, im Beispiel die Optik des Fachmagazins Verkehrsrundschau. Zudem wurde eine andere Darstellung gewählt: Statt "racing bars" gibt es hier "racing lines". Das Ergebnis ist aber ebenso aufmerksamkeitsstark: Wie entwickeln sich die Baugruppen über 10 Jahre? Ein Blick auf die "racing lines" genügt.

Beispiel 10: Mouse Over Flip

Beispiel 10 zeigt einen unterhaltsamen "Flip-Over-Effekt". Ähnlich wie Memory-Karten lassen sich die Karten mit einem Mouse-Hover "aufdecken". Auch hier mit einem festen Header als Kopf, der das Unternehmenslogo und die CI-Farben zeigt.

• Unterhaltsames Element, um Fakten oder Aufzählungen zu visualisieren. Produkt-Features oder ein Produktprogramm lassen sich hier präsentieren.
• Statt der hier gezeigten grafischen Icons lassen sich auch Bildmotive nutzen. Beispiel: das Modellprogramm eines Herstellers mit Elektrofahrzeugen darstellen und der Mouse-Flip zeigt je Modell die wichtigsten Eckdaten.
  
  
  

Beispiel 11: Umfrage

Beispiel 11 zeigt eine User-Umfrage.

• Die User können eine Antwortmöglichkeit wählen.
• Dann klicken die User auf "Antwort jetzt senden" und die Antwort wird abgeschickt.
• Durch den Klick auf den Button werden die User auf eine Zielseite geleitet.

Das heißt: Die Umfrage aktiviert User, sorgt für Engagement und leitet dann den User automatisch auf eine Zielseite, etwa eine Unternehmensseite oder eine thematisch passende Landingpage.

Das Umfragetool ergänzt einen Artikel oder ein Thema um eine "Publikumsfrage". Wie hier zu sehen, lässt sich das Tool komplett in der CI eines Kunden darstellen, inklusive Logo. Auch die Abstimmungsergebnisse aller anderen User können direkt gezeigt werden (wie haben alle anderen User bis zu diesem Zeitpunkt abgestimmt).

Beispiel 12: Tabelle in attraktiver Animations-Optik

Beispiel 12 zeigt eine attraktive Darstellung größerer Datenmengen – etwa aus Studien oder Umfragen oder Marktforschung – mit einer animierten Tabelle. Die Kategorien (hier Jahrgänge) sind auf den ersten Blick zu erkennen. Ein kleiner "Mouse-over-Effekt" liefert die passenden Prozentzahlen-Werte. Eine Kennzahlen-Tabelle wie diese ist deutlich schneller zu erfassen und bietet dem Nutzer echten Mehrwert.

Beispiel 13: Umfrage-Element in Kunden-CI