1. Studiengang: Informatik, Modul BTI7083 User-centered Design
Autoren: Sandro Blatter, sandro.blatter@students.bfh.ch
Roland Bruggmann, roland.bruggmann@students.bfh.ch
Michael Ramahenina, michael.ramahenina@students.bfh.ch
Glenn Ryser, glenn.ryser@students.bfh.ch
DozentInnen: Sibylle Peuker, sibylle.peuker@zeix.com, Oliver Emch, oliver.emch@zeix.com
Yves Steiner, yves.steiner@zeix.com, Julien Silva, julien.silva@zeix.com
Datum: 19. Januar 2016
Berner Fachhochschule | Haute ´ecole sp´ecialis´ee bernoise | Bern University of Applied Sciences
User-centered Design f¨ur Mobile-App
Erarbeitung einer grafischen Benutzerschnittstelle f¨ur die
Telemedizin-App Wink
Semesterarbeit

2. Inhaltsverzeichnis
1. Einleitung 2
1.1. Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2. Problemstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3. Aufbau des Berichtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2. Grundlagen 3
2.1. User-centered Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2. Wink System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3. Analyse und Grobkonzept 5
3.1. Anforderungsanalyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.2. Miniszenarien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.3. Befragung Zielgruppen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.4. Personae . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.4.1. Persona 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.4.2. Persona 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.4.3. Persona 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.5. Expert Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.6. Lo-Fi Prototyp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4. Detailkonzept 12
4.1. Szenarien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.1.1. Szenario 1 Kontakte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.1.2. Szenario 2 Sitzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.1.3. Szenario 3 Messung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.2. Hi-Fi Prototyp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5. Usability-Test 15
5.1. Durchf¨uhrung der Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.2. R¨uckmeldungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.3. Verbesserungvorschl¨age . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Literaturverzeichnis 17
Bildnachweis 17
Abbildungsverzeichnis 17
A. Umfrage 18
A.1. Fragebogen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
A.2. Auswertung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
B. Test 22
B.1. Vor-Interview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
B.2. Bedienbarkeitstest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
B.3. Nach-Interview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
C. Plakat 26
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 1

3. 1. Einleitung
1.1. Motivation
Usability oder weiter gefasst User Experience ist bei heutigen Websites und Applikationen nicht mehr ”nice-to-have”
sondern ein grundlegender Erfolgsfaktor. Die Benutzerschnittstellen von Dienstleisungs-Applikationen verlagern
sich mehr und mehr von Desktopsystemen hin zu kundennahen Web-Plattformen und Mobile-Apps, so auch in der
Medizin-Sparte. Patientensysteme werden mit Schnittstellen erweitert, um die M¨oglichkeiten von Smartphones zu
nutzen. Hier ist ein Trend hin zur Telemedizin zu beobachten. Dabei spielt die Akzeptanz der User eine wichtige
Rolle. Diese wird vorallem durch gut gestaltete User Interfaces erreicht.
Wie der Modulbeschreibung zu entnehmen ist, werden diesem Modul die Studierenden f¨ur die Bed¨urfnisse der
Anwender sensibilisiert und erfahren wie man eine gute User Experience erreicht. Dazu lernen sie die Methode
des User-centered Design von Grund auf: Bed¨urfnisanalyse, Konzeption, Prototyping, Durchf¨uhren und Auswerten
von Usability-Tests und inhaltliche Dokumentation. Es werden zudem die Grundlagen des Interaktionsdesigns, der
Wahrnehmungspsychologie sowie der Gestaltung im Web vermittelt. Sie lernen Eigenheiten des Mobile Design
kennen und wissen, was ein semantisch korrekter Code ist und wie die Accessibility gew¨ahrleistet werden kann.
1.2. Problemstellung
Der User-centered-Design-Prozess wird anhand eines konkreten Projekts in der Gruppe ge¨ubt: Am Beispiel der
Android-App des Projektes wink; sollen Aspekte des User-centered Design praktisch erarbeitet werden. Um die
Bed¨urfnisse des Zielpublikums zu erfassen, wird eine Befragung am Inselspital der Universit¨at Bern durchgef¨uhrt.
Die Resultate fliessen schliesslich in einen Prototypen ein. Auf dieser Grundlage wird ein Usability-Test durchgef¨uhrt
und ausgewertet. Die Feedbacks der Testpersonen dienen uns als Verbesserungsvorschl¨age.
1.3. Aufbau des Berichtes
Der vorliegende Bericht enth¨alt f¨unf Kapitel: Auf diese Einleitung folgt eine Erl¨auterung der Grundlagen des User-
centered Design und das wink;-System wird vorgestellt (Kapitel 2). Im Anschluss wird die Analyse und das Grobkon-
zept aufgezeigt (Kapitel 3). Dann wird ein Detailkonzept erarbeitet (Kapitel 4) und schliesslich der Usability-Test
und dessen Resultate pr¨asentiert (Kapitel 5). Im Anhang zu finden sind die Unterlagen zur Umfrage (Anhang A)
und zum Test (Anhang B) sowie eine A4-Version des Plakates der Schlusspr¨asentation (Anhang C).
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 2

4. 2. Grundlagen
2.1. User-centered Design
User-centered Design ist eine agile Methode und l¨asst sich gem¨ass [Peu+15] in f¨unf Phasen teilen (siehe Abbil-
dung 2.1):
1. In der ersten Phase erfolgt die Einarbeitung ins Themengebiet inklusive Expert Review. Es kann eine Nutzer-
beobachtung sowie eine Ist-/Soll-Analyse durchgef¨uhrt werden.
2. Auf die Analyse-Phase folgt eine iterative Grobkonzept-Phase, in welcher verschiedene Visualisierungen in
Form von Scribbles oder interaktiver Prototypen erstellt werden.
3. Danach wird ein Grunddesign in Frorm von grafischen Designs erstellt.
4. Diese werden mit einer iterativen Detailkonzeption durch Prototyping, Workshops und Usabilty-Test verfei-
nert.
5. Schliesslich wird das Detaildesign inklusive Icons mittels Spezifikationen und Guidelines, Design-Diagrammen
und Styleguides dokumentiert.
Abbildung 2.1.: Phasen f¨ur das Vorgehen bei einem User-centered Design
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 3

5. 2.2. Wink System
An der Berner Fachhochschule BFH-TI erarbeiten Olivier Richarz und Sandro Blatter im Herbstsemester 2015/16
im Rahmen ihrer Bachelor Thesis das System ”Wink - Medical Sensors”(siehe Abbildung 2.2). Der zu entwickelnde
Prototyp soll gem¨ass [BR15, S. 3] ”den sicheren Austausch von Gesundheitsdaten zwischen Patient und Arzt
erm¨oglichen. Dem Patienten soll eine mobile App und ein Bluetooth-f¨ahiger Messsensor zur Verf¨ugung gestellt
werden, mit denen er seine Gesundheitsdaten selbst messen und erfassen kann. Die so erhobenen Daten werden von
der mobilen App ¨uber einen sicheren Kanal zum WinkServer weitergeleitet und in einer Datenbank aufgenommen.”
Mit der Einwilligung des Betreuers der obgenannten Bachelor Thesis, Prof. Dr. Emanuel Benoist, kann nun im Rah-
men dieses Moduls User-centered Design ein User Interface (UI) f¨ur die geplante Mobile-App erarbeitet werden.
Abbildung 2.2.: Das System ”Wink - Medical Sensors”besteht gem¨ass [BR15, S. 5] ”aus einer Android-Applikation,
einem Server, einer Datenbank und einem Web-Interface. ¨Uber die Android-Applikation werden die
Daten an den Server gesendet, in der Datenbank abgelegt und k¨onnen ¨uber das Web-Interface
wieder aufgerufen werden.” In einem Patientenverwaltungssystem k¨onnen die Daten direkt in die
entsprechenden Speichersysteme abgelegt werden (in grau).
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 4

6. 3. Analyse und Grobkonzept
3.1. Anforderungsanalyse
An unsere Mobile-App werden analog zu [BR15, S. 3 f.] folgende Anforderungen gestellt:
ˆ Funktionalit¨at: Messungen der Vitalparameter vornehmen und diese selbstst¨andig durchf¨uhren k¨onnen.
ˆ Abgrenzungskriterien: Keine Alarme ausl¨osen
ˆ Anwendungsbereich: Telemedizin
ˆ Betriebsbedingungen: >= Android KitKat 4.4, JRE, Bluetooth, Sensoren und Browser.
ˆ Businessziele: Senkung der Konsultationskosten
ˆ Produkt¨ubersicht: Android Applikation, Datenbank und Web Interface
ˆ Produktdaten: Messdaten und Patientendaten
ˆ Qualit¨at: Richtigkeit, Sicherheit, Zuverl¨assigkeit, Benutzbarkeit, Erlernbarkeit und Bedienbarkeit
ˆ Benutzergruppen: Arzt / Klinik, User / Patient, Klinikassistent
3.2. Miniszenarien
Es werden drei Funktionalit¨aten fokussiert und Miniszenarien f¨ur Kontakte, Sitzungen und Messungen erarbeitet.
Will der Anwender seine Messwerte zur privaten Aufbewahrung auf einem externen Server speichern, muss er sich
dort einmalig registrieren. Dies ist optional und einmalig. Es wird daher nicht als vollwertiges Szenario aufgef¨uhrt.
Kontakte:
ˆ Registrierung f¨ur Cloud-Anwendung.
ˆ Erstellen von Kontakten und Gruppen.
Sitzungen:
ˆ Neue Sitzungen erstellen, Daten messen und senden.
ˆ History der get¨atigten Sitzungen.
Messungen:
ˆ Messung ohne ¨Ubermittlung.
ˆ Ansicht der letzten lokalen Messungen.
Das Vorgehen kann wie folgt beschrieben werden:
1. Im Hauptbildschirm wird ein Icon angezeigt, welches die Registrierung startet.
2. Der Anwender wird um gewisse Daten wie Name und ein zu definierendes Passwort gebeten. Die App richtet
mit diesen Daten automatisch eine gesicherte Verbindung zum Server ein, welche dem Anwender best¨atigt
wird. Als Abschluss muss der Anwender einmalig best¨atigen, dass zuk¨unftig seine Messdaten an diese Stelle
¨ubermittelt werden d¨urfen.
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 5

7. 3.3. Befragung Zielgruppen
Grunds¨atzlich soll die App von Patienten verwendet werden, welche Vitalparameter messen und dies selbst¨andig
durchf¨uhren k¨onnen (vgl. [BR15, S. 3]). Um konkrete Zielgruppen erstellen zu k¨onnen, haben wir am Inselspital
in Bern eine Befragung unter Ber¨ucksichtigung der Hinweise von Lowdermilk [Low13a] durchgef¨uhrt. An der Zahl
haben 35 von 43 Personen die Befragung konstruktiv ausgef¨ullt.
Den Zielgruppen wurden folgende Fragen gestellt (vgl. Anhang A.1):
1. Wie oft benutzten Sie w¨ahrend des letzten Monats ein Smartphone?
2. Wie oft benutzten Sie w¨ahrend des letzten Monats das Internet?
3. Benutzen Sie einen Messenger (z.B. WhatsApp)?
4. Benutzen Sie ein Ger¨at aus der Gruppe der tragbaren Medizin-Ger¨ate (z.B. Schrittz¨ahler)?
5. Gibt es eine App, die Sie besonders m¨ogen?
6. Was gef¨allt Ihnen besonders an dieser App?
7. Gibt es eine App, die Sie nicht m¨ogen?
8. Was st¨ort Sie an dieser App?
9. Welche Verbesserungen w¨urden Sie vorschlagen, damit Sie diese App ¨ofters benutzen w¨urden?
10. Besitzen Sie zuhause einen drahtlosen Internetzugang (WLAN)?
11. Welche Messungen nehmen Sie zuhause selbst vor?
12. Wie oft nehmen Sie die Messungen vor?
13. F¨ur welche Messungen m¨ussen Sie den Arzt besuchen (z.B. Kontrolle eines bestimmten Vitalparameters)?
14. Begr¨ussen Sie die Entwicklung einer App zur ¨Ubertragung von Medizindaten? Bitte begr¨unden Sie ihre
Aussage.
15. Welche Elemente soll eine solche App enthalten?
16. Welche Elemente soll sie nicht enthalten?
17. Nur der Arzt oder Sie werden Einsicht in die Messwerte erhalten. Welche pers¨onlichen Daten w¨urden Sie
zwecks administrativer Vorg¨ange bei der Registrierung bekanntgeben (z.B. Vorname, Nachname, Geburtstag,
Telefonnummer, E-Mail)?
18. Soll die App eine gesprochene Anleitung enthalten?
Hier die Auswertung der f¨ur uns wichtigsten Fragen als ¨Ubersicht (vgl. Anhang A.2):
Frage Nr. 1: t¨aglich: 33 (94%)
Frage Nr. 2: t¨aglich: 31 (89%)
Frage Nr. 3: Ja: 29 (83%)
Frage Nr. 4: Ja: 7 (20%)
Frage Nr. 10: Ja: 33 (94%)
Frage Nr. 11: Anzahl: 11 (31%)
Frage Nr. 12: Anzahl: 11 (31%)
Frage Nr. 13: Anzahl: 16 (46%)
Frage Nr. 14: Anzahl: 16 (69%); 9 (26%) mit Begr¨undung der Zeit-/Kostenersparnis
Frage Nr. 17: Ja: 23 (66%)
Frage Nr. 18: Ja: 16 (46%)
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 6

8. 3.4. Personae
Mit der Auswertung der Befragung wurden anhand ihrer Kenntnisse und Bed¨urfnisse drei Zielgruppen isoliert und
daraus drei Personae abgeleitet:
ˆ 20 – 40 J¨ahrige (Anzahl: 4); → Persona 1: Martina H¨usler, 26 Jahre
ˆ 40 – 60 J¨ahrige (Anzahl: 17); → Persona 2: Markus Senn, 54 Jahre
ˆ 60 – 80 + J¨ahrige (Anzahl: 14); → Persona 3: Hansruedi Pfeuti, 74 Jahre
3.4.1. Persona 1
Frau Martina H¨usler ist 26 Jahre alt, ledig und Studentin. Sie pflegt einen sicheren Umgang mit Internet und
Smartphones (beides t¨aglich) und verwendet WhatsApp o.¨a., hat jedoch kein Interesse an Kryptographie.
Sie nimmt zu Hause bereits Messungen vor (Schrittz¨ahler t¨aglich, Temperatur t¨aglich, Gewicht w¨ochentlich) und
geht f¨ur Messungen und Medikation monatlich zum Arzt oder Spezialisten im Labor. Sie w¨urde eine App begr¨ussen,
muss aber so oder so zum Arzt.
3.4.2. Persona 2
Herr Markus Senn ist 54 Jahre alt, verheiratet und Vater von zwei erwachsenen Kindern. Er wohnt in Bremgarten
in einem Einfamilienhaus und ist berufst¨atig in Aarberg.
Zu Hause hat er WLAN und pflegt einen sicheren Umgang mit Internet (t¨aglich) und Smartphone (t¨aglich) – er
verwendet WhatsApp. Er hat kein Interesse an der Kryptographie schreibt sich Passw¨orter auf. Zu Hause nimmt er
bereits Messungen vor (Blutzucker t¨aglich, Aufzeichnungen beim Joggen), geht aber w¨ochentlich f¨ur Messungen
zum Arzt oder Spezialisten ins Labor am Unispital in Bern.
Er w¨urde eine App begr¨ussen, da er weniger Termine beim Artz h¨atte und damit Zeit und Weg sparte. Er m¨ochte
aber, dass nur Daten ¨ubertragen werden – eine Diagnose soll von Arzt oder Spezialisten getroffen werden und ihm
als Patient pers¨onlich per E-Mail oder Telefon kommuniziert werden.
3.4.3. Persona 3
Herr Hansruedi Pfeuti ist 74 Jahrea alt, verheiratet und pensioniert. Er hat zu Hause WLAN, jedoch wenig Erfahrung
sowohl mit Internet als auch mit Smartphones (kennt SMS) und ist nicht Technik-Affin. Kryptographie ist ihm ein
Fremdwort.
Er nimmt zu Hause bereits Messungen vor (Blutdruck) und geht f¨ur Messungen w¨ochentlich zum Arzt oder Spe-
zialisten im Labor (Blutbild, Cholesterin, Schilddr¨usenwerte). Er ist bereit, eine App zu verwenden, braucht aber
eine Einf¨uhrung, um die App zu benutzen.
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 7

9. 3.5. Expert Review
Nach Betrachtung diverser Android-Apps zum Thema ”Vitalwerte erfassen”– und eventuell auch versenden – sind
nachfolgende Punkte festgestellt worden. Viele Apps beschr¨anken sich auf einen einzigen Typ von Messung, so z.B.
eine App als Blutdruck-Logbuch. Einige handhaben aber diverse Sensoren. Die Daten werden jedoch immer lokal
gespeichert, manche erlauben zus¨atzlich eine ¨Ubertragung der Messdaten an Dritte. Alle stellen sie jedoch eine
Auflistung von get¨atigten Messungen zur Verf¨ugung, z.T. auch mit einer graphischen Darstellung.
Die Apps versuchen mit recht ¨ubersichtlichen Oberfl¨achen die Bedienung einfach zu gestalten. Dabei kommen zwei
Muster auff¨allig h¨aufig zum Einsatz: Ein Hauptbildschirm mit Kn¨opfen (siehe Abbildung 3.1) sowie eine Navigation
per Reiter am oberen Rand (siehe Abbildung 3.2).
Abbildung 3.1.: App mit Hauptbildschirm aus Kn¨opfen
Abbildung 3.2.: App mit Navigation per Reiter am oberen Rand
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 8

10. Es ist darauf zu achten, dass die angebotenen M¨oglichkeiten auch Benutzergerecht sind. Zu viele verschiedene
Messarten sollten nicht in derselben Ansicht gezeigt werden. Auch sollten die Messarten wissenschaftlich sinnvoll
sein. Bei unserer Recherche haben wir eine App gefunden, in der man erfassen kann, ob der Blutdruck aufrecht,
sitzend oder aber liegend gemessen wurde. Dies ist aus medizinischer Sicht Unsinn und ergibt keine vergleichbaren
Werte (siehe Negativ-Beispiele in Abbildung 3.3).
Abbildung 3.3.: App mit 20 m¨oglichen Messungen (li) und App mit nicht vergleichbaren Werten (re)
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 9

11. 3.6. Lo-Fi Prototyp
Als Diskussionsgrundlage wurde ein Workshop durchgef¨uhrt und mit einem Paper&Pencil Prototyping per Smartphone-
Scribble das GUI auf Papier gebracht. Danach erstellten wir mit der Software balsamiq1
einen ersten Lo-Fi-
Prototypen. Damit kann eine Registrierung (siehe Abbildung 3.4), das Hinzuf¨ugen eines Kontaktes (siehe Ab-
bildung 3.5) oder eine EKG-Messung simuliert werden (siehe Abbildung 3.6).
Abbildung 3.4.: Lo-Fi-Prototyp: Registrierung in vier Schritten
Abbildung 3.5.: Lo-Fi-Prototyp: Kontakt hinzuf¨ugen in vier Schritten
1balsamiq, http://www.balsamiq.com/
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 10

12. Abbildung 3.6.: Lo-Fi-Prototyp: EKG-Messung in sieben Schritten
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 11

13. 4. Detailkonzept
Das Detailkonzept folgt einer Vorlage von Lowdermilk [Low13b]. Der Test soll folgende Fragestellungen beantworten:
Funktionieren die Pfade? Kommt der User ans Ziel? Als Testkonzept wird ein Hi-Fi Prototyp als screenbasiertes
Detailkonzept erstellt. Als Inhalt werden drei Szenarien erarbeitet.
4.1. Szenarien
Die folgenden Szenarien beschreiben jeweils das Vorgehen aus Sicht des Anwenders. Die darunterliegenden tech-
nischen Vorg¨ange sollen vor dem Anwender verborgen bleiben, damit ein m¨oglichst einfacher Ablauf entsteht.
Grunds¨atzlich gibt es drei Szenarien zum Betrieb der Applikation. Diese unterteilen sich f¨ur den Anwender sichtbar
in die Bereiche ”Kontakte”, ”Sitzungen”und ”Messungen”(lokal verwaltet).
4.1.1. Szenario 1 Kontakte
Unter dem Tab ”Kontakte”legt der Anwender neue Kontakte an und gruppiert diese, wenn gew¨unscht, zu Gruppen.
Sp¨ater wird er ¨uber diese Kontakte seine Sitzungen anlegen oder einsehen k¨onnen. Das Erstellen eines Kontaktes
registriert den Anwender auch beim Server seines Arztes / seiner medizinischen Institution und richtet im Hinter-
grund eine gesicherte Verbindung f¨ur die zuk¨unftigen ¨Ubertragungen der Daten ein. Dieser Bereich ist dahingehend
optional, dass die Einstellungen f¨ur eine ¨Ubermittlung notwendig sind. Wird die App nur f¨ur lokale Messungen
genutzt, sind hier keine Einstellungen vorzunehmen.
Vorgehen
1. Der Anwender ¨offnet auf dem Hauptbildschirm den Reiter Kontakte und w¨ahlt das Erstellen eines neuen
Kontaktes.
2. Er fotografiert den von seinem Arzt pr¨asentierten QR-Code, welcher alle n¨otigen Informationen f¨ur die Ver-
bindung enth¨alt. Die App richtet diese nun im Hintergrund ein.
3. Nachdem die Verbindung hergestellt wurde, schliesst der Anwender den Vorgang ab, indem er per Knopfdruck
das Versenden seiner Daten an diesen Kontakt erlaubt.
4. Sollte der Anwender es als n¨utzlich betrachten, kann er hier ebenfalls per Knopfdruck eine neue Gruppe
erstellen. Dies ist dann von Vorteil, wenn die selben Messwerte an verschiedene ¨Arzte / Institiutionen gesandt
werden sollen.
5. Wurde der Gruppenname eingegeben und best¨atigt, k¨onnen nun aus einer Liste bestehender Kontakte jene
ausgew¨ahlt werden, welche dieser Gruppe hinzugef¨ugt werden sollen.
6. Per ”OK”-Knopf wird der Vorgang best¨atigt und abgeschlossen.
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 12

14. 4.1.2. Szenario 2 Sitzung
Eine Sitzung ist die Kommunikation mit einem Kontakt oder einer Gruppe und beinhaltet die Messung und ¨Uber-
mittlung von Messwerten. Dies wird der meistgenutzte Anwendungsfall sein.
Vorgehen
1. Der Anwender w¨ahlt den Tab ”Sitzung”. Er bekommt eine Liste seiner Einzel- und Gruppenkontakte angezeigt.
2. Nach Auswahl eines Kontaktes bekommt man die letzten Sitzungsdaten angezeigt. (Verlauf der letzten Mes-
sungen sowie ein Statusanzeige betreffend der ¨Ubermittlung.) Oberhalb des Verlaufs wird ein Knopf ”Neue
Messung”angezeigt.
3. Wird eine neue Messung ausgel¨ost, bekommt der Anwender eine Liste von Sensoren pr¨asentiert, aus der er
einen ausw¨ahlt. Da jede Messung aus einem optionalen Kommentar und den eigentlichen Messwerten besteht,
wird nun erst einmal ein Textfeld angezeigt. Der Patient kann entscheiden, ob er einen Text eingibt und mit
OK best¨atigt oder aber einfach mit einem Knopf ”Kein Kommentar”¨uberspringt.
4. Hierauf wird er gebeten, zu kontrollieren, dass der gew¨unschte Sensor korrekt angeschlossen ist, beziehungs-
weise er bekommt eine Anleitung hierzu angezeigt. Die eigentliche Messung kann mit einem entsprechenden
Knopf gestartet werden.
5. Nach der Messung wird der Anwender gefragt, ob er eine weitere Messung vornehmen m¨ochte (was in an
den Anfang einer neuen Messungen leitet) oder zu seiner Kontaktliste zur¨uckkehren m¨ochte.
Da es zwei unterschiedliche Arten von Messungen gibt, sind zwei m¨ogliche Ausg¨ange zu betrachten.
Messung eines einmaligen Wertes: Ein einmalig erfasster Wert (z.B. Blutdruck oder Zuckerwert) wird sofort
¨ubermittelt. Alle Vorg¨ange sind dann automatisch abgeschlossen. Der Anwender wird in die laufende Sitzung
zur¨uck versetzt. Diese dient der ¨Ubersicht. Es sind keine weiteren Aktionen n¨otig.
Fortlaufende Messung: ¨Uber eine gewisse Zeitspanne laufende Messungen (z.B. EKG) laufen nach dem Ausl¨osen
der Messung weiter. Der Anwender wird in die aktive Sitzung zur¨uck versetzt, wobei diese entsprechend
markiert wird. Der Anwender muss die laufende Messung zu gegebener Zeit per Knopfdruck beenden. Damit
verschwindet auch die Markierung einer Sitzung.
4.1.3. Szenario 3 Messung
Die Applikation l¨asst sich generell lokal benutzen. Dies bedeutet, dass Messungen vorgenommen und deren Werte
angezeigt werden k¨onnen, ohne dass diese an jemanden ¨ubermittelt werden. Dazu m¨ussen keine Kontakte erfasst
worden sein.
Vorgehen
1. Der Anwender ¨offnet den Reiter ”Messung”. Hier wird eine Liste von Sensoren pr¨asentiert, aus der er einen
ausw¨ahlt.
2. Daraufhin wird ein Textfeld angezeigt, indem der Anwender einen Kommentar eingeben oder aber mit einem
Knopf ”Kein Kommentar”¨uberspringen kann.
3. Auf dem n¨achsten Bildschirm erh¨alt er eine Anleitung zum Anschluss des Sensors. Die eigentliche Messung
kann mit einem entsprechenden Knopf gestartet werden.
Da es zwei unterschiedliche Arten von Messungen gibt, sind zwei m¨ogliche Ausg¨ange zu betrachten.
Messung eines einmaligen Wertes: Das Ergebnis wird angezeigt. Quittiert der Anwender dies, wird er auf den
Hauptbildschirm zur¨uck versetzt.
Fortlaufende Messung: Die Messwerte werden laufend am Bildschirm angezeigt, bis der Anwender dies mittels
eines Knopfes abbricht. Der Anwender wird wiederum auf den Hauptbildschirm zur¨uck versetzt.
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 13

15. 4.2. Hi-Fi Prototyp
Mit der Software axure1
wurde ein Prototyp als funktionsf¨ahiges Modell der Applikation erstellt (siehe Abbil-
dung 4.1). F¨ur den Test auf einem Smartphone kann die Adressleiste und die Sitemap ausgeblendet werden, damit
f¨ur den Benutzer nur noch das UI zug¨anglich ist.
Abbildung 4.1.: Prototyp der Mobile-App in einem Webbrowser
1axure, http://www.axure.com
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 14

16. 5. Usability-Test
Zur Wahl der Testpersonen wurde ein Rekrutierungprofil gem¨ass Persona 2 angewendet (vgl. Abschnitt 3.4.2). An
der Zahl wurden vier Personen rekrutiert, womit gem¨ass Erfahrungen gegen 80% der Usability-Probleme gefunden
werden sollten.
Es wird ein Vor- und Nachinterview gef¨uhrt (siehe Anhang B). Damit soll sichergestellt werden, dass die User den
Kriterien entsprechen und es wird damit auch eine R¨uckmeldung eingeholt. Der Ablauf der Testvorbereitung und
Durchf¨uhrung wird schriftlich festgehalten.
5.1. Durchf¨uhrung der Tests
Als Testvorbereitung mussten der Zeitpunkt festgelegt und R¨aumlichkeiten organisiert sowie die Testpersonen
eingeladen werden. Material wie Smartphone, Axure, Labtop, Szenarien, Interviews und Protokolle wurden zusam-
mengestellt. Der Test wurde per Screencast resp. per Videoaufnahme festgehalten.
Eine Testperson wurde schliesslich begr¨usst und mit den Fragen des Vorinterviews konfrontiert. Dann musste die
Testperson die Szenarien selbst¨andig erf¨ullen. Daneben wurde ein Testprotokoll gef¨uhrt. Nach dem Test wurde das
Nachinterview durchgef¨uhrt, danach die Testperson h¨oflich verabschiedet.
5.2. R¨uckmeldungen
Als positive gewertet wurden folgende Punkte:
ˆ Funktionalit¨at, dass Daten direkt an den Arzt gesendent werden kann
ˆ QR-Code Leser integriert
ˆ Anleitung zur Blutdruckmessung
ˆ Einfach gestaltet mit klaren Symbolen
Als negativ gewertet wurden folgende Punkte:
ˆ Sitzung als Men¨u-Punkt ist missverst¨andlich
ˆ Home-Schaltfl¨ache funktioniert nicht
ˆ Keine klare ¨Ubersicht, was die App alles umfasst
ˆ Sendevorgang undeutlich definiert (Sendevorgang abgeschlossen? An wen?)
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 15

17. 5.3. Verbesserungvorschl¨age
ˆ ”Sitzung”umbenennen zu ”Senden”(siehe Abbildung 5.1).
ˆ Platzieren der Sendebest¨atigung im unteren Bereich des Bildschirms, damit besser sichtbar (siehe Abbil-
dung 5.2).
ˆ Bessere Benutzerf¨uhrung durch zus¨atzliche Text-Information.
ˆ Nach erfolgter Messung zur¨uck zu allen erfassten Resultate
ˆ Initiale Konfiguration der App
ˆ i18n: Sprache sollte ¨anderbar sein
ˆ Messwerte darstellen, bevor sie importiert werden
ˆ ID Format ¨andern
Abbildung 5.1.: Verbesserungsvorschlag: ”Sitzung”umbenennen zu ”Senden”
Abbildung 5.2.: Verbesserungsvorschlag: Platzieren der Sendebest¨atigung im unteren Bereich des Bildschirms, damit
besser sichtbar
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 16

18. Literaturverzeichnis
[BR15] Sandro Blatter und Olivier Richarz.
”
Wink - Medical Sensors. Pflichtenheft im Rahmen der Bachelor
Thesis“. M¨arz 2015.
[Low13a] Travis Lowdermilk. User-Centered Design. A Developer’s Guide to Building User-Friendly Applications.
1. Aufl. O’Reilly, 2013. Kap. 8: Gathering Feedback, S. 77–94. ISBN: 978-1-449-35980-5.
[Low13b] Travis Lowdermilk. User-Centered Design. A Developer’s Guide to Building User-Friendly Applications.
1. Aufl. O’Reilly, 2013. Kap. 9: Usability Studies, S. 95–104. ISBN: 978-1-449-35980-5.
[Peu+15] Sibylle Peuker u. a.
”
User-Centered Design – Herbstsemester 2015. Slides als Skript im Modul BTI7083“.
15. Sep. 2015.
Bildnachweis
Titelbild: Videostill vom Usability-Test mit Testperson 1.
Abbildung 2.1: Typisches Vorgehen. In: [Peu+15].
Abbildung 2.2: Ohne Bildunterschrift. In: [BR15, S. 5].
Abbildung 3.1 – 3.3: Bildschirmfotos verschiedener Apps.
Abbildung 3.4 – 3.6: Output von Balsamiq.
Abbildung 4.1: Bildschirmfoto des Axure-Prototypen.
Abbildung 5.1 und 5.2: Bildschirmfotos des Axure-Prototypen, bearbeitet mit Photoshop.
Abbildungsverzeichnis
2.1. Phasen f¨ur das Vorgehen bei einem User-centered Design . . . . . . . . . . . . . . . . . . . . . . . 3
2.2. Das System ”Wink - Medical Sensors” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.1. App mit Hauptbildschirm aus Kn¨opfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2. App mit Navigation per Reiter am oberen Rand . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.3. App mit 20 m¨oglichen Messungen (li) und App mit nicht vergleichbaren Werten (re) . . . . . . . . 9
3.4. Lo-Fi-Prototyp: Registrierung in vier Schritten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.5. Lo-Fi-Prototyp: Kontakt hinzuf¨ugen in vier Schritten . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.6. Lo-Fi-Prototyp: EKG-Messung in sieben Schritten . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.1. Prototyp der Mobile-App in einem Webbrowser . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5.1. Verbesserungsvorschlag 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
5.2. Verbesserungsvorschlag 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 17

19. A. Umfrage
A.1. Fragebogen
Umfrage
Telemedizinische Applikation zur sicheren Übertragung von Messdaten
zwischen Patient und Arzt
Im Rahmen unserer Bachelor Thesis im Studiengang Informatik an der Berner
Fachhochschule entwickeln wir ein System zur sicheren Übertragung von
medizinischen Daten zwischen Patient und Arzt. Der Patient erhält dadurch die
Möglichkeit, seine regelmässig durchzuführenden Messungen (Blutdruck,
Blutzucker, EKG etc.) zuhause oder unterwegs selbstständig zu erfassen und an
den Arzt zu schicken. Der Patient erhält die dazu benötigten Sensoren bzw.
Medizingeräte und eine App, die er auf seinem Smartphone installieren kann. Die
Messungen werden danach vom Patienten selbstständig durchgeführt und an an
unseren Server gesendet. Diese Daten werden entweder für den Patienten zur
späteren Ansicht gespeichert und/oder direkt an den Arzt weitergeleitet.
Für den Patienten entfallen dadurch die Arzttermine und die unter Umständen
zeitraubenden Anfahrten. Der Arzt erhält die Messwerte unmittelbar und kann bei
Bedarf reagieren, indem er zum Beispiel mit dem Patienten Kontakt aufnimmt.
Um diese Applikation/en besser auf die Bedürfnisse der Patienten abzustimmen,
bitten wir Sie, den folgenden Fragebogen auszufüllen und an der Anmeldung
wieder abzugeben.
Kontakt
Sandro Blatter
Tel.: 079 701 35 32
sandro.blatter@students.bfh.ch
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 18

20. Fragebogen
1. Wie oft benutzten Sie während des letzten Monats ein Smartphone?
...................................................................................................................................
2. Wie oft benutzten Sie während des letzten Monats das Internet ?
...................................................................................................................................
3. Benutzen Sie einen Messenger (z.B. WhatsApp)?
...................................................................................................................................
4. Benutzen Sie ein Gerät aus der Gruppe der tragbaren Medizin-Geräte? (z.B.
Schrittzähler)
...................................................................................................................................
5. Gibt es eine App, die Sie besonders mögen?
...................................................................................................................................
6. Was gefällt Ihnen besonders an dieser App?
...................................................................................................................................
7. Gibt es eine App, die Sie nicht mögen?
...................................................................................................................................
8. Was stört Sie an dieser App?
...................................................................................................................................
9. Welche Verbesserungen würden Sie vorschlagen, damit Sie diese App öfters
benutzen würden?
...................................................................................................................................
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 19

21. 10. Besitzen Sie zuhause einen drahtlosen Internetzugang (WLAN)?
...................................................................................................................................
11. Welche Messungen nehmen Sie zuhause selbst vor?
...................................................................................................................................
12. Wie oft nehmen Sie die Messungen vor?
...................................................................................................................................
13. Für welche Messungen müssen Sie den Arzt besuchen (z.B. Kontrolle eines
bestimmten Vitalparameters)?
...................................................................................................................................
14. Begrüssen Sie die Entwicklung einer App zur Übertragung von Medizindaten? Bitte
begründen Sie ihre Aussage.
...................................................................................................................................
15. Welche Elemente soll eine solche App enthalten?
...................................................................................................................................
16. Welche Elemente soll sie nicht enthalten?
...................................................................................................................................
17. Nur der Arzt oder Sie werden Einsicht in die Messwerte erhalten. Welche
persönlichen Daten würden Sie zwecks administrativer Vorgänge bei der
Registrierung bekanntgeben (z.B. Vorname, Nachname, Geburtstag,
Telefonnummer, E-Mail)?
...................................................................................................................................
18. Soll die App eine gesprochene Anleitung enthalten?
...................................................................................................................................
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 20

22. A.2. Auswertung
Pers.-Nr.Jg.Alter123410111213141718
1319407500000Blutdruck,GewichtunregelmässigBlutbildjaja1
b19466911011SchrittzählertäglichKontrollejeinja0
17195065MRI/CTjaemail1
e19506511001Blutbildneinja0
219556011111Schrittzählertäglichjaja0
719556011101Kontrollejaja1
1519556011101ja
1819565911101Cholesterinjaja0
261959561weekly101Laborjaja1
2419615411101Blutdruckmonatlichjaja+Adresse+kk1
919625311111BlutdruckwöchentlichLaborjaanalogKrankenkassenkarte1
1119655011101BlutdrucktäglichBlutbildjaja1
c19655011001jakeine1
2319655011111AufzeichnungenbeiJoggentäglichSchilddrüsenwerteja0
2219655011101Blutdruckneinja0
a19664911001ja
2119674811101jeinja0
281972431weekly101BlutzuckerwöchentlichBlutzuckerjaja1
d19734211101neinja0
81975401111
619754011101nein1
4519793611101Temperaturmonatlichjaja0
1219823311101jaja1
319823311101jaja0
519853011101email1
1019853011111Blutdruckneinkeine0
419862911111MRI/CTnein
1419882711101Medikationjaja0
4419892611101ja
1619902511101BlutdruckwöchentlichBlutbildjaja1
1919902511101jeinja0
2519912411101nein1
119912411111Schrittzählertäglichjaja0
2019922311101jaja1
2719922311101jakeine1
AnzahltäglichtäglichJaJaJaAnzahlAnzahlAnzahlJa/JeinJaJa
35333129733111116242316
94%89%83%20%94%31%31%46%69%66%46%
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 21

23. B. Test
B.1. Vor-Interview
Wink – Telemedizinische Applikation zur sicheren Übertragung von Messdaten
zwischen Patient und Arzt.
Jahrgang: ........……...
Vor-Interview
1. Wie oft benutzten Sie während des letzten Monats das Internet ?
□Täglich
□Mehrmals pro Woche
□Manchmal
□Nie
2. Besitzen Sie zu Hause einen drahtlosen Internetzugang (WLAN)?
□Ja
□Nein
3. Wie oft benutzten Sie während des letzten Monats ein Smartphone?
□Täglich
□Mehrmals pro Woche
□Manchmal
□Nie
4. Benutzen Sie einen Messenger (z.B. WhatsApp)?
□Täglich
□Mehrmals pro Woche
□Manchmal
□Nie
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 22

24. 5. Benutzen Sie ein Gerät aus der Gruppe der tragbaren Medizin-Geräte (z.B. Schrittzähler) und
wenn 'Ja': Welche?
□Ja: …………………………………………………………………………………………….
□Nein
6. Welche physiologischen Messungen nehmen Sie zu Hause selbst vor?
................................................................................................................................……….
7. Wie oft nehmen Sie Messungen vor?
□Täglich
□Wöchentlich
□Monatlich
□Ab und zu
8. Für welche Messungen müssen Sie den Arzt besuchen (z.B. Kontrolle eines bestimmten Vital-
Parameters)?
...................................................................................................................................
9. Begrüssen Sie die Entwicklung einer App zur Übertragung von Medizindaten? Bitte begründen
Sie ihre Aussage.
□Ja.
□Nein.
Begründung:
................................................................................................................................…
................................................................................................................................…
10.Was soll eine solche App können?
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 23

25. B.2. Bedienbarkeitstest
Bedienbarkeitstest, mobile
Applikation
Vielen Dank, dass Sie an unserem Test dieser mobilen App teilnehmen. Wir möchten herausfinden,
wie einfach oder schwierig diese Applikation für jemanden zu bedienen ist, der diese noch nie
gesehen hat. Fühlen Sie sich also völlig frei laut zu denken und zu kommentieren. Ihre Meinung
interessiert uns.
Untenstehend finden Sie eine Reihe Szenarien, die Sie bitte durchspielen. Sie brauchen nichts zu
notieren und können sich ganz auf die Applikation konzentrieren.
Die Applikation ist nicht das fertige Produkt sondern eine Darstellung der Funktion. Die angegebenen
Werte und Texte repräsentieren den Inhalt, sind aber nicht echt.
SZENARIEN
1. Heute morgen war ihnen etwas schwindlig. Sie möchten nun ihren Blutdruck testen und
ansehen. Nehmen Sie bitte die Applikation zur Hand und folgen Sie dem Vorgang um Ihren
aktuellen Blutdruck zu bestimmen.
2. Sie haben entschieden, Ihre Messungen nicht nur einfach durchzuführen und anzuschauen,
Sie möchten diese nun auch auf einem Server speichern, wo sie gesichert werden. Damit Sie
Ihre Daten auf einem Server speichern können (Cloud Dienst) registrieren Sie sich bitte
hierfür.
3. Sie sind in der Praxis von Frau Dr. Meier und erhalten den Auftrag wöchentlich Ihren
Blutdruck zu messen und die Werte zu übermitteln. Damit die zukünftige Übermittlung
geschen kann müssen Sie erst einmal einen Kontakt haben, an den die Daten gesandt werden
können. Erfassen Sie nun erstmal Frau Dr. Meier als neuen Kontakt. (Vorerst keine Messungen
nötig.)
4. Da Sie nun einen neuen Kontakt haben, ist jetzt eine gute Gelegenheit die Messung zu testen.
Messen Sie Ihren Blutdruck und senden Sie den Wert ihrer Ärztin zu.
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 24

26. B.3. Nach-Interview
Wink – Telemedizinische Applikation zur sicheren Übertragung von
Messdaten zwischen Patient und Arzt.
Nach-Interview
1. Was hat Ihnen an dieser App besonders gefallen?
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
2. Was hat Sie an dieser App besonders gestört?
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
3. Welche Verbesserungen würden Sie vorschlagen, damit Sie diese App öfters
benutzen würden?
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
................................................................................................................................…
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 25

27. C. Plakat
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 26

28. Selbst¨andigkeitserkl¨arung
Wir best¨atigen, dass wir die vorliegende Arbeit selbstst¨andig und ohne Benutzung anderer als der im Literaturver-
zeichnis angegebenen Quellen und Hilfsmittel angefertigt haben. S¨amtliche Textstellen, die nicht von uns stammen,
sind als Zitate gekennzeichnet und mit dem genauen Hinweis auf ihre Herkunft versehen.
Ort, Datum: Biel/Bienne, 19. Januar 2016
Vorname, Name: Sandro Blatter
Unterschrift: ......................................
Vorname, Name: Roland Bruggmann
Unterschrift: ......................................
Vorname, Name: Michael Ramahenina
Unterschrift: ......................................
Vorname, Name: Glenn Ryser
Unterschrift: ......................................
User-centered Design f¨ur Mobile-App, Version 1.0, 19. Januar 2016 27