Deutsche Welle • UX-Konzeption
Interaktive Infografiken für mobile Nutzung standardisieren
Komplexe Datenvisualisierungen müssen im redaktionellen Kontext schnell verständlich bleiben — auch auf kleinen Screens. Für dieses Proof of Concept entwickelte ich ein modulares UX-Modell, mit dem Nutzer bei Bedarf zusätzliche Details entdecken können, ohne von zu vielen Informationen überfordert zu werden.
Was ist wichtig?
Bestehende Infografiken waren statisches Visualisierungen und wurden ohne jegliche interaktion individuell gestaltet.
Die Formate wurden nach Datentyp, Funktion und Interaktionsmodell analysiert und hinsichtlich ihrer Standardisierbarkeit bewertet.
Im Mittelpunkt standen Orientierung, geringe kognitive Belastung, gut erreichbare Touch-Elemente und barrierearme Nutzung.
Das Konzept trennt Orientierung, Darstellung, Information und Interaktion in klar definierte, wiederverwendbare Bereiche.
Der Vergleich mit bestehenden Lösungen bestätigte eine verständlichere Bedienung und bessere Skalierbarkeit für redaktionelle Anwendungen.
Herausforderung
Statische Infografiken stoßen schnell an Grenzen, wenn sie viele Datenpunkte, Vergleichswerte oder Detailinformationen enthalten. Werden alle Informationen gleichzeitig gezeigt, entsteht visuelle Überlastung. Werden zu wenige Informationen gezeigt, fehlt Nutzer:innen der Zugang zu relevanten Details.
Dafür analysierte ich bestehende Umsetzungen, identifizierte wiederkehrende Muster und leitete daraus eine standardisierte Struktur für interaktive Infografiken ab.
Zentrale UX-Frage
Wie können Infografiken mehr Tiefe bieten und gleichzeitig auf Mobile gut nutzbar sein?
Der Kern des Konzepts war nicht mehr Interaktion an sich, sondern kontrollierte Vertiefung: Nutzer sollen Details entdecken können, ohne von Informationen überreizt zu werden.
Ausgangslage: viele Formate, wenig Standardisierung
Bestehende Infografiken wurden auf Gemeinsamkeiten, wiederkehrende Elemente und mobile Schwachstellen untersucht. Die Platzhalter markieren Bereiche für die analysierten Ausgangsformate.
Beispiele
Vorgehen
Ich habe bestehende interaktive Infografiken auf dw.com aus UX-Sicht analysiert und nach Funktion, Datentyp und Interaktionsmodell geclustert. Dabei wurde unterschieden, welche Formate sich für mobile Standardisierung eignen und welche aufgrund ihrer Komplexität eher als eigenständige Storytelling-Formate funktionieren.
Im Fokus standen Orientierung, Informationshierarchie, Interaktionslogik, mobile Bedienbarkeit, Lesbarkeit, Accessibility und kognitiver Aufwand.
Identifizierte Probleme und Anforderungen
Pain Points aus den Benchmark-Fallbeispielen
- unklare Interaktionsmöglichkeiten
- hoher kognitiver Aufwand beim Einstieg
- schwer bedienbare Touch-Elemente
- Hover-abhängige Tooltips auf mobilen Geräten
- fehlende Orientierung bei komplexen Datenzuständen
Abgeleitete Anforderungen
- Mobile-first
- klare Informationshierarchie
- Gute Erreichbarkeit der Interaktionselemente
- standardisierte Pattern für wiederkehrende Grafiktypen
- Barrierefreiheit
Lösung
Die Lösung basiert auf einem modularen Modell für interaktive Infografiken. Ziel war es die Bereiche für Interaktion und Informationen klar voneinander zu trennen und dadurch sowohl die Nutzung als auch die Erstellung komfortabler zu machen.
Einheitliche Informationsarchitektur
Feste Zonen sorgen für eine bessere Übersicht. Aus dem unteren Bereich wird die Dartstellung in der Informationszone gesteuert. Hier sind Interaktionenelemente leicht erreichbar und Informationen werden während der Interaktion nicht von Daumen oder Finger verdeckt und das Auge muss nicht so nicht so viel springen.
Orientierung
Titel, Kurzbeschreibung
Informationszone
Primäre Werte aus der Interaktion mit der Grafik werden hier angezeigt
Zeichenfläche
- Diagramme und Karten werden hier dargestellt.
- Durch die Interaktion wird die Informationszone gesteuert.
- Die Steuerung erfolgt durch Selection Line oder durch Auswahl eines Datenpunkts
- Anzeige sekundärer Informationen während der Interaktion sind möglich
Interaktionszone
Filtern und Auswählen mit Chips, Buttons und Dropdowns
Transparenz
Quelle, Datum, Methodik
Mockups mit Beispielen
Flächendiagramm
User hat die Selection Line verschoben. Alle Werte werden oben angezeigt.
Titel
Aktuelle Auswahl
Primärer Wert
Karte mit Chips
- User wählt Chip mit Gruppe aus.
- User wählt Region führ mehr Details.
Titel
Aktuelle Auswahl
Primärer Wert
Filter 1
Filter 2
Filter 3
Karte mit Datenpunkten
- User zoomt in die Karte.
- User wählt einen Datenpunkt.
Titel
Aktuelle Auswahl
Primärer Wert
+
−
Umsetzungen im Vergleich
Um die Anforderungen an mobile interaktive Infografiken für dw.com besser einzuordnen, wurden drei Umsetzungsvarianten verglichen: eine statische Grafik, eine standardisierte Datawrapper-Umsetzung und mein eigenes Konzept.
Statische Infografik
- Keine Interaktion möglich
- Nutzer:innen können die Details nur schätzen.
Umsetzung mit Datawrapper
- Interaktion ist auf Mobile nicht ausreichend erklärt.
- Tooltip-Logik wirkt stark Desktop-orientiert.
- Aktive Auswahl und Datenzustand sind nicht klar genug sichtbar.
- Legende, Chart und Detailinformationen müssen mental stärker zusammengeführt werden.
- Der kognitive Aufwand ist höher, weil Nutzer:innen die Grafik explorativ erschließen müssen.
- Während der Interaktion wird der Tooltip durch die Hand verdeckt.
Interaktives Beispiel
Umsetzung UX Konzept
- Mobile-first Interaktionsmodell mit klarem Touch-Hinweis.
- Sichtbarer Datenzustand durch Jahr, Gesamtwert und Detailwerte.
- Bessere Orientierung zwischen Überblick und Detailansicht.
- Geringerer kognitiver Aufwand durch geführte Nutzung.
- Barriereärmer durch erklärende Texte und zugänglichere Informationsstruktur.
- Besser als wiederverwendbares UX-Modul für redaktionelle Infografiken skalierbar.
Interaktives Beispiel
Hinweis: Diese Umsetzung erfolgte mit Codex und diente zur Überprüfungen des Konzepts. Sie ist nicht Teil meiner Arbeit bei der Deutschen Welle.
Ergebnis
Das Konzept schafft ein wiederverwendbares UX-Modell für interaktive Infografiken im Datenjournalismus.
Klarere Orientierung
Daten, Kontext, Filter und Aktionen sind in nachvollziehbare Zonen gegliedert.
Bessere mobile Bedienbarkeit
Interaktionen verdecken relevante Daten nicht und bleiben mit Touch-Gesten kontrollierbar.
Praktikabler Workflow
Das Modell unterstützt Redaktionen und Infografiker bei konsistenteren Umsetzungen.
Fazit
Das Projekt zeigt, dass Interaktivität nur dann einen Mehrwert bietet, wenn sie die Nutzung vereinfacht. Entscheidend ist nicht, möglichst viele Funktionen anzubieten, sondern Daten, Kontext und Aktionen so zu strukturieren, dass Nutzer Informationen kontrolliert vertiefen können.
Gerade auf mobilen Geräten müssen interaktive Infografiken lesbar, steuerbar und jederzeit wieder verlassbar bleiben.
Meine Projekte
Ausgewählte Arbeiten
Deutsche Welle
DW Breaking World News App
Eine mehrsprachige News-App neu strukturieren – nicht als mobile Kopie der Website, sondern als eigenständiges Produkt.
Projekt ansehen →
Deutsche Welle
Live Updates
Ein neues Format mit kompakter Informationsarchitektur macht dynamische Nachrichtenlagen für Nutzer:innen schneller erfassbar und bleibt zugleich flexibel für die Redaktion nutzbar.
Projekt ansehen →
Deutsche Welle
Interaktive Infografik
Komplexe Datengrafiken auf kleinen Screens verständlich, bedienbar und skalierbar machen.
Projekt ansehen →
SPring / welt.de
Polling-Tool
Ein internes Polling-Tool konzipieren als Entscheidungsgrundlage für eine Make-or-Buy-Frage
Projekt ansehen →
welt.de
Dashboard für welt.de
Eine zentrale Arbeitsoberfläche für die Redaktion entwickeln, die die Kuratierung der Startseite erleichtert und gleichzeitig die Qualität steigert.
Projekt ansehen →
welt.de
Usability messen und gezielt verbessern
SUS-Benchmark und Lab-Test machten Usability-Probleme sichtbar und lieferten konkrete Ansätze für die Weiterentwicklung.
Projekt ansehen →
Über dieses Projekt
Produkt
Interaktive Infografiken für DW.com
Plattform
Responsive Website · Fokus Mobile
Kontext
Datenjournalismus mit komplexen Visualisierungen
Meine Rolle
Analyse, UX-Konzeption, Architekturmodell, Mockups und Click-Dummy
Zusammenarbeit
Abstimmung mit Infografikern und Datenjournalisten
Output
Modulares UX-Modell für interaktive Grafiktypen
Kontakt
Ich freue mich über eine Nachricht.
hallo@christophkönig.com ↗Offen für: Remote-Positionen · Projektarbeit · Hybrid in Berlin, Wolfsburg, Magdeburg, Göttingen
Deutsche Welle • UX-Konzeption
Interaktive Infografiken für mobile Nutzung standardisieren
Komplexe Datenvisualisierungen müssen im redaktionellen Kontext schnell verständlich bleiben — auch auf kleinen Screens. Für dieses Proof of Concept entwickelte ich ein modulares UX-Modell, mit dem Nutzer bei Bedarf zusätzliche Details entdecken können, ohne von zu vielen Informationen überfordert zu werden.
Was ist wichtig?
Bestehende Infografiken waren statisches Visualisierungen und wurden ohne jegliche interaktion individuell gestaltet.
Die Formate wurden nach Datentyp, Funktion und Interaktionsmodell analysiert und hinsichtlich ihrer Standardisierbarkeit bewertet.
Im Mittelpunkt standen Orientierung, geringe kognitive Belastung, gut erreichbare Touch-Elemente und barrierearme Nutzung.
Das Konzept trennt Orientierung, Darstellung, Information und Interaktion in klar definierte, wiederverwendbare Bereiche.
Der Vergleich mit bestehenden Lösungen bestätigte eine verständlichere Bedienung und bessere Skalierbarkeit für redaktionelle Anwendungen.
Herausforderung
Statische Infografiken stoßen schnell an Grenzen, wenn sie viele Datenpunkte, Vergleichswerte oder Detailinformationen enthalten. Werden alle Informationen gleichzeitig gezeigt, entsteht visuelle Überlastung. Werden zu wenige Informationen gezeigt, fehlt Nutzer:innen der Zugang zu relevanten Details.
Dafür analysierte ich bestehende Umsetzungen, identifizierte wiederkehrende Muster und leitete daraus eine standardisierte Struktur für interaktive Infografiken ab.
Zentrale UX-Frage
Wie können Infografiken mehr Tiefe bieten und gleichzeitig auf Mobile gut nutzbar sein?
Der Kern des Konzepts war nicht mehr Interaktion an sich, sondern kontrollierte Vertiefung: Nutzer sollen Details entdecken können, ohne von Informationen überreizt zu werden.
Ausgangslage: viele Formate, wenig Standardisierung
Bestehende Infografiken wurden auf Gemeinsamkeiten, wiederkehrende Elemente und mobile Schwachstellen untersucht. Die Platzhalter markieren Bereiche für die analysierten Ausgangsformate.
Beispiele
Vorgehen
Ich habe bestehende interaktive Infografiken auf dw.com aus UX-Sicht analysiert und nach Funktion, Datentyp und Interaktionsmodell geclustert. Dabei wurde unterschieden, welche Formate sich für mobile Standardisierung eignen und welche aufgrund ihrer Komplexität eher als eigenständige Storytelling-Formate funktionieren.
Im Fokus standen Orientierung, Informationshierarchie, Interaktionslogik, mobile Bedienbarkeit, Lesbarkeit, Accessibility und kognitiver Aufwand.
Identifizierte Probleme und Anforderungen
Pain Points aus den Benchmark-Fallbeispielen
- unklare Interaktionsmöglichkeiten
- hoher kognitiver Aufwand beim Einstieg
- schwer bedienbare Touch-Elemente
- Hover-abhängige Tooltips auf mobilen Geräten
- fehlende Orientierung bei komplexen Datenzuständen
Abgeleitete Anforderungen
- Mobile-first
- klare Informationshierarchie
- Gute Erreichbarkeit der Interaktionselemente
- standardisierte Pattern für wiederkehrende Grafiktypen
- Barrierefreiheit
Lösung
Die Lösung basiert auf einem modularen Modell für interaktive Infografiken. Ziel war es die Bereiche für Interaktion und Informationen klar voneinander zu trennen und dadurch sowohl die Nutzung als auch die Erstellung komfortabler zu machen.
Einheitliche Informationsarchitektur
Feste Zonen sorgen für eine bessere Übersicht. Aus dem unteren Bereich wird die Dartstellung in der Informationszone gesteuert. Hier sind Interaktionenelemente leicht erreichbar und Informationen werden während der Interaktion nicht von Daumen oder Finger verdeckt und das Auge muss nicht so nicht so viel springen.
Orientierung
Titel, Kurzbeschreibung
Informationszone
Primäre Werte aus der Interaktion mit der Grafik werden hier angezeigt
Zeichenfläche
- Diagramme und Karten werden hier dargestellt.
- Durch die Interaktion wird die Informationszone gesteuert.
- Die Steuerung erfolgt durch Selection Line oder durch Auswahl eines Datenpunkts
- Anzeige sekundärer Informationen während der Interaktion sind möglich
Interaktionszone
Filtern und Auswählen mit Chips, Buttons und Dropdowns
Transparenz
Quelle, Datum, Methodik
Mockups mit Beispielen
Flächendiagramm
User hat die Selection Line verschoben. Alle Werte werden oben angezeigt.
Titel
Aktuelle Auswahl
Primärer Wert
Karte mit Chips
- User wählt Chip mit Gruppe aus.
- User wählt Region führ mehr Details.
Titel
Aktuelle Auswahl
Primärer Wert
Filter 1
Filter 2
Filter 3
Karte mit Datenpunkten
- User zoomt in die Karte.
- User wählt einen Datenpunkt.
Titel
Aktuelle Auswahl
Primärer Wert
+
−
Umsetzungen im Vergleich
Um die Anforderungen an mobile interaktive Infografiken für dw.com besser einzuordnen, wurden drei Umsetzungsvarianten verglichen: eine statische Grafik, eine standardisierte Datawrapper-Umsetzung und mein eigenes Konzept.
Statische Infografik
- Keine Interaktion möglich
- Nutzer:innen können die Details nur schätzen.
Umsetzung mit Datawrapper
- Interaktion ist auf Mobile nicht ausreichend erklärt.
- Tooltip-Logik wirkt stark Desktop-orientiert.
- Aktive Auswahl und Datenzustand sind nicht klar genug sichtbar.
- Legende, Chart und Detailinformationen müssen mental stärker zusammengeführt werden.
- Der kognitive Aufwand ist höher, weil Nutzer:innen die Grafik explorativ erschließen müssen.
- Während der Interaktion wird der Tooltip durch die Hand verdeckt.
Interaktives Beispiel
Umsetzung UX Konzept
- Mobile-first Interaktionsmodell mit klarem Touch-Hinweis.
- Sichtbarer Datenzustand durch Jahr, Gesamtwert und Detailwerte.
- Bessere Orientierung zwischen Überblick und Detailansicht.
- Geringerer kognitiver Aufwand durch geführte Nutzung.
- Barriereärmer durch erklärende Texte und zugänglichere Informationsstruktur.
- Besser als wiederverwendbares UX-Modul für redaktionelle Infografiken skalierbar.
Interaktives Beispiel
Hinweis: Diese Umsetzung erfolgte mit Codex und diente zur Überprüfungen des Konzepts. Sie ist nicht Teil meiner Arbeit bei der Deutschen Welle.
Ergebnis
Das Konzept schafft ein wiederverwendbares UX-Modell für interaktive Infografiken im Datenjournalismus.
Klarere Orientierung
Daten, Kontext, Filter und Aktionen sind in nachvollziehbare Zonen gegliedert.
Bessere mobile Bedienbarkeit
Interaktionen verdecken relevante Daten nicht und bleiben mit Touch-Gesten kontrollierbar.
Praktikabler Workflow
Das Modell unterstützt Redaktionen und Infografiker bei konsistenteren Umsetzungen.
Fazit
Das Projekt zeigt, dass Interaktivität nur dann einen Mehrwert bietet, wenn sie die Nutzung vereinfacht. Entscheidend ist nicht, möglichst viele Funktionen anzubieten, sondern Daten, Kontext und Aktionen so zu strukturieren, dass Nutzer Informationen kontrolliert vertiefen können.
Gerade auf mobilen Geräten müssen interaktive Infografiken lesbar, steuerbar und jederzeit wieder verlassbar bleiben.
Über dieses Projekt
Produkt
Interaktive Infografiken für DW.com
Plattform
Responsive Website · Fokus Mobile
Kontext
Datenjournalismus mit komplexen Visualisierungen
Meine Rolle
Analyse, UX-Konzeption, Architekturmodell, Mockups und Click-Dummy
Zusammenarbeit
Abstimmung mit Infografikern und Datenjournalisten
Output
Modulares UX-Modell für interaktive Grafiktypen
Meine Projekte
Ausgewählte Arbeiten
Deutsche Welle
DW Breaking World News App
Eine mehrsprachige News-App neu strukturieren – nicht als mobile Kopie der Website, sondern als eigenständiges Produkt.
Projekt ansehen →
Deutsche Welle
Live Updates
Ein neues Format mit kompakter Informationsarchitektur macht dynamische Nachrichtenlagen für Nutzer:innen schneller erfassbar und bleibt zugleich flexibel für die Redaktion nutzbar.
Projekt ansehen →
Deutsche Welle
Interaktive Infografik
Komplexe Datengrafiken auf kleinen Screens verständlich, bedienbar und skalierbar machen.
Projekt ansehen →
SPring / welt.de
Polling-Tool
Ein internes Polling-Tool konzipieren als Entscheidungsgrundlage für eine Make-or-Buy-Frage
Projekt ansehen →
welt.de
Dashboard für welt.de
Eine zentrale Arbeitsoberfläche für die Redaktion entwickeln, die die Kuratierung der Startseite erleichtert und gleichzeitig die Qualität steigert.
Projekt ansehen →
welt.de
Usability messen und gezielt verbessern
SUS-Benchmark und Lab-Test machten Usability-Probleme sichtbar und lieferten konkrete Ansätze für die Weiterentwicklung.
Projekt ansehen →
Kontakt
Ich freue mich über eine Nachricht.
hallo@christophkönig.com ↗Offen für: Remote-Positionen · Projektarbeit · Hybrid in Berlin, Wolfsburg, Magdeburg, Göttingen
Deutsche Welle • UX-Konzeption
Interaktive Infografiken für mobile Nutzung standardisieren
Komplexe Datenvisualisierungen müssen im redaktionellen Kontext schnell verständlich bleiben — auch auf kleinen Screens. Für dieses Proof of Concept entwickelte ich ein modulares UX-Modell, mit dem Nutzer bei Bedarf zusätzliche Details entdecken können, ohne von zu vielen Informationen überfordert zu werden.
Was ist wichtig?
Bestehende Infografiken wurden individuell als statisches Visualisierungen erstellt und waren ohne jegliche Interaktion.
Die Formate wurden nach Datentyp, Funktion und Interaktionsmodell analysiert und hinsichtlich ihrer Standardisierbarkeit bewertet.
Im Mittelpunkt standen Orientierung, geringe kognitive Belastung, gut erreichbare Touch-Elemente und barrierearme Nutzung.
Das Konzept trennt Orientierung, Darstellung, Information und Interaktion in klar definierte, wiederverwendbare Bereiche.
Der Vergleich mit bestehenden Lösungen bestätigte eine verständlichere Bedienung und bessere Skalierbarkeit für redaktionelle Anwendungen.
Herausforderung
Statische Infografiken stoßen schnell an Grenzen, wenn sie viele Datenpunkte, Vergleichswerte oder Detailinformationen enthalten. Werden alle Informationen gleichzeitig gezeigt, entsteht visuelle Überlastung. Werden zu wenige Informationen gezeigt, fehlt Nutzer:innen der Zugang zu relevanten Details.
Dafür analysierte ich bestehende Umsetzungen, identifizierte wiederkehrende Muster und leitete daraus eine standardisierte Struktur für interaktive Infografiken ab.
Zentrale UX-Frage
Wie können Infografiken mehr Tiefe bieten und gleichzeitig auf Mobile gut nutzbar sein?
Der Kern des Konzepts war nicht nur Interaktion an sich, sondern mehr Übersicht und kontrollierte Vertiefung: Nutzer sollen Details entdecken können, ohne Orientierung und Lesefluss zu verlieren.
Ausgangslage: viele Formate, wenig Standardisierung
Bestehende Infografiken wurden auf Gemeinsamkeiten, wiederkehrende Elemente und mobile Schwachstellen untersucht. Die Platzhalter markieren Bereiche für die analysierten Ausgangsformate.
Beispiele
Vorgehen
Ich habe bestehende interaktive Infografiken auf dw.com aus UX-Sicht analysiert und nach Funktion, Datentyp und Interaktionsmodell geclustert. Dabei wurde unterschieden, welche Formate sich für mobile Standardisierung eignen und welche aufgrund ihrer Komplexität eher als eigenständige Storytelling-Formate funktionieren.
Im Fokus standen Orientierung, Informationshierarchie, Interaktionslogik, mobile Bedienbarkeit, Lesbarkeit, Accessibility und kognitiver Aufwand.
Identifizierte Probleme und Anforderungen
Pain Points aus den Benchmark-Fallbeispielen
- unklare Interaktionsmöglichkeiten
- hoher kognitiver Aufwand beim Einstieg
- schwer bedienbare Touch-Elemente
- Hover-abhängige Tooltips auf mobilen Geräten
- fehlende Orientierung bei komplexen Datenzuständen
Abgeleitete Anforderungen
- Mobile-first
- klare Informationshierarchie
- Gute Erreichbarkeit der Interaktionselemente
- standardisierte Pattern für wiederkehrende Grafiktypen
- Barrierefreiheit
Lösung
Die Lösung basiert auf einem modularen Modell für interaktive Infografiken. Ziel war es die Bereiche für Interaktion und Informationen klar voneinander zu trennen und dadurch sowohl die Nutzung als auch die Erstellung komfortabler zu machen.
Einheitliche Informationsarchitektur
Feste Zonen sorgen für eine bessere Übersicht. Aus dem unteren Bereich wird die Dartstellung in der Informationszone gesteuert. Hier sind Interaktionenelemente leicht erreichbar und Informationen werden während der Interaktion nicht von Daumen oder Finger verdeckt und das Auge muss nicht so nicht so viel springen.
Orientierung
Titel, Kurzbeschreibung
Informationszone
Primäre Werte aus der Interaktion mit der Grafik werden hier angezeigt
Zeichenfläche
- Diagramme und Karten werden hier dargestellt.
- Durch die Interaktion wird die Informationszone gesteuert.
- Die Steuerung erfolgt durch Selection Line oder durch Auswahl eines Datenpunkts
- Anzeige sekundärer Informationen während der Interaktion sind möglich
Interaktionszone
Filtern und Auswählen mit Chips, Buttons und Dropdowns
Transparenz
Quelle, Datum, Methodik
Mockups mit Beispielen
Flächendiagramm
User hat die Selection Line verschoben. Alle Werte werden oben angezeigt.
Titel
Aktuelle Auswahl
Primärer Wert
Karte mit Chips
- User wählt Chip mit Gruppe aus.
- User wählt Region führ mehr Details.
Titel
Aktuelle Auswahl
Primärer Wert
Filter 1
Filter 2
Filter 3
Karte mit Datenpunkten
- User zoomt in die Karte.
- User wählt einen Datenpunkt.
Titel
Aktuelle Auswahl
Primärer Wert
+
−
Umsetzungen im Vergleich
Um die Anforderungen an mobile interaktive Infografiken für dw.com besser einzuordnen, wurden drei Umsetzungsvarianten verglichen: eine statische Grafik, eine standardisierte Datawrapper-Umsetzung und mein eigenes Konzept.
Statische Infografik
- Keine Interaktion möglich
- Nutzer:innen können die Details nur schätzen.
Umsetzung mit Datawrapper
- Interaktion ist auf Mobile nicht ausreichend erklärt.
- Tooltip-Logik wirkt stark Desktop-orientiert.
- Aktive Auswahl und Datenzustand sind nicht klar genug sichtbar.
- Legende, Chart und Detailinformationen müssen mental stärker zusammengeführt werden.
- Der kognitive Aufwand ist höher, weil Nutzer:innen die Grafik explorativ erschließen müssen.
- Während der Interaktion wird der Tooltip durch die Hand verdeckt.
Interaktives Beispiel
Umsetzung UX Konzept
- Mobile-first Interaktionsmodell mit klarem Touch-Hinweis.
- Sichtbarer Datenzustand durch Jahr, Gesamtwert und Detailwerte.
- Bessere Orientierung zwischen Überblick und Detailansicht.
- Geringerer kognitiver Aufwand durch geführte Nutzung.
- Barriereärmer durch erklärende Texte und zugänglichere Informationsstruktur.
- Besser als wiederverwendbares UX-Modul für redaktionelle Infografiken skalierbar.
Interaktives Beispiel
Hinweis: Diese Umsetzung erfolgte mit Codex und diente zur Überprüfungen des Konzepts. Sie ist nicht Teil meiner Arbeit bei der Deutschen Welle.
Ergebnis
Das Konzept schafft ein wiederverwendbares UX-Modell für interaktive Infografiken im Datenjournalismus.
Klarere Orientierung
Daten, Kontext, Filter und Aktionen sind in nachvollziehbare Zonen gegliedert.
Bessere mobile Bedienbarkeit
Interaktionen verdecken relevante Daten nicht und bleiben mit Touch-Gesten kontrollierbar.
Praktikabler Workflow
Das Modell unterstützt Redaktionen und Infografiker bei konsistenteren Umsetzungen.
Fazit
Das Projekt zeigt, dass Interaktivität nur dann einen Mehrwert bietet, wenn sie die Nutzung vereinfacht. Entscheidend ist nicht, möglichst viele Funktionen anzubieten, sondern Daten, Kontext und Aktionen so zu strukturieren, dass Nutzer Informationen kontrolliert vertiefen können.
Gerade auf mobilen Geräten müssen interaktive Infografiken lesbar, steuerbar und jederzeit wieder verlassbar bleiben.
Über dieses Projekt
Produkt
Interaktive Infografiken für DW.com
Plattform
Responsive Website · Fokus Mobile
Kontext
Datenjournalismus mit komplexen Visualisierungen
Meine Rolle
Analyse, UX-Konzeption, Architekturmodell, Mockups und Click-Dummy
Zusammenarbeit
Abstimmung mit Infografikern und Datenjournalisten
Output
Modulares UX-Modell für interaktive Grafiktypen
Meine Projekte
Ausgewählte Arbeiten
Deutsche Welle
DW Breaking World News App
Eine mehrsprachige News-App neu strukturieren – nicht als mobile Kopie der Website, sondern als eigenständiges Produkt.
Projekt ansehen →
Deutsche Welle
Live Updates
Ein neues Format mit kompakter Informationsarchitektur macht dynamische Nachrichtenlagen für Nutzer:innen schneller erfassbar und bleibt zugleich flexibel für die Redaktion nutzbar.
Projekt ansehen →
Deutsche Welle
Interaktive Infografik
Komplexe Datengrafiken auf kleinen Screens verständlich, bedienbar und skalierbar machen.
Projekt ansehen →
SPring / welt.de
Polling-Tool
Ein internes Polling-Tool konzipieren als Entscheidungsgrundlage für eine Make-or-Buy-Frage
Projekt ansehen →
welt.de
Dashboard für welt.de
Eine zentrale Arbeitsoberfläche für die Redaktion entwickeln, die die Kuratierung der Startseite erleichtert und gleichzeitig die Qualität steigert.
Projekt ansehen →
welt.de
Usability messen und gezielt verbessern
SUS-Benchmark und Lab-Test machten Usability-Probleme sichtbar und lieferten konkrete Ansätze für die Weiterentwicklung.
Projekt ansehen →
Kontakt
Ich freue mich über eine Nachricht.
hallo@christophkönig.com ↗Offen für: Remote-Positionen · Projektarbeit · Hybrid in Berlin, Wolfsburg, Magdeburg, Göttingen