Erstellung eines Designkonzepts für eine mobile Anwendung zur Unterstützung für hörgeschädigte Patienten [original]

Universität Ulm | 89069 Ulm | Germany Fakultät für

Ingenieurwissenschaften,

Informatik und

Psychologie

Institut für Datenbanken

und Informationssysteme

Erstellung eines Designkonzepts

für eine mobile Anwendung zur

Unterstützung für hörgeschädigte

Patienten

Bachelorarbeit an der Universität Ulm

Vorgelegt von:

Tolga Bas

[email protected]

Gutachter:

Prof. Dr. Manfred Reichert

Betreuer:

Dr. Rüdiger Pryss

2018

Fassung 21. Juni 2018

2018 Tolga Bas

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

TEX2ε

Kurzfassung

Das Hören ist eines der wichtigsten Sinne, das der Mensch besitzt. Im Verlauf des

Lebens kann es zu Beeinträchtigungen des Hörvermögens kommen, begründet durch

verschiedene Einflüsse, beispielsweise eine Ohrenentzündung, eine sehr laute Umge-

bung oder das fortgeschrittene Alter. Es können Begleiterscheinungen zu den Ursachen

auftreten, welche ein Tinnitus, Hörsturz oder eine Gleichgewichtsstörung sein können.

Diese treten mit einer gewissen Wahrscheinlichkeit bei einer lauten Umgebung auf,

wobei ein häufiger Grund die Schädigung der Sinneszellen ist. Es sind zahlreiche The-

rapien vorhanden, die die Schädigung ganz oder teilweise beheben können. Jedoch

können in einigen Fällen die Therapien erfolglos verlaufen und die Betroffenen mit einem

gestörten Hörvermögen verbleiben.

Diese Arbeit zeigt eine Designstudie für eine mobile Anwendung zur Unterstützung für

hörgeschädigte Patienten auf. Die Plattform bietet ein Forum zum Austausch von Infor-

mationen. Die Hauptfunktion besteht in der Hörlevel-Bestimmung mittels Fragebogen,

wobei die psychologische Empfindung von Bedeutung ist und dem Hörtest, welches

das Hörvermögen ermittelt. Die Ergebnisse der Hauptfunktionen werden kompakt dar-

gestellt. Das Konzept wurde für die Betriebssysteme iOS und Android den Richtlinien

entsprechend entwickelt.

iii

Danksagung

Fürs erste möchte ich mich bei all denjenigen bedanken, die mich während der Anferti-

gung dieser Bachelorarbeit unterstützt und motiviert haben.

Mein besonderer Dank gilt meinem Betreuer Dr. Rüdiger Pryss, für seine ausgiebige

Unterstützung.

Daneben gilt mein Dank an Selda Karakaya und Tolga Gungör für das sorgfältige

Korrekturlesen und den hilfreichen Anregungen bei der Erstellung dieser Arbeit.

Inhaltsverzeichnis

1 Einleitung 1

1.1 Problemstellung ................................ 1

1.2 AufbaudieserArbeit.............................. 1

2 Grundlagen der Hörschädigung 3

2.1 Definition .................................... 3

2.2 Ursachen für eine Hörschädigung . . . . . . . . . . . . . . . . . . . . . . 4

2.3 Arten einer Hörschädigung . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.4 Auswirkung ................................... 5

2.5 Therapie..................................... 6

3 Apps und Betriebssysteme 7

3.1 Apps....................................... 7

3.1.1 ArtenvonApps............................. 7

3.2 Betriebssysteme ................................ 8

3.2.1 iOS ................................... 8

3.2.2 Android ................................. 8

4 User-Interface Guidelines 11

4.1 Guidelines.................................... 11

4.2 Design-Guidelines Android 8.0 Oreo . . . . . . . . . . . . . . . . . . . . . 11

4.2.1 ThemesundBars ........................... 11

4.2.2 Farben ................................. 12

4.2.3 Icons .................................. 14

4.2.4 Typographie............................... 15

4.3 Design-Guidelines iOS 11 . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.3.1 Themes, Schemes und Bars . . . . . . . . . . . . . . . . . . . . . 16

4.3.2 Farben ................................. 17

4.3.3 Icons .................................. 18

4.3.4 Typographie............................... 19

vii

Inhaltsverzeichnis

4.3.5 iPhoneX ................................ 20

5 Umfrage 23

5.1 AufbauderUmfrage .............................. 23

5.2 Auszüge aus der Umfrage . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

5.3 Auswertung der Umfrage . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

5.4 Fazit....................................... 26

6 Anforderungen 27

6.1 Funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . 27

6.2 Nicht-funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . 28

7 Konzeptentwicklung 31

7.1 Low-Fidelity Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

7.2 High-Fidelity Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

7.2.1 Logo................................... 32

7.2.2 Willkommensseite . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

7.2.3 Anmelden................................ 34

7.2.4 Passwort vergessen . . . . . . . . . . . . . . . . . . . . . . . . . . 36

7.2.5 Registrieren............................... 37

7.2.6 Neuigkeiten............................... 40

7.2.7 Side Navigation Drawer . . . . . . . . . . . . . . . . . . . . . . . . 43

7.2.8 Profil................................... 45

7.2.9 Profil von anderen Nutzern . . . . . . . . . . . . . . . . . . . . . . 49

7.2.10 Abonnenten und Abonnierte . . . . . . . . . . . . . . . . . . . . . 50

7.2.11Nachrichten............................... 54

7.2.12Hörtest ................................. 57

7.2.13Forum.................................. 61

7.2.14Fragebogen............................... 64

7.2.15Einstellungen.............................. 70

7.2.16 Push-Benachrichtigungen . . . . . . . . . . . . . . . . . . . . . . . 74

8 Anforderungsabgleich 75

viii

Inhaltsverzeichnis

9 Fazit 79

9.1 Zusammenfassung............................... 79

10 Anhang 81

10.1Umfrage..................................... 81

Einleitung

1.1 Problemstellung

In Deutschland leiden eine Vielzahl an Menschen an einer Hörschädigung. Davon sind

alle Altersklassen betroffen, wobei die Wahrscheinlichkeit für ein Hörverlust mit dem

steigenden Alter zunimmt. Dabei sind die Betroffenen im Alltag größeren Problemen

ausgesetzt, als Personen, welche ein gesundes Hörvermögen haben. Durch eine früh-

zeitige Erkennung kann der Betroffene schneller behandelt werden und schnellstmöglich

versorgt werden. [1] [2]

Die Entwicklung der

Track Your Hearing

App soll dazu beitragen, dem Nutzer die Be-

stimmung seines Hörlevels anhand von Fragebögen zu ermöglichen und die Möglichkeit

bieten, einen Hörtest durchzuführen. Des Weiteren stellt die App einen Forum zum

Informationstausch zur Verfügung. Darüber hinaus können die Anwender der App unter-

einander kommunizieren.

1.2 Aufbau dieser Arbeit

Nach der Erläuterung der Problemstellung in

Kapitel 1

, wird in

Kapitel 2

mit den

Grundlagen zur Hörschädigung fortgefahren. Dabei wird auf die Ursachen und die

Arten der Hörschädigung näher eingegangen.

Kapitel 3

erörtert die Begriffe Apps und

Betriebssysteme. Die Design Guidelines der umgesetzten Betriebssysteme werden in

Kapitel 4

veranschaulicht.

Kapitel 5

beschreibt die Online-Umfrage, die im Rahmen

1 Einleitung

dieser Bachelorarbeit durchgeführt wurde. Die Anforderungen wurden in

Kapitel 6

analysiert. Die erstellten Designs wurden in

Kapitel 7

dargestellt. Zuerst wurde auf

das Low-Fidelity Prototyping eingegangen und anschließend wurde das High-Fidelity

Prototyping dargestellt. Abgleich der Anforderungen erfolgte in

Kapitel 8

. Zum Schluss

wurde die Bachelorarbeit in Kapitel 9 zusammengefasst.

Grundlagen der Hörschädigung

Dieses Kapitel befasst sich zunächst mit den Grundlagen der Hörschädigung und

erläutert im Anschluss die Arten, Ursachen, Auswirkung und die Therapie.

2.1 Definition

Das menschliche Ohr nimmt die Schallwellen durch das äußere Teil des Ohres, die

Ohrmuschel, auf und leitet sie zunächst in den Gehörgang weiter, welcher sie in Schwin-

gungen umwandelt. Anschließend gelangen die Schwingungen in das Mittelohr, werden

um das 20-fache verstärkt und in das Innenohr übertragen. Dieses veranlasst die Um-

wandlung des Wechseldrucks in elektrische Nervenimpulse. Der entstehende Sinnesreiz

erlangt über den Hörnerv in das Hörzentrum des Gehirns und wird entschlüsselt.

Aus vielen unterschiedlichen Gründen können Menschen an einer Hörschädigung leiden,

was dazu führt, dass die Person Geräusche und Töne leise oder gar nicht hören kann.

Die Wahrnehmung kann sich auf bestimmte Tonhöhen beschränken, was zur Folge

teilweise akustisch nicht wahrnehmbare Gespräche oder Musik hat. Die Kennzahlen

besagen, dass 15 Prozent der Weltpopulation unter einem Grad der Hörschädigung

leiden, wobei es im Jahr 2017 in Deutschland 5,4 Millionen Menschen mit indizierten

Schwerhörigkeit gab. [1] [3] [4] [5]

2 Grundlagen der Hörschädigung

2.2 Ursachen für eine Hörschädigung

Hörschädigungen können in verschiedenen Lebenszyklen auftreten und unterschiedlich

begründet werden. Sie können erblich bedingt oder aufgrund von bestimmten Krankhei-

ten, wie Röteln oder Masern, sowie von der Mutter, während der Schwangerschaft vor

der Geburt auftreten. Sie können ebenfalls durch Frühgeburt, Geburtstrauma oder durch

Sauerstoffmangel nach der Geburt erklärt werden. Andere Gründe könnten Hirnhautent-

zündung, Scharlach oder Diphtherie sein. Gesellschaftlich meist bekannte Ursache ist

permanent übermäßig laute Musik und Lärm, welche Sinneszellen im Ohr tötet. Den

gleichen Effekt kann das höhere Alter haben, da Blutgefäße im Innenohr nicht genügend

versorgt werden. Ebenfalls könnte ein Unfall eine Hörschädigung auslösen. In Ausnah-

mefällen sind Ursachen kaum oder gar nicht festzustellen.

Weitere mögliche Ursachen:

•Usher-Syndrom

•Hörsturz

•Mumps

•Otosklerose

•Ohrenerkrankung

[6] [3]

2.3 Arten einer Hörschädigung

Es liegen grob unterteilt zwei Arten von Hörschädigungen vor - die Schwerhörigkeit

und Gehörlosigkeit. Die Schwerhörigkeit hat ebenfalls zwei Formen, die Schallemp-

findungsschwerhörigkeit und Schallleitungsschwerhörigkeit. Ist der Hörnerv oder die

Hörschnecke beschädigt, handelt es sich um eine Schallempfindungsschwerhörigkeit.

Das Innenohr empfängt den Schall, kann ihn aber nicht genügend in Nervenimpulse

umwandeln, was dazu führt, dass die Wahrnehmung negativ beeinflusst und zum ein-

geschränkten Hörvermögen führt. Der Betroffene kann beispielsweise Gespräche in

2.4 Auswirkung

einem lauten Kreis nicht auffassen. Dieser Prozess ist schleichend und wird meist spät

bemerkt.

Sollte eine Schallleitungsschwerhörigkeit vorliegen, ist das äußere oder das Mittelohr

betroffen. Die gestörte Schallübertragung verhindert die ausreichende Übertragung des

Schalls in das Innenohr. Das wesentliche Symptom der Art ist die leise Wahrnehmung.

Die Schwerhörigkeit wird in drei Grade gegliedert: Die leichtgradige Schwerhörigkeit,

die ausreichend zum Erlernen der Lautsprache und Folgen normaler Gespräche ist.

Der Mittelgrad stellt Probleme in Aussprache und Ausdruck bei Erlernen der Sprache

dar, wobei die Lautsprache mit Anstrengung verstanden wird. Bei einer hochgradigen

Schwerhörigkeit kann die Gebärdensprache hilfreich sein um eine sinnvolle Kommunika-

tion zu ermöglichen. Die andere Art der Hörschädigung ist die Gehörlosigkeit, was eine

Kommunikation in Lautsprache verhindert und somit das Erlernen der Gebärdensprache

voraussetzt, um eine Kommunikation zu ermöglichen, wobei das Lippenlesen eine Alter-

native wäre, welche jedoch unzureichend ist, da nur etwa 30% gelesen werden können.

[3] [7] [8]

2.4 Auswirkung

Die Auswirkungen einer Hörschädigung sind abhängig von Erkrankungszeitpunkt, Art

und Grad der Hörschädigung. Wenn der Betroffene im Kindesalter ist, bewirkt sich die

Hörschädigung in alle Lebens- und Erfahrungsräume. Die kognitive und motorische

Entwicklung leiden unter dem Defizit, ebenso die emotionalen und sozialen Beziehun-

gen. Im Alltag ist die Kommunikation mit Hörenden sehr schwer, da Hör-, Verständnis-

und Ausdrucksprobleme Unterhaltungen negativ beeinflussen. Folglich entstehen Raum

für Missverständnisse und falsch interpretierte Situationen, was von Seiten des Nor-

malhörenden oder des Hörgeschädigten mit eingeschränktem Spracherwerb kommen

kann. Dies kann zu einem zurückhaltendem Verhalten des Hörgeschädigten führen, da

Zusammenhänge im Gespräch nicht verstanden werden und die Teilnahme an Unter-

haltungen vermieden wird. Ebenfalls müssen Hörgeschädigte ihre Freizeit anders als

Normalhörende gestalten, da beispielsweise Musikveranstaltungen, Kinofilme etc. Ver-

ständnisprobleme darstellen. Im Straßenverkehr haben Hörgeschädigte Schwierigkeiten

2 Grundlagen der Hörschädigung

Töne und Signale wahrzunehmen, wodurch eine hohe Gefahr für den Betroffenen und

das Umfeld entsteht. [1]

2.5 Therapie

Nicht alle Hörschädigungen können behandelt werden. Gute Chancen haben die Be-

troffenen, wenn es sich um einen Hörsturz, eine Mittelohrentzündung oder eine Durch-

blutungsstörung handelt, die mit den nötigen Medikamenten und dem Gehörschutz des

betroffenen Ohres zu behandeln sind. Bei der Schalleitungsschwerhörigkeit spielt der

rechtzeitige Eingriff eine große Rolle, wobei es auch ein operativer Eingriff sein kann,

um beispielsweise das versteifte Gehörknöchel zu ersetzen oder Wucherungen und

Tumore zu entfernen. Falls die Hörschädigung im Innenohr liegt, bedingt von einem Hör-

sturz, aufgrund einer extrem lauten Umgebung, ist ein Eingriff nicht möglich, da sich die

geschädigten Hörsinneszellen im Ohr selbst erholen, wobei durchblutungsfördernde Me-

dikamente Hilfestellung bieten. Es besteht die Möglichkeit, dass sich bleibende Schäden,

verursacht durch Lärm, Infektionen oder Giftstoffe bilden und somit die Hörschädigung

bleibend ist. Wenn daraus sich eine chronische Schallempfindungsschwerhörigkeit bil-

det oder eine Altersschwerhörigkeit besteht, können Hörgeräte eingesetzt werden, um

besseres Hörvermögen zu schaffen. Statt Hörgeräte können ebenfalls Hörimplantate

eingesetzt werden, um fortgeschrittene Schwerhörigkeit zu therapieren, welche individu-

ell an den Patienten angepasst wird. Dadruch können gerätebedingte Probleme, wie

Infektionen vermieden werden. [9]

Apps und Betriebssysteme

3.1 Apps

Als App wird eine Anwendungssoftware beschrieben, welche die Kurzform von Applica-

tion Software ist. Die Bezeichnung Software ist durch die Benutzung von Computern

bereits bekannt. Jedoch wird der Ausdruck App mit mobilen Endgeräten, wie Smart-

phones oder Tablets, assoziiert. Sie wird überwiegend für Programme auf mobilen

Endgeräten verwendet, kann aber auch für andere Plattformen verwendet werden.

Die meisten Mobiltelefone haben vorinstallierte Apps, wie z.B. Taschenrechner, Ka-

lender und Wecker. Sie dienen als Anwendungsprogramme und helfen dem Nutzer

in bestimmten Anwendungsbereichen. Je nach Endgerät-Hersteller werden Apps auf

verschiedenen Arten für Nutzer bereitgestellt. Der bekannte Hersteller Apple nutzt den

Apple App Store, wobei Android den Google Play Store verwendet. Diese stellen Apps

kostenlos oder kostenpflichtig den Nutzern zur Verfügung. [10]

3.1.1 Arten von Apps

Angesichts der Vielfältigkeit der Apps, ist die Entscheidung für eine Art von besonderer

Bedeutung. Im Folgenden werden drei Arten an Apps näher erläutert.

Native Apps

werden gezielt für das Betriebssystem des jeweiligen Endgeräts konzipiert.

Sie bieten eine sehr gute Performance, da im Vergleich zu Web-Apps der Zugriff

auf hardwarenahe Schnittstelle besser ist. Des Weiteren können sie ohne großen

Aufwand installiert werden, indem der Benutzer im jeweiligen App Store eine App

findet und diese installiert.

3 Apps und Betriebssysteme

Da diese Apps für verschiedene Betriebssysteme entwickelt werden, welche ver-

schiedene Programmiersprachen und Tools benötigen, können die Entwicklungs-

kosten sehr umfangreich werden. [11] [12]

Web-Apps

funktionieren im Gegensatz zu nativen Apps auf allen Betriebssystemen.

Der Entwicklungsaufwand ist geringer, was sich auch im Funktionsumfang wi-

derspiegelt. Somit können Web-Apps nicht auf die Hardware des Smartphones

zugreifen, beispielsweise Kamera oder komplexere Gesten. [12] [13]

Hybrid-Apps

ist die Kombination aus nativen und Web-Apps. Sie sind wie native An-

wendungen in App Stores verfügbar und werden wie Web-Apps mit einem Browser

mitgeliefert. Die Anpassung an unterschiedliche Systeme erfolgt problemlos. [12]

[13]

3.2 Betriebssysteme

Dem Käufer eines Mobiltelefons stehen verschiedene Betriebssysteme zur Verfügung.

Im weiteren Verlauf werden die Betriebssysteme iOS und Android näher erläutert.

3.2.1 iOS

iOS ist Apples mobiles Betriebssystem, das nur auf den eigenen Geräten, wie iPhone,

iPad, iPod etc., verfügbar ist. Sie ist seit 2007 auf dem Markt, wobei die aktuelle Version

iOS 11 in 2017 erschien. Zugegriffen wird auf ein Unix-Kern, dessen Basis ein Darwin-

Betriebssystem bildet. [14] 2017 betrug der Marktanteil von iOS weltweit 14,8%. [15]

3.2.2 Android

Google entwickelte mit Android ein Betriebssystem, das mit 84,8% Marktführer ist. Sie

basiert auf einen Linux-Kernel und ist seit Oktober 2008 verfügbar. Android ist ein offenes

System, so dass jeder Zugriff auf den Sourcecode hat. Somit kann das Betriebssystem

3.2 Betriebssysteme

von Herstellern an ihre Geräte angepasst werden. Die aktuelle Version von Android ist

Oreo, welche 2017 veröffentlicht wurde. [16] [17] [18] [19]

User-Interface Guidelines

Dieses Kapitel erläutert den Begriff Guidelines und geht anschließend auf die Guidelines

von Android und iOS näher ein.

4.1 Guidelines

Design Guidelines helfen dem Designer bestimmte Prinzipien wie Lernfähigkeit, Intui-

tivität, Konsistenz und Effizienz anzuwenden. Somit kann ein Design-Prinzip erreicht

werden, welche plattformspezifisch oder plattformübergreifend sein kann. [20]

4.2 Design-Guidelines Android 8.0 Oreo

Material Design

ist eine von Google entwickelte Design-Sprache und wurde erstmals

2014 vorgestellt. Sie basiert auf Studien der realen Welt, wobei der Mittelpunkt auf

Lichtsetzung und Schatten gesetzt wurde. Dadurch ermöglicht Google eine einmalige

Benutzererfahrung auf unterschiedlichsten Geräten. Die Richtlinien von

Material Design

sind nicht verpflichtend, jedoch eine Empfehlung. [21] [22] [23]

4.2.1 Themes und Bars

Mithilfe von Themes ist es möglich eine einheitliche Benutzeroberfläche der App zu

schaffen. Somit wird nicht nur auf eine einzelne Ansicht der App gezielt, sondern auf die

gesamte App. Infolgedessen hat sie einen konsequenten Verlauf. Zur Auswahl stehen

4 User-Interface Guidelines

das dark oder light Theme. [

] Die App

Track Your Hearing

verwendet das light Theme.

Im Folgenden werden die Komponenten gezeigt, welche die

Track Your Hearing

App

verwendet:

Abbildung 4.1: Android mobile structure

Markierung 1 Status Bar

Markierung 2 Action bar

Markierung 3 Action bar tabs

Markierung 4 Content display

Markierung 5 Navigation bar

4.2.2 Farben

Material Design

bietet eine Vielzahl an verschiedenen Farbpaletten, welche eine große

Auswahl an Grundfarben zur Verfügung stellt. Diese sind in verschiedenen Abstufungen

4.2 Design-Guidelines Android 8.0 Oreo

und Schattierungen aufgebaut. [25]

In der Farbpalette wird zwischen Primär- und Sekundärfarben unterschieden, wobei

Primärfarben am häufigsten in einer App verwendet werden. Sie können für jedes

Element in einer dunklen oder hellen Variante verwendet werden, damit man einen

Kontrast zwischen den UI Elementen erkennt, beispielsweise um eine App-Leiste von

einer Systemleiste zu unterschieden. Andererseits kann man mit Sekundärfarben be-

stimmte Elemente betonen, die zum Beispiel für Progress Bars, Links und Überschriften

verwendet werden.

Die Farben der App wurden aus dem

Material Design

entnommen, mit dem Ziel ein

harmonisches und durchgängiges Design zu gestalten. [26]

Abbildung 4.2: Android Farben, Quelle: Testeingaben mit Adobe XD

Markierung 1

Diese Farbe gehört der Palette

Orange

an. Sie wird als Akzentfarbe

eingesetzt und hebt die Elemente im content display hervor. Des Weiteren dient

sie zur Markierung von tabs und der progress bar.

Markierung 2

Dieser Farbton stammt aus der Palette

Brown

und wird als Hauptfarbe

verwendet.

Markierung 3

Diese Farbe, welche aus der Familie

Red

stammt, hebt fehlerhafte Mel-

dungen hervor und färbt den Abmelden Button im Side Drawer ein.

Die Farben orange (Markierung 1) und braun (Markierung 2) werden für das Logo 7.2.1

verwendet.

4 User-Interface Guidelines

4.2.3 Icons

Icons sind Symbole, die eine Aktion, ein Verhalten oder ein Zustand selbsterklärend

veranschaulichen. Sie werden unterteilt in Product Icons, System Icons und Animated

Icons. Google stellt über 900

Material Icons

zur Verfügung, die sowohl auf Web- als

auch auf iOS-Projekten verwendet werden können. [25] [27] [28]

Folgende Abbildung bildet die Icons ab, die in der

Track Your Hearing

App verwendet

wurden:

(a) (b) (c) (d) (e) (f) (g) (h)

(i) (j) (k) (l) (m) (n) (o) (p)

(q) (r) (s) (t) (u) (v)

Abbildung 4.3: Android Icons

, Quelle: [27]

Mit 4.3(a) öffnet man den Side Navigation Drawer. Zum Wechseln in die vorherige An-

sicht benutzt man 4.3(b). Das Plus-Icon 4.3(c) hat mehrere Funktionen in verschiedenen

Ansichten. Zum einen kann man eine neue Uhrzeit zur Erinnerung der Fragebögen

hinzufügen und zum anderen beispielsweise einen neuen Forumbeitrag starten. Ände-

rungen bestimmter Ansichten bestätigt man mit 4.3(d). In den Neuigkeiten kann man bei

einem ansprechenden Beitrag auf den „Gefällt-mir“ Button 4.3(e) klicken. Einen Beitrag

kann man mit 4.3(f) kommentieren oder mit 4.3(g) teilen. Im Side Navigation Drawer hat

4.2 Design-Guidelines Android 8.0 Oreo

jeder Eintrag einen Icon zugewiesen bekommen. In die Neuigkeiten Ansicht kommt man

mit dem 4.3(h) Icon. Mit 4.3(i) kann der Nutzer sein Profil einsehen. Die Fragebögen

werden mit 4.3(j) dargestellt. Falls man einen Hörtest machen möchte, klickt man auf

den 4.3(k) Icon. 4.3(l) zeigt die Nachrichten. Forum wird durch 4.3(m) beschrieben.

Um Einstellungen vorzunehmen, klickt man auf 4.3(n). Durch 4.3(o) sieht man seine

Abonnenten in der Aktivitäten Ansicht. Falls in einem Textfeld ein 4.3(p) vorhanden ist,

kann man eine Spracheingabe tätigen. Beim Anmelden kann man sich die eingegeben

Passwörter ein- oder ausblenden lassen. Dies geschieht mit 4.3(q) und 4.3(r). Mit 4.3(s)

startet man eine neue Konversation. Das Kamera Icon 4.3(t) fügt ein Bild hinzu. 4.3(u)

ist für die Suchfunktion. Weiterführende Aktionen erfolgen mit 4.3(v).

4.2.4 Typographie

Die Schriftart Roboto ist die systemeigene Schrift von Android, welche mit der Version

4.0 KitKat eingeführt wurde. Sie hat einen hohen Wiedererkennungswert für Google

Produkten. [

] Außerdem ist die gute Lesbarkeit sowohl auf großen als auch auf

kleinen Bildschirmen kein Problem. Folgende Abbildung zeigt die sechs verschiedenen

Schriftarten, welche auch in kursiv vorhanden sind.

Abbildung 4.4: Roboto, Quelle: Testeingaben mit Adobe XD

4 User-Interface Guidelines

4.3 Design-Guidelines iOS 11

Apple hat mit

Human Interface Guidelines

bestimmte Richtlinien formuliert, auf welche

Entwickler und Designer achten müssen. Falls diese nicht eingehalten werden, kann die

Veröffentlichung der App im Apple App Store verhindert werden. Durch diese Vorgaben

entsprechen die Apps einer einheitlichen Linie. [30]

4.3.1 Themes, Schemes und Bars

Clarity, Deference, Depth - diese drei Grundsätze unterscheiden iOS von anderen

Betriebssystemen.

Clarity

bedeutet, dass die Funktionalität im Vorderung steht. Dabei sind die Texte sehr

gut lesbar und die Symbole präzise und anschaulich.

Deference

beschreibt die bessere Wahrnehmung von Inhalten durch das User Interface.

Depth

vermittelt Hierarchie und Dynamik durch visuelle Ebenen und realistische Be-

wegungen. Der Zugang zu zusätzlichen Inhalten und Funktionalität wird durch

Berührung und Erkennbarkeit gewährleistet.

Bei der Gestaltung der

Track Your Hearing

App wurden alle drei Punkte berücksichtigt:

Clarity wurde erreicht, indem die Icons schlicht gehalten und präzise angeordnet wurden.

Durch die Vermittlung der klaren Inhalte an den Nutzer durch das User Interface wurde

Deference erreicht. Mit einem hierarchischen Aufbau, welche sich in der App bemerkbar

macht, wurde Depth berücksichtigt.

[31]

4.3 Design-Guidelines iOS 11

Abbildung 4.5: iOS mobile structure

Markierung 1 Status Bar

Markierung 2 Navigation bar

Markierung 3 Scope bar

Markierung 4 Content display

4.3.2 Farben

Mit Farben kann man visuelle Kontinuität gewährleisten, Rückmeldung als Reaktion

auf Benutzeraktionen geben und Statusinformationen vermitteln. Apple stellt in seiner

Farbpalette acht Farben zu Verfügung, die gut miteinander kombiniert werden. Darüber

hinaus kann der Designer eine eigene Farbpalette zusammenstellen. Die iOS-Version

von

Track Your Hearing

verwendet dieselben Farben wie die Android-Version, um den

Widererkennungswert der App zu steigern. [32]

Markierung 1 Diese Farbe wird für die Scope Bar und als Sekundärfarbe eingesetzt.

4 User-Interface Guidelines

Abbildung 4.6: iOS Farben, Quelle: Testeingaben mit Adobe XD

Markierung 2

Dieser Farbton wird überwiegend für Buttons eingesetzt und wird als

Hauptfarbe verwendet.

Markierung 3

Diese Farbe, welche aus der Familie

Red

stammt, hebt fehlerhafte Mel-

dungen hervor und färbt den Abmelden Button im Side Drawer ein.

4.3.3 Icons

Auch die iOS-Version setzt Icons in der App ein. Die Bedeutung sollte schnell nach-

vollziehbar sein, um keine Verwirrungen bei dem Benutzer zu stiften. Beispielsweise

verwendet die Einstellungen Rubrik einen Zahnrad als Icon, welche allgemein mit Ein-

stellungen verknüpft ist. Außerdem soll ein Icon nicht für verschiedene Bereiche benutzt

werden, da ansonsten Verwirrungen entstehen könnten. Es wurden in der iOS-Version

dieselben Icons, wie für Android von

Material Designs

verwendet, da diese für beide

Betriebssysteme erlaubt sind. [33]

4.3 Design-Guidelines iOS 11

(a) (b) (c) (d) (e) (f) (g) (h)

(i) (j) (k) (l) (m) (n) (o) (p)

(q) (r) (s) (t) (u) (v) (w)

Abbildung 4.7: iOS Icons

, Quelle: [27]

Die Icons wurden bereits in 4.3 erläutert. Zusätzlich wurden für die alternativen Designs

die Icons 4.7(v) und 4.7(w) verwendet. 4.7(v) wird verwendet, um eine neue Nachricht

an den Nutzer zu verschicken und 4.7(w) zum Folgen eines anderen Nutzers.

4.3.4 Typographie

Mit dem Update auf iOS 9 hat Apple seine Schriftart von

Helvetica Neue

auf

San

Francisco

geändert. Im Gegensatz zu

Helvetica Neue

ist die systemeigene Schriftart

von Apple besser auf kleineren Bildschirmen zu lesen, welches beispielsweise auf der

Apple Watch verdeutlicht wird. Sie ist serifenlos und bietet neun Schriftbreiten an, welche

auch in kursiv vorhanden sind. [34]

4 User-Interface Guidelines

Abbildung 4.8: San Francisco, Quelle: Testeingaben mit Adobe XD

4.3.5 iPhone X

Mit der Einführung von iOS 11 hat Apple auch ein neues Mobiltelefon auf den Markt

gebracht. Die Besonderheit im Vergleich zu Apples bisherigen Mobiltelefonen ist, dass

bei iPhone X der Home-Button fehlt. Des Weiteren weist es einen deutlich größeren

Bildschirm auf, welches eine gekrümmte Form hat.

Im Folgenden wird ein Design des iPhone X gezeigt, dessen

Navigation

sich im unteren

Bereich des Bildschirms befindet. Zur besseren Veranschaulichung wird im Vergleich

dazu ein Design eines iPhone mit einem Home-Button dargelegt. Dabei kann man

erkennen, dass bei iPhone X die Navigation sich im Gegensatz zum iPhone mit Home-

Button nicht direkt am Bildschirmrand befindet. Außerdem hat das iPhone X durch den

größeren Bildschirm mehr Inhalt. [35]

4.3 Design-Guidelines iOS 11

(a) iPhone X (b) iPhone mit Home-Button

Abbildung 4.9: Vergleich zwischen zwei IPhone Arten

Umfrage

Dieses Kapitel beschreibt eine Umfrage, die im Rahmen der Bachelorarbeit durchgeführt

wurde. Sie enthält Auszüge, welche genauer dargestellt werden. Diese Umfrage wurde

durchgeführt um den Anspruch an die

Track Your Hearing

App ermitteln zu können.

Dazu wurde ein Online Umfrage-Tool verwendet. [36]

5.1 Aufbau der Umfrage

Der Aufbau der Umfrage wurde in drei Bereiche gegliedert:

Der erste Bereich ging auf die Hörschädigung der Teilnehmer ein. Falls auf den jeweili-

gen Teilnehmer dies nicht zutraf, konnte er dies überspringen und mit dem zweiten Teil

fortfahren.

Im zweiten Bereich war es wichtig herauszufinden, welche Eigenschaften und Arten

an Apps dem Teilnehmer von Bedeutung sind. Somit konnte man feststellen, welche

Anforderungen die Teilnehmer an eine App hatten.

Der letzte Bereich legte dem Teilnehmer drei verschiedene Designvorschläge vor. An-

hand von drei vorgegebenen Kriterien konnte der Teilnehmer die Designs bewerten

und anschließend sich in einem Textfeld dazu äußern. Danach konnte der Befragte ein

Design auswählen, welche im am meisten zugesagt hat.

5 Umfrage

5.2 Auszüge aus der Umfrage

Der Teilnehmer sollte drei Designvorschläge bezüglich des Designs, der Selbsterklär-

barkeit und der Bedienbarkeit beurteilen. Nach der Beurteilung hatten die Teilnehmer

die Möglichkeit eigene Äußerungen vorzulegen. Das Design, welches am besten bei

den Bewertungen abschnitt, wurde für die Realisierung in Betracht gezogen. Folgende

Designvorschläge wurden in der Online-Umfrage dem Teilnehmer vorgelegt:

Abbildung 5.1: Design 1

5.2 Auszüge aus der Umfrage

Abbildung 5.2: Design 2

5 Umfrage

Abbildung 5.3: Design 3

5.3 Auswertung der Umfrage

An der Umfrage waren 41 Teilnehmer beteiligt. Davon hatten acht der 41 Befragten eine

Hörschädigung. Teilnehmder die keine Hörschädigung hatten, konnten entsprechende

Fragen übersprungen, sodass die Anzahl der Antworten variieren. Bei der Auswertung

der 41 Fragebögen konnten keine Muster festgestellt werden.

5.4 Fazit

Mehr als die Hälfte der Befragten stimmten für das Design 5.1. Dabei wurde auf die

Kriterien Design, Selbsterklärbarkeit und Bedienbarkeit eingegangen.

Anforderungen

Dieses Kapitel analysiert die Anforderungen der

Track Your Hearing

App. Diese werden

in funktionale und nicht-funktionale Anforderungen unterteilt. Die Funktionalität des Pro-

dukts werden durch funktionale Anforderungen beschrieben. Bei den nicht-funktionalen

Anforderungen wird die Qualität der Funktionalität dargestellt. [37]

6.1 Funktionale Anforderungen

Die funktionalen Anforderungen an das System kann man der folgenden Tabelle entneh-

men.

Nr. Anforderung Beschreibung

1 Willkomensseite

Eine kurze Erklärung über die Funktionen

der App.

2 Registrierung

Für die Nutzung ist ein einmaliges Anle-

gen eines Kontos mit persönlichen Daten

erforderlich.

ohne Registrierung fortfahren

Anmeldung über Social Media Account

möglich.

4 Neuigkeiten

Unter Neuigkeiten werden die Beiträge

und Aktivitäten der Nutzer angezeigt.

5 Profil

Die Nutzer haben ein eigenes Profil mit ei-

nem Profilbild, welches auch von anderen

Nutzern eingesehen werden kann.

6 Anforderungen

6 Fragebögen ausfüllen

Der Nutzer kann Fragebögen ausfüllen

und die Auswertungen dazu einsehen.

7 Arten von Fragebögen

Es existieren zwei Arten von Fragebögen,

die Statik und der Zustand.

8 Hörtest

Der Nutzer soll die Möglichkeit haben, Hör-

tests mithilfe App zu machen.

9 Nachrichten

Austausch von privaten Nachrichten unter

den Nutzern sollte angeboten sein.

10 Forum

Im Forum sollen die Nutzer die Gelegen-

heit haben ihr Wissen und ihre Erfahrung

austauschen zu können.

11 Einstellungen

In den Einstellungen sollte der Nutzer sein

Passwort ändern können.

Benachrichtigungseinstellungen Töne, Neuigkeiten und ähnliches kann der

Nutzer über Benachrichtigungen ein- und

ausschalten.

Erinnerungseinstellung zu

Fragebögen

Der Nutzer bekommt Push-up Benachrich-

tungen als Erinnerung zu seinen Fragebö-

gen. Diese kann er aktivieren und deakti-

vieren.

14 Über

Informationen zu

Track Your Hearing

wer-

den in dieser Rubrik zugänglich gemacht.

15 Problem melden

Bei Auftreten von Problemen kann sich

der Nutzer hier wenden.

Tabelle 6.1: Funktionale Anforderungen

6.2 Nicht-funktionale Anforderungen

Die folgende Tabelle legt die nicht-funktionalen Anforderungen dar.

6.2 Nicht-funktionale Anforderungen

Nr. Anforderung Beschreibung

Betriebssysteme iOS und An-

droid

Die App

Track Your Hearing

soll für beide

Betriebssysteme verwirklicht werden.

2 Vertrautheit

Um ein Wiedererkennungsgefühl zu schaf-

fen, sollen die Apps der beiden Betriebs-

systeme ähnlich aussehen.

3 Design Guidelines

Um eine Realisierbarkeit der App zu ge-

währleisten, sollten die Design Guidelines

der Betriebssysteme eingehalten werden.

4 Benutzerfreundlichkeit

Die App sollte eine einfache Bedienbarkeit

haben.

5 Robustheit

Fehlerhafte Eingaben sollten dem Nutzer

mit eindeutigen Meldungen kenntlich ge-

macht werden.

6 Datensicherheit

Unbefugte Dritte sollten kein Zugang zu

den Daten des Nutzers haben.

7 Selbstbeschreibungsfähigkeit

Nutzer sollten die App ohne Bedienshilfe

nutzen können.

8 Mehrsprachigkeit

Andere Sprachen sollten für den Nutzer

auswählbar sein.

Tabelle 6.2: Nicht-funktionale Anforderungen

Konzeptentwicklung

7.1 Low-Fidelity Prototyping

In der frühen Entwurfsphase wurden Low-Fidelity Mockups erstellt, um erste Eindrücke

zu gewinnen. Dabei ging es nicht um die optische Erscheinung, sondern in erster

Linie um die Funktionalität und die Benutzerfreundlichkeit der App. Als Technik wurde

Paper Prototyping verwendet, welche auf Handzeichnungen auf Papier basiert. Die

Verwendung dieser Technik umfassen folgende Vorteile: [38]

Aufwand

Die Erstellung von papierbasierten Mockups ist mit wenig Aufwand verbunden,

da lediglich mit Papier und Stift gearbeitet wird.

Kenntnisse

Um Mockups auf Papier zu erstellen, braucht es keine technischen Kennt-

nisse. Somit ist keine Einarbeitungszeit, wie es bei Verwendung von Tools der Fall

wäre, vonnöten.

Korrektur

Bei Paper Prototyping sind Änderungen ohne zusätzlichen Aufwand leicht

vorzunehmen.

7 Konzeptentwicklung

Abbildung 7.1: Paper Mockups

7.2 High-Fidelity Prototyping

Diese Art von Prototyping kommt dem Endprodukt am nächsten. Dabei dienten als

Ausgangspunkt die Mockups aus 7.1. Bei der Erstellung von High-Fidelity Mockups

wurden folgende Aspekte beachtet:

Design Die Designs wurden realistisch und detailgetreu erstellt.

Inhalt

Die Inhalte der Mockups sind größtenteils vollständig, welche im Endprodukt

erscheinen.

Interaktion Die Interaktion der Prototypen ist sehr realistisch.

[38]

Im Weiteren werden alle Ansichten der

Track Your Hearing

App erläutert, welche mit

Adobe XD erstellt wurden.

7.2.1 Logo

Das Logo ist eines der wichtigsten Merkmale der App. Sie ist eines der ersten Elemente

der App, welche durch den Nutzer wahrgenommen wird. Deshalb sollte man bei der

7.2 High-Fidelity Prototyping

Gestaltung auf bestimmte Kriterien achtgeben.

Zunächst sollte das Logo leicht verständlich sein, um dem Nutzer schnell vermitteln zu

können welche Funktionen die App aufweist. Des Weiteren ist die Einprägsamkeit von

wichtiger Bedeutung. Dazu wird das Logo einfach und schlicht gehalten, um einen hohen

Wiedererkennungswert zu gewährleisten. Außerdem sollte eine Unverwechselbarkeit

sichergestellt werden, damit das Logo von den anderen Logos heraussticht. [39]

Die oben genannten Gestaltungskriterien wurden bei der Logo-Gestaltung in Betracht

bezogen.

Abbildung 7.2: Logo

7.2.2 Willkommensseite

Öffnet man die App zum ersten Mal, wird der Nutzer durch eine

Willkommensseite

begrüßt. Dabei wird das

Track Your Hearing

Label in großer Schrift dargestellt. Diesem

folgt darunter das App-Logo, welches zentriert positioniert ist. Dieser beinhaltet die

Hauptfarben, welche in der App durchgehend benutzt werden. Unter dem Logo werden

die Funktionen der App aufgelistet, die dem Nutzer angeboten werden. Als Hintergrund

wird ein Kopfhörer verwendet, das in der

Track Your Hearing

App des Öfteren zum

Einsatz kommt.

7 Konzeptentwicklung

Abbildung 7.3: Willkommen

7.2.3 Anmelden

Um sich für die App anzumelden, muss der Nutzer seinen Benutzernamen und das

entsprechende Passwort eingeben, welches er beim Registrieren festgelegt hat. Um

Falscheingaben zu vermeiden, kann der Nutzer sich das Passwort anzeigen lassen,

indem er auf das

visibility

Icon klickt. Mit

visibility off

wird das Passwort wieder un-

kenntlich gemacht. Falls der Nutzer seine Anmeldedaten falsch eingibt, bekommt er

eine Warnmeldung und wird darum gebeten sie zu wiederholen. Hat der Nutzer sein

Passwort vergessen, kann er über den Flatbutton

Passwort vergessen?

sein Passwort

zurücksetzen lassen. Dies wird in 7.2.4 genauer erläutert. Des Weiteren kann der Nutzer,

falls dieser ein Social Media Account besitzt, sich über dies anmelden.

Das Anmeldebutton wird bei einer erfolgreichen Eingabe der Anmeldedaten aktiviert.

Somit gelangt der Nutzer in die Ansicht Neuigkeiten 7.2.6.

7.2 High-Fidelity Prototyping

Abbildung 7.4: iOS - Anmelden

7 Konzeptentwicklung

Abbildung 7.5: Android - Anmelden

7.2.4 Passwort vergessen

Durch Klicken auf den Flatbutton

Passwort vergessen?

in der Ansicht 7.2.3 gelangt der

Nutzer in die

Passwort vergessen

Ansicht. Falls ein Abbruch erwünscht ist, gelangt der

Nutzer in iOS durch Wischen nach rechts, in Android durch die Zurück-Taste, zurück in

die Anmelden Ansicht. Nach Eingabe seiner Email-Adresse, die er beim Registrieren

hinterlegt hat, wird ein neues Passwort generiert, welches ihm zugeschickt wird. Die

Ansicht wechselt dann automatisch in die Anmelden Ansicht 7.2.3. Der Nutzer kann das

neue Passwort in den Einstellungen ändern.

7.2 High-Fidelity Prototyping

Abbildung 7.6: Passwort vergessen

7.2.5 Registrieren

Falls kein Konto vorhanden ist, kann sich der Nutzer dies anlegen. Dazu klickt man auf

den Flatbutton

Registrieren

und gelangt zur Registrierung. Diese Ansicht verlangt vom

Nutzer einen Benutzernamen, die Email-Adresse und ein Passwort, welches der Nutzer

wiederholen muss, um die Richtigkeit zu überprüfen. Bei Falscheingabe wird der Nutzer

aufgefordert, seine Eingabe zu korrigieren. Nach erfolgreicher Eingabe aktiviert sich

der

Anmelden

Button. Ein Abbruch erfolgt in iOS mit einem Wischen nach rechts und in

Android durch die Zurück-Taste.

7 Konzeptentwicklung

Abbildung 7.7: iOS - Registrieren

7.2 High-Fidelity Prototyping

Abbildung 7.8: Android - Registrieren

7 Konzeptentwicklung

7.2.6 Neuigkeiten

Nach erfolgreicher Anmeldung 7.2.3 kommt der Nutzer in die

Neuigkeiten

Ansicht. Diese

Ansicht ist unterteilt in

Entdecken

und

Aktivitäten

, die sich über die Scope Bar auswählen

lassen. Des Weiteren dient sie als Startseite und wird als erstes nach der Anmeldung

7.2.3 angezeigt.

Entdecken

Die

Entdecken

Ansicht listet die eigenen Beiträge und die der Nutzer in zeitlich ab-

steigender Reihenfolge auf. Die Beiträge enthalten Profilbild und Benutzernamen des

jeweiligen Nutzers. Die Profile anderer Nutzer 7.2.9 können durch einen Klick auf das

Profilbild oder den Benutzernamen eingesehen werden. Des Weiteren sieht man die Zeit

wann der Beitrag geteilt wurde. Sie befindet sich auf der rechten Seite. Der Nutzer kann

einen neuen Beitrag verfassen, indem er in der Menüleiste auf das

Add

Icon klickt. Diese

Ansicht ermöglicht es dem Nutzer ein Foto hinzuzufügen und einen Text zu verfassen.

Unter dem Beitrag befindet sich ein

Kommentieren

Textfeld, ein

Gefällt-mir

, ein

Kom-

mentare

und ein

Button. Die Zahlen neben dem

Gefällt-mir

und dem

Kommentare

Button zeigen die Anzahl an. Der Nutzer kann selbst ein Kommentar verfassen, indem er

auf das

Kommentieren

Textfeld klickt. Falls ihm der Beitrag gefällt, wählt er das

Gefällt-

mir

Button aus. Um die Kommentare zu dem Beitrag lesen zu können, tippt der Nutzer

auf den

Kommentare

Button. Außerdem kann er mit einem Klick auf den

Button

den Beitrag an andere Nutzer senden.

7.2 High-Fidelity Prototyping

Abbildung 7.9: iOS - Entdecken

7 Konzeptentwicklung

Abbildung 7.10: Android - Entdecken

Aktivitäten

In die

Aktivitäten

Ansicht gelangt man über die Scope Bar. Diese Ansicht teilt dem

Nutzer die Aktionen anderer Nutzer mit, beispielsweise eine Nachricht von einem Abon-

nenten, ein Gefällt-mir oder dass man einen neuen Abonnenten hinzubekommen hat.

Jede Aktivität ist mit einem Profilbild, dem Benutzernamen, dem passenden Icon und

gegebenfalls mit einem Bild versehen. Die Aktivitäten werden wie auch in Entdecken, in

zeitlich absteigender Reihenfolge und der dazugehörigen Zeit aufgelistet.

7.2 High-Fidelity Prototyping

Abbildung 7.11: Aktivitaten

7.2.7 Side Navigation Drawer

Sowohl die iOS als auch die Android-Variante verwenden als Navigation einen Side Dra-

wer. Diese wird über das

Menü

Icon aufgerufen, welches sich in iOS auf der Navigation

Bar und in Android auf der Action bar befindet. Dabei wird der Side Drawer von der Seite

ausgefahren und klappt dabei die aktuelle Ansicht zur Seite. Jede Funktion die die App

anbietet, wird im Side Navigation Drawer aufgelistet, die zusätzlich davor einen Icon

besitzt, welches für eine einfachere und übersichtlichere Bedienung dient.

Der Hintergrund ist mit einem Kopfhörer versehen, welches den Nutzer durch die ganze

App begleitet, beispielsweise in 7.2.3.

Zunächst wird im oberen Bereich das Profilbild mit dem dazugehörigen Benutzernamen

aufgezeigt. Diese sind groß gehalten, damit sie sich von den Icons und den Texten

abheben. Darunter befinden sich folgende Funktionen der App:

7 Konzeptentwicklung

Neuigkeiten

Neuigkeiten sind unterteilt in Entdecken und Aktivitäten. Über die Scope

Bar kann man zwischen den zwei Ansichten wechseln.

Profil Das eigene Profil wird angezeigt.

Fragebögen In dieser Ansicht kann der Nutzer Fragebögen ausfüllen.

Hörtest Zur Bestimmung des Hörvermögens kann der Nutzer einen Hörtest machen.

Nachrichten Unterhaltungen zwischen Nutzern werden über Nachrichten geführt.

Forum

Diese Ansicht dient zum Informationsaustausch und Diskussion mit anderen

Nutzern.

Einstellungen Hier kann der Nutzer seine persönlichen Einstellungen vornehmen.

Neue Ereignisse werden im rechten Teil des Side Drawers mit einer Zahl, welches sich

einem braunen Rechteck befindet, erkenntlich gemacht. Am Ende des Side Drawers

kann sich der Nutzer von der

Track Your Hearing

App abmelden. Dieser ist in einem

leuchtenden rot gekennzeichnet, sodass der Nutzer dies schnell erkennt.

7.2 High-Fidelity Prototyping

Abbildung 7.12: Side Navigation Drawer

7.2.8 Profil

Zum eigenen Profil gelangt man über den Navigation Side Drawer 7.2.7, indem man dort

die Rubrik

Profil

auswählt. Des Weiteren kann das Profil auch über das Profilbild oder

dem Benutzernamen, beispielsweise in der Entdecken Ansicht, ausgewählt werden.

Das Profilbild ist der Mittelpunkt des Profils. Demzufolge wird es groß und im oberen,

zentrierten Bereich der Ansicht gehalten. Dem Nutzer ist es überlassen, ob er ein

Profilbild hochladen möchte. Andernfalls wird ein Standard Bild verwendet. Unter dem

Profilbild wird der Benutzername des Nutzers angezeigt. Der Hintergrund wird durch

einen Kopfhörer abgebildet, welches auch im Navigation Side Drawer zum Einsatz

kommt.

Im mittleren Bereich kommt eine Scope Bar zum Einsatz, welches die Elemente

Ak-

tivitäten

Abonnenten

und

abonniert

beinhaltet. Durch den orangen Balken kann man

7 Konzeptentwicklung

erkennen, welche Auswahl vorliegt. Ist

Aktivitäten

ausgewählt, werden die eigenen

oder geteilten Aktivitäten angezeigt. Diese können über den

Icon bearbeitet oder

gelöscht werden. Infolgedessen verschwindet dieser Beitrag und ist für keinen mehr

sichtbar.

Durch den

Icon im oberen, rechten Bereich gelangt man in die

Profil bearbeiten

Ansicht. Diese Ansicht bietet dem Nutzer die Möglichkeiten das Profilbild und den Namen

zu ändern. Darüber hinaus kann der Nutzer bei vorhandenem Social Media Account

seine Daten daraus übernehmen. Nach gewünschten Änderungen kann der Nutzer

seine Berabeitungen sichern und kehrt anschließend in die Profil Ansicht zurück.

7.2 High-Fidelity Prototyping

Abbildung 7.13: iOS - eigenes Profil

7 Konzeptentwicklung

Abbildung 7.14: Android - eigenes Profil

7.2 High-Fidelity Prototyping

7.2.9 Profil von anderen Nutzern

Das gleiche Design wird auch für das Profil von anderen Nutzern verwendet. Der Unter-

schied besteht darin, dass es die zusätzlichen Buttons

Folgen

und

Nachricht

beinhaltet.

Diese befinden sich unterhalb des Profilbilds und sind nebeneinander angeordnet. Mit

dem

Folgen

Button kann man diesem Nutzer folgen. Falls man diesem schon folgt,

wird statt dem

Folgen

Button ein

Abonniert

Button angezeigt. Wird auf diesen geklickt,

deabonniert es den jeweiligen Nutzer. In der

Entdecken

Ansicht sind nur die Beiträge der

abonnierten Nutzer sichtbar. Dennoch kann man auch von nicht-abonnierten Nutzern

die Beiträge auf deren Profil einsehen. Auf das

Icon wurde verzichtet, da jeder

Nutzer nur sein eigenes Profil bearbeiten darf.

Abbildung 7.15: iOS - Profil von anderen Nutzern

7 Konzeptentwicklung

Abbildung 7.16: Android - Profil von anderen Nutzern

7.2.10 Abonnenten und Abonnierte

Die Abonnenten und Abonnierte werden in der

Profil

Rubrik angezeigt. Dazu muss der

Nutzer auf eines der Tabs Abonnenten oder abonniert klicken.

Bei

Abonnenten

wird eine Liste von Nutzern angezeigt, die einem folgen. Dazu wird ein

Profilbild und der Benutzername des Nutzers abgebildet. Daneben wird in einem weißen

Button dargestellt, ob man diesem Nutzer ebenfalls folgt. Ist dies nicht der Fall erscheint

ein

Button, welches in brauner Farbe veranschaulicht wird. Durch Klicken

auf diesen Button kann diesem Nutzer ebenfalls gefolgt werden. Klickt man auf den

Button eines bereits abonnierten Nutzers, so kann dieser entfolgt werden. Falls man die

Abonnenten oder die Abonnierten eines anderen Nutzers betrachtet, sind die Buttons

ohne Funktion und dienen nur als Veranschaulichung. In diesem Fall existiert der braune

Button nicht. Diese Nutzer sehen die Beiträge, welches in

Entdecken

geteilt

7.2 High-Fidelity Prototyping

wird.

Um in die

Abonniert

Ansicht zu gelangen, muss man auf den dazugeörigen Tab klicken.

Diese Ansicht weist die Nutzer auf, die der Nutzer selbst folgt. Sie hat die gleichen

Funktionen wie bei Abonnenten.

7 Konzeptentwicklung

(a) iOS - Eigenes Profil Abonnenten (b) iOS - Eigenes Profil Abonniert

(d) iOS - Fremdes Profil Abonniert

Abbildung 7.17: iOS - Liste

7.2 High-Fidelity Prototyping

(a) Android - Eigenes Profil Abonnen-

ten

(b) Android - Eigenes Profil Abonniert

nieren

(d) Android - Fremdes Profil Abonniert

Abbildung 7.18: Android - Liste 53

7 Konzeptentwicklung

7.2.11 Nachrichten

In die

Nachrichten

Ansicht gelangt man über die gleichnamige Rubrik im Side Drawer

7.2.7. Jede Nachricht beinhaltet ein Profilbild, den Benutzernamen und ein Ausschnitt

der Nachricht.

Die Ansicht ist in zwei Teilen unterteilt, welche durch zwei braune Balken kenntlich

gemacht werden. Im ersten Teil der Ansicht werden die

Neuen Nachrichten

angezeigt.

Diese Nachrichten sind vom Nutzer ungelesen und erscheinen deshalb in der oberen

Hälfte. Die Anzahl der ungelesenen Nachrichten kann man aus dem braunen Balken

ablesen. Die neuen Nachrichten sind nebeneinander angeordnet, wobei die mittlere

Nachricht am größten angezeigt wird. Durch Wischen nach links oder rechts kann man

zwischen den Nachrichten wechseln. Wird die Nachricht durch den Nutzer gelesen,

verschiebt sich diese in den

Kürzliche Nachrichten

Abschnitt. Dieser Abschnitt listet die

Nachrichten auf, welche durch den Nutzer gelesen wurden.

Um einem Nutzer eine neue Nachricht zu schreiben, genügt ein Klick auf den

Stift

Icon 4.3. Dieser leitet den Nutzer in die

Neue Nachrichten

Ansicht, welche alle Nutzer

mit Profilbild und Benutzernamen auflistet. In der Suchleiste kann man nach dem

Benutzernamen des Nutzers in der

Track Your Hearing

App suchen. Die Auswahl erfolgt

durch Anklicken auf den Benutzernamen oder den leeren Kreis, welcher sich danach

mit einem Haken auffüllt. Die App bietet dem Anwender mehrere Nutzer aus der Liste

auszuwählen, um eine Gruppen Konversation zu ermöglichen. Alle ausgewählten Nutzer

erscheinen unter der Suchleiste, die auch wieder mit einem Klick auf das

Cancel

Icon

4.3 entfernt werden können. Mit dem

Fertig

Button in iOS oder dem

Check

Icon in

Android, gelangt man in die Konversationsansicht 7.2.11. Ein vollständiger Abbruch ist

in iOS mit dem Abbrechen Button oder einem Wischen nach rechts und in Android mit

dem Zurück Button möglich.

7.2 High-Fidelity Prototyping

Abbildung 7.19: iOS - Nachrichten

7 Konzeptentwicklung

Abbildung 7.20: Android - Nachrichten

Konversation

Am Anfang der Konversationsansicht steht der Benutzername des Nutzers, mit welcher

man eine Konversation führt. Des Weiteren werden Nachrichten angezeigt, welche der

Nutzer erhalten und versendet hat. Diese sind in aufsteigender Reihenfolge sortiert. Die

empfangenen Nachrichten sind in einem grauen Ton abgebildet, wobei die gesendeten in

einer orangen Farbe dargestellt werden. Neben der Nachricht werden die Profilbilder der

jeweiligen Nutzer aufgezeigt, welche den Eindruck einer Sprechblase für die Nachrichten

vermitteln sollen. Das Tippen auf das Profilbild leitet den Nutzer auf das jeweilige Profil

7.13 7.15 weiter.

Zum Abschicken einer Nachricht muss der Nutzer seinen Text in das Eingabefeld der

Tastatur eingeben und kann es dann anschließend mit dem

Abschicken

Button senden.

Wie in 7.2.11 kann diese Ansicht verlassen werden.

7.2 High-Fidelity Prototyping

Abbildung 7.21: Konversation

7.2.12 Hörtest

In dieser Rubrik hat der Nutzer die Möglichkeit einen Hörtest durchzuführen. Zunächst

wird eine Startsicht angezeigt, welche den Nutzer vor dem Start einweist. Die Testperson

muss dabei beachten, dass sie sich in einer ruhigen Umgebung befindet, sodass diese

den Nutzer beim Test nicht beinträchtigen. Zusätzlich braucht der Nutzer Kopfhörer,

welche er mit dem Mobiltelefon verbinden muss. Des Weiteren ist es wichtig, dass

die Lautstärke des Mobiltelefons weder zu laut noch zu leise eingestellt ist. Nach dem

Starten des Tests gelangt der Nutzer in die Hörtest Ansicht, welche einen Button in

zentrierter Position aufweist. Dieser Button muss bei kommendem Ton gedrückt werden.

Bei Klicken des Buttons färbt sich die Innenfläche in orange und symbolisiert somit dem

Nutzer die Betätigung. Außerdem befindet sich in der oberen Hälfte der Ansicht ein

Zeitbalken, welche dem Nutzer mitteilt, wie lange dieser Test noch dauert.

7 Konzeptentwicklung

Ist der Test erfolgreich abgeschlossen, werden dem Nutzer die Ergebnisse in Form eines

Audiogramms aufgezeigt. In einem Audiogramm wird das Hörverhalten des Nutzers

anhand eines Diagramms aufgezeichnet. Dabei werden auf der y-Achse die Dezibel-

werte dargestellt, die den Hörverlust wiedergeben. Die x-Achse beschriftet dagegen die

Frequenz, die aufsteigend angeordnet sind. [40]

7.2 High-Fidelity Prototyping

Abbildung 7.22: iOS - Hörtest

7 Konzeptentwicklung

Abbildung 7.23: Android - Hörtest

7.2 High-Fidelity Prototyping

7.2.13 Forum

Das Forum bietet jedem Nutzer der

Track Your Hearing

App die Möglichkeit Informatio-

nen, Erfahrungen und Ratschläge zu tauschen.

Das Prinzip der

Forum

Ansicht entspricht dem der Nachrichten Ansicht 7.2.11. Dies soll

dem Nutzer ein einheitliches und vertrauenswürdiges Design vermitteln.

Sie ist in zwei Teilen aufgeteilt, wobei der erste Teil die

interessanten Themen

aufzeigt

und der zweite Teil die Kategorien auflistet.

Die interessanten Themen zeigen die Themen auf, die die meisten Beiträge aufweisen.

Die Themen sind nebeneinander angeordnet und können mit einem Wischen nach links

oder rechts bewegt werden. Dabei erscheint das mittlere Thema am größten.

Die

Track Your Hearing

App bietet dem Nutzer vier Kategorien an. Jede Kategorie ent-

hält ein Bild, eine Überschrift und eine kurze Beschreibung der Kategorie. Nach Auswahl

einer Kategorie, wird der Nutzer in die Kategorieansicht weitergeleitet, welche ihm eine

Liste von Themen aufzeigt. Die Themen werden in zeitlich absteigender Reihenfolge

abgebildet. Jedes Thema hat eine Überschrift, rechts daneben die Anzahl der Beiträge

und darunter den Nutzer, welcher als letztes zu dem Thema einen Beitrag geleistet

hat. Eine Suchleiste schafft dem Nutzer eine Erleichterung bei einer Suche nach einem

bestimmten Thema.

Nach Auswahl eines Themas kann man die Beiträge anderer sehen und selbst in die

Diskussionen beitreten. Der Themenstarter wird kenntlich gemacht.

Mit dem

Add

Icon kann man ein neues Thema erstellen. Nachdem der Nutzer eine Über-

schrift und den Themeninhalt eingegeben hat, kann dieser in iOS mit dem

Fertig

Button

und in Android mit dem

Done

Icon das Thema auch für andere zugänglich machen.

Somit können die Nutzer gegenseitig Informationen austauschen.

7 Konzeptentwicklung

(a) iOS - Hauptansicht (b) iOS - Kategorie

Abbildung 7.24: iOS - Forum

7.2 High-Fidelity Prototyping

(a) Android - Hauptansicht (b) Android - Kategorie

Abbildung 7.25: Android - Forum

7 Konzeptentwicklung

7.2.14 Fragebogen

Fragebogen Hauptseite

Über den

Navigation Side Drawer

7.2.7 gelangt man in die

Fragebogen

Ansicht. Die

Startseite dieser Ansicht bildet die Arten der Fragebogen und die Ergebnisse ab. Der

Nutzer hat die Möglichkeit zwei Arten von Fragebögen auszufüllen. Diese werden Statik

und Zustand genannt. Die Fragen, dessen Antworten überwiegend die gleichen sind,

gehören der Kategorie Statik an. Die Kategorie Zustand dagegen wird vom Nutzer

bei jedem Aufruf der App ausgefüllt. Je nach vorgenommener Einstellung durch den

Nutzer wird dieser daran erinnert, sein Fragebogen auszufüllen. Darüber hinaus kann

der Nutzer seine Ergebnisse begutachten. Dabei kann man zwischen den Ansichten

Kalenderwoche und Jahr auswählen.

Abbildung 7.26: Auswahl der Fragebogenart

7.2 High-Fidelity Prototyping

Ausfüllen der Fragebogen

Nachdem der Nutzer eine Fragebogenart 7.2.14 ausgewählt hat, gelangt er in die Ansicht

in welcher er die Fragebögen ausfüllen kann. Dabei werden am Anfang der Ansicht

nebeneinander angeordnete Rechtecke dargestellt, welche dem Nutzer zeigen wie viele

Fragen beantwortet wurden und wie viele noch auszufüllen sind. Darunter befinden sich

die Nummerierung und die Frage. Zur Frage gehörend werden die Antwortmöglichkeiten

abgebildet. Die Art der Antwortmöglichkeiten werden den Fragen angepasst, um dem

Befragten eine Leichtigkeit zu bieten.

Auswahlfragen

bieten dem Befragten verschiedene Antwortmöglichkeiten an. Dabei

wird unterschieden, ob der Teilnehmer eine oder mehrere Antwortmöglichkeiten

geben kann.

Offene Frage Die Antwort wird in ein Textfeld eingegeben.

Skala Der Nutzer kann auf einer vorgegebenen Skala seine Bewertung abgeben.

Hierarchie

Bei der Hierarchie muss der Teilnehmer bestimmte Eigenschaften nach ihrer

Wichtigkeit sortieren.

[41]

7 Konzeptentwicklung

Abbildung 7.27: iOS - Fragebogen ausfüllen

7.2 High-Fidelity Prototyping

Abbildung 7.28: Android - Fragebogen ausfüllen

7 Konzeptentwicklung

Nachdem eine Frage beantwortet wird, kann man auf den Weiter Button klicken um

zur nächsten Frage zu gelangen. Um eine zuvor beantwortete Frage einzusehen, kann

der Nutzer dies in iOS durch den Pfeil Button oder einem Wischen nach rechts und in

Android durch den Zurück-Button machen.

Ergebnisse der Fragebogen

Zum Einsehen der Ergebnisse kann der Nutzer über die Hauptseite der Fragebögen

7.2.14 gelangen. Dabei kann man zwischen der Kalenderwoche und dem Jahr auswäh-

len.

Nach Auswahl der Kalenderwoche, wird ein

Wheel

angezeigt, welches alle Kalender-

wochen beinhaltet. Dabei kann man durch Wischen nach rechts oder links eine Woche

bestimmen. Darunter befindet sich ein Diagramm, das die Wochentage mit zugehörigem

Durchschnitt des Hörlevels in ein Balken abzeichnet. Das Hörlevel ist die psychische

Empfindung des Hörvermögens, welches durch Fragebogen ermittelt und dementspre-

chend in einer Skala 1 bis 10 eingestuft wird. Die Durchschnittswerte werden für alle

Tage ermittelt, an welchen ein oder mehrere Fragebögen ausgefüllt werden.

Für die Ergebnisse eines Jahres mit einer Anzeige von Durchschnittswerten, den Mo-

naten zugeordnet, einzusehen, muss der Jahr Button in Fragebogen Hauptseite 7.2.14

ausgewählt werden. Dabei kann man in dem Wheel das erwünschte Jahr selektieren.

7.2 High-Fidelity Prototyping

Abbildung 7.29: iOS - Ergebnisse

7 Konzeptentwicklung

Abbildung 7.30: Android - Ergebnisse

7.2.15 Einstellungen

Falls der Nutzer bestimmte Änderungen in der

Track Your Hearing

App vornehmen

möchte, kann er dies in der

Einstellungen

Rubrik vornehmen. Die Ansicht ist in drei

Bereiche aufgeteilt, wobei im ersten Bereich Kontoeinstellungen, im zweiten Bereich Be-

nachrichtigungseinstellungen und im letzten Bereich eine Hilfe-Übersicht dargestellt wird.

Im Konto Bereich kann man das Profil bearbeiten, das Passwort ändern und alle Beiträge

einsehen, welche dem Nutzer gefallen haben. In den Benachrichtigungseinstellungen

kann der Nutzer darüber entscheiden, ob die App Push-Benachrichtigungen senden

soll. Diese werden bei neu empfangenen Nachrichten, bei neu geteilten Beiträgen oder

zur Erinnerung zu Fragebögen geschickt. Letzteres kann der Nutzer genauer einstellen.

In der Erinnerungen Ansicht kann der Nutzer die genaue Uhrzeit bestimmen, wann er

erinnert werden möchte. Um eine neue Uhrzeit festzulegen, muss man auf das

Add

Icon

7.2 High-Fidelity Prototyping

klicken. Dabei erscheint eine Ansicht mit einem Wheel, womit die Zeit eingestellt werden

kann. Außerdem bietet diese Ansicht dem Nutzer die Möglichkeit, die Erinnerung wieder-

holen zu lassen, einen Ton festzulegen und eine Snooze-Funktion. In die Wiederholen

Ansicht gelangt man in iOS durch einen Klick auf das Wiederholen Label, in der der

Nutzer die Wochentage festlegen kann, in der er erinnert werden möchte. Wochentage

die aktiviert sind, werden mit einem Haken kenntlich gemacht. Wird ein Wochentag

mit einem Haken ausgewählt, so verschwindet dieser. In Android dagegen sind die

Wochentage in der Erinnerungen Ansicht aufgelistet. Diese werden nebeneinander mit

dem jeweiligen Anfangsbuchstaben des jeweiligen Wochentags dargestellt, die sich bei

einem Klick aktivieren. Dabei ändert sich die Farbe und wird eingekreist.

Im Hilfe Abschnitt kann der Nutzer Probleme melden, die die

Track Your Hearing

App

betreffen. Des Weiteren kann der Nutzer sich Informationen über die App aneignen.

7 Konzeptentwicklung

Abbildung 7.31: iOS - Einstellungen

7.2 High-Fidelity Prototyping

Abbildung 7.32: Android - Einstellungen

7 Konzeptentwicklung

7.2.16 Push-Benachrichtigungen

Hat der Nutzer bestimmte Einstellungen 7.2.15 getroffen, so erhält dieser Push-Benachrichtigungen.

Diese erscheinen in der Benachrichtigunsleiste des Mobiltelefons. Durch Klicken auf die

Benachrichtigung gelangt der Nutzer in die entsprechende Ansicht der App.

Abbildung 7.33: Push-Benachrichtigungen

Anforderungsabgleich

Dieses Kapitel gleicht die funktionalen 6.1 und nicht-funktionalen 6.2 Anforderungen aus

Kapitel 6 ab.

Anforderung Erfüllt Beschreibung

Willkomensseite Ja

Die App bietet eine Willkommensseite mit

Erläuterung der Funktionen.

Registrierung Ja

Eine Registrierung ist notwendig für die

Nutzung der App.

Ohne Registrierung fortfahren

Der Nutzer kann sich über ein vorhande-

nes Social Media Account anmelden.

Neuigkeiten Ja

Beiträge und Aktivitäten der Nutzer wer-

den in dieser Ansicht angezeigt.

Profil Ja

Die Nutzer haben ein eigenes Profil mit

einem Profilbild, die andere Nutzer auch

einsehen können.

Fragebögen ausfüllen Ja

Der Nutzer kann Fragebögen ausfüllen

und die Auswertungen dazu einsehen.

Arten von Fragebögen Ja

Der Nutzer kann die Kategorien Statik und

Zustand auswählen.

Hörtest Ja

Mit der App ist es möglich einen H/örtest

durchzuführen.

Nachrichten Ja

Konversation können unter der gleichna-

migen Rubrik durchgeführt werden.

8 Anforderungsabgleich

Forum Ja

Informationsaustausch ist im Forum mög-

lich.

Einstellungen Ja

Gewisse Einstellungen kann der Nutzer in

dieser Rubrik vornehmen.

Benachrichtigungseinstellungen

Töne, Neuigkeiten und ähnliches kann der

Nutzer über Benachrichtigungen ein- und

ausschalten.

Erinnerungseinstellung zu

Fragebögen

Die App schickt dem Nutzer bei aktiver

Einstellung Push-Benachrichtungen zu.

Über Ja

Der Nutzer sieht Informationen zu

Track

Your Hearing in dieser Rubrik.

Problem melden Ja

Auftretende Probleme meldet der Nutzer

in dieser Ansicht.

Tabelle 8.1: Abgleich der funktionalen Anforderungen

Anforderung Erfüllt Beschreibung

Betriebssysteme iOS und An-

droid

Die App

Track Your Hearing

wurde für bei-

de Betriebssysteme verwirklicht.

Vertrautheit Ja

Die Apps der beiden Betriebssysteme

schauen ähnlich aus.

Design Guidelines Ja

Die Design Guidelines wurden bei der Um-

setzung eingehalten.

Benutzerfreundlichkeit Ja

Nutzer jedes Alters kann die App ohne

Probleme benutzen.

Robustheit Ja

Fehlerhafte Eingaben werden dem Nut-

zer mit eindeutigen Meldungen kenntlich

gemacht.

Datensicherheit Ja

Zum Einloggen ist ein Benutzername und

ein Passwort vonnöten, welches nur der

Nutzer selbst kennt.

Selbstbeschreibungsfähigkeit Ja

Durch eine einfache Gestaltung und Ver-

wendung unkompliziertet Elemente wird

eine Selbstbeschreibungsfähigkeit der

App gewährleistet.

Mehrsprachigkeit Ja

Die Systemsprache des Mobiltelefons wer-

den automatisch bei der Installation über-

nommen.

Tabelle 8.2: Abgleich der nicht-funktionalen Anforderungen

Fazit

Die Arbeit wird in Kapitel 9.1 zusammengefasst.

9.1 Zusammenfassung

Diese Arbeit beschäftigte sich mit einem Designkonzept für mobile Anwendungen, die

zur Unterstützung hörgeschädigter Patienten dient. Die Problemstellung und Aufbau

dieser Arbeit wurden im ersten Kapitel erläutert. Die Grundlagen zur Hörschädigung

wurden in Kapitel 2 verdeutlicht. Kapitel 3 zeigt auf, für welche Betriebssysteme die App

umgesetzt wurde. Daraufhin werden in Kapitel 4 die User-Interface Guidelines näher

erläutert. Die durchgeführte Umfrage wurde in Kapitel 5 dargelegt. In Kapitel 6 wurden

die Anforderungen an die

Track Your Hearing

App aufgelistet. Die erstellten Designs

wurden in Kapitel 7 dargestellt. Ob die Anforderungen aus Kapitel 6 erfüllt wurden, legt

Kapitel 8 dar. Die Erstellung der Designs erfolgte mit Adobe XD.

Anhang

10.1 Umfrage

(a) (b)

Abbildung 10.1: Umfrage 1 - 4

10 Anhang

(a)

(b) (c)

(d) (e)

Abbildung 10.2: Umfrage 5 - 9

10.1 Umfrage

(a) (b)

(e)

(f)

Abbildung 10.3: Umfrage 5 - 10

10 Anhang

(a)

(b) (c)

(d)

(e)

Abbildung 10.4: Umfrage 11 - 15

10.1 Umfrage

(a)

(b)

Abbildung 10.5: Umfrage 16

10 Anhang

(a)

Abbildung 10.6: Umfrage 17

10.1 Umfrage

(a)

(b)

Abbildung 10.7: Umfrage 18

10 Anhang

(a)

Abbildung 10.8: Umfrage 19

10.1 Umfrage

(a) (b)

Abbildung 10.9: Umfrage 20

(a)

Abbildung 10.10: Umfrage 21

10 Anhang

(a)

Abbildung 10.11: Umfrage 21

Abbildungsverzeichnis

4.1 Android mobile structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4.2 Android Farben, Quelle: Testeingaben mit Adobe XD . . . . . . . . . . . . 13

4.3 AndroidIcons.................................. 14

4.4 Roboto, Quelle: Testeingaben mit Adobe XD . . . . . . . . . . . . . . . . 15

4.5 iOSmobilestructure.............................. 17

4.6 iOS Farben, Quelle: Testeingaben mit Adobe XD . . . . . . . . . . . . . . 18

4.7 iOSIcons .................................... 19

4.8 San Francisco, Quelle: Testeingaben mit Adobe XD . . . . . . . . . . . . 20

4.9 Vergleich zwischen zwei IPhone Arten . . . . . . . . . . . . . . . . . . . . 21

5.1 Design1..................................... 24

5.2 Design2..................................... 25

5.3 Design3..................................... 26

7.1 PaperMockups................................. 32

7.2 Logo....................................... 33

7.3 Willkommen................................... 34

7.4 iOS-Anmelden................................. 35

7.5 Android-Anmelden .............................. 36

7.6 Passwortvergessen .............................. 37

7.7 iOS-Registrieren ............................... 38

7.8 Android - Registrieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

7.9 iOS-Entdecken ................................ 41

7.10Android-Entdecken.............................. 42

7.11Aktivitaten.................................... 43

7.12 Side Navigation Drawer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

7.13iOS-eigenesProfil............................... 47

7.14 Android - eigenes Profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

7.15 iOS - Profil von anderen Nutzern . . . . . . . . . . . . . . . . . . . . . . . 49

Abbildungsverzeichnis

7.16 Android - Profil von anderen Nutzern . . . . . . . . . . . . . . . . . . . . . 50

7.17iOS-Liste.................................... 52

7.18Android-Liste ................................. 53

7.19iOS-Nachrichten ............................... 55

7.20 Android - Nachrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

7.21Konversation .................................. 57

7.22iOS-Hörtest .................................. 59

7.23Android-Hörtest................................ 60

7.24iOS-Forum................................... 62

7.25Android-Forum ................................ 63

7.26 Auswahl der Fragebogenart . . . . . . . . . . . . . . . . . . . . . . . . . . 64

7.27 iOS - Fragebogen ausfüllen . . . . . . . . . . . . . . . . . . . . . . . . . . 66

7.28 Android - Fragebogen ausfüllen . . . . . . . . . . . . . . . . . . . . . . . . 67

7.29iOS-Ergebnisse................................ 69

7.30Android-Ergebnisse.............................. 70

7.31iOS-Einstellungen............................... 72

7.32 Android - Einstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

7.33 Push-Benachrichtigungen . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

10.1Umfrage1-4.................................. 81

10.2Umfrage5-9.................................. 82

10.3Umfrage5-10 ................................. 83

10.4Umfrage11-15 ................................ 84

10.5Umfrage16................................... 85

10.6Umfrage17................................... 86

10.7Umfrage18................................... 87

10.8Umfrage19................................... 88

10.9Umfrage20................................... 89

10.10Umfrage21................................... 89

10.11Umfrage21................................... 90

Tabellenverzeichnis

6.1 Funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . 28

6.2 Nicht-funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . 29

8.1 Abgleich der funktionalen Anforderungen . . . . . . . . . . . . . . . . . . 76

8.2 Abgleich der nicht-funktionalen Anforderungen . . . . . . . . . . . . . . . 77

Literaturverzeichnis

[1]

Sonderpädagogische Beratungsstelle Förderzentrum Hören und Spre-

chen. Hören und Hörschädigung.

http://www.fz-hoeren.de/

uploads/tx_ssfhinfomat/2015-05_Broschuere_Beratung_FZHUS_

Hoerschaedigung_02.pdf. [Letzter Abruf: 09.05.2018].

[2]

Hören und Schwerhörigkeit – Daten, Fakten und Zahlen.

https://www.kind.

com/globalassets/downloads-pdfs/fact-sheet-schwerhoerigkeit.

pdf. [Letzter Abruf: 21.06.2018].

[3]

SONOVA Retail Deutschland GmbH. Hörschädigung: Ursachen und Auswirkung.

https://www.geers.de/hoerschaedigung. [Letzter Abruf: 12.05.2018].

[4]

Hörgeminderte und Hörgeräte-Versorgung in Deutsch-

land im Jahr 2017 (in Millionen).

https://de.

statista.com/statistik/daten/studie/71443/umfrage/

hoergeminderte-und-hoergeraete-versorgung-in-deutschland/

[Letzter Abruf: 23.05.2018].

[5] Amplifon AG. Bin ich schwerhörig? hörverluste erkennen und behandeln. https:

//www.ganzohr.ch/habe-ich-einen-hoerverlust/

, 2018. [Letzter Abruf:

21.06.2018].

[6]

Arbeitsgemeinschaft zur Förderung Hörgeschädigter

e.V. Ursachen von hörschädigungen.

http://www.

hgz-aachen.de/information-zur-hoerschaedigung/

ursachen-von-hoerschaedigungen/index.php

. [Letzter Abruf:

02.05.2018].

[7]

Britta Schwanenberg Annette Holtmeyer. Gehörlos.

https://www.

planet-wissen.de/gesellschaft/behinderungen/gehoerlose_

leben_in_der_stille/index.html, 2017. [Letzter Abruf: 17.05.2018].

[8]

Arbeitsgemeinschaft zur Förderung Hörgeschädigter

e.V. Arten von Hörschädigungen.

http://www.

Literaturverzeichnis

hgz-aachen.de/information-zur-hoerschaedigung/

arten-von-hoerschaedigungen/index.php. [Letzter Abruf: 21.06.2018].

[9]

Schwerhörigkeit: Therapie und Selbsthilfe.

https:

//www.apotheken-umschau.de/Schwerhoerigkeit/

Schwerhoerigkeit-Therapie-und-Selbsthilfe-11804_10.html

2017. [Letzter Abruf: 10.06.2018].

[10]

Björn Behrendt. App.

https://www.gruenderszene.de/lexikon/

begriffe/app. [Letzter Abruf: 13.06.2018].

[11]

Native App.

https://de.ryte.com/wiki/Native_App

, 2018. [Letzter Abruf:

16.06.2018].

[12]

Marvin Sommershof. Verschieden Arten von Apps.

https://

digitalgefesselt.de/apps-aller-arten/

, 2016. [Letzter Abruf:

21.06.2018].

[13]

Raluca Budiu. Mobile: Native Apps, Web Apps, and Hybrid Apps.

https://

www.nngroup.com/articles/mobile-native-apps/

, 2013. [Letzter Abruf:

22.06.2018].

[14]

Ios-Betriebssystem.

https://www.toptarif.de/handy/wissen/

ios-betriebssystem/. [Letzter Abruf: 12.06.2018].

[15]

Vergleich der Marktantanteile von Android und iOS am Absatz von

Smartphones in Deutschland von Januar 2012 bis März.

https:

//de.statista.com/statistik/daten/studie/182363/umfrage/

prognostizierte-marktanteile-bei-smartphone-betriebssystemen/

[Letzter Abruf: 22.06.2018].

[16]

Ralf Trautmann. Android: Googles Smartphone-System.

https://www.

teltarif.de/handy/betriebssysteme/android.html

. [Letzter Abruf:

15.06.2018].

[17]

Android Betriebssystem.

https://www.toptarif.de/handy/wissen/

android-betriebssystem/. [Letzter Abruf: 12.06.2018].

Literaturverzeichnis

[18]

Was ist eigentlich Android?

https://www.

t-online.de/digital/smartphone/id_49385388/

was-ist-android-google-android-klipp-und-klar-.html

. [Letz-

ter Abruf: 01.06.2018].

[19]

Prognose zu den Marktanteilen der Betriebssysteme am Absatz

vom Smartphones weltweit in den Jahren 2018 und 2022.

https:

//de.statista.com/statistik/daten/studie/182363/umfrage/

prognostizierte-marktanteile-bei-smartphone-betriebssystemen/

[Letzter Abruf: 21.06.2018].

[20]

Design Guidelines.

https://www.interaction-design.org/literature/

topics/design-guidelines. [Letzter Abruf: 21.06.2018].

[21]

kulturbanause. Was ist Material Design.

https://kulturbanause.de/faq/

material-design/. [Letzter Abruf: 21.05.2018].

[22]

Lisa Gringl. Das ist Material Design.

http://mfg.fhstp.ac.at/allgemein/

das-ist-material-design/, 2014. [Letzter Abruf: 21.05.2018].

[23]

Melanie Petersen. Leitfaden für Material Design: Google veröf-

fentlicht Style-Guide für Android-Apps.

https://t3n.de/news/

leitfaden-fuer-material-design-575047/

, 2014. [Letzter Abruf:

21.05.2018].

[24]

Google Inc. Styles and Themes.

https://developer.android.com/guide/

topics/ui/look-and-feel/themes, 2018. [Letzter Abruf: 02.06.2018].

[25]

Katharina Lauer. Der Material Design-Style: Farben, Typoraphie und Bilder.

https:

//www.pixlscript.de/blog/material-design-style-webdesign.

html, 2014. [Letzter Abruf: 22.05.2018].

[26]

Google Inc. The color system.

https://material.io/design/

color/the-color-system.html#color-theme-creation

. [Letzter Abruf:

27.05.2018].

[27]

Google Inc. Icons.

https://material.io/tools/icons/?icon=search&

style=baseline. [Letzter Abruf: 08.06.2018].

Literaturverzeichnis

[28]

Google Inc. Product icons.

https://material.io/design/iconography/#

[Letzter Abruf: 08.06.2018].

[29]

Florian Kalenda. Google macht seine Schrift Ro-

boto quelloffen.

https://www.zdnet.de/88235788/

google-macht-seine-schrift-roboto-quelloffen/

, 2015. [Letzter

Abruf: 12.06.2018].

[30]

Was sind die Human Interface Guidelines?

https://desiign.de/

faq/was-sind-die-human-interface-guidelines/

. [Letzter Abruf:

14.06.2018].

[31]

Apple Inc. iOS Design Themes.

https://developer.apple.com/design/

human-interface-guidelines/ios/overview/themes/

. [Letzter Abruf:

17.06.2018].

[32]

Apple Inc. Color.

https://developer.apple.com/design/

human-interface-guidelines/ios/visual-design/color/

. [Letz-

ter Abruf: 18.06.2018].

[33]

Apple Inc. App icon.

https://developer.apple.com/design/

human-interface-guidelines/ios/icons-and-images/app-icon/

[Letzter Abruf: 30.05.2018].

[34]

David Kadavy. Apples san francisco font.

https://designforhackers.com/

blog/san-francisco-font/. [Letzter Abruf: 30.05.2018].

[35]

Max Rudberg. UI Design for iPone X: Bottom Ele-

ments.

http://blog.maxrudberg.com/post/165590234593/

ui-design-for-iphone-x-bottom-elements

, 2017. [Letzter Abruf:

20.06.2018].

[36]

Survio s.r.o. Kostenlos Umfrage erstellen.

https://www.survio.com/de/

[Letzter Abruf: 19.06.2018].

[37]

R. Heini. Funktionale, nicht funktionale anforderungen.

http://www.

anforderungsmanagement.ch/in_depth_vertiefung/funktionale_

Literaturverzeichnis

nicht_funktionale_anforderungen/index.html

. [Letzter Abruf:

31.05.2018].

[38]

Nick Babich. Prototyping 101: The Difference between Low-Fidelity and High-

Fidelity Prototypes and When to Use Each.

https://theblog.adobe.com/

prototyping-difference-low-fidelity-high-fidelity-prototypes-use/

2017. [Letzter Abruf: 18.06.2018].

[39]

Heidi Tarkpea. Worauf es bei einem guten Logodesign an-

kommt.

https://www.selbstaendig-im-netz.de/selbstaendig/

worauf-es-bei-einem-guten-logodesign-ankommt/

, 2010. [Letzter

Abruf: 19.06.2018].

[40]

Professor Dr. med. Thomas Lenarz. Das Audiogramm verstehen.

https://www.

hoerzentrum-hannover.de/diagnose/das-audiogramm-verstehen/

[Letzter Abruf: 21.06.2018].

[41]

Umfragen erstellen und auswerten.

http://www.riepel.net/umfragen/

Fragetypen.pdf. [Letzter Abruf: 15.06.2018].

Name: Tolga Bas Matrikelnummer: 747894

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 .............................................................................

Tolga Bas