Konzept

Ziel

Auf der Website sollen Zahlen und Informationen durch Infografiken und Diagramme veranschaulicht werden, um so eine möglichst große Zielgruppe anzusprechen. Die bildliche Darstellung soll die Informationen möglichst einfach verständlich machen. Der User wird durch Interaktionsmöglichkeiten länger auf der Website gehalten.

Idee

Über die Navigation besteht die Möglichkeit alle Abschnitte schnell per Sprungmarke zu erreichen.

Am Anfang der Seite möchte ich dem User zunächst kurz erklären, was die Corona-Pandemie ist und durch die Risikobewertung deutlich machen, wie gefährlich der Virus ist. Die aktuellen Zahlen unterstreichen dabei die Gefahr, die vom Virus ausgeht und informieren über den Verlauf.

Da bei verschiedenen Symptomen häufig die Frage aufkommt, wann man zum Arzt gehen sollte und die Sorge häufig groß ist, dass man sich mit dem Virus angesteckt haben könnte, gibt es im nächsten Abschnitt ein Ablaufdiagramm. Dies fragt unterschiedliche Symptome ab, die im Zusammenhang mit dem Virus stehen können und gibt einen ersten Anhaltspunkt zum weiteren Vorgehen, wenn man entsprechende Symptome hat. Ein weiterer Vorteil dieser Infografik ist, dass Interaktion vom User gefordert wird, welche diesen meist länger auf einer Seite halten.

Durch den Wunsch nach einem Ende der Pandemie fragen sich viele, wie weit der Fortschritt des Impfstoffs ist. Hierüber informiere ich auf der Website mit einer Statusmeldung, die auf einen Blick den aktuellen Fortschritt darstellt. Im nebenstehenden Akkordeon werden dann die einzelnen Phasen erklärt.

Auch wenn der Impfstoff noch nicht für alle verfügbar ist, kann jeder etwas zur Eindämmung der Pandemie beitragen. Dies wird im Abschnitt „Hilf mit“ erklärt. Neben den Hygiene-Maßnahmen gibt es die Corona Warn-App. Da diese sehr hilfreich bei der Nachverfolgung der Infektionskette ist, gibt es hier neben der Information zur Nutzung der App auch noch den Download-Link für alle, die die App noch nicht heruntergeladen haben.

Im letzten Abschnitt wird noch einmal das Risiko im Bezug auf die unterschiedlichen Altersgruppen aufgegriffen. Durch Klicken auf die jeweilige Altersgruppe erfährt man die aktuelle Infektionszahl.

Im Footer findet man neben der aktuellen weltweiten Infektionszahl auch die Telefonnummer der Coronavirus Hotline. Über diese kann man weitere Informationen erhalten.

Diagrammtypen

Bei der Darstellung der aktuellen Fallzahlen habe ich mich neben den Zahlen für ein Balkendiagramm entschieden, da dies das Verhältnis der einzelnen Zahlen auf einen Blick darstellt. Außerdem habe ich mich für einen Balken entschieden, um die Nutzung der Warn-App zu verdeutlichen. Diese wird grafisch durch die Männchen ergänzt.

Mit dem Ablaufdiagramm erleichtere ich dem User die für ihn wichtigen Informationen zu Filtern und halte ihn durch die Interaktion länger auf der Seite.

Beim Impfstoff habe ich mich für eine Statusmeldung entschieden, um auf einen Blick den aktuellen Stand des Prozesses erkenntlich zu machen. Nebenstehend hat der User dann die Möglichkeit sich über die jeweiligen Phasen zu informieren.

Gestaltung und Anordnung

Ich habe mit der Gestaltung für mobile Endgeräte begonnen und darauf geachtet, dass der Text immer wieder durch Grafiken aufgelockert wird. Bei der Gestaltung der größeren Devices habe ich dafür gesorgt, dass die Texte nicht über die gesamte Breite des Bildschirms laufen, damit die Lesbarkeit hoch bleibt. Außerdem habe ich manchmal aus optischen Gründen die Reihenfolge der Container getauscht.

Farbgestaltung und Schriftauswahl

Bei Farb- und Schriftauswahl habe ich mich an der Corona Warn-App orientiert, da die App bereits bekannt ist, sodass die Farben damit in Verbindung gebracht werden.

Animation und Technik

Die weltweiten Zahlen werden aus einer API gezogen und neben dem entsprechenden Wort, wie z.B. „Fallzahlen“ angezeigt. Außerdem errechnet ein Skript im Verhältnis zur Fallzahl die Breite der Balken der beiden anderen Abfragen.

Beim Ablaufdiagramm wird dem div durch Klicken auf den entsprechenden Button eine Klasse hinzugefügt und einem anderen div entzogen. Dadurch wird gesteuert, welches div angezeigt wird.

Bei der Corona Warn-App wird durch Klicken auf den Button „Ja“ den Grafiken eine Klasse hinzugefügt. Die Klasse beinhaltet einen CSS-Keyframe, welcher die Deckkraft der jeweiligen Grafik steuert.

Der Kreis mit den Zahlen zu der jeweiligen Altersgruppe zeigt, je nach angeklicktem Kreis, die Zahl der Infektionen der Altersgruppe an. Das Klicken auf die Kreise sorgt auch hier für das Hinzufügen und Entfernen von einer Klasse und steuert dadurch, welche Zahl angezeigt wird.

Optional eingesetzte Skripte, Bibliotheken, API

Für die aktuellen weltweiten Zahlen habe ich eine API eingesetzt. Diese sorgt zusätzlich dafür, dass die darunter stehenden Balken eine entsprechende Breite bekommen. Zur Formatierung der Zahlen wird ebenfalls ein Skript verwendet. Außerdem nutze ich Javascript, um den Buttons die Funktionalität zu geben, Klassen hinzuzufügen oder zu entfernen.

Reflektion des Arbeitsprozesses

Nach anfänglichen Schwierigkeiten fiel mir auf, dass ich die Verwendung von Bootstrap bereits beim Design berücksichtigen muss. Um mir die Arbeit zu erleichtern und die Vorteile von Bootstrap optimal zu nutzen, werde ich zukünftig schon beim Design darauf achten, die vorgegebenen Container-Maße zu verwenden.

Beim Javascript hatte ich das Problem, dass ich die Datei am Anfang der Seite eingebunden habe. Dadurch wurde die JS-Datei vor der HTML Datei geladen und hat die Elemente, in denen z. B. die Inhalte der API ausgegeben werden sollten, nicht gefunden. Daraus konnte ich mitnehmen, dass die Stelle, an der ich die JS-Datei einbinde, entscheidend ist.

Ein weiteres Problem war, dass die API häufig abgestürzt ist, wodurch Zahlen nicht mehr geladen wurden und das Testen einzelner Funktionen schwierig war. Außerdem ist die Zahl der täglich neuen Fälle sehr gering, wodurch der dazugehörige Balken kaum zu sehen ist.