Die interaktive Website entstand im Rahmen des Mastermoduls 'Datenvisualisierung', welches sich über ein Semester (Okt 2020 - Feb 2021) streckte.
Informationen
ÜBER DAS PROJEKT
Auftraggeber
Projekt im Rahmen des Mastermoduls 'Datenvisualisierung' an der Hochschule Augsburg
Übernommene Aufgabenbereiche
Projektmanagement | Recherche | Datenaufbereitung | Konzeption | UI Design | Teil der Frontend-Entwicklung
Team
Johannes Hanisch | Larissa Schmidt | Julia Wirth |
Tools
Trello | Lottie | Adobe XD | Miro | Zoom | Adobe Illustrator | Adobe Photoshop | Visual Studio Code
Problem | Lösung
Zielsetzung
Problem:
Durch die damals aktuelle Situation der COVID-19-Pandemie, war das Thema Impfen eine weltweite Debatte. Das Projekt entstand kurz bevor die ersten Impfungen verabreicht wurden. Zu diesem Zeitpunkt wollten sich
laut einer Umfrage des Meinungsforschungsinstituts YouGov, weniger als 55 Prozent impfen lassen. Die Angst vor potentiellen Nebenwirkungen war groß. Dabei erschien zum damaligen Zeitpunkt, die Herdenimmunisierung durch die Schutzimpfung,
als einzig realistische Lösung, um schlimme Zukunfts-Szenarien zu entgehen.
Lösung:
Für unser Semesterprojekt haben wir uns zur Aufgabe gemacht, die Besucher*innen unserer interaktiven Info-Seite über die Wirkung von Impfungen aufzuklären. Dabei war es uns wichtig, nicht zu belehren oder
eine Meinung aufzudrücken, sondern durch informative Datenaufbereitung den Betrachter*innen die Wirkung der Schutzimpfungen und der Herdenimmunität aufzuzeigen.
Die Website soll durch einen interaktiv steuerbaren Simulator aufzeigen, dass eine Immunisierung durch eine Schutzimpfung um weiten weniger tote Menschen mit sich bringt, als eine Immunisierung, durch das überstehen einer
Krankheit.
Vorgehensweise
Entwicklungsprozess
Bei diesem Projekt stand die Datenvisualisierung im Fokus. Die Daten sollten sowohl informativ, als auch anschaulich gegliedert und dargestellt werden und die Nutzer*innen dazu einladen, sich mit der Thematik auseinanderzusetzen.
1. Datenaufbereitung
Es wurde zuerste eine großflächige Recherche durchgeführt und anschließend die Daten sortiert, gegliedert und aufbereitet.
2. Konzeption
Anschließend wurden User Flows und erste Skizzen erstellt, als Grundlage für die Konzeption von Wireframes, die als Basis für das Design der App dienten.
4. Entwicklung
Abschließend konnte das zuvor erstellte Design, mittels HTML, CSS und JavaScript entwickelt werden.
Interaktive Website
Einblicke in das Ergebnis
Das Ergebnis dieser Arbeit stellt eine interaktive Website dar, die die Besucher*innen dazu einlädt sich mit der Thematik des Impfens zu befassen.
Startbildschirm
Besucher*innen der Wesbite sehen zuerst eine Anfangsanimation, welche die Ausbreitung von Pocken ohne Immunität zeigt. Die Anfangsanimation soll einleitend zum Thema wirken und aufzeigen, wie schnell sich diese Krankheit ausbreiten kann, wenn keine Immunität vorhanden ist.
Übersichtsseite
Die Übersichtsseite zeigt die Navigationspunkte der Website auf.
Diese gliedern sich in „Informiere Dich!“, „Schütze Dich!“ und Hilf Anderen!.
Informiere Dich!
Die Betrachter*innen können sich zuerst wichtige Informationen holen, die sie benötigen, um die Hauptattraktion der Website, den Simulator, zu verstehen. Die Seite ist sehr interaktiv aufgebaut. Die Nutzer*innen entscheiden selbst, was sie angezeigt bekommen möchten, indem sie die zugehörigen Buttons betätigen.
Schütze Dich!
Durch den „Schütze Dich“ Navigationspunkt können die Nutzer*innen wichtige Informationen über drei Infektionskrankheiten sammeln. Es findet sich zu jeder Krankheit „Allgemeine Informationen“, „Einflussfaktoren, die die Ausbreitung begünstigen“ und „Einflussfaktoren, die die Ausbreitung behindern“.
Schütze Dich! – Informationen
Um die Besucher*innen einen guten Vergleich der einzelnen Krankheiten bieten zu können, wurde darauf geachtet, dass von den Infos der einen Krankheit, durch die Pfeile auf der rechten und linken Seite, gleich weiter auf die Infos einer anderen Krankheit gesprungen werden kann.
Einflussfaktoren
Beim Design war uns hier wichtig, den Nutzer*innen einen guten Überblick und Vergleich der einzelnen Krankheiten bieten zu können. Dabei werden beeinflussbare Faktoren und nicht beeinflussbare Faktoren abgegrenzt voneinander dargestellt. Einige dieser Daten wurden bei der programmierten Simulation, die die Ausbreitung der Krankheiten mit entsprechender Impfquote zeigt, miteingearbeitet, um den Unterschied aufzuzeigen.
Erlerntes Wissen anwenden + abspeichern!
Der „Hilf Anderen“ Bereich bildet das Herzstück des Projekts. Dahinter verbirgt sich nach einem kurzen Einleitungstext ein Simulator, wodurch der Nutzer sein gelerntes Wissen in Anwendung setzen und damit Krankheitsverläufe vergleichen kann. Die Nutzer*innen können dabei Krankheiten auswählen, deren Verlauf sie dann gegenüber angezeigt bekommen – dabei kann die Anzahl der Geimpften variiert werden.
Simulator in Anwendung
Beim Design der Simulation war uns wichtig, dass die Krankheiten auch gegenübergestellt werden können. Damit kann der Nutzer sogar zwei gleiche Krankheiten, mit unterschiedlicher Impfrate miteinander vergleichen, um bildlich zu sehen, wie eine höhere Impfrate dazu beiträgt, eine Krankheit einzudämmen – was wiederum unsere Kernaussage des ganzen Projekts stützt!
Zum nächsten Projekt