Herangehensweise - von Print zu Digital
Die Digitalisierung eines Print-Formats bringt meist neue Chancen und Herausforderungen mit sich. Der grösste Vorteil liegt in der höheren Flexibilität. Durch die Digitalisierung können die Fakten & Zahlen nun laufend aktualisiert und einfacher verteilt werden. In Zusammenarbeit mit der Design-Agentur Usable Brands haben wir existierende Visualisierungen aus dem Print-Medium neu für das digitale, reaktionsfähige Format neu interpretiert. Eine zentrale Herausforderung war hierbei, mögliche Ausnahmefälle zu generalisieren und wiederverwendbare Komponenten zu finden, welche möglichst viele Fälle abdecken können.
In iterativen Schritten haben wir den Design-Prozess mit einem digitalen Prototyp ergänzt, um das wirkliche Erlebnis in der digitalen Welt testen und verbessern zu können.
Daten, Daten, Daten
Eine Herausforderung war, dass die finalen Daten während der Entwicklung noch nicht verfügbar waren. Wir konnten die Visualisierungen bereits mit Testdaten der vergangenen Jahre testen, aber Klarheit über die Anforderungen entwickelte sich erst im Laufe des Projektes, während die Daten geliefert und aufbereitet wurden.
Responsive Design für interaktive Charts
Besonderes Augenmerk legten wir hierbei auf die Lösung, dass diese möglichst mit ändernden Daten skaliert und Editor*innen die Möglichkeit bekommen, die Darstellung der Daten im Rahmen des CI/CD anzupassen.
Dadurch, dass sowohl Daten als auch die Grösse der Devices von Benutzenden variieren können, haben wir Lösungen entwickelt, welche die Charts Mobile-first für Smartphones aber auch für Desktop-Devices optimiert. Bei sehr kleinen Datasets verzichten wir auf den Label und zeigen diesen nur bei Interaktion an. Labels für Zeilen erscheinen auf Mobile oberhalb der Zeile, während wir auf Desktop den verfügbaren Platz nutzen und den Zeilen-Label direkt am Beginn der Zeile anzeigen können. Besonders lange Line-Charts werden auf Mobile durch horizontal Scroll zugänglich gemacht während auf Desktop das Chart komplett angezeigt werden kann. Die Donut-Charts profitieren davon, dass wir die Labels entsprechend der Grösse des Kuchenstücks skalieren - kleine Werte werden mit kleinerem Label und grössere Werte mit grösserem Label dargestellt.
Resultat
Die Fakten und Zahlen können auf der Website von pharmaSuisse besucht werden.
Im Folgenden zeigen wir beispielhaft, wie die Fakten und Zahlen visualisiert wurden:
Editorial Experience
Um die Gestaltung und Aufbereitung möglichst effizient zu unterstützen, haben wir den blökkli-Editor um Chart-Funktionalitäten erweitert. Zuerst werden die Daten in strukturierter Form z. B. als CSV hochgeladen.
Im einem zweiten Schritt kann die Redaktion die strukturierten Daten interaktiv in blökkli aufbereiten. Die Auswahl vordefinierter Farbpaletten sowie Schieberegler für Einstellungen helfen dabei, die Positionierung und die Darstellung optimal anzupassen.
Charts können auch als PDF exportiert werden. Editor*innen können manuell einen Zeilenumbruch setzen, um das Layout der Chartseiten zu optimieren.
Ausblick
Die interaktiven Charts für pharmaSuisse konnten erfolgreich released werden und werden laufend aktualisiert. pharmaSuisse profitiert insofern, dass Fakten direkt über digitale Kanäle versendet und regelmässig aktualisiert werden können. Aktuell planen wir die zweite Iteration: Die Darstellung von Fakten wird optimiert, mit Fokus auf Interaktionen und Lesbarkeit.
Vielen Dank pharmaSuisse für das Vertrauen und die Zusammenarbeit. Herzlichen Dank an Usable Brands und Jan Hug sowie Jens Vranckz für die Umsetzung! Wir freuen uns, für Fakten und Zahlen eine ansprechende Visualisierung erstellen und weiterentwickeln zu können.