14. Juni 2020

UX Review der Corona Warn App – Ein erster Eindruck

Ingo Heß

Die Corona Warn App (CWA) ist in aller Munde. Der Bundesminister für Gesundheit, Jens Spahn, hat verkündet, dass sie im Laufe der Woche gelauncht wird - wahrscheinlich am Dienstag. In einem auf GitHub öffentlich zugänglichen Open Source Projekt hat SAP in Kooperation mit der Deutschen Telekom die deutschen iOS & Android-Apps und zugehörigen Backend-Applikationen entwickelt. Wir haben uns die Dokumentation und den Code näher angeschaut und geben euch in zwei Blog-Posts erste Einblicke in UX und Tech

Anhand der iOS-App bespricht unser UX Designer, Ingo Heß, im ersten Artikel die User Experience mit Schwerpunkt Usability. Hier und heute werdet ihr die iOS-App in allen wichtigen Views und Abläufen erleben. Wir versorgen euch mit unserer UX-Expertise und zeigen euch auf, wie die Nutzbarkeit dieser App zu bewerten ist. 

Mehr Orientierung zur technischen Funktionsweise und die Beschreibung, was wir getan haben, um die Anwendung ausführen zu können, findet ihr hier in einem weiteren Artikel

Disclaimer: Es geht uns explizit nicht darum, euch die Nutzung oder Nicht-Nutzung dieser App zu empfehlen, sondern vielmehr um die Gebrauchstauglichkeit dieser App.

 

Worum geht’s?

 

Die neue Corona Warn App (CWA) übernimmt eine Risikowarnung bei vermutetem Kontakt mit Covid-19 Infizierten, die betroffene Personen zur Selbstisolation oder Durchführung eines Tests ermutigen kann. Außerdem erhält der User (und das meinen wir im weiteren Verlauf immer geschlechtsneutral 😉 ) per App nach vorheriger Registrierung des Covid-19-Tests sein Testergebnis. Er kann so schnell reagieren und Vorsichtsmaßnahmen einleiten und damit andere über die App warnen lassen, die sich in den letzten Tagen über eine bestimmte Zeit in seiner Nähe aufgehalten haben. 

In diesem Beitrag werden wir uns vorrangig auf eine Beurteilung der Nutzbarkeit der Corona Warn App fokussieren und dazu eine UX-Einschätzung abgeben. Das heißt, wir betrachten in erster Linie die Nutzung der App. Wir wissen natürlich, dass für eine vollumfängliche UX-Betrachtung auch die Erfahrungen und Erlebnisse vor und nach der Nutzung eine wichtige und in diesem Fall wohl eine sehr entscheidende Rolle spielen. Dies kann in anderen Formaten ausführlicher besprochen werden. 

Wir haben dazu sehr schnell einen interaktiven Prototypen in Axure gebaut und den Simulator über X-Code genutzt. Für diesen Review habe ich dann die App auf einem simulierten iPhone 8 plus untersucht. Bei den Viewport Angaben kann es also leichte Abweichungen zu anderen Devices geben. Für einen ersten Eindruck reicht mir jedoch dieser Approach völlig. Bevor wir uns der iOS-App widmen, erläutere ich kurz meine Herangehensweise und mein Bewertungsschema. 

 

Bewertung: Leano UX Modell

 

Bewertung nach UX-MODELL

 

Um zu verstehen, wie wir zu unseren Einschätzungen über die Corona-App kommen, erläutern wir kurz unsere Bewertungskriterien. Beim UX Review einer digitalen Anwendung arbeiten wir mit unserem Leano UX Modell, das in drei zeitliche Phasen unterteilt ist und drei Bewertungsdimensionen mit dazugehörigen Merkmalen aufweist. Dabei handelt es sich um die Phasen “vor Nutzung”, “Nutzung” und “nach Nutzung” und die Dimensionen “Emotionales Erleben”, “Nutzen” und “Nutzbarkeit” mit einer Reihe jeweils untergeordneter Bewertungsmerkmalen.

Wir beurteilen die Ausprägung der Merkmale nach unseren Eindrücken und geben dazu jeweils Argumente. Im Normalfall werden diese ausdifferenziert und formuliert. In der Folge haben ich Beschreibung und Bewertung zusammen aufgeführt. Am Anfang machen wir uns erstmal ein Gesamtbild der App und betrachten den Wireflow.

 

Wireflow der CWA (auch zum Download als pdf)

 

Der Wireflow der neuen App

 

Wireflows sind eine Kombination aus abstrakten Ablaufdiagrammen und Informationsarchitekturen kombiniert mit Wireframes (Interface Skizzen) der Benutzeroberfläche einer digitalen Anwendung. Sie zeigen anschaulich, wie eine Applikation aufgebaut ist und in welche Richtung Interaktionen ablaufen. Hier in der Abbildung sieht man den letzten Stand der iOS Corona Warn App 1.0. 

Der Wireflow zeigt oben den gehaltvollen Onboarding-Prozess (oberste Ebene) und die insgesamt hohe Inhaltsdichte auf den unteren Navigationsebenen der App. Es gibt nur drei Haupt- und fünf Nebenfunktionen. Alle drei Hauptfunktionen der App sind entweder auf oder vom Home View zugänglich. Damit ist Home der zentrale View der App und wahrscheinlich auch der View mit der höchsten Zugriffsrate und Verweildauer. Dieser View hat den höchsten Schwierigkeitsgrad im Design und Konzept zu meistern.

Wir haben es also in erster Linie mit einer in der Informationsarchitektur bestehenden Herausforderung zu tun, die in der Erschließung der Inhalte und in dem Navigieren zwischen den Ebenen bestehen wird.

 

Jetzt wird motiviert. Mit einem Appell an die Sinnhaftigkeit der Maßnahme und einer über Vorteilsargumentation arbeitenden Ansprache wird der Nutzer auf die App eingestimmt.

 

Onboarding - der erste View.

 

ONBOARDING: Die ersten Schritte in die App 

 

Wie gelingt es, eine große Akzeptanz in der Bevölkerung und eine Mitmachbereitschaft zu schaffen, die eine wichtige Voraussetzung dafür ist, dass eine Tracing-App funktioniert? Sicherlich muss im Vorfeld der Nutzung viel an Informationsarbeit geleistet werden und vertrauensbildende Maßnahmen stattfinden.

Dieses Vorhaben, das passender in anderen Medien oder Kampagnen verfolgt werden könnte, jedoch im Onboarding-Prozess dieser App zu versuchen oder zu wiederholen, ist auch schon der größte Kritikpunkt für eine mobile Anwendung wie die Corona Warn App. Gleich nach dem ersten durchaus gelungen View zur Motivation und der kurzen Erklärung der Funktionsweise mit einem kompakten Text ,gestützt durch eine zurückhaltende Illustration in gedeckten Farben, geht es zum Datenschutz. Auch hier wieder eine ansprechende Illustration, aber dann 3486 Wörter auf einen Scroll View epischer Länge auf einem Mobil Device zu lesen, ist ein dickes Brett. Das entspricht ca. 9 Seiten Text im Din-A4-Format bei 12 Punkt Schriftgröße der Arial und einem Zeilenabstand mit dem Faktor 1.0. Hier gibt es deutlich Abzug, auch wenn mir bewusst ist, dass es rechtliche und politische Vorgaben geben wird, die man nicht umgehen kann. Aber wenn etwas ein Nachteil ist, ist es ein Nachteil. Auch wenn es gut gemeint ist oder man es nicht anders gestalten konnte. Möglicherweise ist es aber auch ein konzeptionelles Kalkül, dass Nutzer bei der Menge an Text sorglos und vertrauensvoll auf weiter tappen. Denn der Overload kommt hier reichlich früh und für mein Empfinden etwas zu direkt. 

 

“Every word in your app is part of a conversation with your users. Use this conversation to help them feel comfortable in your app.”

Human Interface Guidelines, Apple

 

Das wird eine sehr ausgiebige und lange Konversation. Mal sehen, ob viele Nutzer daran interessiert sind. Die Meisten werden es wohl kurz bei Installation überfliegen und klicken fast umgehend zum nächsten Schritt

Womit wir beim nächsten Malus wären: Leider gibt es keine Feedforward-Information, d.h. der Nutzer weiß an dieser Stelle nicht, wie viele Views und Themen er noch durchschreiten muss, um das Onboarding abzuschließen. Das beeinträchtigt mit Sicherheit das emotionale Erleben in dieser Phase und dämpft die Mitmachbereitschaft doch erheblich. Es kann dabei durchaus zu Abbrüchen kommen. 

Oder es lässt den Nutzer leichtfertig den Flow durchtappen und führt später zu Problemen beim Verständnis der Abläufe. Zum Beispiel könnte es die Nachvollziehbarkeit beeinträchtigen und somit die Bereitschaft, Aktionen durchzuführen (z.B. seinen Test zu registrieren und zu melden). Keine dieser Reaktionen können im Sinne der Macher sein. Denn in der Tat handelt es sich bei dem Inhalt des Onboardings um wichtige Erläuterungen, z.B. wie der Ablauf und das Verfahren aussehen und wie der Nutzer mit der App einen Beitrag leisten kann, Infektionsrisiken zu minimieren.

Deshalb bemüht sich das Texter-Team in einfachen Worten und Textstrukturen verständlich und transparent die Abläufe zu beschreiben. Das gelingt auch später bei den Controls: Speaking Buttons, meist als Textlinks gelöst, und im gesamten Informationsdesigns des Interfaces. Die Inhalte und die Beschriftungen sind selbsterklärend und die Verortung nachvollziehbar. Dem emotionsgeladenen und sensiblen Thema Corona wirkt der sachliche und freundliche Formulierungsstil angemessen entgegen. Er biedert sich nicht an und versucht nicht zu belehren. Das ist geschickt.

In Anbetracht der Kürze der Zeit, mit der die App und die gesamte Infrastruktur entwickelt wurde (weniger als 3 Monate für das komplette Projekt!), stellt es eine beeindruckende Leistung dar. Hier wurde in den letzten Tagen erheblich geschliffen und immer wieder überarbeitet (auch hierzu liefert unser Artikel zur technischen Betrachtung noch mehr Inhalt). Im GitHub lassen sich die zahlreichen Commits nachvollziehen.

 

Onboarding: die letzten drei steps

 

Doch zurück zum Onboarding: Die nächsten drei Schritte Risiko-Ermittlung (überschaubar aber dennoch viel Text mit Einverständniserklärung), aber vor allem die letzten beiden Schritte Falls positiv getestet und Warnungen sind wiederum flüssig, kurz und einfach gehalten. Der Cognitive Load hält sich jeweils nur ein View in Grenzen. Der Interaction Flow wird dadurch positiv beschleunigt. Wenn ein Nutzer es bis hierher geschafft hat, kann er jetzt durchatmen. Gilt hier also eher “Das Beste kommt zum Schluss” vor Motivation des Nutzers? Die Reihenfolge im View flow ist mir ein Rätsel. Dazu mehr im nächsten Kapitel.

 

How to improve: Wie kann also der Onboarding Prozess verbessert werden?

 

Eine andere Reihenfolge der fünf Schritte kann das Onboarding-Erlebnis positiver beeinflussen. Das Leichte zuerst und das Schwergewichtige zum Schluss. Die Umgestaltung von Inhalten durch kurze Beschreibungen und tiefere Informationen zu einem späteren Zeitpunkt oder erst bei Bedarf (durch progressive disclosure) kann die Wahrnehmung deutlich positiver gestalten und damit den cognitive Load deutlich verringern (Reihenfolge im Ablauf, Anzeige der Textmenge, Ort). So würde der vermuteten hohen Abbruchrate entgegengewirkt werden können. 

Auch ein Step und Load Indikator kann leichte Linderung bringen und mehr emotionale Sicherheit für die nächsten Schritte bieten. Dies würde damit den Stress verringern, der beim Durchlaufen eines solchen Dialogs auftreten kann. Stress, der bei solchen Themen sowieso auftritt.

Warum sich die UX Kollegen von SAP für die vorliegende Reihenfolge ohne die o.g. Empfehlungen  entschieden haben, würde mich sehr interessieren. Denn wie wir in der Folge sehen, haben wir es hier mit einem durchaus sehr gut durchdachten Konzept zu tun! 

 

Home View mit Risiko Statusanzeige

 

HOME – die Zentrale 

Home View mit drei Hauptactions

 

Wenn die fünf Schritte des Onboardings vollendet sind, befindet man sich auf dem Home View der App. Erst fällt garnicht auf, dass es keine übergeordnetes Control für die Navigation gibt – kein Menu und keine Nav Bar. Die App ist einfach gehalten und zeigt alle wichtigen Inhalte direkt im Viewport des Home Views. Drei Inhaltsangebote fallen ins Auge und umfassen auch schon die Kernfunktionen der App. 

Von oben nach unten:

  1. Risiko-Ermittlung steuern.
  2. Risikobewertung mit drei unterschiedlichen Risiko-Status (sowie einem zusätzlichen Status “Risikoermittlung gestoppt”):
    1. unbekannt
    2. niedrig
    3. erhöht
  3. Test Handling Test registrieren, Ergebnis mitteilen

 

Home: Risikoermittlung

 

Risiko-Ermittlung

Im View von Risiko-Ermittlung kann die entsprechende Funktion aktiviert oder deaktiviert werden. Auch die Illustration unterstützt den Status mit unterschiedlicher Darstellung des in der Hand gehaltenen Mobile Devices. Da eine verlässliche Ermittlung erst nach 14 Tagen erfolgen kann, ist eine Aktivierung Voraussetzung für eine erfolgreiche Messung. Das ist einfach und leicht verständlich grafisch als ein sich täglich auffüllendes Kreisdiagramm gelöst. Dazu gibt es weiter unten noch weitere Erklärungen, wie die Begegnungs-Aufzeichnung funktioniert. 

 

Risikobewertung

Hier erhält der Nutzer Informationen zu seinem ermittelten Infektionsrisiko. Es gibt drei unterschiedliche Risiko-Status, in denen ihm jeweils die entsprechenden Informationen mitgeteilt werden. Zusätzlich werden allgemeine Verhaltensempfehlungen gegeben.

Leider ist uns in der Kürze der Zeit nicht vollständig gelungen, die Parameter so zu manipulieren, um alle Status stimmig zu simulieren. Es kann also sein, dass auch die Verhaltensregeln je nach Status angepasst werden. Das wäre zumindest sinnvoll.

 

Test registrieren, Ergebnis mitteilen

Es ist deutlich zu erkennen (siehe in der Abbildung des Home View unten “Wurden Sie getestet?”), dass das Test Handling die wichtigste Interaction des Nutzers ist. Hier wurde zur Unterstützung des unscheinbaren Pfeils nach rechts noch ein CTA in Blau platziert.

 

Informations­architektur und Navigation

 

Ganz oben neben dem Logo der Corona Warn App befinden sich beim Tap auf den Info-Button weitere Informationen über die Inhalte der App. Hier werden die drei wichtigsten Funktionen der App noch mal erläutert. 

Unterhalb des Viewports befindet sich verschachtelt all der Inhalt aus dem Onboarding und weitere weniger wichtige Informationen und Funktionen, wie zum Beispiel das Teilen der App, um zum Erfolg der App zu beizutragen. In den weiteren Verzweigungen wird eine Menge Inhalt verstaut. Dieser ist zugänglich, wenn auch mit zwei, drei Taps und einer Menge Swiping auf den Scroll Views. Erstaunlich für mich war, dass ich problemlos ohne übergeordnete Navigation ausgekommen bin. Die App mutet sehr übersichtlich und gut strukturiert an. Das ist für mich die größte Leistung und war durchaus überraschend. Natürlich wird das ein wenig erkauft durch einige Subnavigation Views, welches die Anzahl der Taps leicht erhöht. Das ist aber ein Preis, den ich gerne bezahle für eine ansonsten flüssige Navigation in der App. 

Ein Blick auf die Wireflows offenbart uns die Tiefe der Informationsarchitektur. Diese ist in der App selbst aber übersichtlich auffindbar. Es wurde deutlich unterschieden zwischen den schnell auffindbaren Hauptfunktionen der App und weiterführenden “zweitrangigen” Informationen und Funktionen.

             

Beispiel für Popover

 

Das View-Konzept

 

Die lineare Navigation zieht ein entsprechendes View-Konzept nach sich und es müssen in der Folge leichte Inkonsistenzen in Kauf genommen werden. Wir finden drei in ihrer Anmutung und der Wahl der Metapher unterschiedliche View-Arten vor. 

  1. Page Views haben in sich abgeschlossene Inhaltsbereiche. Eine lineare Navigation wie im Onboarding ist möglich und leicht nachvollziehbar. 
  2. Popover Views ergänzen Page Views in ihren Inhalten und liegen deshalb sichtbar über diesen. In der CWA sind diese als Modaldialoge konzipiert. Das bedeutet, man muss den Popover wieder über ein Control schliessen und ist dann wieder auf dem darunterliegenden Page View. Hierbei sollte man eine Navigation zu weiteren Ansichten vermeiden, da Nutzer leicht die Verortung verlieren können. Außerdem kann es zu Konflikten mit anderen Bedienelementen kommen. Unterschiedliche Metaphern können aufeinander treffen. Das kann verwirren. Allerdings ist das auch die einzige Schwäche des View-Konzeptes - und gleichzeitig ein Hack, welcher durchaus seine Brillianz beweist.
  3. Web Views können sich in der der Anmutung von den nativen View stark unterscheiden. Hier kann  einfach nur eine Web-Browser-Ansicht implementiert werden; eine sehr schnelle Variante der Umsetzung. In der Corona Warn App sind die “häufigen Fragen” so gelöst. Das ist inkonsistent zu den nativen Controls. 

Technologisch haben wir es noch mit einer weiteren Art zu tun. Darauf wird in unserem Artikel, der die Technik beschreibt, eingegangen.

 

Beispiel für Web View

 

Zudem gibt es sehr viele inhaltsreiche Scroll Views und fordern sehr viel Durchhaltevermögen vom Nutzer. Diese Schwächen sind aber vermutlich der Kürze der Entwicklungszeit, den Erfordernissen Inhalte anzupassen und möglicherweise auch die Ladezeit zu verringern, geschuldet. Ich bin neugierig, wie es sich in nächsten Iterationen der Applikation entwickelt...

 

Zur Ästhetik der App 

 

Den mit Covid-19 verbundenen Stress fängt die App mit einer sehr seriösen, einfachen visuellen Gestaltung auf. Doch der Reihe nach: 

Animation

Animationen werden in der App erfreulich wenig und sorgsam eingesetzt. Nur die View Transitions (Übergänge) werden animiert. Beim Aufruf eines Popovers (diese sind modal und fast screen-füllend) slidet dieses von unten nach oben in den View und verdrängt die dann darunterliegende Page. Die Page ist noch in Ansätzen am oberen Rand im Hintergrund zu sehen. Damit wird der inhaltliche Bezug des Popovers intuitiv zur darunterliegenden Ebene visuell hergestellt und gehalten. Bei den Page Views slidet die nächste Page seitlich von rechts nach links gemäß der nativen Leserichtung der Zielgruppe. Dadurch ergibt sich intuitiv ein linearer Flow, in dem leicht und intuitiv vor und zurück navigiert werden kann.

Insgesamt bringt der bedachte Einsatz von Animationen Ruhe in die Nutzung und unterstützt den Wunsch nach Vertrauenswürdigkeit durch die Auftraggeber der App. 

Farben

Die Farbgebung der App ist eher zurückhaltend und eher ungesättigt. Damit ist sie in der Wirkung nüchtern und den (ja doch ernsten) Inhalt unterstützend. Für diesen Kontext aus Expertensicht eine sehr gute Wahl.

Typografie

Es wird eine Sans Serif Groteskschrift eingesetzt, die klar und deutlich ohne künstliche Note ist. Auf das Wesentliche reduziert. Es gibt wenig Auszeichnungen und es kommen als Schriftschnitt nur fett (bold) für die Überschriften und normal (regular) vor. Auch hier wieder ein bedachter aber sparsamer Einsatz von Besonderheiten, der, wie oben schon erwähnt, für Ruhe und eine Gefühl der Seriosität sorgt.

 

Wer ist der User: UX Research

 

Leider gibt es in der Dokumentation im GitHub wenig bis gar nichts über den UX Research der SAP Kollegen zu erfahren. Mich würde interessieren, auf welchen Hypothesen die Entscheidungen beruhen oder welche Tests womöglich sogar zur Überprüfung vorgenommen wurden.

Artefakte wie Personas, identifizierte Bedürfnisse, Prozesse, konzeptionelle Zwänge und eine User Journey mit emotionaler Ebene könnten Licht ins Dunkel der Entscheidungsfindung bringen. 

 

TL;DR oder: Mein Fazit

 

Eine gebrauchstaugliche App mit Stärken in der Einfachheit der Interaktion und zeitgemäßer Informationsarchitektur für den angedachten Nutzen, bei der die wohl wichtigste Frage nach Vertrauenswürdigkeit nicht in der App und auch nicht in diesem Review geklärt werden kann. Schwächen weist die App aus UX-Sicht vor allem beim View-Konzept (Mix der verschiedenen View-Arten) auf sowie in der unglaublichen Textfülle, gerade im so wichtigen Onboarding des Nutzers. Generell muss bei derartigen Applikationen immer zwischen dem Informationsbedürfnis zu Transparenz und Sicherheit und dem Nutzungsbedürfnis einer leichten und intuitiven Anwendung abgewogen werden. 

 

Mein Ausblick 

 

Aus UX Perspektive fehlt jetzt nur noch eine Analyse von Tests und die Auswertung von Erfahrungsberichten sowie der Funktionsfähigkeit der Technik, um ein ganzheitliches Bild der Anwendung zu erhalten. Die nächsten Wochen werden es zeigen. 

 

 


+++ Hier geht es zu unserem Tech-Jump in die App! Lest gleich weiter! +++


Ihr möchtet eine UX-Bewertung eurer Anwendungen oder braucht anderweitig Unterstützung für das Thema UX? Hier erfahrt ihr mehr!


 

Ingo Heß
UX | Product | Coaching

Rufen Sie uns an: 030 – 555 74 70 0

Made with 
in Berlin. 
© leanovate 2020
hearttagtwitterfacebooklinkedinxing
Datenschutz
Leanovate GmbH, Besitzer: (Firmensitz: Deutschland), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl:
Datenschutz
Leanovate GmbH, Besitzer: (Firmensitz: Deutschland), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl: