Universität Ulm | 89069 Ulm | Germany Fakultät für
Ingenieurwissenschaften,
Informatik und
Psychologie
Institut für Datenbanken
und Informationssysteme
Konzeption und Realisierung eines
Designkonzepts zur mobilen
Unterstützung von therapeutischen
Hausaufgaben
Bachelorarbeit an der Universität Ulm
Vorgelegt von:
Johannes Schmid
Gutachter:
Prof. Dr. Manfred Reichert
Betreuer:
Dr. Rüdiger Pryss
2017
Fassung 12. Januar 2017
c
2017 Johannes Schmid
This work is licensed under the Creative Commons. Attribution-NonCommercial-ShareAlike 3.0
License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/de/
or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California,
94105, USA.
Satz: PDF-L
A
TEX2ε
Kurzfassung
Die Nutzung von mobilen Endgeräten wie Smartphones, Smartwatches, Tablets und
PDAs gewinnen seit Jahren in unserer Gesellschaft zunehmend an Bedeutung. Bis
Ende des Jahres 2016 wird die Zahl der Smartphone-Nutzer in Deutschland auf ca. 50
Millionen prognostiziert. Weltweit beläuft sich diese Zahl auf rund 2,1 Milliarden. Laut
der Prognose für das Jahr 2020 soll die Anzahl der Smartphone-Nutzer weltweit um
weitere 770 Millionen Nutzer auf rund 2,87 Milliarden ansteigen. Durch die hohe Affinität
zu mobilen Endgeräten gewinnen diese auch im Gesundheitssektor immer stärkere Be-
deutung. Mobile Endgeräte werden z.B. häufiger zur Unterstützung von Behandlungen,
für Fitnessübungen oder Ernährungsplänen eingesetzt. Gerade psychotherapeutische
Hausaufgaben werden immer mehr in die Therapie integriert.
Der Einsatz von psychotherapeutischen Hausaufgaben gewinnt heutzutage zunehmend
an Bedeutung. Diverse Analysen bestätigen, dass der Erfolg von Aufgaben, welche in
Therapien eingesetzt werden, positiv durch die Verwendung und Erledigung solcher
Hausaufgaben einwirken. Folgernd ist der Erfolg einer Therapie vielversprechender mit
dem Einsatz von Hausaufgaben als ohne. Somit wird rund acht Millionen Menschen in
Deutschland geholfen, psychische Störungen, wie Depressionen, Angstzustände oder
Beeinträchtigung der Wahrnehmung, mithilfe dieser Methoden in den Griff zu bekommen
Ziel dieser Arbeit ist es, ein Konzept und das dazugehörige Design für eine mobile An-
wendung zu erarbeiten, welche bei der Erledigung von therapeutischen Hausaufgaben
unterstützen soll. Mithilfe einer einfachen und intuitiven Darstellung der Benutzeroberflä-
che wird eine einladende Nutzung und einfache Bedienung der Funktionen angestrebt.
iii
Inhaltsverzeichnis
1 Einleitung 1
1.1 Problemstellung und Motivation . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Ziel dieser Arbeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Aufbau der Arbeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 Grundlagen von therapeutischer Arbeit 5
2.1 Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Arten von therapeutischen Hausaufgaben . . . . . . . . . . . . . . . . . . 6
2.3 Ziele der therapeutischen Hausaufgaben . . . . . . . . . . . . . . . . . . 8
2.4 Phasenmodell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.5 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3 Anforderungen 13
3.1 Funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2 Nicht-Funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . 14
4 User-Interface Styleguides 17
4.1 Android 7+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.1.1 Typographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.1.2 Farben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.1.3 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.1.4 Verwendete Elemente . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.2 iOS 10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.2.1 Typographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.2.2 Farben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.2.3 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.2.4 Verwendete Elemente . . . . . . . . . . . . . . . . . . . . . . . . . 28
5 Entwurf der mobilen Anwendung 31
5.1 Anwendungsfalldiagramm . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
v
Inhaltsverzeichnis
5.2 Dialogstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.3 Digitale Papermockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.4 Elektronische Mockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
5.4.1 Willkommens-Seite . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.4.2 Hauptmenü . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.4.3 Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.4.4 Registrierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
5.4.5 Marketplace - Kategoriesuche . . . . . . . . . . . . . . . . . . . . 47
5.4.6 Marketplace - Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.4.7 Marketplace - Umkreissuche . . . . . . . . . . . . . . . . . . . . . 49
5.4.8 Marketplace - Detailsansicht . . . . . . . . . . . . . . . . . . . . . 50
5.4.9 Behandlungen – Neue Behandlung hinzufügen . . . . . . . . . . . 52
5.4.10 Behandlungen - Übersicht . . . . . . . . . . . . . . . . . . . . . . . 53
5.4.11 Behandlungen - Detailsansicht . . . . . . . . . . . . . . . . . . . . 55
5.4.12 Aufgaben - Übersicht . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.4.13 Aufgaben - Detailsansicht . . . . . . . . . . . . . . . . . . . . . . . 59
5.4.14 Aufgaben - Änderungsanforderung . . . . . . . . . . . . . . . . . . 61
5.4.15 Aufgaben - Feedback . . . . . . . . . . . . . . . . . . . . . . . . . 62
5.4.16 Profil - Mein Profil . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
5.4.17 Patienten - Studien - Berechtigung . . . . . . . . . . . . . . . . . . 64
6 Umfrage 67
6.1 Aufbau und Ziel der Umfrage . . . . . . . . . . . . . . . . . . . . . . . . . 67
6.2 Auszüge aus der Umfrage . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
6.3 Auswertung der Umfrage . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
6.4 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
7 Anforderungsabgleich 71
7.1 Funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . 71
7.2 Nicht-funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . 73
vi
Inhaltsverzeichnis
8 Fazit 75
8.1 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
8.2 Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
8.2.1 Einstellungsmodul . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
8.2.2 Push - Benachrichtigungen . . . . . . . . . . . . . . . . . . . . . . 76
8.2.3 Version für Tablets . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
8.2.4 Mehrsprachigkeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
8.2.5 Patientenmodul Web . . . . . . . . . . . . . . . . . . . . . . . . . . 77
A Anhang 85
A.1 Papermockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
A.2 Elektronische Mockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
A.3 Ergebnisse der Umfrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
vii
1
Einleitung
In diesem Kapitel wird die Problemstellung und Motivation über die vorliegende Arbeit
erläutert, sowie die Ziele dieser Arbeit genannt. Abschließend folgt eine Übersicht über
den Aufbau dieser Arbeit.
1.1 Problemstellung und Motivation
Der Einsatz von psychotherapeutischen Hausaufgaben gewinnen heutzutage zuneh-
mend an Bedeutung. Diverse Analysen bestätigen, dass der Erfolg von Aufgabener-
gebnisse, welche in Therapien eingesetzt werden, positiv durch die Verwendung und
Erledigung solcher Hausaufgaben einwirken. Folgernd ist der Erfolg einer Therapie
vielversprechender mit dem Einsatz von Hausaufgaben als ohne.
Der Therapeut sollte bei der Erstellung der Hausaufgaben auf die individuellen Stärken
des Patienten eingehen und darauf achten, dass diese lösbar sind. Zusätzlich sollte
das Schwierigkeitslevel dieser therapeutischen Hausaufgaben stets auf dem ähnlichen
Niveau sein, um einen größtmöglichen Erfolg zu erzielen. Aus diesem Grund führt der
Therapeut eine regelmäßige Unterredung mit dem Patienten, welche unter anderem die
Akzeptanz und den Schwierigkeitsgrad der Aufgaben beinhaltet.
Die therapeutischen Hausaufgaben werden durch den Patienten außerhalb der ver-
einbarten Sitzungen in einem festgelegten Zeitraum gelöst. In dieser Zeit kann der
behandelnde Therapeut keinen Einfluss auf die Durchführung der übertragenen Aufga-
ben nehmen. Zudem ist es für den Therapeuten in diesem Zeitraum unklar, ob der Patient
1
1 Einleitung
die anstehende Aufgabe gewissenhaft und ordnungsgemäß erledigt. Diese Information
kann er nur in der Nachbesprechung der Hausaufgaben erlangen.
Die vorliegende Arbeit beschränkt sich nicht nur auf psychotherapeutische Hausaufga-
ben, sondern auf Hausaufgaben aller therapeutischen Arten. Um die obengenannten
Herausforderungen zu bewältigen, soll eine mobile Anwendung konzipiert und entwickelt
werden.
Die Anwendung wird für mobile Endgeräte entwickelt, da die Nutzung seit Jahren in
unserer Gesellschaft zunehmend an Bedeutung gewinnt. Bis Ende des Jahres 2016 wird
die Zahl der Smartphone-Nutzer in Deutschland auf ca. 50 Millionen [
1
] prognostiziert.
Weltweit beläuft sich diese Zahl auf rund 2,1 Milliarden. Laut der Prognose für das Jahr
2020 soll die Anzahl der Smartphone-Nutzer weltweit um weitere 770 Millionen Nutzer
auf rund 2,87 Milliarden ansteigen.
Die Abbildung 1.1 verdeutlicht die Prognose zur Anzahl der Smartphone-Nutzer weltweit
von 2012 bis 2020 (in Milliarden).
Im Hinblick auf die eigene Gesundheit werden mobile Geräte wie Smartphones immer
häufiger zur Unterstützung von Behandlungen, sowie der Fitness und Gesundheit zu
liebe eingesetzt. Der Markt für derartige Anwendungen steigt stetig an. Mit diesem
Themengebiet beschäftigen sich folgende Projekt: [3], [4], [5], [6], [7], [8], [9].
2
1.2 Ziel dieser Arbeit
Abbildung 1.1:
Prognose zur Anzahl der Smartphone-Nutzer weltweit von 2012 bis 2020
(in Milliarden), Quelle: [2]
1.2 Ziel dieser Arbeit
Ziel dieser Arbeit ist es, ein Konzept und das dazugehörige Design für eine mobile
Anwendung zu erarbeiten, welche zur Unterstützung bei der Durchführung von thera-
peutischen Hausaufgaben dienen soll. Die Anwendung wird dabei nach den definierten
User-Interface-Styleguides
der jeweiligen Betriebssysteme gestaltet. Zudem soll eine
einfache und intuitive Darstellung der Benutzeroberfläche zur einladenden Nutzung
und einfachen Bedienung der Funktionen angestrebt werden. Um erste Aussagen über
die Benutzerfreundlichkeit und Bedienbarkeit dieser Anwendung zu treffen, wird nach
der Erstellung und Entwicklung des Designs anhand eines ersten klickbaren Prototy-
pen eine Umfrage gestartet. In dieser werden diverse Personen mit verschiedenem
Hintergrundwissen dazu befragt.
3
1 Einleitung
Zum Abschluss wird ein kurzer Ausblick auf Zukunftsvisionen und mögliche Erweiterun-
gen dieser Anwendung gegeben.
1.3 Aufbau der Arbeit
Dieses beinhaltet die Einführung in die Problemstellung, sowie die Motivation des
Projektes. Zudem werden die Ziele der Arbeit genannt und näher erläutert.
In
Kapitel 2
werden notwendige Grundlagen von therapeutischen Hausaufgaben erar-
beitet, auf welchen diese Arbeit basiert.
Anschließend werden in
Kapitel 3
die funktionalen und nicht-funktionalen Anforderungen
vorgestellt und verdeutlicht.
Darauf folgend werden in
Kapitel 4
die
User-Interface-Styleguides
der beiden verwen-
deten Betriebssysteme (Android und iOS) zusammengefasst. Darin werden die jeweilige
grundlegende Typographie, die dargestellten Farben der Anwendung, das verwendete
Layout und die verwendeten Elemente genauer beschrieben.
Basierend auf diesen vordefinierten Elementen beginnt in
Kapitel 5
die Entwurfsphase.
Dazu werden zuerst verschiedene Anwendungsfälle und Dialogstrukturen definiert und
vorgestellt. Des Weiteren werden digitale Papermockups konzipiert, um Grundstrukturen
und erste Ideen festzuhalten. Auf Basis der Papermockups werden schließlich die
elektronischen Mockups entwickelt und erarbeitet.
Nach der Entwurfsphase wird in
Kapitel 6
eine Online-Umfrage durchgeführt. Mithilfe
eines ersten klickbaren Prototyps werden wichtige Daten über die Benutzerfreundlichkeit,
Einfachheit und Bedienbarkeit der App erfasst.
In
Kapitel 7
werden die funktionalen und nicht-funktionalen Anforderungen aus dem
Kapitel 4 auf ihre Umsetzung geprüft.
Abschließend umfasst das
Kapitel 8
eine kurze Zusammenfassung dieser Arbeit, sowie
einen Ausblick auf mögliche Erweiterungen der Anwendung.
4
2
Grundlagen von therapeutischer Arbeit
In diesem Kapitel werden grundlegende Bausteine von therapeutischen Hausaufgaben
erläutert. Nach einer Begriffsdefinition von therapeutischen Hausaufgaben, werden
verschiedene Arten und Ziele dieser Hausaufgaben vorgestellt. Abschließend wird der
Hausaufgabeneinsatz anhand eines Phasenmodells dargestellt.
2.1 Definition
Laut der Begriffsdefinition nach Borgart und Kemmler von 1989 sind therapeutische
Hausaufgaben „... Aufgaben, die der Klient außerhalb des Therapiezimmers zwischen
den Therapiesitzungen durchführt, um das in der Therapie Gelernte einzuüben und zu
vertiefen, auf seinen konkreten Lebensbereich zu übertragen oder Beobachtungsmaterial
für die nächste Therapiesitzung zu sammeln.“ [
10
]. Das heißt therapeutische Aufgaben
sind aufgetragene Aktivitäten oder auch Trainingseinheiten, welche vom Patienten
außerhalb der Sprechstunden beim Therapeuten in einem festgelegten Zeitraum erledigt
und ausgeführt werden sollten.
Zudem wird darauf hingewiesen [
11
], [
12
], dass in den meisten Fällen Patienten durch die
Begriffe Hausaufgaben oder therapeutische Hausaufgaben Emotionen negativ geprägt
sind. Durch die Erinnerung an Hausaufgaben in der Schulzeit werden diese negativen
Gefühle hervorgerufen. Dies kann die Motivation zur Ausführung der therapeutischen
Hausaufgaben stark beeinträchtigen. Um die Motivation grundlegend zu steigern, wird
häufig versucht, den Begriff Hausaufgaben zu vermeiden und Alternativen zu verwenden.
Des Weiteren wird durch eine individuelle Anpassung der Aufgaben im Zusammenhang
5
2 Grundlagen von therapeutischer Arbeit
mit den Stärken der Patienten versucht, positive Erfahrungen bei der Ausführung von
therapeutischen Hausaufgaben hervorzurufen. Dies soll die Motivation des Patienten
zur Erledigung der Aktivitäten erheblich steigern. Oftmals werden die Aufgaben zusam-
men mit dem Patienten besprochen, um gegebenenfalls Missverständnisse, welche zu
Problemen bei der Ausführung oder sogar zur Nichtausführung der Aufgaben führen,
aus der Welt zu schaffen und eliminieren.
Die erledigten Hausaufgaben sind eine wichtige Stütze der therapeutischen Behandlun-
gen [12]. Dennoch werden diese häufig viel zu selten eingesetzt.
2.2 Arten von therapeutischen Hausaufgaben
Grundsätzlich sind psychotherapeutische Hausaufgaben in zwei Kategorien unterteil-
bar: Zum einen die Kategorie „Kognitive Aufgaben“ und zum anderen die Kategorie
„Verhaltensbezogene Aufgaben“ [13], [14].
In die Kategorie „Kognitive Aufgaben“ fällt unter anderem die Unterstützung der Diagno-
stik. Der Therapeut führt ausführliche Protokolle über Symptome, Lebensgeschichte
und Erfahrungen des Patienten. Ein weiterer wichtiger Punkt ist das Beobachten und
Protokollieren. Bestimmte Gedanken und Verhaltensweisen, sowie das Umsetzen von
neuen erlernten Verhaltensweisen durch den Patienten werden vom Therapeuten proto-
kolliert. Des Weiteren werden Argumente gesammelt, um gewisse Entscheidungen zu
begründen. Zudem wird eine Reflexion durchgeführt. Der Patient muss sich mit einem
bestimmten Thema auseinandersetzen, welches durch Literatur, Filme, etc. vermittelt
wird. Therapeutische Hausaufgaben können auch Psychoedukation umfassen. Dabei
wird versucht dem Patienten komplexe Informationen zu psychischen Erkrankungen
durch ein Selbsthilfemanual zu vermitteln.
In der untenstehenden Abbildung 2.1 werden die wichtigsten Arten von Hausaufgaben
visuell dargestellt:
6
2.2 Arten von therapeutischen Hausaufgaben
Abbildung 2.1: Arten von Hausaufgaben, Quelle: [12]
In den „Verhaltensbezogenen Aufgaben“ geht es hauptsächlich darum, verschiedene
Emotionen durch bestimmtes Verhalten zu kontrollieren. Dabei sind Konfrontationsauf-
gaben von hoher Wichtigkeit. Die Patienten werden mit Situationen im Alltag konfrontiert,
welche Angstzustände hervorrufen. Ein weiterer Bestandteil der verhaltensbezogenen
Aufgaben sind die Verhaltensänderungen. Durch Übungen und Trainingseinheiten wird
versucht die in der Therapie erarbeiteten Verhaltensweisen im Alltag umzusetzen. Das
Wiederholen der Hausaufgaben führt in den meisten Fällen zur Festigung des Verhaltens.
Dieses Ziel wird allerdings durch regelmäßige Durchführung der Hausaufgaben und der
Pflege von sozialen Kontakten erreicht. Weiterer Bestandteil von verhaltensbezogenen
7
2 Grundlagen von therapeutischer Arbeit
Aufgaben sind Kreative Übungen. Darunter fallen beispielsweise das Malen von Bildern
zu bestimmten Themen, Schreiben von Briefen an sich selbst oder das Notieren von
Träumen.
2.3 Ziele der therapeutischen Hausaufgaben
Die therapeutischen Hausaufgaben werden nicht nur verschieden kategorisiert (siehe Ka-
pitel 2.2), sondern verfolgen auch unterschiedliche Ziele [
15
], [
12
], [
16
]. Die wesentlichen
Ziele werden im Folgenden dargestellt und erläutert.
Ein Hauptziel dieser Hausaufgaben ist die Intensivierung und Unterstützung von Thera-
pien. Der Patient macht sich problematische Verhaltensweisen bzw. Defizite in seinem
Verhalten bewusst und wird durch regelmäßige Übungen, sowie Trainingseinheiten zum
Überdenken dieser Verhaltensweisen angeregt. Durch die regelmäßige Durchführung
der Aufgaben wird das positiv veränderte Verhalten gefestigt.
Ein weiteres Ziel ist der Transfer zwischen Therapie und Alltag. Der Patient versucht das
Gelernte in die Praxis umzusetzen und auf seine persönlichen Lebensbereiche anzuwen-
den. Zusätzlich dienen die im Alltag gemachten Erfahrungen, um den Therapieverlauf
neu auszurichten oder zu optimieren.
Die Stärkung der Therapiemotivation ist ein weitverbreitetes Ziel unter den Therapeuten.
Durch Aufgaben bzw. Trainingseinheiten, welche für den Patienten machbar sind und
positive Erfahrungen bringen, wird die Motivation zum weiteren Therapieverlauf erheblich
gesteigert.
Ebenso wie die Stärkung der Therapiemotivation ist die Stärkung von Eigeninitiative
und Selbstwirksamkeit ein wichtiges Ziel. Die Übernahme von Eigenverantwortung
und selbständiges äktiv werdenïn Zusammenhang mit positiven Erfahrungen führt zur
Stärkung der Selbstwirksamkeit. Der Patient sieht das Potential seiner Eigeninitiative
schnell und wird dadurch angeregt diese Fähigkeiten in den Alltag einzubeziehen.
Das Erfüllen dieser Ziele bedeutet einen erfolgreichen Abschluss einer therapeutischen
Behandlung.
8
2.4 Phasenmodell
2.4 Phasenmodell
In diesem Abschnitt werden verschiedene Phasen zum Einsatz von therapeutischen
Hausaufgaben anhand eines Modells [
17
] vorgestellt und beschrieben. Diese basieren
zum einen auf theoretischen Überlegungen und zum anderen auf bereits existierenden
Erfahrungen.
In der
ersten Phase
werden Aufgaben erarbeitet. Dabei wird zwischen verschiedenen
Herangehensweisen unterschieden; von der alleinigen Aufgabenentwicklung des Thera-
peuten vor Sitzungen über die gemeinsame Entwicklung mit dem Patienten in Sitzungen
bis hin zur alleinigen Erstellung durch den Patienten. Im weiteren Fortschritt der Therapie
wird versucht die Verantwortung immer mehr an den Patienten zu übertragen.
Die
zweite Phase
des Phasenmodells umfasst die Vergabe einer entwickelten Aufgabe.
Der Aufgabeninhalt, der Zeitpunkt der Durchführung und die Dauer, sowie Häufigkeit der
Ausführung müssen dabei geklärt werden. Zusätzlich sollte der Schwierigkeitsgrad der
Aufgaben stets auf ähnlichem Niveau bleiben. Dabei ist die einfache Umsetzbarkeit und
Lösbarkeit dieser Aufgaben von enormer Bedeutung.
In der
dritten Phase
erfolgt die Annahme der Aufgabe durch den Patienten. Dabei wird
von einem
Rückkopplungsprozess zwischen Therapeuten und Patienten
[
12
] gespro-
chen. Der Therapeut erkundigt sich hierbei regelmäßig über den Schwierigkeitsgrad und
Akzeptanz der Aufgabe. Falls Unklarheiten oder Missverständnisse seitens Patienten
auftreten, sollte die Aufgabenstellung nochmals überdacht und gegebenfalls überarbeitet
werden.
In der
vierten Phase
des Modells werden die vereinbarten und definierten Aufgaben
durch den Patienten gelöst und bearbeitet. Dabei kann der Therapeut keinen Einfluss
nehmen, weswegen eine klare Aufgabenstellung in der vorherigen Phase entscheidend
ist.
Die
fünfte Phase
beschreibt die Nachbereitung und Nachbesprechung der vereinbarten
Aufgaben in den vorherigen Phasen. Dabei ist es wichtig, dass der Patient von seinen
Erfahrungen während der Lösungsfindung berichtet.
9
2 Grundlagen von therapeutischer Arbeit
In der
sechsten Phase
des Modells werden einzelne Ergebnisse aus verschiedenen
Abschnitten der Aufgabenerledigung betrachtet. Dabei werden auch Ursachen und
Probleme, welche zur Nichterledigung der Aufgabe führen, näher untersucht. An diesen
erarbeiteten Resultaten wird dann angeknüpft und an den weiteren Therapieverlauf
angepasst.
Die
siebte
und letzte
Phase
umfasst die Auswertung der erledigten Aufgaben. Die
Ergebnisse des Patienten werden durch den Therapeuten überprüft und ausgewertet.
Abhängig vom Ergebnis, kann der Therapeut über eine erneute Ausführung oder Neuer-
stellung der Aufgabe entscheiden.
Abbildung 2.2: Phasenmodell des Hausaufgabeneinsatzes, Quelle: [17]
2.5 Zusammenfassung
Abschließend lässt sich sagen, dass die Vorbereitung und Nachbereitung von Sitzungen
seitens des Therapeuten und Patienten sehr wichtig sind, da jegliche Kontrolle während
der Hausaufgabendurchführung fehlt. Durch die Anwendung, welche in dieser Arbeit
konzipiert wird, wird eine einfache Lösung bereitgestellt, um die Zeit in den Sitzungen
effektiver nutzen zu können. Zusätzlich sind die Übernahme von Eigenverantwortung und
Eigeninitiative durch den Patienten zwei wesentliche Bausteine der Therapie. In diesem
10
2.5 Zusammenfassung
Zusammenhang können therapeutische Hausaufgaben verschiedene und multiplexe
Formen annehmen.
11
3
Anforderungen
In diesem Kapitel werden die Anforderungen für die Anwendung vorgestellt. In Abschnitt
und werden die funktionalen und nicht-funktionalen Anforderungen dokumentiert.
3.1 Funktionale Anforderungen
Die folgende Tabelle stellt die funktionalen Anforderungen der vor. Somit werden Funk-
tionen vorgestellt, welche dem Nutzer zur Verfügung gestellt werden sollen.
Anforderungen Beschreibung
Umsetzung der App in Android
und iOS
Die Albatros-App sollte auf den beiden Betriebssystemen
(Android und iOS) umgesetzt werden.
Willkommensseite
Es sollte eine Willkommensseite erstellt werden, um die
Benutzerfreundlichkeit zu steigern.
Registrierung, Passwort Rück-
setzung
Der Nutzer sollte die Möglichkeit haben sich mit seinen
Daten zu registrieren und wenn nötig, das festgelegte
Passwort zurückzusetzen.
Anmeldung
Der Nutzer soll sich auf zwei Arten anmelden können (mit
persönlichen Anmeldedaten oder einem Freischaltcode).
Marketplace
Dem Nutzer soll ein Marketplace zur Verfügung gestellt
werden.
Tabelle 3.1: Funktionale Anforderungen I
13
3 Anforderungen
Anforderungen Beschreibung
Behandlungsübersicht
Der Nutzer sollte Zugriff auf den aktuellen Status seiner
Behandlungen haben.
Behandlungsaufgaben Detail-
ansicht
Der Nutzer sollte die Möglichkeit haben Details über seine
Aufgabe einzusehen.
Behandlungsaufgaben Adapti-
on
Dem Nutzer sollte die Funktion der Aufgabenänderung
zur Verfügung gestellt werden. Er sollte die Aufgabe ver-
schieben können und eine inhaltliche Änderung anfordern
können.
Abgabe einer Behandlungsauf-
gabe
Es sollte sichergestellt sein, dass der Nutzer bei dem
Abschließen einer Aufgabe diese auch quittiert.
Profildaten Bearbeitung
Der Nutzer sollte zu jeder Zeit die Möglichkeit haben seine
persönlichen Daten zu bearbeiten, sowie das Passwort
zu ändern.
Push-Benachrichtigungen
Der Nutzer sollte durch Push-Nachrichten an die Erledi-
gung der einzelnen Aufgaben erinnert werden.
Patienten-Studien-
Berechtigung
Dem Nutzer wird die Möglichkeit geboten an einer Studie
zur Datenerhebung von medizinischen Daten teilzuneh-
men. Dazu sollte er einwilligen.
Tabelle 3.2: Funktionale Anforderungen II
Zum Thema Datenerhebung bei
Mobile Health Anwendungen
befassen sich unter an-
derem folgende Projekte: [18], [19], [20], [21], [22], [23], [24], [25], [26].
3.2 Nicht-Funktionale Anforderungen
Nicht-funktionale Anforderungen beinhalten Anforderungen, welche für Design, Bedien-
barkeit und Datenschutz von hoher Bedeutung sind. Diese Anforderungen werden in der
untenstehenden Tabelle dargestellt.
14
3.2 Nicht-Funktionale Anforderungen
Anforderungen Beschreibung
Ähnliches Aussehen aller Apps
Die Apps beider Betriebssysteme sollen ähnlich ausse-
hen, um die Wiedererkennung zwischen den Betriebssys-
temen zu maximieren.
Einhaltung von User-Interface-
Styleguides
Die Design Richtlinien der Betriebssysteme sollten einge-
halten werden, damit die Realisierbarkeit der App sicher-
gestellt ist.
Aktuelle Version der Betriebs-
systeme
Die App sollte in der aktuellsten Version der beiden Be-
triebssystem Android und iOS konzipiert und gestaltet
werden.
Hohe Benutzerfreundlichkeit Die App sollte einfach und verständlich aufgebaut sein.
Feedback
Die App sollte unter bestimmten Voraussetzungen dem
Nutzer ein Feedback geben.
Selbsterklärbarkeit
Die App sollte selbsterklärend aufgebaut sein, um die
Benutzerfreundlichkeit zu maximieren.
Verfügbarkeit
Die App sollte in jeder Auflösung darstellbar sein, damit
diese auf diversen unterschiedlichen Geräten angeboten
werden kann.
Robustheit Die App sollte gegenüber Fehleingaben robust sein.
Tabelle 3.3: Nicht-funktionale Anforderungen
15
4
User-Interface Styleguides
In diesem Kapitel werden die
User-Interface-Styleguides
der beiden Plattformen Android
und iOS beschrieben.
User-Interface-Styleguides
sind vordefinierte Richtlinien, die bei
der Erstellung eines Designs oder Entwurfes eingehalten müssen.
Ziel dieser
Styleguides
ist die Vereinheitlichung der Benutzeroberfäche und damit die
Gewähleistung eines einheitlichen und konsistenten Aufbaus. Beide Betriebssyteme,
Android als auch iOS, haben unterschiedlich definierte
User-Interface-Styleguides
. Mit
diesen Richtlinien soll eine einfache Struktur geschaffen werden, welche einen hohen
Wiedererkennungswert und ein konsistentes Nutzungserlebnis bietet.
Der erste Abschnitt befasst sich mit den wichtigsten
User-Interface-Styleguides
des
Android-Systems. Im zweiten Abschnitt werden die
User-Interface-Styleguides
des iOS-
Systems dargestellt.
4.1 Android 7+
In diesem Abschnitt werden die
User-Interface Styleguides
des Android-Systems be-
schrieben. Alle Stylguides des Android-Systems können auch unter [
27
] nachgelesen
werden.
4.1.1 Typographie
Die Standardschriftfamilie von Android ist derzeit
Roboto
. Diese wurde bereits mit
der Version 4.0 („Ice Cream Sandwich“) eingeführt und entwickelte sich seitdem zum
17
4 User-Interface Styleguides
vollen Erfolg.
Roboto
ist eine serifenlose Schriftart, welche dadurch beim Lesen eine
angenehme Wirkung hat.
Die Schriftfamilie besteht aus verschiedenen Varianten. Im Einzelnen sind dies: ex-
traleichte (
Roboto Thin
), leichte (
Roboto Light
), normale (
Roboto Regular
), halbfette
(
Roboto Medium
), fette (
Roboto Bold
) und extrafette (
Roboto Black
) Schriftstärken (sie-
he Abbildung 4.1).
Abbildung 4.1:
Schriftvarianten der Roboto – Schriftfamilie, Quelle: Testeingaben mit
Adobe Photoshop CC (2017)
Die nachstehende Grafik 4.2 zeigt die Roboto – Schriftfamilie in der kursiven Variante.
18
4.1 Android 7+
Abbildung 4.2:
Schriftvarianten kursiv der
Roboto
– Schriftfamilie, Quelle: Testeingaben
mit Adobe Photoshop CC (2017)
4.1.2 Farben
Die Android
User-Interface-Styleguides
stellen eine Reihe von Farbpaletten zur Entwick-
lung einer Anwendung zur Verfügung (siehe [
28
]). Der Anwendungsentwickler kann laut
den
Styleguides
beliebige Farben, welche zur eigenen Marke und einen guten Kontrast
zwischen verschiedenen grafischen Elementen darstellen, verwenden.
Markierung 1
: Die Basishintergrundfarbe im Marketplace wird mit diesem dunkleren
Blau dargestellt. Der Hintergrund besitzt einen leichten Farbverlauf von einem dunk-
leren in ein helleres Blau (Markierung 2). Zudem wird das dunklere Blau für Buttons
und Eingabefelder im eingeloggten Bereich, sowie als Hintergrundfarbe des Menüs
verwendet.
Markierung 2
: Das hellere Blau wird als Basishintergrundfarbe im eingeloggten Bereich
und als Buttonfarbe im Marketplace verwendet. Der Hintergrund im eingeloggten Bereich
besitzt einen leichten Farbverlauf von diesem hellen in das dunklere Blau (Markierung
1). Ein ausgewählter Eintrag im Menü und Eingabefelder im nicht eingeloggten Bereich
wird ebenfalls mit dieser Farbe dargestellt.
19
4 User-Interface Styleguides
Markierung 3
: Bei falschen Benutzereingaben (z.B. Login) werden die Eingabefelder in
dieser Farbe markiert. Für den Nutzer ein Signal, dass etwas korrigiert werden muss.
Markierung 4
: Mithilfe dieser grünen Farbe lässt sich in der Kategoriesuche im Market-
place sehr schnell erkennen, welche Institute und Therapeuten freie Behandlungsplätze
haben.
Markierung 5
: In der Umkreissuche im Marketplace sind auf der Karte verschiedene
Kennzeichnungen vermerkt. Diese sollen die unterschiedlichen Kategorien (Typen)
darstellen. Die Kennzeichen werden mit Buchstaben verschiedener Farben abgebildet.
Markierung 6
: Mithilfe dieser roten Farbe erkennt der Nutzer in der Kategoriesuche sehr
schnell erkennen, welche Institute und Therapeuten keine freien Behandlungsplätze
mehr haben.
Markierung 7: siehe Markierung 5
Abbildung 4.3: Android - Verwendete Farben in der Anwendung
4.1.3 Layout
Das Layout wird vorwiegend vor der Designentwicklung definiert, welches dann als Vor-
lage zu allen möglichen Szenarien herangezogen werden kann. Die Benutzeroberfläche
wird in verschiedene Bereiche eingeteilt, welche bei verschiedenen Ansichten als Grund-
struktur verwendet wird. In der Praxis werden oft mehrere Layouts für verschiedene
Anwendungsbereiche einer Anwendung definiert.
20
4.1 Android 7+
Markierung 1
: Die Statusleiste ist in jeder Hinsicht fester Bestandteil eines Layouts. Es
wird der aktuelle Status des Smartphones angezeigt.
Abbildung 4.4: Android - Verwendetes Layout der Anwendung
Markierung 2
: In diesem Bereich wird durch einen einfachen Pfeil die „Gehe-zurück“-
Funktion dargestellt. Der Nutzer kann jederzeit zur vorherigen Ansicht zurückkehren.
Markierung 3
: Die Seitenüberschrift ist ebenso wie die Statusleiste ein fester Bestandteil
im Layout der Anwendung. Der Nutzer kann sofort erkennen, in welcher Ansicht er sich
während der Nutzung befindet.
21
4 User-Interface Styleguides
Markierung 4
: In diesem Bereich wird das Filter-Icon platziert. Der Zugriff darauf wird
allerdings nur aus bestimmten Ansichten gewährt.
Markierung 5: Dieser Bereich beinhaltet das Icon für das Menü.
Markierung 6
: Der größte Bereich im Layout stellt den eigentlichen Inhalt der Anwen-
dung dar. Dieser steht laut den
Styleguides
zur freien und individuellen Gestaltung zur
Verfügung.
4.1.4 Verwendete Elemente
Es stehen verschiedene Komponenten zur Entwicklung und Realisierung einer App zur
Verfügung, welche in den
User-Interface-Styleguides
des Android-Systems vordefiniert
sind. Diese können als Standardkomponenten von Android benutzt oder zur individuellen
Darstellung weiterverarbeitet werden. Diese Komponenten sind für die Entwicklung eines
Designs sehr hilfreich.
Im Folgenden werden verschiedene Elemente erklärt, welche in der Anwendung Ver-
wendung fanden:
Markierung 1: Eingabefelder sind wichtige Elemente zur Eingabe von Daten.
Markierung 2
: Um ein Datum oder aus verschiedene Datenelementen auswählen zu
können, werden oft Auswahlboxen verwendet, welche die Bedienung und Übersicht
erleichtern.
Markierung 3
: In dieser Anwendung werden verschiedene Typen von Buttons verwendet.
Der Raised button ist ein rechteckiger Button verknüpft mit bestimmten Reaktionen beim
Betätigen des Buttons.
Markierung 4
: Der Floating action button ist ein kreisförmiger Button, welcher häufig für
bestimmte Aktionen eingesetzt wird.
Markierung 5
: Der Flat button ist ein aus Text bestehender Button, welcher sehr häufig
in Dialogen (Markierung 7) verwendet wird.
Markierung 6
: Um verschiedene Inhalte gruppiert darzustellen, werden die Tabs einge-
setzt. Diese steigern die Benutzerfreundlichkeit und Übersichtlichkeit der Anwendung.
22
4.2 iOS 10
Markierung 7
: Dialoge sind häufig verbreitet, da sie sehr nützlich in ihrer Feedbackfunk-
tion sind. Sie werden eingesetzt, um dem Nutzer Nachrichten, Benachrichtigungen oder
zu treffende Entscheidungen anzuzeigen.
Markierung 8
: Um aus einer Liste mehrere Elemente auszuwählen oder zu markieren,
werden Checkboxen verwendet.
Markierung 9
: Um aus einer Liste ein Element auszuwählen, werden Radiobuttons
eingesetzt.
Abbildung 4.5: Android - Verwendete Elemente der Anwendung
4.2 iOS 10
In diesem Abschnitt werden die
User-Interface Styleguides
des iOS-Systems beschrie-
ben, welche auch unter [29] nachgelesen werden können.
23
4 User-Interface Styleguides
4.2.1 Typographie
San Francisco
ist seit der Version 9 die Standardschriftart auf allen iOS-Geräten. Es
werden zwei verschiedene Varianten eingesetzt. Die
San Francisco UI Text
für Texte bis
Schriftgröße 19pt und die
San Francisco UI Display
für Texte ab einer Größe von 20pt.
Für das Design der Anwendung wurde die Schriftfamilie
Helvetica LT Std
verwendet.
Sie ist eine serifenlose Schriftart und sehr weit verbreitet.
Die Schriftfamilie
Helvetica LT Std
beinhaltet von leicht bis extrafette Stärke mehrere
Variationen. Zum Beispiel kursiv, schmal und extraschmal (siehe Abbildung 4.6).
Abbildung 4.6:
Schriftvarianten der
Helvetica
– Schriftfamilie, Quelle: Testeingaben mit
Adobe Photoshop CC (2017)
4.2.2 Farben
iOS stellt acht verschiedene Farben zur Verfügung, welche sehr gut miteinander harmo-
nieren. Alle Farben können individuell in Verbindung mit einem hellen oder auch dunklen
Hintergrund eingesetzt werden.
Zusätzlich sind benutzerdefinierte Farben gestattet, welche jedoch zwingend miteinander
harmonieren sollten. Um die Lesbarkeit zu steigern, sollte auf unterschiedliche Kontras-
24
4.2 iOS 10
te geachtet werden. Das wird durch das Anordnen mehrerer Farben nebeneinander
erreicht.
Im Folgenden werden die Farben vorgestellt, welche in der Anwendung des iOS-Systems
Verwendung fanden:
Markierung 1
: Auch hier wird die Basishintergrundfarbe im Marketplace mit diesem
dunkleren Blau dargestellt. Der Hintergrund besitzt einen leichten Farbverlauf von dem
dunkleren in das hellere Blau (Markierung 2). Somit wird eine höhere Wiedererkennbar-
keit erzielt. Zusätzlich dient diese Farbe als Hintergrund in dem Menü und als Buttonfarbe
in der gesamten App.
Markierung 2
: Das hellere Blau wird als Basishintergrundfarbe im eingeloggten Bereich,
sowie als Buttonfarbe im Marketplace verwendet. Der Hintergrund im eingeloggten
Bereich besitzt einen leichten Farbverlauf von diesem hellen in das dunklere Blau
(Markierung 1). Diese Farbe wird in dem Menü für ausgewählte Elemente verwendet.
Markierung 3
: In der App-Version von iOS werden zwei unterschiedliche Farben für
Eingabefelder eingesetzt. Diese Farbe wird in dem nicht eingeloggten Bereich verwendet.
Markierung 4
: Die etwas hellere Variante (von Markierung 3) wird im eingeloggten
Bereich eingesetzt.
Markierung 5
: In der Kategoriesuche inklusive Detailsansicht, sowie in der Detailansicht
der Umkreissuche im Marketplace wird sehr schnell ersichtlich, welche Institute oder
Therapeuten freie Behandlungsplätze besitzen. Mit diesem Grünton wird suggeriert,
dass noch freie Behandlungsplätze vorhanden sind.
Markierung 6
: Auf der Karte in der Umkreissuche werden verschiedene Kategorien
(Typen) mit verschiedenen Buchstaben in unterschiedlichen Farben dargestellt. Ein
Institut oder Therapeut wird anhand dieser Kennzeichnungen auf der Karte vermerkt.
Markierung 7
: Mit diesem Rotton wird im Marketplace angezeigt, dass keine freien
Behandlungsplätze mehr vorhanden sind.
Markierung 8: siehe Markierung 6
25
4 User-Interface Styleguides
Abbildung 4.7: iOS - Verwendete Farben in der Anwendung für iOS
4.2.3 Layout
Um die Gestaltung einer App mit verschiedenen Ansichten zu erleichtern, werden in den
häufigsten Fällen vor der Entwicklung eines Designs ein oder mehrere Layouts definiert.
Diese Layouts können als Vorlage für verschiedene Ansichten verwendet werden. Die
Oberfläche wird hierbei in verschiedenen Bereiche eingeteilt, um eine Grundstruktur zu
schaffen.
In der Anwendung wird folgendes Layout (4.8) eingesetzt:
Markierung 1
: Die Statusleiste ist in jeder Hinsicht fester Bestandteil eines Layouts. Es
wird der aktuelle Status des Smartphones angezeigt.
Markierung 2
: In diesem Bereich wird durch einen einfachen Pfeil die „Gehe-zurück“-
Funktion dargestellt. Der Nutzer kann jederzeit zur vorherigen Ansicht zurückkehren.
Markierung 3
: Die Seitenüberschrift ist ebenso wie die Statusleiste ein fester Bestandteil
in dem Layout der Anwendung. Der Nutzer kann sofort erkennen, in welcher Ansicht er
sich während der Nutzung befindet.
Markierung 4
: In diesem Bereich ist das Filter-Icon platziert. Der Zugriff darauf wird
allerdings nur aus bestimmten Ansichten gewährt.
Markierung 5: Dieser Bereich beinhaltet das Icon für das Menü.
26
4.2 iOS 10
Markierung 6
: Der größte Bereich im Layout stellt den eigentlichen Inhalt der Anwen-
dung dar. Dieser steht gemäß den
Styleguides
zur freien und individuellen Gestaltung
zur Verfügung.
Abbildung 4.8: iOS - Verwendetes Layout der Anwendung
27
4 User-Interface Styleguides
4.2.4 Verwendete Elemente
iOS stellt verschiedene Designkomponenten zur Entwicklung und Realisierung zur Ver-
fügung. Diese sind vordefiniert und können den
User-Interface-Styleguides
entnommen
werden. Der Einsatz dieser Komponenten in der eigenen App erleichtert sowohl die
Entwicklung als auch die Realisierung erheblich.
Nachfolgend werden die verwendeten Elemente zur Entwicklung des Designs erklärt
(siehe Abbildung 4.9):
Markierung 1
: Eingabefelder werden zur Eingabe von Daten verwendet. In dieser
Anwendungsversion werden hierfür zwei verschiedene Farben eingesetzt (siehe Abb.
4.7).
Markierung 2: Um dem Nutzer wichtige Nachrichten oder Entscheidungen mitzuteilen,
werden verschiedene Arten von Dialogen von iOS zur Verfügung gestellt.
Markierung 3: Um verschiedene Aktionen auszulösen, wird ein Button verwendet.
Markierung 4
: Navigation Bars werden häufig eingesetzt, um mehrere Inhalte gruppiert
darzustellen. Dies steigert die Übersichtlichkeit erheblich.
Markierung 5
: Die Auswahlboxen werden verwendet, um aus mehreren Antworten oder
Elementen eines auszuwählen.
Markierung 6
: Sogenannte Date Picker werden zur effizienten und schnellen Auswahl
eines Datums eingesetzt. Somit wird die Benutzerfreundlichkeit und Bedienbarkeit
gesteigert.
Markierung 7
: Um aus einer Liste mehrere Elemente auszuwählen oder zu markieren,
werden Checkboxen verwendet
Markierung 8
: Um aus einer Liste ein Element auszuwählen oder zu markieren, werden
Radiobuttons eingesetzt.
28
4.2 iOS 10
Abbildung 4.9: iOS - Verwendete Elemente der Anwendung
29
5
Entwurf der mobilen Anwendung
In diesem Kapitel werden zuerst die Anwendungsfälle und alle Dialoge für die Anwen-
dung vorgestellt. Die Dialoge werden anhand eines Strukturdiagrammes beschrieben.
Anschließend folgt die Vorstellung der digitalen und elektronischen Mockups. In Bezug
dieser entwickelten Ansichten werden die Unterschiede zwischen den beiden Betriebs-
systemen iOS und Android verdeutlicht. Die digitalen Mockups in dieser Arbeit wurden
mit NinjaMock [
30
] erstellt. Die elektronischen Mockups dagegen mit Adobe Photoshop
CC (2017) [
31
]. Des Weiteren wurden Smartphone-Modelle von Apple [
32
] und LG [
33
]
zur angenehmeren Darstellung verwendet.
5.1 Anwendungsfalldiagramm
Basierend auf der Masterarbeit von Michael Stach [
34
] werden in diesem Abschnitt
die beiden Anwendungsfälle beschrieben. Zuerst wird das Gast-Modul (Abbildung 5.1)
näher erläutert und anschließend das Patientenmodul (Abbildung 5.2) erklärt.
Im Folgenden wird der Anwendungsfall des Gast-Moduls in einem übersichtlichen
Diagramm dargestellt (siehe Abb. 5.1):
31
5 Entwurf der mobilen Anwendung
Abbildung 5.1: Anwendungsfalldiagramm des Gast-Moduls, Quelle: [34]
Es gibt zwei verschiedene Arten von Nutzern an diesem System: Der unangemeldete
Nutzer "Gastünd den angemeldeten Nutzer "Patient". Mit dem Gastzugang des Nutzers
stehen eingeschränkte Funktionen zu Verfügung. Dazu gehört der Marketplace, welcher
alle hinterlegten Institute und deren Leistungen aufzeigt. Diese Auflistung kann auf
unterschiedliche Weise durchsucht oder gefiltert werden.
Die nachfolgende Abbildung 5.2 zeigt das Anwendungsfalldiagramm des Patienten-
Moduls. Diese Funktionen stehen ausschließlich dem angemeldeten Nutzer zur Verfü-
gung. Der Nutzer kann den aktuellen Status und eine Behandlungsübersicht, welche er
aktuell ausführt oder absolviert hat, einsehen. Zudem kann er sich zu seinen Behand-
lungen auch die zugehörigen Aufgaben anzeigen lassen, diverse auf einen anderen
Zeitpunkt verlegen und einen Änderungswunsch äußern können. Falls der Nutzer eine
Behandlungsaufgabe absolviert hat, soll er diese quittieren und Feedback-Vorlagen
ausfüllen. Zudem kann er einer Studienteilnahme zustimmen oder ablehnen.
32
5.2 Dialogstruktur
Abbildung 5.2: Anwendungsfalldiagramm des Patienten-Moduls, Quelle: [34]
5.2 Dialogstruktur
Die folgende Abbildung 5.3 stellt alle Dialoge und ihre Erreichbarkeiten des Marketplace
der Anwendung dar. Der Dialog
„Homescreen“
verdeutlicht den angemeldeten Bereich
und wird in der Abbildung 5.4 näher beschrieben. Beide Dialogstrukturdiagramme
wurden wegen der Übersichtlichkeit mithilfe eines Bussystems dargestellt.
33
5 Entwurf der mobilen Anwendung
Abbildung 5.3: Dialoge und ihre Erreichbarkeiten des Marketplace der Anwendung
Zu Gunsten der Übersichtlichkeit wurden hier einige Fälle nicht betrachtet, beispielsweise
fand der Zurück-Button keine Berücksichtigung. Zudem kann der Nutzer aus jeder
Ansicht der Anwendung auf das Hauptmenü zugreifen. Bei beiden Betriebssystemen
(Android und iOS) kann dieses durch eine Wischbewegung nach links oder durch einen
Klick auf den Menü-Button geöffnet werden.
Nachstehend wird die Dialogstruktur des eingeloggten Bereiches der App dargestellt
5.4:
34
5.3 Digitale Papermockups
Abbildung 5.4:
Dialoge und ihre Erreichbarkeiten des angemeldeten Bereiches der
Anwendung
5.3 Digitale Papermockups
Papierbasierte Mockups (Papermockups) werden bevorzugt in der frühen Entwurfsphase
eingesetzt. Es handelt sich hierbei um erste Grundideen, welche für den späteren Ent-
wicklungsverlauf von enormer Bedeutung sind. Im Vergleich zu elektronischen Mockups
5.4 besitzen die Papermockups einige Vorteile. Einer dieser Vorteile bezieht sich auf
35
5 Entwurf der mobilen Anwendung
die einfache Änderbarkeit der Entwürfen. Papermockups können dabei ohne großen
zusätzlichen Aufwand angepasst werden.
Im Folgenden werden verschiedene Szenarien als digitale Papermockups skizziert und
einzelne Ansichten in verschiedenen Alternativen betrachtet. Alle vorgestellten digitalen
Papermockups in diesem Kapitel beziehen sich auf das iOS-System.
Die Abbildung 5.5 stellt diverse Skizzen von ersten Grundüberlegungen über den Desi-
gnaufbau der Anwendung dar. Zum einen wird die Detailsansicht in der Umkreissuche
gezeigt und zum anderen die Struktur des Menüs inklusive einer alternativen Ansicht
des Menüs vorgestellt.
Abbildung 5.5: Skizze der Umkreissuche, geöffnetes Menü und alternatives Menü
Die Wahl über die Position des Menüs fällt dem Entwickler oft nicht leicht. Hierzu sind
Analysen über den Zweck und Ziele der App sehr entscheidend.
In der untenstehenden Abbildung X werden verschiedene Darstellungsformen der Aufga-
benübersicht abgebildet. Der Aufbau der Aufgabenübersicht ist in zwei Strukturen aufge-
teilt. Die erste Struktur zeigt die Übersicht der Aufgaben basierend auf der Listenstruktur.
36
5.3 Digitale Papermockups
Diese Struktur steigert die Übersichtlichkeit über mehrere Behandlungsaufgaben, da sie
kompakt und geordnet untereinanderstehen. Dem Nutzer fällt es somit leichter verschie-
dene Aufgaben voneinander zu abstrahieren. Die zweite Struktur setzt alternativ die
Kachelstruktur ein. Diese Struktur dient zur angenehmen Gegenüberstellung, welche
den Vorteil bietet zusätzliche Information einfach bereitgestellt werden können.
Abbildung 5.6: Skizze der Behandlungsaufgabenübersicht inklusive Alternative
Bei Behandlungsaufgaben kann der Nutzer in der Detailsansicht Informationen über
diese und deren Ausführung entnehmen. Er kann direkt erkennen, welche Funktionen
ihm zur Verfügung stehen. Durch diesen Aufbau der Ansicht wird es dem Nutzer sehr
leicht gemacht, diese Funktionen zu nutzen. Alternativ werden diese zwei Funktionen
„versteckt“ angeboten.
Nachstehend wird der Aufbau der Detailsansicht zu einer Behandlungsaufgabe verdeut-
licht (siehe Abbildung 5.7).
37
5 Entwurf der mobilen Anwendung
Abbildung 5.7: Skizze der Aufgabendetails inklusive Alternative
5.4 Elektronische Mockups
Auf Basis der digitalen Papermockups 5.3 wurden die elektronischen Entwürfe erstellt.
Hierbei handelt es sich um Designentwürfe, welche später in der Realisierung problemlos
umgesetzt werden können, da sie den tatsächlichen Endoberflächen sehr ähnlich sehen.
Dieses Vorgehen ist unter den Entwicklern gängig, um schnell Zeit und Kosten zu sparen.
Die folgenden Mockups wurden sehr ähnlich gestaltet, um die Wiedererkennbarkeit und
Vertrautheit der App zu steigern. Es wurde eine visuelle Abhebung des angemeldeten Be-
reiches zum nicht angemeldeten Bereich geschaffen. Durch den Einsatz verschiedener
Kontraste werden die verschiedenen und elementaren Funktionen verdeutlicht.
Bei allen Entwürfen wurden die jeweiligen
User-interface-Styleguides
der beiden Be-
triebssysteme (Android und iOS) als Richtlinien herangezogen.
38
5.4 Elektronische Mockups
5.4.1 Willkommens-Seite
Die erste Ansicht, welche angezeigt wird, ist die Willkommensseite. Diese ist schlicht
aufgebaut und nur mit dem Logo verziert. Auf beiden Betriebssystemen wurde die
Willkommensseite nahezu identisch gestaltet, um dem Nutzer einen sehr starken ers-
ten Eindruck zu vermitteln. Um das Benutzen der Anwendung für das menschliche
Auge angenehmer zu gestalten, werden in dieser Anwendung die Hintergrundfarben mit
geringen Farbverläufen dargestellt. Dieser Effekt wird auch auf der Willkommensseite
eingesetzt. Nach Ablauf einer bestimmten Zeit wechselt die Ansicht automatisch zum
Anmeldebereich.
Abbildung 5.8: Willkommen – iOS, Android
39
5 Entwurf der mobilen Anwendung
5.4.2 Hauptmenü
Alle Funktionen der Anwendung können über das Hauptmenü erreicht werden. Durch
eine einfache Wischbewegung nach links oder eine Betätigung des Menü-Buttons kann
das Menü leicht und schnell geöffnet werden. Geschlossen wird das Menü hingegen
durch eine Wischbewegung nach rechts oder durch die erneute Betätigung des Menü-
Buttons. Beim Android-System besteht über einen weiteren Button im Menü-Bereich die
Möglichkeit das Menü zu schließen. Dieser zusätzliche Button wird durch einen
„Pfeil
zurück“ dargestellt.
Abbildung 5.9: Menü Marketplace – iOS, Android
40
5.4 Elektronische Mockups
Das Menü der Anwendung gibt es in zwei verschiedenen Ausführungen. Zunächst wird
ein Menü mit vorwiegend Funktionen des Marketplace sowie der Registrierung und des
Logins (Abbildung 5.9) im nicht angemeldeten Bereich angeboten.
Außerdem bietet das Menü im angemeldeten Bereich diverse Funktionen zu den ein-
zelnen Behandlungen und den zugehörigen Aufgaben an (Abbildung 5.10). In diesem
Bereich ist der Zugriff auf den Marketplace gestattet. Der Nutzer hat zudem die Möglich-
keit seine persönlichen Daten zu bearbeiten 5.4.16 und über Einstellungen verschiedene
Änderungen vorzunehmen.
Abbildung 5.10: Menü im angemeldeten Bereich – iOS, Android
Icons unterstreichen die Menüdarstellung und symbolisieren die verschiedenen Funktio-
nen. Dem Nutzer bleiben, durch die visuelle Unterstützung, diverse Elemente leichter in
Erinnerung und die Bedienbarkeit wird gesteigert.
41
5 Entwurf der mobilen Anwendung
5.4.3 Login
Der Login-Bereich ist ein wichtiger Bestandteil der Anwendung. Zur Anmeldung muss der
Nutzer gültige Anmeldeinformationen (die registrierte E-Mail-Adresse und das persönlich
festgelegte Passwort) in die dafür vorgesehenen Eingabefelder eintragen.
Abbildung 5.11: Login – iOS, Android
Durch die einfache und schlichte Gestaltung des Anmeldebereichs, kann der Nutzer
weitere verschiedene Funktionen sofort erkennen, welche ihm zur Verfügung stehen. Um
die Wiedererkennbarkeit zu steigern und den Aufbau möglichst angenehm für den Nutzer
darzustellen, kommt das Logo im oberen Bereich der Benutzerfläche zum Einsatz.
42
5.4 Elektronische Mockups
Abbildung 5.12: Passwort vergessen, Ungültiger Anmeldeversuch – iOS, Android
43
5 Entwurf der mobilen Anwendung
Dem Nutzer stehen weitere Optionen zur Verfügung. Falls er sein Passwort vergessen
hat, kann er mit einem Klick auf den dementsprechenden Text, sein neues Passwort an
seine Email-Adresse zusenden lassen. Hierzu wird er auf die entsprechende Ansicht
(Abbildung 5.12) weitergeleitet, in welcher er seine gültige E-Mail-Adresse eintragen
muss.
Besitzt der Nutzer noch keinen Account, kann er sich bei beiden Betriebssystemen
entweder über einen Klick auf den Informationstext im Anmeldebereich oder über das
Hauptmenü registrieren 5.4.4 und einen Account erstellen.
Gibt der Nutzer ungültige Anmeldeinformationen in das dafür vorgesehene Formular
(Abbildung 5.11) ein, wird er auf die Fehleingabe hingewiesen und aufgefordert seine
persönlichen Anmeldeinformationen erneut einzugeben (Abbildung 5.12).
Der in Abbildung 5.12 abgebildete Hinweis verdeutlicht dem Nutzer sehr schnell seine
ungültige Dateneingabe. Im iOS-System wird ein Dialog hervorgerufen, welcher dem
Nutzer in präziser Formulierung auf die Ungültigkeit hinweist. Beim Android-System
hingegen werden die ungültigen Eingabefelder rot markiert, um die Fehleingaben hervor-
zuheben. Somit wird dem Nutzer genau gezeigt, welche Eingaben er erneut vornehmen
muss. Diese Fehlermeldungen wurden laut den Styleguides in Kapitel 4 gestaltet.
In dieser Stelle wird auf ungültige Benutzereingaben nicht näher eingegangen, da alle
Fehlermeldungen nahezu identisch zu denen in Abbildung 5.12 aussehen. Die einzelnen
Ansichten sind im Anhang A zu sehen.
Eine weitere Anmeldemöglichkeit ist, einen Freischaltcode einzugeben (Abbildung 5.13).
Diesen bekommt der Nutzer von seinem behandelnden Therapeuten, der ihn damit
in eine Behandlung einlädt. Gibt der Nutzer einen gültigen Freischaltcode ein, wird
er durch einen Klick auf den Weiter-Button direkt zum Login-Bereich (Abbildung 5.11)
weitergeleitet. Mit erfolgreicher Anmeldung am System wird der Nutzer automatisch zur
hinterlegten Behandlung hinzugefügt.
44
5.4 Elektronische Mockups
Abbildung 5.13: Login mit Freischaltcode – iOS, Android
5.4.4 Registrierung
Bevor sich der Nutzer am System anmelden kann, muss er sich zuerst registrieren und
einen Account erstellen. Dazu muss er personenbezogene Daten, bestehend aus Name,
Adresse, Geburtsdatum und Passwort, angeben. Nach gültiger Eingabe dieser Daten
und nach dem anschließenden Klick auf den Registrieren-Button, erhält der Nutzer eine
Bestätigungs-Email über die Registrierung am System. Außerdem wird er direkt zum
Login-Bereich weitergeleitet. Besitzt er schon einen Account, wird ihm in dieser Ansicht
die Möglichkeit geboten, direkt zum Login-Bereich zu wechseln.
45
5 Entwurf der mobilen Anwendung
Abbildung 5.14: Registrierung – iOS, Android
Zur Auswahl des Geburtsdatums werden in beiden Betriebssystemen jeweils verschie-
dene Elemente verwendet (Abbildung 5.14). Diese wurden nach den Vorgaben der
Styleguides
in Kapitel 4 gestaltet wurden. In der iOS-Version wird ein sogenannter
Date
Picker
(Abbildung 5.15) eingesetzt. Dieser vereinfacht dem Nutzer das die Auswahl
erheblich. Durch einfache Wischbewegungen kann das Datum schnell ausgewählt wer-
den. Ebenso einfach funktionieren die Auswahlboxen, welche im Android-System zum
Einsatz kommen. Hier werden durch Klicks auf den gewünschten Monat oder Tag die
Elemente ausgewählt.
46
5.4 Elektronische Mockups
Abbildung 5.15: Registrierung mit Auswahl des Datums – iOS, Android
5.4.5 Marketplace - Kategoriesuche
Die Kategoriesuche im Marketplace fasst nützliche Informationen zusammen und hilft
bei der Suche nach einem Therapeuten bzw. freien Behandlungsplatz. Hier werden
alle im System hinterlegten Institute bzw. Therapeuten aufgelistet und zusätzliche Infor-
mationen wie Typ, Standort und Öffnungszeiten, über den Anbieter angezeigt. Um die
Bedienbarkeit und Benutzerfreundlichkeit zu maximieren kann der Nutzer die Ergebnisse
mit einem Klick auf das Filter-Icon (Kapitel 5.4.6) nach seinen individuellen Kriterien
und Wünschen filtern lassen. Auch eine Filterung per Freitext durch Eingaben in das
Suchfeld ist möglich.
47
5 Entwurf der mobilen Anwendung
Abbildung 5.16: Kategoriesuche – iOS, Android
Die Anwendung bietet dem Nutzer eine Übersicht über freie Behandlungsplätze des je-
weiligen Instituts oder Therapeuten. Im unteren Teil des Elementes wird die freie Anzahl
der Plätze angezeigt und farblich gekennzeichnet. Grün zeigt vorhandene Behand-
lungsplätze, rot hingegen belegte Behandlungsplätze. Somit hat der Nutzer jederzeit
eine einfache und strukturierte Übersicht über seine Suchergebnisse und deren freie
Behandlungsplätze.
5.4.6 Marketplace - Filter
In Verbindung mit aufgelisteten Elementen bietet die Filterfunktion sehr nützliche Funk-
tionalität. Der Nutzer kann die Ergebnisse seinen individuellen Wünschen und Kriterien
anpassen. Somit werden nur wesentliche Ergebnisse angezeigt, was die Benutzer-
48
5.4 Elektronische Mockups
freundlichkeit erhöht, da schneller ein passendes Ergebnis vorliegt. Es ist möglich nach
Kriterien, Kategorien, Entfernung, freien Behandlungsplätzen und Öffnungszeiten zu
filtern.
Abbildung 5.17: Filter im Marketplace – iOS, Android
Alle Filteransichten in der Anwendung wurden ähnlich gestaltet und strukturiert. Lediglich
die Hintergrundfarbe und der Inhalt ist je nach Menüpunkt abweichend. Die Hintergrund-
farbe wird der Farbe im angemeldeten Bereich angepasst. Auch die Filterfunktionen wird
den jeweiligen Inhaltselementen angepasst.
5.4.7 Marketplace - Umkreissuche
Ergänzend zur Kategoriesuche 5.4.5 bietet die Anwendung eine Umkreissuche. Hier
werden die im System hinterlegten Anbieter visuell in einer Kartenansicht dargestellt.
49
5 Entwurf der mobilen Anwendung
Dem Nutzer werden alle Institute und Therapeuten in seiner Nähe angezeigt. Die
Darstellung wird nach Kategorien visuell und symbolisch und kann ebenfalls gefiltert
werden. Allerdings steht die Freitextsuche in der Umkreissuche nicht zur Verfügung.
Durch einen Klick auf das jeweilige Symbol in der Karte werden Details zu den einzelnen
Anbietern im unteren Bereich der Benutzeroberfläche angezeigt (siehe Kapitel 5.4.8).
Abbildung 5.18: Umkreissuche – iOS, Android
5.4.8 Marketplace - Detailsansicht
Der Detailsansicht eines hinterlegten Anbieters können diverse Informationen entnom-
men werden. Der Nutzer hat Zugriff auf wichtige Details über das Institut bzw. den
Therapeuten. Wichtig dabei ist die Übersicht der Kontaktdaten sowie die Übersicht des
Behandlungsangebots. Somit kann der Nutzer sofort erkennen, welche Behandlungen
50
5.4 Elektronische Mockups
oder Therapien angeboten werden. Dadurch wird die Konzentration auf das Wesentliche
gelegt.
Abbildung 5.19: Detailsansicht im Marketplace – iOS, Android
51
5 Entwurf der mobilen Anwendung
Der Anbieter hat zudem die Möglichkeit einen kurzen Motivationstext und eine Beschrei-
bung über seine Arbeit oder sich selbst in den Details mitaufzunehmen.
5.4.9 Behandlungen – Neue Behandlung hinzufügen
Ähnlich zum Login mit Freischaltcode im Abschnitt 5.4.3 wurde die Ansicht für das Hin-
zufügen von Behandlungen erstellt. Der Nutzer erhält vom behandelnden Therapeuten
einen Code, mit welchem er in eine Behandlung eingeladen wird. Im Gegensatz zu
Kapitel 5.4.3 ist der Nutzer bereits eingeloggt und wird nach gültiger Eingabe direkt zur
Behandlung hinzugefügt.
Abbildung 5.20: Neue Behandlung hinzufügen – iOS, Android
52
5.4 Elektronische Mockups
5.4.10 Behandlungen - Übersicht
Im Abschnitt 5.3 wurden verschiedene Ansätze des Aufbaus und der Struktur von Ele-
menten erläutert und vorgestellt. Aufgrund der Übersichtlichkeit wurde die Listenansicht
für die Behandlungsübersicht verwendet. Dem Nutzer wird so ein einfacher Überblick
aller Behandlungen zur Verfügung gestellt, in welche ihn der Therapeut eingeladen hat.
In der Übersicht der
„offenen Behandlungen“
(Abbildung 5.21) wird der aktuelle Fort-
schritt der Behandlung in Form eines Statusbalken dargestellt. Somit kann der Nutzer
abschätzen wie viel Zeit noch bis zum Abschluss investiert werden muss.
Abbildung 5.21: Offene Behandlungsübersicht – iOS, Android
Über die verwendete Tabbar kann leicht zwischen der offenen und abgeschlossenen
Behandlungsübersicht gewechselt werden. Dies steigert die Bedienbarkeit und Be-
53
5 Entwurf der mobilen Anwendung
nutzerfreundlichkeit, da dem Nutzer durch wenige Klicks eine intuitive Übersicht aller
Behandlungen angezeigt wird.
Die aufgelisteten abgeschlossenen und offenen Behandlungen können über die Filter-
funktion nach verschiedene Kriterien angezeigt werden. Durch einen Klick auf eines der
Behandlungselemente werden Details zur jeweiligen Behandlung aufgerufen (Kapitel
5.4.11).
In der folgenden Abbildung 5.22 wird die Übersicht der abgeschlossenen Behandlungen
dargestellt. Anstelle des Statusbalken bei offenen Behandlungen (Abbildung 5.21) wird
hier die Dauer der abgeschlossenen Behandlung als Kurzinformation angezeigt. Die-
se Behandlungselemente sind mit einem Haken versehen, welche den erfolgreichen
Abschluss symbolisieren.
Abbildung 5.22: Abgeschlossene Behandlungsübersicht – iOS, Android
54
5.4 Elektronische Mockups
5.4.11 Behandlungen - Detailsansicht
In den folgenden Abbildungen wird die Darstellung der Behandlungsdetails verdeutlicht.
Der Nutzer kann dieser Ansicht alle relevanten Informationen der jeweiligen Behandlung
entnehmen. Neben einer kurzen Beschreibung werden dem Nutzer die Kontaktdaten
des betreuenden Therapeuten sowie der Startzeitpunkt einer Behandlung angezeigt.
Abbildung 5.23: Offene Behandlungsdetails – iOS, Android
In den Detailsansichten von offenen 5.23 und abgeschlossenen 5.24 Behandlungen
weichen wenige Informationen voneinander ab. In der offenen Detailsansicht wird der
voraussichtliche Endzeitpunkt und der aktuelle Fortschritt der Behandlung, welcher
auch bei der Behandlungsübersicht 5.4.10 erläutert wurde, in Form eines Statusbal-
kens dargestellt. In der abgeschlossenen Detailsansicht hingegen wird der tatsächliche
55
5 Entwurf der mobilen Anwendung
Endzeitpunkt der Behandlung und durch einen Haken im Hintergrund die erfolgreiche
Beendigung der Behandlung angezeigt.
Abbildung 5.24: Offene Behandlungsdetails – iOS, Android
5.4.12 Aufgaben - Übersicht
Ähnlich zur Behandlungsübersicht in Kapitel 5.4.10 gestaltet sich die Aufgabenübersicht.
Die Ansicht der ausstehenden Aufgaben wurde als Liste gestaltet. In dieser werden
kurze Informationen über die jeweiligen Aufgaben angezeigt. Ebenso kommt hier eine
Tabbar zum Einsatz, um einfach zwischen ausstehenden und abgeschlossenen Be-
handlungsaufgaben umzuschalten. In der Gestaltung der abgeschlossenen Aufgaben
liegt der Unterschied zur Behandlungsübersicht. Diese Aufgabenübersicht wurde mit
Hilfe einer Kachelstruktur zur visuellen Verdeutlichung zwischen ausstehenden und
abgeschlossenen Aufgaben verwendet. Die Kachelstruktur wurde der Einfachheit und
56
5.4 Elektronische Mockups
Übersichtlichkeit gewählt, da in dieser Ansicht sehr wenige Informationen bereitgestellt
werden.
Abbildung 5.25: Aufgabenübersicht – iOS, Android
57
5 Entwurf der mobilen Anwendung
Der Nutzer des iOS-System hat bereits in dieser Ansicht die Möglichkeit eine Aufgabe
auf einen späteren Zeitpunkt zu verschieben. Er kann durch die intuitiv gestaltete Ansicht
der Aufgabenübersicht aufgrund der kurzen Informationen zu der einzelnen Aufgabe
sehr schnell erkennen, ob diese auch zum hinterlegten Zeitpunkt ausführbar ist. Falls
nicht, wird durch eine Wischgeste nach links ein Button mit einer weiteren Funktion
sichtbar. Durch den Klick auf diesen Button, gekennzeichnet durch eine Uhr mit einem
Pfeil als Rand, wird die Aufgabe verschoben. Im danach erscheinenden Dialog muss der
Nutzer einen Grund für das Verschieben eintragen. Somit bleibt der Verschiebegrund
jederzeit für Patient als auch Therapeut nachvollziehbar.
Abbildung 5.26: Aufgabenübersicht Aufgabe verschieben – iOS
58
5.4 Elektronische Mockups
5.4.13 Aufgaben - Detailsansicht
In dieser Ansicht werden dem Nutzer alle hinterlegten Informationen zu einer Aufgabe
gezeigt (siehe Abbildung 5.27). Dies beinhaltet eine Beschreibung der korrekten Aus-
führung, Angaben über den Zeitpunkt und Lokation der Ausführung. Zudem besteht
die Möglichkeit den Vollzug der Aufgabe durch verschiedene Medienelemente zu unter-
stützen und die Ausführung damit detailliert und verständlicher zu beschreiben. Vorteil
bei Verwendung von Medienelementen ist die Minimierung von Missverständnissen zur
Ausführung.
Abbildung 5.27: Ausstehende Aufgabendetails I – iOS, Android
In der Aufgabendetailsansicht kann der Nutzer verschiedene Funktionen ausführen. Zum
Beispiel kann er durch einen Klick auf den Erledigt-Button die Aufgabe abschließen.
Anschließend wird er auf die Feedbackansicht (Kapitel 5.4.15) weitergeleitet.
59
5 Entwurf der mobilen Anwendung
Abbildung 5.28: Ausstehende Aufgabendetails II – iOS, Android
Weitere Funktionen sind
„Aufgabenänderung anfordern“
(Abschnitt 5.4.14) und
„Aufga-
be verschieben“
. Im Android-System können die Funktionen durch den
Floating action
button
(siehe Kapitel 4.1.4) auf der oberen rechten Seite ausgeführt werden. Im iOS-
System dagegen ist ein zusätzlicher Schritt nötig, um auf die weiteren Funktionen
zugreifen zu können. Durch eine Wischgeste des Erledigt-Buttons nach links wird ein
zusätzlicher Button angezeigt (Abbildung 5.28), mit dem das Untermenü geöffnet wird.
In der folgenden Abbildung 5.29 werden die weiteren Funktionen abgebildet:
60
5.4 Elektronische Mockups
Abbildung 5.29: Untermenü der weiteren Funktionen – iOS, Android
Durch die Betätigung eines Buttons des geöffneten Untermenüs in der Aufgabendetails-
ansicht wird ein Dialog angezeigt, welcher bestätigt oder abgelehnt werden muss. Als
Ausnahme ist die Funktion
„Aufgabe verschieben“
zu betrachten. In diesem Fall muss
der Nutzer einen Grund für das Verschieben eingeben (siehe Abbildung 5.29). Diese
Dialoge werden im Anhang A dieser Arbeit dargestellt.
5.4.14 Aufgaben - Änderungsanforderung
In der Detailsansicht einer Aufgabe (Kapitel 5.4.13) wird den Nutzer erklärt, wie er die
jeweilige Aufgabe ausführen sollte. In einigen Fällen kann die Ausführungsforderung des
Therapeuten vom möglichen Ausführen des Nutzers abweichen. In diesem Fall kann
der Nutzer eine Änderung anfordern, welche direkt an den behandelnden Therapeuten
61
5 Entwurf der mobilen Anwendung
weitergeleitet wird, der über die Berücksichtigung dieser Anforderung nach eigenem
Ermessen entscheidet. Zur Änderungsanforderung muss der Nutzer seine Wünsche
in ein Freitextfeld eingeben. Wird der Änderungswunsch berücksichtigt und die Aufga-
be dadurch abgeändert, wird dem Nutzer eine visuelle Rückmeldung in Form eines
Feedbackdialoges gegeben.
Abbildung 5.30: Aufgabenänderungsanforderung – iOS, Android
5.4.15 Aufgaben - Feedback
Um den Behandlungsverlauf optimieren und besser kontrollieren zu können, muss der
Nutzer nach Beendigung der Aufgabe diese dem Therapeuten quittieren. Der Therapeut
stellt dazu individuell passende Fragen zur ausgeführten Aufgabe, welche er mit Hilfe
von verschiedenen Elementen, wie Radio Buttons und Auswahlboxen, verdeutlichen
62
5.4 Elektronische Mockups
kann (siehe Abbildung 5.31). Diese verwendeten Elemente spielen in der Datenerhebung
der Studienteilnehmer eine sehr wichtige Rolle.
Durch die Dialogmöglichkeit zwischen Patient und Therapeut können die Aufgaben indivi-
duell angepasst werden und den Heilungsprozess optimal unterstützen. Vorraussetzung
hierfür ist allerdings die ehrliche und gewissenhafte Nutzung der Anwendung und ihrer
Feedbackfunktionen sowohl vom Patienten als auch vom Therapeuten.
In der folgenden Abbildung 5.31 wird ein Beispiel für Feedbackfragen und ihren Ant-
wortmöglichkeit dargestellt. Alle erarbeiteten Antwortmöglichkeiten können im Anhang A
betrachtet werden.
Abbildung 5.31: Beispiele zu Feedbackfragen – iOS, Android
63
5 Entwurf der mobilen Anwendung
5.4.16 Profil - Mein Profil
Dem Nutzer wird selbstverständlich die Möglichkeit gegeben seine Profildaten und
Passwort zu ändern. Über das Hauptmenü (Kapitel 5.4.2) kann er den Profilbereich
schnell und einfach erreichen. Hier werden alle persönlichen Daten, welche er bei
der Registrierung angegeben hat, aufgezeigt. Der Nutzer kann seine Profildaten, mit
Ausnahme seiner E-Mail-Adresse und Geburtstag, und sein Passwort bearbeiten. Diese
Ansichten werden im Anhang A dieser Arbeit dargestellt.
Abbildung 5.32: Übersicht Profildaten – iOS, Android
5.4.17 Patienten - Studien - Berechtigung
Um eine Datenerhebung durchführen zu dürfen, muss dem beteiligten Teilnehmer
eine Zustimmungsmöglichkeit gegeben werden. Durch die Einwilligung des Nutzers
64
5.4 Elektronische Mockups
an der Studienteilnahme werden verschiedene medizinischen Daten erhoben. Diese
gesammelten Daten werden anschließend analysiert und ausgewertet. Die gewonnenen
Daten können zu einer Optimierung und Überarbeitung von Behandlungsmethoden
beitragen.
Abbildung 5.33: Patienten-Studien-Berechtigung – iOS, Android
65
6
Umfrage
In diesem Kapitel werden Aufbau und Ziele der durchgeführten Umfrage näher erläutert.
Zusätzlich wird ein kleiner Ausschnitt der Umfrage vorgestellt.
6.1 Aufbau und Ziel der Umfrage
Um den Heilungsprozess einer therapeutischen Behandlung zu optimieren und indivi-
duell anzupassen, müssen die Nutzer der Albatros-App diverse Behandlungsaufgaben
quittieren, welche von dem behandelnden Therapeuten gestellt werden. Zusätzlich hat
der Nutzer die Möglichkeit, seine einzelnen Behandlungen zu überwachen und den
zugehörigen Status einzusehen, sowie sich im Marketplace eine Übersicht über alle
Therapeuten und deren Behandlungsangebote zu verschaffen.
Zur Überprüfung, ob diese App benutzerfreundlich, übersichtlich, einfach und intuitiv
gestaltet wurde, wurde diese Umfrage initiiert. Das Ziel dieser Umfrage war das Feed-
back der potentiellen Nutzer über die Gestaltung der Anwendung, sowie über erste
Rückmeldungen zur Nutzung im Alltag.
Um diese Fragen beantworten zu können, wurde eine Online-Umfrage gestartet 6.2.
Zuerst mussten die Umfrageteilnehmer verschiedene Aufgaben in einem klickbaren
Online-Prototyp lösen. Dazu konnten sich die Nutzer durch verschiedene Szenarien
durchklicken, welche die Handhabung der Anwendung simulieren sollten. Anschließend
mussten diverse Fragen zu diesem Prototyp beantwortet werden. Der Online-Prototyp
wurde mit Hilfe einer Mobile-Prototyping-Tool [
35
], die Umfrage mit Hilfe einer Online-
Umfrage-Tool [36] erstellt.
67
6 Umfrage
Um möglichst aussagekräftige Ergebnisse zu erhalten, wurden Personen mit verschiede-
nen Berufsfelder, verschiedener Altersgruppen und verschiedenen Bildungsabschlüssen
befragt.
6.2 Auszüge aus der Umfrage
Die Umfrage setzt sich aus zwei Teilen zusammen. Der erste Teil besteht aus demogra-
phischen Fragen zur Person (siehe Anhang A). Im zweiten Teil wurden Nutzer über die
Optik der verwendeten Icons, die Gestaltung einzelner Elemente, die Schriftgröße, Be-
nutzerfreundlichkeit der Oberfläche, sowie über die Nutzung von Apps zur Unterstützung
therapeutischer Behandlung befragt.
Im Folgenden werden diverse Ausschnitte des Online-Prototyps abgebildet. Die komplet-
te Umfrage befindet sich im Anhang A.
Abbildung 6.1: Ausschnitte des klickbaren Prototyps
68
6.3 Auswertung der Umfrage
Der Online-Prototyp wurde ausschließlich als Android-System dargestellt. Zusätzlich
wurde in einer Frage der Umfrage die Darstellung des iOS-Systems verwendet (siehe
Anhang A).
6.3 Auswertung der Umfrage
Die durchgeführte Umfrage wurde manuell ausgewertet. Um eine Fälschung der Ergeb-
nisse zu verhindern, wurde nach bestimmten Mustern und auffällige Eingaben gesucht,
um diese letztendlich aus den Ergebnissen löschen zu können. Die Auswertung erfolgte
ausschließlich, da jedem Teilnehmer eine ID zugeteilt wurde.
Als Beispiel einer Auswertung, wird in der folgenden Abbildung 6.2 das Ergebnis der
Abstimmung der Teilnehmer zu den verwendeten Icons abgebildet.
Abbildung 6.2: Ergebnis über der verwendeten Icons, Quelle: [36]
6.4 Zusammenfassung
Die Auswertung der Umfrage zeigt, dass die Anwendung zur Unterstützung therapeuti-
scher Behandlungen sehr intuitiv, übersichtlich und benutzerfreundlich gestaltet ist. Die
Teilnehmer fanden sich ausnahmslos darin zurecht. Auch über die Nutzung solcher Apps
sind sich die Teilnehmer der Umfrage einig. Über 90% würden die Albatros-App im Alltag
verwenden. Lediglich über die Position des Menüs und die Darstellung des Filter-Icons
im Android-System gehen die Meinungen auseinander.
69
7
Anforderungsabgleich
In diesem Kapitel werden die in Kapitel 3 erläuterten funktionalen und nicht-funktionalen
Anforderungen abgeglichen.
7.1 Funktionale Anforderungen
Anforderungen Erfüllt Beschreibung
Umsetzung der App in An-
droid und iOS
ja
Die App wurde in beiden Betriebssytemen umgesetzt.
Siehe Kapitel 5.4
Willkommensseite ja
Eine Willkommensseite wurde der Benutzerfreund-
lichkeit und Wiedererkennbarkeit erstellt. Siehe Kapi-
tel 5.4.1
Registrierung, Passwort
Rücksetzung
ja
Der Nutzer hat die Möglichkeit sich mit seinen Daten
zu registrieren und bei Bedarf, das von ihm festgeleg-
te Passwort zurückzusetzen. Siehe Kapitel 5.4.2
Anmeldung ja
Der Nutzer kann sich auf zwei verschiedene Arten
am System anmelden. Siehe Kapitel 5.4.3
Marketplace ja
Dem Nutzer wird ein Marketplace zur Verfügung ge-
stellt, welcher sowohl als angemeldeter und auch als
nicht angemeldeter Benutzer des Systems verwen-
den kann. Siehe Kapitel 5.4.5, 5.4.6, 5.4.7, 5.4.8
Tabelle 7.1: Anforderungsabgleich - Funktionale Anforderungen I
71
7 Anforderungsabgleich
Anforderungen Erfüllt Beschreibung
Behandlungsübersicht ja
Der Nutzer kann jeder Zeit Details inklusive Status
zu seinen aktuellen und abgeschlossenen Behand-
lungen einsehen. Siehe Kapitel 5.4.10, 5.4.11
Behandlungsaufgaben De-
tailsansicht
ja
Der Nutzer kann eine Übersicht aller ausstehenden
und abgeschlossenen Behandlungsaufgaben mit da-
zugehörigen Details abrufen. Siehe Kapitel 5.4.12,
5.4.13
Behandlungsaufgaben Ad-
aption
ja
Der Nutzer kann ausstehende Behandlungsaufga-
ben verschieben, abschließen oder einen Änderungs-
wunsch abgeben. Siehe Kapitel 5.4.13, 5.4.14
Abgabe einer Behand-
lungsaufgabe
ja
Der Nutzer muss bei jedem Abschließen einer Be-
handlungsaufgabe diese auch quittieren und ein
Feedback dazu abgeben. Siehe Kapitel 5.4.15
Profildaten Bearbeitung ja
Der Nutzer kann zu jeder Zeit seine Profildaten ein-
sehen, bearbeiten oder sein persönlich festgelegtes
Passwort ändern. Siehe 5.4.16
Push-
Benachrichtigungen
nein
Die Push-Benachrichtigungen wurden bisher noch
nicht konzipiert und designt.
Patienten-Studien-
Berechtigung
ja
Nach dem ersten Anmelden am System hat der Nut-
zer die Möglichkeit zur Einwilligung an einer Studien-
teilnahme zur medizinischen Datenerhebung. Siehe
Kapitel 5.4.17
Tabelle 7.2: Anforderungsabgleich - Funktionale Anforderungen II
72
7.2 Nicht-funktionale Anforderungen
7.2 Nicht-funktionale Anforderungen
Anforderungen Erfüllt Beschreibung
Ähnliches Aussehen aller
Apps
ja
Die Benutzeroberfläche bei beiden Betriebssystemen
ist sehr ähnlich und damit auch das Ziel der Wieder-
erkennung zu maximieren erfüllt.
Design Guidelines einhal-
ten
ja
Die Design Guidelines wurden wie in Kapitel 4 be-
schrieben eingehalten.
Aktuelle Version der Be-
triebssysteme
ja
Die App wurde in der aktuellsten Version der jeweili-
gen Betriebssysteme konzipiert und gestaltet.
Hohe Benutzerfreundlich-
keit
ja
Die Albatros-App wurde einfach und sehr verständ-
lich aufgebaut. Siehe Kapitel 6
Feedback ja
Der Nutzer wird in diversen Situationen durch die
App belehrt und informiert.
Selbsterklärbarkeit ja
Es wurden einfache und intuitiv gestaltete Icons ge-
wählt. Um die Selbsterklärbarkeit wurden unter ande-
rem Standardicons der einzelnen Systeme verwen-
det.
Verfügbarkeit
teilweise
Diese App ist für Smartphones konzipiert und erstellt
worden. Um die Qualität des Designs auf Tablets zu
erhalten, muss die Konzeption und das Design dafür
angepasst werden.
Robustheit ja
Der Nutzer erhält nach falscher Eingabe von Daten ei-
ne Rückmeldung, welche ihn auffordert diese erneut
einzugeben..
Tabelle 7.3: Anforderungsabgleich - Nicht-funktionale Anforderungen
73
8
Fazit
Abschließend wird in Abschnitt ein Überblick über den vorgestellten Inhalt dieser Arbeit
folgen. Zusätzlich wird ein Ausblick auf potentielle Erweiterungen und Zukunftsvisionen
der Anwendung in Abschnitt folgen.
8.1 Zusammenfassung
Ziel dieser Arbeit war eine Erarbeitung eines Konzepts, sowie das zugehörige Design
einer mobilen Endanwendung, welche zur Unterstützung therapeutischer Behandlungen
dient. Mit Hilfe dieser Arbeit wurde dieses letztendlich auch erfolgreich umgesetzt.
Dazu wurde die Problemstellung des Projektes in Kapitel 1 näher erläutert.
In
Kapitel 2
wurden dann erhebliche Grundlagen von therapeutischen Hausaufgaben
erarbeitet, auf welchen diese Arbeit basiert.
Anschließend wurden in
Kapitel 3
die funktionalen und nicht-funktionalen Anforderungen
vorgestellt und verdeutlicht.
Darauf folgend wurden in
Kapitel 4
die Design Guidelines der beiden verwendeten
Betriebssysteme (Android und iOS) zusammengefasst. Darin wurde die jeweilige grund-
legende Typographie, die dargestellten Farben der App, das verwendete Layout und die
verwendeten Elemente genauer beschrieben.
Basierend auf diesen vordefinierten Elementen begann in
Kapitel 5
die Entwurfsphase.
Dazu wurden zuerst verschiedene Anwendungsfälle und Dialogstrukturen definiert und
vorgestellt. Des Weiteren wurden digitale Papermockups konzipiert, um Grundstruk-
75
8 Fazit
turen und erste Ideen festzuhalten. Auf Basis der Papermockups wurden dann die
elektronischen Mockups entwickelt und erarbeitet.
Nach der Entwurfsphase wurde in
Kapitel 6
eine Online-Umfrage durchgeführt. Mithilfe
eines ersten klickbaren Prototyps wurden wichtige Daten über die Benutzerfreundlichkeit,
Einfachheit und Bedienbarkeit der Anwendung erfasst.
Abschließend wurden in Kapitel 7 die Anforderungen aus dem Kapitel 4 abgeglichen.
8.2 Ausblick
In diesem letzten Abschnitt werden potentielle Erweiterungen und Zukunftsvisionen der
Albatros-App vorgestellt.
8.2.1 Einstellungsmodul
Es sollte zur Anwendung ein Einstellungsmodul definiert und konzipiert werden. In
diesem Modul sollte der Nutzer diverse Einstellungen tätigen können und somit die
Anwendung zum Teil auf seine Bedürfnisse individuell zuschneiden zu können. Ein
wichtiges Element dazu ist die Rückziehung der Einwilligung zur Datenerhebung medizi-
nischer Daten. Das heißt der Nutzer kann zu jeder Zeit seine Einwilligung zur Teilnahme
von Studien widerrufen. Weiter mögliche Einstellungen sind das Verhalten von Benach-
richtigungen und Einstellen von auditiven und haptischen Rückmeldungen des Gerätes,
sowie die Wahl der Position des Menüs.
8.2.2 Push - Benachrichtigungen
Um die Benutzerfreundlichkeit zu steigern, sollte die Funktion der Push-Benachrichtigung
konzipiert und erarbeitet werden. Diese erscheinen in der jeweiligen Benachrichtigungs-
leiste des Gerätes und erinnert beziehungsweise informiert den Nutzer über wichtige
Ereignisse. Diese Benachrichtigungen werden auch während der Benutzung von ver-
schiedenen Anwendungen empfangen.
76
8.2 Ausblick
8.2.3 Version für Tablets
In dieser Arbeit wird das Design ausschließlich für Smartphones der Betriebssysteme
Android und iOS konzipiert und erarbeitet. Da die Zahl der Tablet-Nutzer täglich anstei-
gen, sollte diese App auch für Tablets optimiert werden. Dazu können alle erarbeiten
Elemente und Grafiken dieser Arbeit herangezogen werden.
8.2.4 Mehrsprachigkeit
Zusätzlich sollte der Nutzer die Sprache auswählen können, welche bei der Nutzung der
App angezeigt wird. Somit wäre die Albatros-App auf internationaler Ebene vertreten
und einsatzbereit.
8.2.5 Patientenmodul Web
Zu dieser Anwendung sollte eine dazugehörige Webapp erarbeitet werden, auf welcher
sich der Nutzer mit seinen Daten anmelden kann. Hier sollte dann ausführliche und
detailliertere Statistiken und Auswertungen zu seinen Behandlungen und Aufgaben
bereitgestellt werden.
77
Literaturverzeichnis
[1]
comScore: Anzahl der Smartphone-Nutzer in Deutschland in den
Jahren
2009 bis 2016 (in Millionen) - Statista - Das Statistikportal.
https:
//de.statista.com/statistik/daten/studie/198959/umfrage/
anzahl-der-smartphonenutzer-in-deutschland-seit-2010/
(2016)
[Letzter Abruf: 22.12.2016].
[2]
eMarketer: Prognose zur Anzahl der Smartphone-Nutzer weltweit von
2012 bis 2020 (in Milliarden) - Statista - Das Statistikportal.
https:
//de.statista.com/statistik/daten/studie/309656/umfrage/
prognose-zur-anzahl-der-smartphone-nutzer-weltweit/
(2016)
[Letzter Abruf: 22.12.2016].
[3]
Schickler, M., Reichert, M., Pryss, R., Schobel, J., Schlee, W., Langguth, B.:
Entwicklung
mobiler Apps: Konzepte, Anwendungsbausteine und Werkzeuge im
Business und E-Health. eXamen.press. Springer Vieweg (2015)
[4]
Schickler, M., Pryss, R., Reichert, M., Heinzelmann, M., Schobel, J., Langguth,
B., Probst, T., Schlee, W.: Using Wearables in the Context of Chronic Disorders -
Results of a Pre-Study. In: 29th IEEE Int’l Symposium on Computer-Based Medical
Systems. (2016) 68–69
[5]
Schickler, M., Pryss, R., Reichert, M., Schobel, J., Langguth, B., Schlee, W.: Using
Mobile Serious Games in the Context of Chronic Disorders - A Mobile Game
Concept for the Treatment of Tinnitus. In: 29th IEEE Int’l Symposium on Computer-
Based Medical Systems (CBMS 2016). (2016) 343–348
[6]
Schobel, J., Pryss, R., Schickler, M., Reichert, M.: Towards Flexible Mobile Data
Collection in Healthcare. In: 29th IEEE International Symposium on Computer-
Based Medical Systems (CBMS 2016). (2016) 181–182
79
Literaturverzeichnis
[7]
Schobel, J., Pryss, R., Schickler, M., Ruf-Leuschner, M., Elbert, T., Reichert,
M.: End-User Programming of Mobile Services: Empowering Domain Experts
to
Implement
Mobile Data Collection Applications. In: 5th IEEE International
Conference
on Mobile Services (MS 2016), IEEE Computer Society Press (2016)
1–8
[8]
Schobel, J., Pryss, R., Wipp, W., Schickler, M., Reichert, M.: A Mobile Service
Engine Enabling Complex Data Collection Applications. In: 14th International
Conference on Service Oriented Computing (ICSOC 2016). Number 9936 in LNCS
(2016) 626–633
[9]
Probst, T., Pryss, R., Langguth, B., Schlee, W.: Emotional states as mediators
between tinnitus loudness and tinnitus distress in daily life: Results from the
"TrackYourTinnitus" application. Scientific Reports 6(2016)
[10]
Borgart, E.J., Kemmler, L.: Hausaufgaben in der Psychotherapie. Psychologische
Rundschau 40 (1989) 10–17
[11]
Fehm, L., Fehm-Wolfsdorf, G.: Therapeutische Hausaufgaben. In: Lehrbuch der
Verhaltenstherapie. Springer (2009) 709–719
[12]
Fehm, P.D.L., Helbig-Lang, S.: Hausaufgaben in der Psychotherapie.
Psychotherapeut 54 (2009) 377–392
[13]
Detweiler-Bedell, J.B., Whisman, M.A.: A Lesson in Assigning Homework: Therapist,
Client, and Task Characteristics in Cognitive Therapy for Depression. Professional
Psychology: Research and Practice 36 (2005) 219
[14]
Fehm, L., Mrose, J.: Patients’ perspective on homework assignments in cognitive–
behavioural therapy. Clinical psychology & psychotherapy 15 (2008) 320–328
[15]
Sonnenmoser, M.: Hausaufgaben in der Psychotherapie — Noch unentdecktes
Potential. Deutsches Ärzteblatt (2010) 16–17
[16] Grawe, K.: Psychologische Psychotherapie. Göttingen: Hogrefe (1998)
80
Literaturverzeichnis
[17]
Scheel, M.J., Hanson, W.E., Razzhavaikina, T.I.: The Process of
Recommending
Homework in Psychotherapy: A Review of Therapist Delivery Methods, Client
Acceptability
, and Factors That Affect Compliance. Psychotherapy: Theory,
Research, Practice, Training 41 (2004) 38
[18]
Schobel, J., Pryss, R., Schickler, M., Reichert, M.: A Configurator Component for
End-User Defined Mobile Data Collection Processes. In: Demo Track of the 14th
International Conference on Service Oriented Computing (ICSOC 2016). (2016)
[19]
Schobel, J., Pryss, R., Schickler, M., Reichert, M.: A Lightweight Process Engine
for Enabling Advanced Mobile Applications. In: 24th International Conference on
Cooperative Information Systems (CoopIS 2016). Number 10033 in LNCS, Springer
(2016) 552–569
[20]
Pryss, R., Reichert, M., Herrmann, J., Langguth, B., Schlee, W.: Mobile Crowd
Sensing in Clinical and Psychological Trials – A Case Study. In: 28th IEEE Int’l
Symposium on Computer-Based Medical Systems, IEEE Computer Society Press
(2015) 23–24
[21]
Pryss, R., Reichert, M., Langguth, B., Schlee, W.: Mobile Crowd Sensing
Services
for Tinnitus Assessment, Therapy and Research. In: IEEE 4th International
Conference
on Mobile Services (MS 2015), IEEE Computer Society Press (2015)
352–359
[22]
Schickler, M., Schobel, J., Pryss, R., Reichert, M.: Mobile Crowd Sensing – A New
way of collecting data from trauma samples? In: XIV Conference of European
Society for Traumatic Stress Studies (ESTSS) Conference. (2015) 244
[23]
Schobel, J., Pryss, R., Reichert, M.: Using Smart Mobile Devices for Collecting
Structured Data in Clinical Trials: Results From a Large-Scale Case Study. In:
28th IEEE International Symposium on Computer-Based Medical Systems (CBMS
2015), IEEE Computer Society Press (2015) 13–18
81
Literaturverzeichnis
[24]
Schobel, J., Schickler, M., Pryss, R., Reichert, M.: Process-Driven Data Collection
with Smart Mobile Devices. In: 10th International Conference on Web Information
Systems and Technologies (Revised Selected Papers). Number 226 in LNBIP.
Springer (2015) 347–362
[25]
Probst, T., Pryss, R., Langguth, B., Schlee, W.: Emotion dynamics and tinnitus:
Daily life data from the “TrackYourTinnitus” application. Scientific Reports
6
(2016)
[26]
Serquera, J., Schlee, W., Pryss, R., Neff, P., Langguth, B.: Music Technology for
Tinnitus Treatment Within Tinnet. In: Audio Engineering Society Conference: 58th
International Conference: Music Induced Hearing Disorders, Audio Engineering
Society (2015)
[27]
Google Inc.: Material Design. (
https://material.io/guidelines/
) [Letzter
Abruf: 17.11.2016].
[28]
Google Inc.: Material Design Color Palette. (
https://material.io/
guidelines/style/color.html#color-color-palette
) [Letzter Abruf:
17.11.2016].
[29]
Apple Inc.: iOS Human Interface Guidelines. (
https://developer.
apple.com/ios/human-interface-guidelines/overview/
design-principles/) [Letzter Abruf: 16.11.2016].
[30]
NinjaMock: The faster, better and funnier way to making mockups. (
https:
//ninjamock.com/) [Letzter Abruf: 12.10.2016].
[31]
Adobe Systems Incorporated: Photoshop CC (2017). (
https://www.adobe.
com/de/products/photoshop.html?promoid=KLXLS
) [
Letzter Abruf
:
12.09.2016].
[32]
Apple Inc.: iPhone 6s. (
https://www.apple.com/de/
) [Letzter Abruf:
12.11.2016].
[33]
LG Electronics Inc.: LG G5. (
http://www.lg.com/de
) [Letzter Abruf:
12.11.2016].
82
Literaturverzeichnis
[34]
Stach, M.: Konzeption und realisierung eines rahmenwerks zur unterstützung von
therapeuten bei der durchführung von patientenbehandlungen. (2016)
[35]
InVision AG: Free Web and Prototyping (Web, iOS, Android) and UI Mockup Tool.
(https://www.invisionapp.com/) [Letzter Abruf: 15.10.2016].
[36]
enuvo GmbH: Online Umfrage erstellen. (
https://www.umfrageonline.com/
)
[Letzter Abruf: 18.12.2016].
83
A Anhang
Abbildung A.2: Papermockups - Marketplace Menü
Abbildung A.3: Papermockups - Login
86
A.1 Papermockups
Abbildung A.4: Papermockups - Login mit falscher Eingabe
Abbildung A.5: Papermockups - Login mit Freischaltcode
87
A Anhang
Abbildung A.6: Papermockups - Login mit Freischaltcode - falsche Eingabe
Abbildung A.7: Papermockups - Registrierung
88
A.1 Papermockups
Abbildung A.8: Papermockups - Registrierung mit falschen Eingaben
Abbildung A.9: Papermockups - Kategoriesuche
89
A Anhang
Abbildung A.10: Papermockups - Umkreissuche
Abbildung A.11: Papermockups - Geöffnetes Menü auf der unteren Seite
90
A.1 Papermockups
Abbildung A.12: Papermockups - Geschlossenes Menü auf der linken Seite
Abbildung A.13: Papermockups - Geöffnetes Menü auf der linken Seite
91
A Anhang
Abbildung A.14: Papermockups - Aufgabenübersicht I
Abbildung A.15: Papermockups - Aufgabenübersicht II
92
A.1 Papermockups
Abbildung A.16: Papermockups - Aufgabenübersicht Aufgabe verschieben
Abbildung A.17: Papermockups - Aufgabendetails
93
A Anhang
Abbildung A.18: Papermockups - Aufgabendetails Aufgabe verschieben
Abbildung A.19: Papermockups - Aufgabendetails Änderung anfordern und Feedback
94
A.1 Papermockups
Abbildung A.20: Papermockups - Abgeschlossene Aufgabenübersicht I
Abbildung A.21: Papermockups - Abgeschlossene Aufgabenübersicht II
95
A Anhang
Abbildung A.22: Papermockups - Abgeschlossene Aufgabendetails
A.2 Elektronische Mockups
Abbildung A.23:
Elektronische Mockups - Passwort vergessen und falsche Code-
Eingabe
96
A.2 Elektronische Mockups
Abbildung A.24:
Elektronische Mockups - Alternative Aufgabenübersicht und alternative
Aufgabendetails
Abbildung A.25: Elektronische Mockups - Dialog Aufgabe verschieben
97
A Anhang
Abbildung A.26: Elektronische Mockups - Dialog Aufgabenänderung anfordern
Abbildung A.27: Elektronische Mockups - Dialog Aufgabe abschließen
98
A.2 Elektronische Mockups
Abbildung A.28: Elektronische Mockups - Feedback II
Abbildung A.29: Elektronische Mockups - Feedback III
99
A Anhang
Abbildung A.30: Elektronische Mockups - Feedback IV
Abbildung A.31: Elektronische Mockups - Feedback V
100
A.2 Elektronische Mockups
Abbildung A.32: Elektronische Mockups - Dialog Aufgabe abgeschlossen
Abbildung A.33: Elektronische Mockups - Geschlossenes Menü
101
A Anhang
Abbildung A.34: Elektronische Mockups - Abgeschlossene Aufgabendetails
Abbildung A.35: Elektronische Mockups - Profildaten bearbeiten
102
A.3 Ergebnisse der Umfrage
Abbildung A.36: Elektronische Mockups - Passwort ändern
A.3 Ergebnisse der Umfrage
Abbildung A.37: Ergebnisse der Umfrage - Frage 1
103
A Anhang
Abbildung A.38: Ergebnisse der Umfrage - Frage 2
Abbildung A.39: Ergebnisse der Umfrage - Frage 3
104
A.3 Ergebnisse der Umfrage
Abbildung A.40: Ergebnisse der Umfrage - Frage 4
Abbildung A.41: Ergebnisse der Umfrage - Frage 5
105
A Anhang
Abbildung A.42: Ergebnisse der Umfrage - Frage 6
Abbildung A.43: Ergebnisse der Umfrage - Frage 7
106
A.3 Ergebnisse der Umfrage
Abbildung A.44: Ergebnisse der Umfrage - Frage 8
Abbildung A.45: Ergebnisse der Umfrage - Frage 9
107
A Anhang
Abbildung A.46: Ergebnisse der Umfrage - Frage 10
Abbildung A.47: Ergebnisse der Umfrage - Frage 11
Abbildung A.48: Ergebnisse der Umfrage - Frage 12
108
A.3 Ergebnisse der Umfrage
Abbildung A.49: Ergebnisse der Umfrage - Frage 13
Abbildung A.50: Ergebnisse der Umfrage - Frage 14
Abbildung A.51: Ergebnisse der Umfrage - Frage 15
109
A Anhang
Abbildung A.52: Ergebnisse der Umfrage - Frage 16
Abbildung A.53: Ergebnisse der Umfrage - Frage 17
110
A.3 Ergebnisse der Umfrage
Abbildung A.54: Ergebnisse der Umfrage - Frage 18
Abbildung A.55: Ergebnisse der Umfrage - Frage 19
111
A Anhang
Abbildung A.56: Ergebnisse der Umfrage - Frage 21 I
112
A.3 Ergebnisse der Umfrage
Abbildung A.57: Ergebnisse der Umfrage - Frage 21 II
113
A Anhang
Abbildung A.58: Ergebnisse der Umfrage - Frage 22
114
Abbildungsverzeichnis
1.1
Prognose zur Anzahl der Smartphone-Nutzer weltweit von 2012 bis 2020
(in Milliarden), Quelle: [2] . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1 Arten von Hausaufgaben, Quelle: [12] . . . . . . . . . . . . . . . . . . . . 7
2.2 Phasenmodell des Hausaufgabeneinsatzes, Quelle: [17] . . . . . . . . . . 10
4.1
Schriftvarianten der Roboto – Schriftfamilie, Quelle: Testeingaben mit
Adobe Photoshop CC (2017) . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2 Schriftvarianten kursiv der Roboto – Schriftfamilie, Quelle: Testeingaben
mit Adobe Photoshop CC (2017) . . . . . . . . . . . . . . . . . . . . . . . 19
4.3 Android - Verwendete Farben in der Anwendung . . . . . . . . . . . . . . 20
4.4 Android - Verwendetes Layout der Anwendung . . . . . . . . . . . . . . . 21
4.5 Android - Verwendete Elemente der Anwendung . . . . . . . . . . . . . . 23
4.6
Schriftvarianten der
Helvetica
– Schriftfamilie, Quelle: Testeingaben mit
Adobe Photoshop CC (2017) . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.7 iOS - Verwendete Farben in der Anwendung für iOS . . . . . . . . . . . . 26
4.8 iOS - Verwendetes Layout der Anwendung . . . . . . . . . . . . . . . . . 27
4.9 iOS - Verwendete Elemente der Anwendung . . . . . . . . . . . . . . . . 29
5.1 Anwendungsfalldiagramm des Gast-Moduls, Quelle: [34] . . . . . . . . . . 32
5.2 Anwendungsfalldiagramm des Patienten-Moduls, Quelle: [34] . . . . . . . 33
5.3 Dialoge und ihre Erreichbarkeiten des Marketplace der Anwendung . . . 34
5.4
Dialoge und ihre Erreichbarkeiten des angemeldeten Bereiches der An-
wendung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.5 Skizze der Umkreissuche, geöffnetes Menü und alternatives Menü . . . . 36
5.6 Skizze der Behandlungsaufgabenübersicht inklusive Alternative . . . . . . 37
5.7 Skizze der Aufgabendetails inklusive Alternative . . . . . . . . . . . . . . 38
5.8 Willkommen – iOS, Android . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.9 Menü Marketplace – iOS, Android . . . . . . . . . . . . . . . . . . . . . . 40
5.10 Menü im angemeldeten Bereich – iOS, Android . . . . . . . . . . . . . . . 41
115
Abbildungsverzeichnis
5.11 Login – iOS, Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.12 Passwort vergessen, Ungültiger Anmeldeversuch – iOS, Android . . . . . 43
5.13 Login mit Freischaltcode – iOS, Android . . . . . . . . . . . . . . . . . . . 45
5.14 Registrierung – iOS, Android . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.15 Registrierung mit Auswahl des Datums – iOS, Android . . . . . . . . . . . 47
5.16 Kategoriesuche – iOS, Android . . . . . . . . . . . . . . . . . . . . . . . . 48
5.17 Filter im Marketplace – iOS, Android . . . . . . . . . . . . . . . . . . . . . 49
5.18 Umkreissuche – iOS, Android . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.19 Detailsansicht im Marketplace – iOS, Android . . . . . . . . . . . . . . . . 51
5.20 Neue Behandlung hinzufügen – iOS, Android . . . . . . . . . . . . . . . . 52
5.21 Offene Behandlungsübersicht – iOS, Android . . . . . . . . . . . . . . . . 53
5.22 Abgeschlossene Behandlungsübersicht – iOS, Android . . . . . . . . . . 54
5.23 Offene Behandlungsdetails – iOS, Android . . . . . . . . . . . . . . . . . . 55
5.24 Offene Behandlungsdetails – iOS, Android . . . . . . . . . . . . . . . . . . 56
5.25 Aufgabenübersicht – iOS, Android . . . . . . . . . . . . . . . . . . . . . . 57
5.26 Aufgabenübersicht Aufgabe verschieben – iOS . . . . . . . . . . . . . . . 58
5.27 Ausstehende Aufgabendetails I – iOS, Android . . . . . . . . . . . . . . . 59
5.28 Ausstehende Aufgabendetails II – iOS, Android . . . . . . . . . . . . . . . 60
5.29 Untermenü der weiteren Funktionen – iOS, Android . . . . . . . . . . . . 61
5.30 Aufgabenänderungsanforderung – iOS, Android . . . . . . . . . . . . . . 62
5.31 Beispiele zu Feedbackfragen – iOS, Android . . . . . . . . . . . . . . . . 63
5.32 Übersicht Profildaten – iOS, Android . . . . . . . . . . . . . . . . . . . . . 64
5.33 Patienten-Studien-Berechtigung – iOS, Android . . . . . . . . . . . . . . . 65
6.1 Ausschnitte des klickbaren Prototyps . . . . . . . . . . . . . . . . . . . . . 68
6.2 Ergebnis über der verwendeten Icons, Quelle: [36] . . . . . . . . . . . . . 69
A.1 Papermockups - Willkommen . . . . . . . . . . . . . . . . . . . . . . . . . 85
A.2 Papermockups - Marketplace Menü . . . . . . . . . . . . . . . . . . . . . 86
A.3 Papermockups - Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
A.4 Papermockups - Login mit falscher Eingabe . . . . . . . . . . . . . . . . . 87
A.5 Papermockups - Login mit Freischaltcode . . . . . . . . . . . . . . . . . . 87
116
Abbildungsverzeichnis
A.6 Papermockups - Login mit Freischaltcode - falsche Eingabe . . . . . . . . 88
A.7 Papermockups - Registrierung . . . . . . . . . . . . . . . . . . . . . . . . 88
A.8 Papermockups - Registrierung mit falschen Eingaben . . . . . . . . . . . 89
A.9 Papermockups - Kategoriesuche . . . . . . . . . . . . . . . . . . . . . . . 89
A.10 Papermockups - Umkreissuche . . . . . . . . . . . . . . . . . . . . . . . . 90
A.11 Papermockups - Geöffnetes Menü auf der unteren Seite . . . . . . . . . . 90
A.12 Papermockups - Geschlossenes Menü auf der linken Seite . . . . . . . . 91
A.13 Papermockups - Geöffnetes Menü auf der linken Seite . . . . . . . . . . . 91
A.14 Papermockups - Aufgabenübersicht I . . . . . . . . . . . . . . . . . . . . . 92
A.15 Papermockups - Aufgabenübersicht II . . . . . . . . . . . . . . . . . . . . 92
A.16 Papermockups - Aufgabenübersicht Aufgabe verschieben . . . . . . . . . 93
A.17 Papermockups - Aufgabendetails . . . . . . . . . . . . . . . . . . . . . . . 93
A.18 Papermockups - Aufgabendetails Aufgabe verschieben . . . . . . . . . . 94
A.19 Papermockups - Aufgabendetails Änderung anfordern und Feedback . . . 94
A.20 Papermockups - Abgeschlossene Aufgabenübersicht I . . . . . . . . . . . 95
A.21 Papermockups - Abgeschlossene Aufgabenübersicht II . . . . . . . . . . 95
A.22 Papermockups - Abgeschlossene Aufgabendetails . . . . . . . . . . . . . 96
A.23 Elektronische Mockups - Passwort vergessen und falsche Code-Eingabe 96
A.24
Elektronische Mockups - Alternative Aufgabenübersicht und alternative
Aufgabendetails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
A.25 Elektronische Mockups - Dialog Aufgabe verschieben . . . . . . . . . . . 97
A.26 Elektronische Mockups - Dialog Aufgabenänderung anfordern . . . . . . . 98
A.27 Elektronische Mockups - Dialog Aufgabe abschließen . . . . . . . . . . . 98
A.28 Elektronische Mockups - Feedback II . . . . . . . . . . . . . . . . . . . . . 99
A.29 Elektronische Mockups - Feedback III . . . . . . . . . . . . . . . . . . . . 99
A.30 Elektronische Mockups - Feedback IV . . . . . . . . . . . . . . . . . . . . 100
A.31 Elektronische Mockups - Feedback V . . . . . . . . . . . . . . . . . . . . 100
A.32 Elektronische Mockups - Dialog Aufgabe abgeschlossen . . . . . . . . . . 101
A.33 Elektronische Mockups - Geschlossenes Menü . . . . . . . . . . . . . . . 101
A.34 Elektronische Mockups - Abgeschlossene Aufgabendetails . . . . . . . . 102
A.35 Elektronische Mockups - Profildaten bearbeiten . . . . . . . . . . . . . . . 102
117
Abbildungsverzeichnis
A.36 Elektronische Mockups - Passwort ändern . . . . . . . . . . . . . . . . . . 103
A.37 Ergebnisse der Umfrage - Frage 1 . . . . . . . . . . . . . . . . . . . . . . 103
A.38 Ergebnisse der Umfrage - Frage 2 . . . . . . . . . . . . . . . . . . . . . . 104
A.39 Ergebnisse der Umfrage - Frage 3 . . . . . . . . . . . . . . . . . . . . . . 104
A.40 Ergebnisse der Umfrage - Frage 4 . . . . . . . . . . . . . . . . . . . . . . 105
A.41 Ergebnisse der Umfrage - Frage 5 . . . . . . . . . . . . . . . . . . . . . . 105
A.42 Ergebnisse der Umfrage - Frage 6 . . . . . . . . . . . . . . . . . . . . . . 106
A.43 Ergebnisse der Umfrage - Frage 7 . . . . . . . . . . . . . . . . . . . . . . 106
A.44 Ergebnisse der Umfrage - Frage 8 . . . . . . . . . . . . . . . . . . . . . . 107
A.45 Ergebnisse der Umfrage - Frage 9 . . . . . . . . . . . . . . . . . . . . . . 107
A.46 Ergebnisse der Umfrage - Frage 10 . . . . . . . . . . . . . . . . . . . . . 108
A.47 Ergebnisse der Umfrage - Frage 11 . . . . . . . . . . . . . . . . . . . . . 108
A.48 Ergebnisse der Umfrage - Frage 12 . . . . . . . . . . . . . . . . . . . . . 108
A.49 Ergebnisse der Umfrage - Frage 13 . . . . . . . . . . . . . . . . . . . . . 109
A.50 Ergebnisse der Umfrage - Frage 14 . . . . . . . . . . . . . . . . . . . . . 109
A.51 Ergebnisse der Umfrage - Frage 15 . . . . . . . . . . . . . . . . . . . . . 109
A.52 Ergebnisse der Umfrage - Frage 16 . . . . . . . . . . . . . . . . . . . . . 110
A.53 Ergebnisse der Umfrage - Frage 17 . . . . . . . . . . . . . . . . . . . . . 110
A.54 Ergebnisse der Umfrage - Frage 18 . . . . . . . . . . . . . . . . . . . . . 111
A.55 Ergebnisse der Umfrage - Frage 19 . . . . . . . . . . . . . . . . . . . . . 111
A.56 Ergebnisse der Umfrage - Frage 21 I . . . . . . . . . . . . . . . . . . . . . 112
A.57 Ergebnisse der Umfrage - Frage 21 II . . . . . . . . . . . . . . . . . . . . 113
A.58 Ergebnisse der Umfrage - Frage 22 . . . . . . . . . . . . . . . . . . . . . 114
118
Tabellenverzeichnis
3.1 Funktionale Anforderungen I . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2 Funktionale Anforderungen II . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3 Nicht-funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . 15
7.1 Anforderungsabgleich - Funktionale Anforderungen I . . . . . . . . . . . . 71
7.2 Anforderungsabgleich - Funktionale Anforderungen II . . . . . . . . . . . 72
7.3 Anforderungsabgleich - Nicht-funktionale Anforderungen . . . . . . . . . . 73
119
Name: Johannes Schmid Matrikelnummer: 799452
Erklärung
Ich erkläre, dass ich die Arbeit selbstständig verfasst und keine anderen als die angege-
benen Quellen und Hilfsmittel verwendet habe.
Ulm, den . ... ... . ... .... ... . ... ... . ... . ... ... . ... .... ... . ... ... . ... . ... ... . ... .... ... .
Johannes Schmid
