Die Corona
Warn-App

Was denkt die Bevölkerung über die App?
Und warum könnte es wichtig sein sie installiert zu haben?

gründe für
die installation der app

Umfrage zu den Gründen für den Download der Corona-Warn-App in Deutschland 2020

Im Rahmen einer Appinio-Umfrage aus dem Juni 2020 gab mehr als die Hälfte der Befragten an, dass sie die Corona-Warn-App herunterladen, weil sie im Kampf gegen Corona helfen möchten. Etwa ein Drittel wollten mit Hilfe der App wissen, ob man infiziert ist. Die offizielle deutsche Corona-Warn-App ist seit dem 16. Juni zum Download verfügbar. Das Herunterladen der App, die das Nachverfolgen von Corona-Infektionen erleichtern soll, ist freiwillig.

Möchte im Kampf gegen Corona helfen
Eigenes Ansteckungsrisiko erfahren
Sicherheitsgefühl
Möchten wissen ob sie infiziert sind
Neugierde
Einfacher Zugang zu Testergebnissen

gründe gegen
die installation der app

Umfrage zu den Gründen für den Nicht-Download der Corona-Warn-App in Deutschland 2020

Im Rahmen einer Umfrage von Appinio gaben rund 39 Prozent der Befragten in Deutschland am 17. Juni 2020 an, dass sie die Corona-Warn-App nicht herunterladen wollen, da diese App ihrer Meinung nach sinnlos ist. Derweil sorgten sich rund 37 Prozent der Befragten um den Datenschutz.

App ist sinnlos
Gefühl von Kontrolle (Staat)
Bewegungsdaten sollen nicht erfasst werden
Kein Interesse
Wollen nichts von Corona hören
Akku schnell leer durch Bluetooth
Smartphone erfüllt Anforderungen nicht
Corona ist ihrer Meinung nach vorbei
Kein Speicherplatz
Eigene Daten nicht notwendig wenn andere die App nutzen

warum es wichtig ist

Es gibt verschiedene Gründe die Corona-Warn-App zu installieren.

Die Nutzer erhalten Informationen darüber, ob man Infizierten nahe gekommen ist. Aber sie liefert auch Informationen über die Pandemie, und vor allem, ist die App ist nicht nur dafür da, Menschen zu warnen, sondern auch dazu, ein Testergebnis viel schneller zu erhalten und um Dritte zu warnen, die man nicht einmal kennt, weil sie zum Beispiel nur im gleichen Bus saßen.
Neu ist auch, dass Menschen, die sich mit dem Corona-Virus angesteckt haben, nun auch Informationen über Symptome und den möglichen Zeitpunkt ihrer Ansteckung hinterlegen können. Das erlaubt dann genauere Informationen in der App für die möglichen Kontaktpersonen.

Aktuelle Fallzahlen Weltweit

icon für genesene
0
icon für erkrankte
0
icon für verstorbene
0

Dokumentation

Ziel

Ziel dieser Website ist es die Menschen in Deutschland über die Corona-Warn-App zu informieren und zu einer Installation zu bewegen.
Viele Menschen haben die App aus verschiedensten Gründen immer noch nicht installiert und Ziel soll es sein, das diese Menschen sich mit der App auseinandersetzen und vielleicht ihre Meinung ändern.

Idee

Die Idee hierbei ist, dass die Vorurteile gegenüber der App, den Gründen für eine App Installation gegenübergestellt werden.
Die Balkendiagramme sollen die Meinung der deutschen Bevölkerung widerspiegeln, worauf hin dann im letzten Abschnitt erklärt wird, warum es so wichtig ist die App zu installieren. Dies wird nochmal von einem Counter unterstützt, der die Fallzahlen weltweit anzeigt.
Dieser Counter soll eben die Wichtigkeit einer Prävention klarmachen und wie wichtig es ist Infektionsketten zu unterbrechen. Viele Menschen schauen sich nur die Fälle in ihrem Umfeld an, was ihr Bild natürlich verzerrt, da Sie das große ganze aus den Augen verlieren.
Zusätzlich kennen viele Menschen gar nicht den vollen Funktionsumfang der App und wissen nicht, dass sie hier zum Beispiel auch Testergebnisse einsehen können.
Außerdem hält sich auch nach wie vor hartnäckig das Gerücht, dass die App mehr Akku durch Bluetooth verbraucht, oder dass man durch den Staat kontrolliert werden würde. Dabei ist es so, dass eingeschaltetes Bluetooth schon seit Jahren nicht merkbar mehr Akku verbraucht und das die App keinerlei Standorte oder persönliche Daten speichert, sondern nur Begegnungen mit anderen App Usern.

Diagrammtypen

Bei Infografik 1 und 2 habe ich mich für ein Balkendiagramm entschieden, allerdings extrem simplifiziert, um die verschiedenen Anteile der Meinungen ins Verhältnis zu setzen und vor allem auch um eine Hierarchie zwischen den Punkten zu schaffen.
Dies hätte beispielsweise bei einem Tortendiagramm nicht funktioniert, da es nur ins Verhältnis setzt aber es keine "Rangordnung" angibt. Mein Ziel war es hier, dass auf den 1. Blick die genannten Punkte und ihre Rangfolge klar sind.
Für ein Balkendiagramm ohne Skala und Nulllinie habe ich mich entschieden, da ich es so simpel wie möglich halten wollte, um die Aufmerksamkeit auf das wichtigste zu lenken und da ich groß Prozentwerte angebe, ist es hier meiner Meinung nach auch nicht nötig. Es geht hier um die Werte und um die Rangfolge und nicht darum das man die Werte von den Balken ablesen muss.
Außerdem ist es hier auch zum Teil eine Designentscheidung gewesen, da meine ganze Website sehr aufgeräumt und minimalistisch gestaltet ist und ich dieses Muster hier auch nicht brechen wollte.

Bei Infografik 3 habe ich mich für eine einfache Gegenüberstellung der Zahlen entschieden, da hier nicht mehr als ein einfacher Vergleich der Zahlen gewollt ist.
Um diese grafisch zu unterstützen hat jede dieser Zahlen ein Icon, um diese leichter zuordnen zu können.

Gestaltung und Anwendung

Da es sich hier um ein medizinisches sowie technisches Thema handelt, habe ich mich für ein helles und "cleanes" Design entschieden, was professionell und übersichtlich wirken soll.
Als Akzentfarben habe ich mich für Rot und Blau entschieden, da sie zum einem, einen guten (Komplementär) Kontrast bilden und zum anderen auch von der Wahrnehmung zum Thema der Website passen.
Rot steht vor allem für Gefahr und Warnung, und das Virus ist eben eine Gefahr, vor der hier gewarnt wird. Außerdem wie die Farbkombination Rot/weiß auch oft mit Krankenhaus oder Krankheit assoziiert (Deutsches Rotes Kreuz).
Blau habe ich gewählt da es im Kontrast zu Rot für Kraft, Vertrauen und Sicherheit steht, was sich hier eher auf die App als auf das Virus bezieht.

Auch typografisch habe ich versucht es möglichst modern und aufgeräumt zu halten und mit prägnanten Headlines die Aufmerksamkeit des Benutzers zu erwecken. Direkt das Hero-Element soll den Usern anregen nach unten zu scrollen oder den Button zu klicken, um mehr über das Thema zu erfahren.
Die Balkendiagramme habe ich jeweils über die volle Breite gehen lassen, da sie sonst sehr klein und schlecht lesbar gewesen wären.
Bei dem Counter (Infografik 3) habe ich mich für eine 40/60 Aufteilung entschieden, um das Design etwas aufzulockern nach den 2 Balkendiagrammen.

Animation und Technik

Bei den Balkendiagrammen habe ich mich für eine Count Up Animation entschieden, die zum einen die Zahlen animiert und zum anderen die einzelnen Balken auffährt. Das soll nochmal die Hierarchie der einzelnen Punkte unterstreichen, da große/hohe Werte natürlich stärker animiert sind.

Bei dem Counter habe ich mich ebenfalls für eine Count Up Animation entschieden, hier aber um die Größe der Zahlen zu unterstreichen.
Außerdem habe ich noch Tooltips jeweils zu jedem Wert eingefügt, um eine Interaktion mit dem User zu schaffen. Das Design bleibt seiner Linie treu, in dem es minimalistisch bleibt, der User kann aber mehr erfahren bzw. bekommt eine Erklärung, falls er die Icons nicht versteht.

Bezogen auf alle Animationen war es mir wichtig, dass sie erst getriggert werden, wenn der User zu den Elementen scrollt, da bei so einer langen Seite die Animation bis dahin natürlich schon fertig wäre.
Ich habe mich bewusst gegen eine Loop-Animation entschieden, da es hier in erster Linie um Informationen geht und es meiner Meinung nach stören würde beim Lesen wenn sich andauernd etwas bewegt.

Eingesetzte Bibliotheken und Apis

Ich habe mich dazu entschieden in dem Framework Bootstrap zu arbeiten, da ich das Gridsystem, sowie manche Komponenten, wie zum Beispiel die Tooltips nutzen möchte.

Um die CountUp Animation sowie die Balkenanimation zu nutzen habe ich eine Bibliothek von jshakespeare benutzt, da diese Animation selber zu programmieren sehr komplex gewesen wäre und ich bereits gute Erfahrung mit der Bibliothek gemacht habe.

Damit die Animation erst "on scroll" triggert habe ich eine Bibliothek von GreenSock verwendet.

Um die Zahlen für den zu Counter bekommen, nutze ich die API der WHO . Hier hole ich mir die Fallzahlen für die gesamte Welt um dann letztendlich die "TotalDeaths", "TotalConfirmed" und "TotalRecovered" für den Counter zu nutzen.

Reflektion des Arbeitsprozesses

Insgesamt bin ich sehr zufrieden mit der Website und wie ich es geschafft die Animationen zu implementieren.
Der gesamte Arbeitsprozess lief weitestgehend ohne Probleme, und wenn waren es Probleme die ich mithilfe von Kollegen oder Mitschülern lösen konnte.

Was allerdings nicht ideal lief, war mein Zeitmanagement, denn ich habe zusätzlich ein ganzes Wochenende außerhalb der Schulzeit an dem Projekt arbeiten müssen.
Das liegt zum großen Teil daran das ich leider im Arbeitsalltag nie nur im Ansatz code/programmiere und mich daher erstmal sehr viel belesen musste, und es oftmals mehr "Trial and Error" war. Zum anderen habe ich aber grade am Anfang nicht fokussiert genug gearbeitet und war dadurch langsamer als ich es eigentlich geplant hatte.
Noch dazu kam, dass ich leider meine ursprüngliche 3. Infografik verwerfen musste, da dort eine API Anbindung nicht möglich gewesen wäre. Eigentlich hätte ich an der Stelle die Vorurteile gegenüber der App aufgeräumt, indem ich erkläre wie die App wirklich funktioniert.
Das fehlt jetzt leider etwas in dem Gesamtkonzept der Website, das zusätzlich zu machen wäre zeitlich aber nicht mehr machbar gewesen. Mit dem Counter und dem Text dazu habe ich aber denke ich trotzdem eine gute Lösung gefunden, und bin daher wirklich zufrieden mit der Website.
Vor allem das Design mag ich sehr, aber auch auf die technische Umsetzung bin ich stolz, da ich vorher erst 2 Websites umgesetzt habe und beides waren 2 deutlich weniger anspruchsvolle Projekte.

Quellen

https://www.dw.com/de/corona-warn-app-wichtiges-instrument-mit-schwächen/
https://de.statista.com/statistik/daten/studie/1127592/umfrage/gruende-fuer-den-download-der-corona-warn-app/
https://de.statista.com/statistik/daten/studie/1130127/umfrage/gruende-fuer-den-nicht-download-der-corona-warn-app/
https://jshakespeare.com/simple-count-up-number-animation-javascript-react/
https://greensock.com/scrolltrigger/
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
https://api.covid19api.com/summary