*

Mit interaktiven Infografiken wirkungsvolle Kommunikation gestalten

2012—ongoing
Interaktive Infografiken / Scrollytelling

Modernes interaktives Informationsdesign ist zu einem wichtigen Bestandteil von Kommunikationsgestaltung geworden und trägt dazu bei, Inhalte zugänglicher, ansprechender und einprägsamer zu machen.

Seit 2012 haben wir verschiedenste interaktive Infografiken für ein globales Publikum entworfen und umgesetzt.

Screenshot of the DFB Academy interactive staircase with modal dialogs, alternative text and hover effects

Digitale Infografiken reichen von statischen Bildern und Galerien, über Inline-SVGs und benutzerdefinierten Code, Dashboards mit anpassbaren Datensätzen bis hin zu komplexen Scrollytelling-Websites. Im Folgenden betrachten wir verschiedene Arten von Ansätzen anhand von realen Arbeitsbeispielen.

 

Wie fängt man an?

In der Welt des modernen interaktiven Informationsdesigns gibt es unglaubliche Möglichkeiten. Eine solide UX-Recherche, die richtigen Fragen und eine technische Bewertung können dabei helfen, die richtige Richtung zu finden:

Was ist meine Hauptzielgruppe? Was braucht sie? Und wie ist ihr Online-Verhalten?

In welchen technischen Rahmen soll mein Projekt eingeordnet werden? Wie groß ist die erwartete Skalierbarkeit? Welche Ressourcen sind verfügbar? Und welches Maß an Komplexität kann erreicht werden?

 

1. Dashboards

Ein Dashboard wird gemeinhin als zentraler Ort für mehrere Datenvisualisierungen zu einem Thema verstanden. Dies ermöglicht es Benutzer*innen, die Daten persönlich zu analysieren und die Visualisierungen nach den eigenen Bedürfnissen zu filtern und zu optimieren. Um diese Funktionen bereitzustellen wird eine Diagrammbibliothek, die mit einer zentralen Datenquelle verbunden ist, verwendet.

Bekannte Frameworks hierfür sind tableau, highcharts, datawrapper und d3.

 

2. Illustrative Infografiken

Illustrationen sind Kernelemente bei der visuellen Kommunikation von Informationen: Sie reichen von Symbolen über Figuren und Objekte bis hin zu komplexen Landschaften und 3D-Bildern. Dieser Ansatz eignet sich in der Regel am besten zur Erklärung von Prozessen und/oder zur Visualisierung von Kategorien, Hierarchien und Beziehungen für ein Publikum, das nicht an einer direkten Analyse interessiert ist, sondern Priorität auf Narrative legt.

 

3. Scrollytelling

Als Scrollytelling bezeichnet man längere Textartikel mit Multimedia-Inhalten, die durch das Scrollen ausgelöst werden und die Erzählung unterstützen.

Es wird häufig für längere und vielschichtige Geschichten mit einer starken Erzählkomponente verwendet. Sie nutzen das Standard-Scrollverhalten von Websites, um aufeinanderfolgende Blöcke mit gemischten Medieninhalten zu animieren. Es ist wichtig, Möglichkeiten und Beispiele aus dem Web zu recherchieren, um in der Projektentwicklung eine möglichst konkrete Idee formulieren zu können.

Bekannte Frameworks sind:

 

Die Galerie am Ende des Artikels zeigt einige Beispiele zu den hier beschriebenen Kategorien.

Infografik mit 6 Arten von Infografiken auf einer Skala der Implementierungsschwierigkeit; in aufsteigender Reihenfolge: statische Bilder, Social-Media-Storys, SVG-Grafiken, dynamische Infografiken, Erklärvideos

 

Crossmedialität

Interaktive Infografik-Projekte haben eines gemeinsam: Sie basieren auf dem SVG-Format. Das ist eine gute Nachricht für crossmediales Arbeiten, denn so lässt sich das Produkt schnell für andere digitale Kanäle oder für den Druck anpassen.

Wenn Sie mehr über die Erstellung dieser Produkte erfahren möchten, bieten wir Beratungen und private Workshops an.

Oder Sie nehmen an unserem nächsten »Infografik Digital« Workshop in Zusammenarbeit mit der PAGE Academy und den Sapera Studios teil.


Projektrechte

Projekte die mit [1] gekennzeichnet sind, wurden als Mitarbeiter der Sapera Studios entwickelt; Copyright und Nutzungsrechte liegt bei ihnen.

Projekte die mit [2] gekennzeichnet sind, wurden als Mitarbeiter von Lucid. Studio entwickelt; Copyright und Nutzungsrechte bei ihnen.

 

Links zu den Projekten

donortracker.org [2]

genderclimatetracker.org [2]

PeaceWomen Scorecards [2]

WPS financing slider [2]

DFB Academy staircase [1]

Code Pen: staircase [1]

Schengen interactive map [2]

StrahlenschutzFokus: Radiologischer Notfall [1]

StrahlenschutzFokus: Radon [1]

StrahlenschutzFokus: BeVoMed [1]

StrahlenschutzFokus: 5G [1]

StrahlenschutzFokus: Rückblick 2021 [1]

Red Bull Hardline [1]

*

Fakten zu Infografiken

Informationsdesign ist keine Erfindung des Westens. In Japan entstanden in den 1900er Jahren einige großartige Beispiele, die weitgehend unbekannt sind.

Japanese contributions to data visualisation

Otto Neurath wird von vielen als Schlüsselfigur des Informationsdesigns angesehen. Er erfand die Isotype-Methode der Bildstatistik und machte Piktogramme berühmt.

Mike Bostock ist eine der Schlüsselfiguren der modernen digitalen Datenvisualisierung. Seine Arbeit für die New York Times bis 2015 markierte ein Vorher und Nachher im digitalen Storytelling. Er ist auch einer der Hauptentwickler der JavaScript-Bibliothek D3.js.

Hier finden Sie Beispiele seiner bemerkenswerkten Arbeit. 

Alberto verliebte sich 2001 unsterblich in die Infografik, als er das Röyksopp-Video »Remind me« sah.

Hier finden Sie das Video auf Youtube

Mit dem kostenlosen und open-source Tool RawGraphs können Sie intuitiv und ohne Vorkenntnisse verschiedene Arten der Datenvisualisierung ausprobieren. Für viele Designer ist es das Tool der Wahl, wenn sie mit einem Infografik-Projekt beginnen.

RawGraphs.io

UX-Resesrach — in anderen Worten: verstehen, was die Zielgruppe braucht — spielt eine entscheidende Rolle bei der Erstellung einer erfolgreichen interaktiven Infografik. Probieren Sie es aus: Die folgenden Infografiken verwenden dieselben Datensätze, welche gefällt Ihnen am besten?

Occupation matchmaker oder who marries whom?

Profi-Tipp! Wenn Sie einen echten Taschenrechner mit haptischen Knöpfchen auf Ihrem Schreibtisch haben und die grundlegenden Formeln für Flächen und Volumina parat haben, wird Ihre Arbeit immens beschleunigt.

Eine interessante Tatsache über das SVG-Dateiformat (Scalable Vector Graphics) ist, dass es sich um eine Auszeichnungssprache (markup langauge) handelt, ähnlich wie HTML. Das bedeutet: SVG-Bilder können mit Code erstellt und bearbeitet werden!

ChatGPT

Die ersten Infografiken stammen aus der Steinzeit in Form von Höhlenmalereien und Stoßzahngravuren.

History of infographics

»Menschen ignorieren Design, das Menschen ignoriert.«
Frank Chimero

Machen Sie Ihre Arbeit zugänglich — für alle!