Wenn statische Daten zu einem interaktiven Erlebnis im Web werden

Die Gestaltung und Programmierung der interaktiven Grafik für das ERA Portal Austria

Für die Plattform ERA Portal Austria entwickelten wir im Auftrag des Bundesministerium für Bildung, Wissenschaft und Forschung sowie dem Projektnehmer Zentrum für Soziale Innovation GmbH eine interaktive Grafik, die auf schnelle und übersichtliche Art verschiedene Zahlendimensionen verständlich visualisiert und durch intuitive Benutzerführung durch verschiedene Ebenen führt.

Begonnen hat alles mit Daten in einer Excel Tabelle. Die Herausforderung dabei war, die umfangreichen Kennzahlen sowie unterschiedlichen Programmbereiche so darzustellen, dass für die UserInnen eine klare Zuordnung und eine ansprechende Datenvisualisierung entstehen konnte.

Im ersten Schritt des Prozesses wurde daher die Art und Weise der visuellen Darstellungsform erarbeitet. Um die Komplexität der verschiedenen Finanzierungsquellen mit den entsprechenden Programmbereichen verständlich unterteilen zu können, wurde die Grafik in 3 Dimensionen bzw. Ebenen aufgeteilt und bedient sich in der Grundform eines Tortendiagramms, das per Mouse-Over weitere Informationen zur Verfügung stellt.

Per Klick bzw. Touch können sich so UserInnen intuitiv durch die verschiedenen Ebenen bewegen, die immer mehr Informationen zum entsprechenden Themenfeld preisgeben. Der prominente Zurück-Button sorgt für Orientierung, um spielerisch zwischen den Dimensionen zu wechseln. Die Farbpalette bildet eine visuelle Klammer für die Zugehörigkeit von Informationen zum entsprechenden Themenfeld.

Für die technische Realisierung dieses Projekts machten wir uns die JavaScript-Bibliothek D3.js zu Nutze, welche aufgrund ihrer Fähigkeit zur »Manipulation« von Dokumenten auf Basis von Daten unsere bevorzugte Wahl war. Gemeinsam mit unserem Kooperationspartner »Syntop – Studio für Interaktions- und Informationsdesign« und der mächtigen Data-Driven Documents-Bibliothek (D3) wurden die Zahlen/Daten durch mathematische Berechnungen in eine visuelle Umgebung eines Tortendiagramms übersetzt.

Durch nutzerzentriertes Interaktionsdesign verschmelzten Kreation und Technik so miteinander, dass allein still stehende Daten im Hintergrund zu einer interaktiven Datenvisualisierung mit spannender User-Experience im Vordergrund wurden. Somit sind Daten nicht nur etwas für den Kopf sondern genauso auch etwas für das Auge!

Daher freuen wir uns auf weitere Projekte solcher Art in Zukunft!

https://era.gv.at/horizon-europe/budget/

    Leistungen
  • Webdesign UI/UX (User Interface und User Experience Design)
  • Frontend und Backend Development
Ansprechpartner/-in
Andreas Huthwelker
Chief Digital Officer
E-Mail schreiben
    Partner/-innen
  • SYNTOP Studio for Interaction and Information Design
    Development
Weitere Projekte