scieee Science in your language
[en] (orig)
Universität Ulm | 89069 Ulm | Germany Fakultät für
Ingenieurwissenschaften,
Informatik und
Psychologie
Institut für Datenbanken
und Informationssysteme
Entwicklung eines Designkonzepts für
unterschiedliche Anwendungsszenarien
eines generischen Fragebogensystems
Bachelorarbeit an der Universität Ulm
Vorgelegt von:
Andrea Reidel
[email protected]
Gutachter:
Prof. Dr. Manfred Reichert
Betreuer:
Johannes Schobel
2015
Fassung 22. Januar 2016
c
2015 Andrea Reidel
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
Im Bereich der Datengewinnung ist die Verwendung papierbasierter Fragebögen weit
verbreitet. Vor allem in der Medizin und der Psychologie sind Fragebögen ein wichtiges
und oft genutztes Werkzeug. Häufig steht die Auswertung allerdings mit viel Aufwand
in Verbindung, da Antworten teilweise von Hand digitalisiert werden müssen. Zudem
wird für größere Umfragen viel Papier verwendet, das im Nachhinein viel Volumen in
der Lagerung beansprucht und umständlich zu transportieren ist. Diese Probleme sind
Gegenstand unterschiedlicher Forschungsprojekte. Mit Hilfe eines Konfigurators können
Fragebögen erstellt werden, die anschließend innerhalb einer Applikation für Mobilgeräte
bearbeitet und ausgewertet werden können.
Im Rahmen dieser Arbeit wird das User Interface der Client-Anwendung für Mobilgeräte
mit dem Betriebssystem Android 5.0 entworfen. Hierfür werden Aktivitäten des Usability
Engineering durchgeführt, um eine möglichst hohe Akzeptanz der Benutzer zu erwirken.
Wichtige Schritte dabei sind die Erarbeitung von Anwendungsszenarien, um die Anfor-
derungen an die Anwendung zu erfassen. Als Resultat wird ein Styleguide entwickelt,
der auf den Ergebnissen der Anforderungsanalyse sowie dem plattformspezifischen
Material Design Styleguide basiert.
iii
Inhaltsverzeichnis
1 Einführung 1
1.1 ZielderArbeit.................................. 2
1.2 AufbauderArbeit................................ 3
2 Grundlagen 5
2.1 Digitale Datenerhebung . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 UsabilityEngineering.............................. 6
3 Anforderungsanalyse 9
3.1 Ist-Stand .................................... 9
3.2 Anwendungsszenarien............................. 13
3.2.1 Szenario 1: Asylanträge . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2.2 Szenario 2: Schule . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2.3 Erkenntnisse .............................. 20
3.3 Usability-Ziele.................................. 22
4 User-Interface Entwurf 25
4.1 Änderungen im Arbeitsfluss . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.2 Konzeptueller User-Interface Entwurf . . . . . . . . . . . . . . . . . . . . . 29
4.3 Mockups .................................... 33
5 Styleguide 39
5.1 Farbkonzept................................... 39
5.2 Icons....................................... 42
5.3 Themes..................................... 43
5.4 Typografie.................................... 44
6 Zusammenfassung 47
v
1
Einführung
In vielen Fachbereichen werden Daten erhoben und anschließend ausgewertet. Eine
wichtige Methode ist dabei die Erstellung einer Umfrage, bei der Teilnehmer papierbasier-
te Fragebögen ausfüllen. Die Antworten werden anschließend oft von Hand digitalisiert,
was einen großen Arbeitsaufwand darstellt. Dabei könnten Umfragen auch direkt am
Computer durchgeführt werden. Zum einen bieten sich dafür webbasierte Lösungen an
(vgl. Liste für Umfrage-Tools in [
1
]), zum anderen könnten Fragebögen mit der aktuellen
Technik auch auf Mobilgeräten umgesetzt werden.
Ein weiterer motivierender Aspekt ist die Verbreitung mobiler Geräte in der Gesellschaft.
Wie in Abbildung 1.1 zu sehen ist, ist die Zahl der Smartphone-Nutzer in den letzten
Jahren nahezu kontinuierlich gestiegen. Aus diesem Grund lohnt es sich, Ressourcen in
die Entwicklung mobiler Anwendungen zu stecken.
Im Rahmen des Projekts QuestionSys wurde am Institut für Datenbanken und Informa-
tionssysteme (DBIS) der Universität Ulm ein System entwickelt, mit dem Fragebögen
erstellt, verwaltet und ausgewertet werden können. Der Aufbau der Fragebögen basiert
auf einem dafür entwickelten Prozessmodell [3, 4].
1
1 Einführung
PersoneninMillionen
6,31
8,43
14,03
17,8
21,3
24
27,3
29,5 31
33,4
35,7
37,4
40,4 41,1
45,6 46
AnzahlderSmartphone-NutzerinDeutschlandindenJahren2009bis2015(in
Millionen)
Jan.
2009
Jan.
2010
Dez.
2010
Jul.
2011
Dez.
2011
Mrz.
2012
Jul.
2012
Okt.
2012
Dez.
2012
Feb.
2013
Jun.
2013
Okt.
2013
Feb.
2014
Mai
2014
Feb.
2015
Jul.
2015
Source:
©Statista2015
0
10
20
30
40
50
WeitereInformationen:
Deutschland
Abbildung 1.1:
Anzahl der Smartphonebenutzer in Deutschland im Zeitraum von 2009
bis 2015 [2].
1.1 Ziel der Arbeit
Im Rahmen dieser Arbeit steht die Client-Anwendung im Fokus. Für ebendiese soll mit
Hilfe einiger Usability-Aktivitäten ein benutzerfreundliches Interface für Mobilgeräte mit
dem Betriebssystem Android 5.0 gestaltet werden. Da die zu entwickelnde Applikation
in den meisten Fällen freiwillig verwendet werden soll, ist eine ansprechende, intuitive
und aufgabenangemessene Gestaltung von großer Wichtigkeit.
Ein weiteres Ziel ist es, durch Anwendungsszenarien Informationen über Endbenutzer
zu gewinnen und zu analysieren, ob neue Funktionalitäten sinnvoll sind oder vorhandene
Funktionen überarbeitet werden müssen. Beispielsweise benötigen manche Benutzer
je nach Situation eine direkte Auswertung der erhobenen Daten, während andere
Informationen gespeichert und zu einem späteren Zeitpunkt anonymisiert ausgewertet
werden.
2
1.2 Aufbau der Arbeit
1.2 Aufbau der Arbeit
In diesem Abschnitt soll ein Einblick über die folgende Vorgehensweise gegeben werden.
Nachdem in Kapitel 2 Grundlagen zu Usability Engineering und der Idee hinter der
Digitalisierung von Umfragen erläutert werden, soll in den Kapiteln 3 bis 5 ein Usability-
Konzept erarbeitet werden. Dazu wird zunächst eine Anforderungsanalyse durchgeführt,
gefolgt von User-Interface Entwürfen. Aus den Kapiteln 3 und 4 resultieren dann Er-
gebnisse, die in den Styleguide in Kapitel 5 einfließen. In Kapitel 6 wird noch einmal
zusammengefasst, was im Vorhergehenden entwickelt wurde.
Eine Übersicht zum Aufbau der Arbeit befindet sich in Abbildung 1.2.
Kapitel 2
Grundlagen
Warum soll Datenerhebung digitalisiert werden?
Wie geht man bei der Entwicklung vor?
Wieso ist Usability wichtig?
Welche Farben werden verwendet?
Wie sieht das Icon der Applikation aus?
Welche Schriftarten werden eingesetzt?
Wie werden Aufgaben aktuell bearbeitet?
Von wem wird das System verwendet?
Welche Aufgaben werden damit bearbeitet?
Welche Anforderungen sind wichtig?
Verändern sich Arbeitsabläufe grundlegend?
Wie sieht die Navigation aus?
Wie sehen die Hauptansichten grob aus?
Wie werden Elemente wie Listen dargestellt?
Kapitel 3
Anforderungsanalyse
Kapitel 4
User-Interface Entwurf
Kapitel 5
Styleguide
Was wurde genau gemacht?
Was sind die Ergebnisse?
Was könnte weiter geplant werden?
Kapitel 6
Zusammenfassung
Abbildung 1.2:
Aufbau dieser Arbeit. Zudem werden wichtige Fragen aufgeführt, die in
den jeweiligen Kapiteln beantwortet werden.
3
2
Grundlagen
Zunächst soll für die folgenden Kapitel ein grundlegendes Verständnis für das Projekt
QuestionSys und die dahinterstehende Idee geschaffen werden, sowie für die Vorge-
hensweise bei der Erarbeitung eines Design-Konzepts.
2.1 Digitale Datenerhebung
Daten mithilfe von Fragebögen zu erfassen ist eine gängige Vorgehensweise. Gerade
in der Medizin oder der Psychologie werden hauptsächlich papierbasierte Fragebögen
verwendet. Die damit erhobenen Daten werden anschließend am Computer ausgewertet.
Diese Methode bringt allerdings einige Nachteile mit sich. Zum einen kostet die Digitali-
sierung der Antworten viel Zeit, zum anderen stellt sie eine potentielle Fehlerquelle dar,
da Daten falsch übertragen werden könnten [5].
Ein weiteres Argument, welches gegen papierbasierte Fragebögen spricht, sind die
benötigten Ressourcen. Je mehr Menschen an einer Umfrage teilnehmen sollen, desto
mehr gedruckte Exemplare werden benötigt und desto mehr Papier wird verbraucht.
Wurden die Daten dann analysiert, sind die ausgefüllten Bögen wertlos und können
archiviert werden. Die Archivierung benötigt Lagerplatz, was langfristig zu einem Platz-
problem führen kann [5].
[
6
,
4
] stellt eine mögliche Lösung für dieses Problem dar, indem Daten über Fragebögen
auf mobilen Geräten gesammelt werden. Da Tablets und Smartphones im Alltag bereits
allgegenwärtig sind, kann diese Idee ohne großen Aufwand in allen Domänen angewen-
det werden. Zudem entgeht man dem Papierbedarf und dem Arbeitsaufwand, der hinter
5
2 Grundlagen
der Übertragung und Auswertung der Daten steckt.
Abbildung 2.1: Übersicht des generischen Fragebogensystems QuestionSys [7].
Die komplette Projektidee für das Framework QuestionSys umfasst, wie in Abbildung 2.1
zu sehen ist, drei Teile: den Editor Questioneer, mit dessen Hilfe Fragebögen erstellt und
bearbeitet werden können, die Applikation Questionnaire, über die Fragebögen (hier: auf
mobilen Geräten) ausgefüllt werden können und zuletzt die Middleware Questionizer, die
sich um die Verwaltung und Sicherheit der Daten kümmert [
3
]. Damit deckt das System
den kompletten Lebenszyklus eines Fragebogens ab.
Im Folgenden steht die Applikation zur Datenerfassung im Fokus, besonders die Funk-
tionen des Administrators, der die Fragebögen verwaltet und Auswertungen vornimmt.
2.2 Usability Engineering
Im Rahmen dieser Arbeit soll ein Usability-Konzept entwickelt werden. Um dafür die
Grundlagen zu schaffen, soll nun das Thema Usability etwas näher beleuchtet werden.
Der Begriff Usability beschäftigt sich mit der Gebrauchstauglichkeit von Software, also
der Software Ergonomie. Dies bedeutet, dass gemessen wird, wie effizient, effektiv und
zufriedenstellend ein System für die Endnutzer ist. Es sollte möglich sein, Aufgaben
frustfrei und mit angemessenem Werkzeug und Aufwand zu erledigen [
8
]. Zudem sollte
6
2.2 Usability Engineering
ein System leicht erlernbar und einprägsam sein und möglichst fehlertolerant [9].
Um gute Usability zu erreichen, sollten verschiedene Maßnahmen getroffen werden.
Im Idealfall sollte bereits vor und während der Entwicklungsphase interaktiver Systeme
Usability Engineering betrieben werden. Das bedeutet vor allem, dass die Endbenutzer
mit in den Entwicklungsprozess einbezogen werden müssen, um korrekte und vollstän-
dige Informationen über die Anforderungen an das System zu erhalten. Zudem sollte
man genau wissen, welche Aufgaben mit Hilfe der Software zu bewältigen sind, um die
notwendigen Funktionalitäten an der richtigen Stelle bereitzustellen.
Auftraggeberprojekt
Auftragnehmerprojekt
Auftraggeber-
projekt
Planung
Kontextanalyse
Projektvorbereitung
Implementie-
rung und Test
Nutzung und
Pflege
Impuls für
Anwendungs-
entwicklung
Projektvor-
bereitung
Sensibilisierung
für Usability
(Gebrauchs-
tauglichkeit)
Kosten/Nutzen-
analyse
Ist-Analyse
Analyse des
Nutzungskontexts:
o Benutzer
o Arbeitsaufgaben
o Arbeitsumgebung
Spezifikation von
Nutzungsan-
forderungen
Lead-User-Interview
Ausschreibung mit
Usability als
Produktqualität
Marketing-
Unterstützung
Angebot und
Vertrag
Planung von
Usability-Aktivitäten
Projektspezifische
Festlegungen
Rollenverteilung
Design-
Regelwerk
fortschreiben
Unterstützung
des Designs und
Begleitung der
Implemen-
tierung
Entwicklungs-
begleitende
Usability-Tests
Abnahmetest
Einführungsprojekt
Konfiguration des
Produkts
Benutzerschulung
Feedback von
Benutzern
auswerten
Pflegeprozess
Vorbereitung des
nächsten Release
Benutzerbeteiligung
Qualitätsmanagement
Abbildung 2.2:
Gestaltungsrahmen nach dem Leitfaden Usability Engineering [
10
], auf-
geteilt in Phasen, die in die einzelnen Schritte des Softwareentwicklungs-
prozesses eingegliedert werden können.
7
2 Grundlagen
Dies und weiteres findet sich in dem Leitfaden Usability [
10
] der Deutschen Akkreditie-
rungsstelle. Das im Leitfaden vorgestellte Modell (Abbildung 2.2) bietet eine Methodik,
durch die Usability Engineering in einem Softwareentwicklungsprozess zum integralen
Bestandteil wird. In jeder Phase des Modells sind somit auch Arbeitsschritte zum Thema
Software Ergonomie eingeplant. Beispielsweise sollte das Thema Usability bereits in
der Planungsphase berücksichtigt werden, um dafür anfallende Kosten einzukalkulieren.
Später sollte neben der Softwarearchitektur auch das User-Interface entwickelt werden,
damit sich Benutzer gut damit zurechtfinden.
Da es sich im Kontext dieser Arbeit um eine Applikation für ein mobiles Gerät handelt, die
teilweise schon umgesetzt wurde, ist es nicht nötig das gesamte Modell zu betrachten
und zu berücksichtigen. Sowohl Mayhew [
11
], als auch der Usability Engineering Leitfa-
den [
10
] beschreiben, dass das Vorgehensmodell an das individuelle Projekt angepasst
werden muss. Dazu gehört auch, Schritte gegebenenfalls in ihrer Reihenfolge zu ändern
oder wegzulassen.
Im Rahmen dieser Arbeit können die Phasen Planung und Projektvorbereitung über-
sprungen werden, da diese bereits zu einem früheren Zeitpunkt durchgeführt wurden. Im
Folgenden Kapitel wird direkt zur Analyse des Nutzungskontext, oder auch der Anforde-
rungsanalyse, übergegangen. Da es hier nur um ein Konzept geht, werden die Phasen
Implementierung und Tests, sowie Nutzung und Pflege vorerst außer Acht gelassen.
Wichtig ist die genaue Spezifikation der Anforderungen. Dies erreicht man durch Analyse
vorhandener Systeme, sowie die Betrachtung der Endnutzer und den Aufgaben, die sie
damit bewältigen sollen. Die letzten zwei Punkte können durch Szenarien abgedeckt
werden, in denen man verschiedene Situationen betrachtet und Erkenntnisse daraus
zieht. Anschließend werden erste Entwürfe der Benutzeroberflächen entwickelt und
evaluiert. Diese bilden schließlich die Grundlage für den Styleguide.
8
3
Anforderungsanalyse
Um möglichst detaillierte und korrekte Anforderungen als Grundlage für den Entwurf zu
erhalten, ist es wichtig, den Nutzungskontext genau zu betrachten. Dazu gehören die
Endbenutzer und deren Arbeitsumfeld, sowie die Aufgaben, die mithilfe des Systems
erledigt werden sollen.
Schritte, die im Rahmen der Anforderungsanalyse durchzuführen sind, sind beispiels-
weise die Betrachtung des Ist-Stands und die Analyse des Benutzungskontext. Daraus
ergeben sich qualitative und quantitative Usability-Ziele. Des Weiteren sollte man sich
über die Hardware- und Softwarerandbedingungen sowie gegebenenfalls über vorhan-
dene Designprinzipien klar werden [11].
3.1 Ist-Stand
Zunächst ist es sinnvoll sich anzuschauen, wie die Aufgaben des zukünftigen Systems
zum aktuellen Zeitpunkt erledigt werden. Das können Altsysteme sein, aber auch die
Abarbeitung der Aufgaben von Hand beziehungsweise auf Papier. Während dieser
Betrachtung kann festgestellt werden, was am Ist-Stand besonders gut oder schlecht
umgesetzt ist und daraus Verbesserungsvorschläge formulieren. Um Mängel am Ist-
Stand zu finden ist es beispielsweise sinnvoll, Angestellte zum alten System oder zum
aktuellen Ablauf zu befragen.
Als Grundlage für die Ist-Stand-Analyse, die im Rahmen dieser Arbeit durchgeführt
wird, dienen die Ansätze aus bereits umgesetzten Abschlussarbeiten [
12
,
13
]. Nach
[
10
] ist es in dieser Situation sinnvoll, die vorhandenen Dokumente zu analysieren, um
sich einen Überblick über Konzepte, Hard-, und Software zu verschaffen. Anschließend
9
3 Anforderungsanalyse
können Anwendungsfälle erstellt werden, damit ermittelt werden kann, wo Probleme im
Altsystem sind und wie diese durch Veränderungen behoben werden können.
In [
13
] stand das Modellierungskonzept für den Fragebogen-Konfigurator im Vordergrund.
Es entstanden aber auch Entwürfe für die Applikation zur Ausführung der Fragebögen,
sowie Styleguides für beide Teilbereiche des Systems. Zielplattform dieser Arbeiten war
Apple’s iPad 4 und damit das Betriebssystem iOS.
Startet man die Applikation, erscheint zunächst ein Splashscreen (siehe
Abbildung 3.1
,
links), kurz darauf folgt die Startseite (siehe Abbildung 3.1, rechts) mit einer Über-
sicht möglicher Fragebögen. Diese sind in verfügbare und pausierte Fragebögen(-Sets)
eingeteilt.
Abbildung 3.1:
Die Applikation startet mit einem Splashscreen, worauf nach kurzer Zeit
die Startseite folgt. Inhalte dieser Grafik stammen aus [13].
Das User-Interface Design der Startseite ist im iOS-Style gestaltet und in schlichten
Grautönen gehalten. Die Actionbar am oberen Rand ermöglicht den Zugang zum Ad-
ministrationsbereich und bietet die Möglichkeit zur Sprachumstellung der Applikation.
Charakteristisch für das iOS-Design sind beispielsweise die stark abgerundeten Ecken
sowie die Verwendung von Farbverläufen.
Ein besonders interessanter Bereich ist der des Administrators. Auch hierzu existieren
erste Entwürfe. Nachdem man sich als Administrator mit entsprechenden Daten einloggt,
gelangt man zunächst zu einer Übersichtsseite. Auffällig hierbei ist, dass in diesem
Bereich permanent eine Seitenleiste am linken Rand zu sehen ist (siehe
Abbildung 3.2
).
10
3.1 Ist-Stand
Abbildung 3.2: Die Startseite des geschützten Administrator-Bereichs.
Am oberen Rand dieser Spalte befindet sich ein Button mit der Aufschrift „Startseite“,
über den man sich wieder ausloggt und zurück zum normalen Benutzerbereich zurück-
kehrt. Sinnvoller wäre es an dieser Stelle zu kennzeichnen, dass man sich ausloggt,
indem man die Aufschrift des Buttons anpasst.
Nun hat man als Administrator die Möglichkeiten, Downloads, Befragungen, Benutzer
und Sensoren zu verwalten, allgemeine Einstellungen zu bearbeiten, sowie Serverpara-
meter anzupassen. Unter dem Menüpunkt Befragungen befindet sich eine Übersicht aller
Umfragen. Wählt man eine aus, gelangt man zu einer Liste aller pausierten und vollstän-
dig ausgefüllten Fragebögen. Hier könnte man über eine übersichtlichere Darstellung
und Trennung der Fragebögen verschiedener Zustände in mehrere Tabs nachdenken.
Man muss zudem zwischen dem Fragebogenmodell und den Instanzen, die von Teil-
nehmern einer Studie ausgefüllt wurden, unterscheiden. Diese Trennung kann durch
Hierarchien in der Navigation wie in Abbildung 3.3 deutlich gemacht werden. Des wei-
teren können Fragebögen verschiedene Zustände annehmen, wie aktiviert,deaktiviert
oder archiviert. Man sollte nicht nur auf einzelne Instanzen zugreifen können, sondern
auch auf die zugrunde liegenden Modelle.
11
3 Anforderungsanalyse
Fragebogenmodell
„Rauchen“
Fragebogenmodell
„Schwangerschaft“
Fragebogen 1: ausgefüllt am 12.05.2014
Fragebogen 2: ausgefüllt am 13.05.2014
Fragebogen m: ausgefüllt am 23.05.2014
.
.
.
Fragebogen 1: ausgefüllt am 12.05.2014
Fragebogen 2: ausgefüllt am 13.05.2014
Fragebogen m: ausgefüllt am 23.05.2014
.
.
.
Startseite
Abbildung 3.3: Hierarchische Navigation für Fragebogenmodelle und deren Instanzen.
Wie in Abbildung 3.4 zu sehen ist, befinden sich an manchen Fragebögen bunte Markie-
rungen in Form von kleinen Fähnchen. Als Administrator hat man die Möglichkeit, Farben
bestimmte Bedeutungen zuzuweisen und so Markierungen an Fragebogen-Modellen
und deren Instanzen anzubringen. Es können beispielsweise ausgefüllte Fragebögen rot
markiert werden, wenn dort Klärungsbedarf mit dem Patienten bestehen sollte, von dem
die Daten stammen. Ein anderes Beispiel wäre, fehlerhafte Modelle zu kennzeichnen,
um diese später überarbeiten zu können.
Ein weiterer Punkt, der untersucht werden sollte, ist die Navigation. Diese bietet viel
Verbesserungspotential. In Abbildung 3.4 ist erkennbar, dass vor allem durch die Seiten-
leiste viele Pfade von der aktuellen Seite weg führen. Doch auch in der Actionbar gibt es
Möglichkeiten, einen Schritt zurück zu gehen oder zur Startseite zurückzukehren. Diese
Navigationsstruktur könnte durch eine Breadcrumb Navigation oder eine intuitive Darstel-
lung von Aktionen, wie Ausloggen oder Bearbeiten, aufgewertet werden. So könnte der
Benutzer sich leichter orientieren und schneller differenzieren, welche Kontrollelemente
für Navigation und Aktionen zuständig sind.
Nachdem man nun einen Überblick über das vorhandene System hat, werden im Fol-
12
3.2 Anwendungsszenarien
Abbildung 3.4: Die Startseite des passwortgeschützten Administrator-Bereichs [13].
genden Szenarien entwickelt, die Aufschluss über die Benutzung des Systems geben,
wenn man ein bestimmtes Ziel verfolgt. Im Idealfall können Fehler in der Gestaltung
vermieden oder fehlende Funktionen identifiziert werden.
3.2 Anwendungsszenarien
In diesem Kapitel werden verschiedene Szenarien betrachtet, in denen das neue System
zum Einsatz kommen könnte. Dadurch können Erkenntnisse über das Benutzerverhalten
und die Aufgabenangemessenheit gewonnen werden. Zudem können Anforderungen
an das System definiert werden, die aufgrund des Standorts nötig sind.
Nach [
9
] sollte in einem Szenario genau festgelegt werden, wer mit welcher Hardware
welches Ziel erreicht und unter welchen Umständen dies geschieht, sowie in welchem
Zeitraum.
13
3 Anforderungsanalyse
3.2.1 Szenario 1: Asylanträge
Die Motivation hinter diesem Szenario ist die große Zahl der Flüchtlinge, die vor allem
aufgrund von Kriegen ihre Heimat verlassen und in Europa Zuflucht suchen. Die Sta-
tistik in Abbildung 3.5 verdeutlicht, dass die Zahl der Asylsuchenden in Deutschland in
den letzten Jahren deutlich gestiegen ist. Besonders dieses Jahr sind die Ämter und
Erstaufnahmelager mit der Zahl ankommender Flüchtlinge weitgehend überfordert. Über
mehr als 200.000 Asylanträge musste das Bundesamt für Migration und Flüchtlinge
(BAMF) seit Beginn des Jahres 2015 entscheiden, weswegen die Bearbeitungszeit eines
Asylantrags um die fünf Monate betragen kann.
Die Client-Anwendung für Mobilgeräte des Projekts QuestionSys bietet für dieses Pro-
blem einen Lösungsansatz, indem direkt alle für einen Asylantrag relevanten Daten über
die App auf einem Mobilgerät gesammelt und ausgewertet werden können. Die dafür
notwendigen Fragebögen können auf dem Client zur Verfügung gestellt und von den
Antragstellern ausgefüllt werden. Bestimmte Angaben könnten dabei sofort evaluiert
werden, sodass Flüchtlinge direkt Rückmeldung zu ihrem Asylverfahren erhalten.
In Abbildung 3.6 ist der Verlauf eines Asylverfahrens schematisch dargestellt. Nach der
Aufnahme und Registrierung in einem Erstaufnahmelager können Flüchtlinge vor Ort
persönlich einen Asylantrag stellen. Wenige Wochen später steht eine wichtige Anhörung
an, in der unter anderem begründet werden muss, warum man Asyl erhalten möchte.
Daraufhin entscheiden die Mitarbeiter des BAMF über den Antrag. Alternativ zur Ableh-
nung wird dem Flüchtling entweder Asyl gewährt, eine befristete Aufenthaltserlaubnis
gegeben oder die Duldung bis zur Abschiebung.
In diesem Szenario geht es nun um den 42-jährigen Djamal, der mit seiner Frau und
zwei Söhnen aus seiner Heimat Syrien vor dem Krieg geflohen ist. Nachdem sie es nun
bis nach Deutschland geschafft hatten, landeten sie im Münchener Erstaufnahmelager.
Da sich Djamal vor allem für seine Kinder eine bessere Zukunft wünschte und ihnen
diese Chance in Deutschland bieten wollte, plante er Asyl zu beantragen. Dazu ging er
zu den ausgewiesenen Außendienststellen des BAMF auf dem Gelände des Lagers.
Dort standen bereits ungefähr 30 Menschen mit demselben Ziel. Das BAMF hatte als
Unterstützung für die Mitarbeiter Tablets zur Verfügung gestellt, an denen Flüchtlinge
14
3.2 Anwendungsszenarien
AnzahlderAsylanträge(Erstanträge)
18.415 18.748 17.059
21.679 22.775
28.681
24.504 23.758
32.705 34.384 33.447
40.487
52.730
AnzahlderAsylanträge(Erstanträge)inDeutschlandvonOktober2014bis
Oktober2015
Okt
14
Nov
14
Dez
14
Jan
15
Feb
15
Mär
15
Apr
15
Mai
15
Jun
15
Jul15 Aug
15
Sep
15
Okt
15
Quelle:
BAMF
©Statista2015
0
10.000
20.000
30.000
40.000
50.000
60.000
WeitereInformationen:
Deutschland
Abbildung 3.5:
Anzahl der Asylanträge (Erstanträge) in Deutschland von Oktober 2014
bis Oktober 2015 [14].
selbstständig ihren Asylantrag ausfüllen konnten. Für Menschen wie Djamal, die we-
der Deutsch noch Englisch beherrschten, wurde der Antrag in weiteren Sprachen wie
Arabisch zur Verfügung gestellt (siehe Abbildung 3.7, links). So konnte der Asylantrag
selbstständig (unter Verwendung der Hinweise zu jeder Frage) ausgefüllt und abge-
schickt werden und entlastete so das Personal des BAMF.
Mit Hilfe der angegebenen Daten konnten sich die Beteiligten der Anhörung seitens der
Behörden vorbereiten. Weil Djamal und seine Familie als Herkunftsland Syrien angege-
ben hatten, standen die Chancen auf Asyl gut. Das hatte ihnen auch die Applikation nach
Abgabe des Asylantrags angezeigt. Solche kleineren Auswertungen konnte das System
direkt nach Abgabe des Fragebogens durchführen und dem Benutzer somit unmittelbar
danach Feedback geben. Natürlich stand erst nach der Anhörung mit Sicherheit fest, ob
ein Asylantrag abgelehnt wurde oder nicht.
Djamal und seine Frau schafften es, den Antrag innerhalb von 45 Minuten durchzuar-
15
3 Anforderungsanalyse
Abbildung 3.6: Überblick über das Asylverfahren in Deutschland [15].
beiten und vollständig auszufüllen. Keiner von beiden hatte wirklich viel Erfahrung im
Umgang mit Tablets, weswegen sie sich zunächst eingewöhnen mussten. Die Infoboxen
waren ihnen eine große Hilfe beim Ausfüllen einzelner Fragen, da dort nochmals genauer
erläutert wurde, worauf die Frage abzielte.
Dieses Szenario zeigt deutlich, dass Datenschutz eine wichtige Anforderung an die
Applikation ist. Hier werden vom Benutzer sehr sensible Daten eingegeben, die für
Unberechtigte unzugänglich sein müssen. Um die Fragebögen einsehen zu können,
muss sich der Administrator daher auch mit einem Passwort im System authentifizieren.
16
3.2 Anwendungsszenarien
English
Deutsch
română
русский
Türkçe
Asylverfahren von:
___________________
Geboren am:
___________________
Geboren in:
___________________
Ja oder nein?
Ja Nein
Nochmal Ja oder nein?
Ergebnis:
Sie haben angegeben,
dass Sie aus XXX
kommen. Dieses Land
steht auf der Liste der
sicheren Länder. Daher
können wir Ihnen in
Deutschland kein Asyl
gewähren.
Bei weiteren Fragen
melden Sie sich unter
07344/849 372 oder
unter www.asyl.de.
In Kürze werden Sie
Abbildung 3.7: Einsatz von QuestionSys im Ayslverfahren.
3.2.2 Szenario 2: Schule
Dieses Szenario thematisiert den Trend, dass sich Tablets und Smartphones in der
Gesellschaft immer weiter verbreiten und im Alltag etablieren. Selbst in manchen Schulen
werden mobile Geräte bereits in den Unterricht mit einbezogen, da sie Vorteile mit sich
bringen. Ein Tablet beziehungsweise ein Tablet PC ist beispielsweise deutlich leichter als
ein Laptop oder Desktop PC und kann durch ein Touch-Display, sowie einen Eingabestift
intuitiv bedient werden. Darüber hinaus wirkt sich die Verwendung eines mobilen Gerätes
positiv auf das Lernverhalten der Schüler aus. Wie sich gezeigt hat, erhöht es die
Motivation der Schüler, wenn eine Aufgabe mit Hilfe eines Tablet PCs bearbeitet werden
soll [
16
]. Dass die Schulkinder eine positive Meinung zur Integration von Mobilgeräten in
den Schulalltag haben, ist auch in [
17
] erkennbar. Hier erläutern die Schüler, dass Tablet
PCs nicht nur nützlich seien, sondern auch Spaß machen würden. Zudem müsste man
keine Schulbücher mehr herumtragen, da diese sich auf dem Gerät befänden. Doch
nicht alle Schüler nutzen die Mobilgeräte zu ihren Vorteilen. In [
17
] wird diskutiert, dass
sich manche durch den Tablet PC ablenken lassen, statt Hausaufgaben zu machen, oder
das Gerät in Pausen der Kommunikation mit Mitschülern vorziehen. Auch in [
18
] werden
die Vor- und Nachteile abgewägt, ob Tablets im Unterricht sinnvoll sind. Die Anschaffung
17
3 Anforderungsanalyse
der Geräte kostet viel Geld, da dies meist mit weiterer Hardware wie Servern einhergeht,
weswegen man sich vorher Gedanken dazu machen sollte.
Ergebnis:
Klausuren:
Deutsch Klausur 2
10:20 Uhr – 12:05 Uhr
Erdkunde Klausur 1
07:45 Uhr – 09:20 Uhr
Fragebögen Fragebögen
Aufgabe 1: 3P
Beantworte mit Hilfe des Diagram ms die
3 Fragen.
1.) Was ist bess er? Das oder das?
2.) In welcher Reihenfol ge sollte das
gemacht werden?
Fragebögen
Lösung 1 Lösung 2
2-
Aufgabe 1: 2P/2P
Beantworte mit Hilfe des Diagram ms die
3 Fragen.
Frage 1: richtig
Frage 2: falsch
Frage 3: richtig
Aufgabe 2: 5P/6P
Beantworte die folgenden Fragen:
1.) Wie viele Fragen sollte man maximal
Abbildung 3.8: Einsatz von QuestionSys im Schulalltag.
Hat sich eine Schule dazu entschlossen, Tablets in den Unterricht zu integrieren, kann
man diese auf vielfältige Weise verwenden. Eine Möglichkeit besteht darin, Aufgaben
oder auch Klassenarbeiten über spezielle Applikationen verfügbar zu machen, um so
zum Beispiel Papier zu sparen. Dabei müssen gegebenenfalls Einschränkungen getrof-
fen werden, wie beispielsweise die Sperrung des Internetzugangs. In Abbildung 3.8 ist
dargestellt, wie der Ablauf einer Klausur mit Unterstützung einer Applikation aussehen
könnte.
Zunächst wird die Übersicht aller vorhandenen Fragebögen mit relevanten Informationen
angezeigt, dann der Fragebogen beziehungsweise die Klausur oder das Aufgabenblatt
selbst und schließlich die Auswertung. Letzteres kann der Benutzer allerdings nicht
immer unmittelbar nach Abgabe einsehen, da Klartextfelder nicht automatisch ausgewer-
tet werden können, sondern nachträglich von einem Lehrer korrigiert und begutachtet
werden müssen. Handelt es sich aber um eine beschränkte Auswahl an Antwortmöglich-
keiten, wie Radio Buttons, Checkboxen oder eine Button Bar wie in Abbildung 3.9, kann
der Fragebogen direkt ausgewertet werden.
Im Folgenden wird nun der Fall von Lara betrachtet. Sie geht in die 10. Klasse eines
Gymnasiums, das seit vier Jahren Tablet PCs im Unterricht verwendet. Die Schüler
18
3.2 Anwendungsszenarien
Abbildung 3.9: Diese Button Bar kann automatisch ausgewertet werden [13].
mussten sich dafür in der 8. Klasse selbst entsprechende Geräte anschaffen. Wer sich
das aus finanziellen Gründen nicht leisten konnte, wurde von der Schule unterstützt.
Nun werden damit unter anderem Vokabeln für Englisch und Französisch trainiert, sowie
im Internet recherchiert.
Seit einem Schuljahr wird im Unterricht das System QuestionSys verwendet, um auch
Klausuren und Tests digital bearbeiten zu können. Die Lehrer können über einen Kon-
figurator am PC Fragebögen erstellen, die die Schüler im Unterricht auf ihren Tablets
aufrufen und ausfüllen können. In Englisch werden beispielsweise Vokalen und Sätze
über die mobile Anwendung abgefragt, in Biologie und Geschichte werden Fakten über
Multiple-Choice-Fragen überprüft und im Fach Psychologie können Umfragen durch-
geführt und ausgewertet werden. Des Weiteren ist es den Schülern möglich, mit Hilfe
spezieller Fragebögen den Unterricht zu evaluieren.
In Biologie soll Lara nun eine Klausur schreiben. Über die letzten vier Wochen arbeitete
sie mit ein paar Mitschülern im Team an dem Projekt Genetik (Gruppe 3), einem von
vier Themen. Der Lehrer kündigt an, im anstehenden Test allgemeine Fragen, sowie
Aufgaben zum eigenen Projekt zu stellen. Um zu den richtigen Fragen zu gelangen, wird
am Ende des allgemeinen Klausurteils abgefragt, welcher Projektgruppe ein Schüler
19
3 Anforderungsanalyse
Allgemeiner
Biologie Test
Fragen 1 – 4 für alle Schüler
In welchem Projekt warst
du?
o Gruppe 1
o Gruppe 2
o Gruppe 3
o Gruppe 4
Projektgruppe 1
Fragen 5 – 8 zum Thema 1
Projektgruppe 2
Fragen 5 – 8 zum Thema 2
Projektgruppe 3
Fragen 5 – 8 zum Thema 3
Projektgruppe 4
Fragen 5 – 8 zum Thema 4
Angabe:
Gruppe 1
Angabe:
Gruppe 2
Angabe:
Gruppe 3
Angabe:
Gruppe 3
Abbildung 3.10:
Der erste Teil des Tests besteht aus allgemeinen Fragen, die zweite
Hälfte der Klausur beinhaltet projektspezifischen Fragen.
angehört. Je nach Angabe gelangt man in den entsprechenden zweiten Klausurteil
(Abbildung 3.10). Es wird also direkt nach Abgabe der ersten Hälfte eine Evaluationsregel
angewendet.
Fragetypen in Laras Biologie Klausur sind Klartextfelder, Multiple- und Single-Choice-
Fragen, sowie Wahr-Falsch-Fragen. Zu jeder Frage gibt es einen Button, der ihr Hilfetexte
zu den Aufgabentypen bietet.
3.2.3 Erkenntnisse
Mit Hilfe der vorhergehenden Anwendungsszenarien konnten einige Fakten über die
Benutzer von QuestionSys gesammelt werden. Das User-Interface und die dazugehörige
Navigation müssen beispielsweise so gestaltet werden, dass sich sowohl junge, als auch
ältere Menschen damit zurechtfinden. In Tabelle 3.1 ist übersichtlich zusammengestellt,
welche sonstigen Eigenschaften die Benutzer der Szenarien mitbringen.
Da beim Spektrum der User keine Einschränkung gemacht werden kann, muss beson-
20
3.2 Anwendungsszenarien
Szenario 1: Asyl Szenario 2: Schule
Alter ab 16 Jahre 6 bis 18 Jahre
Geschlecht männlich und weiblich männlich und weiblich
EDV-Kenntnisse keine bis viele viele
Häufigkeit Benutzung sporadisch häufig
Tabelle 3.1:
Erkenntnisse über die Benutzer der mobilen Applikation in den jeweiligen
Szenarien
ders viel Wert auf Selbstbeschreibungsfähigkeit und Übersichtlichkeit gelegt werden. Als
Konsequenz darauf, dass Menschen mit keinen, aber auch mit vielen Computerkenntnis-
sen in der Gruppe der Endbenutzer liegen, muss das System Fehler tolerieren und sich
auch erwartungskonform verhalten.
Ein weiterer Aspekt, über den man nun Aussagen treffen kann, ist die Einsatzumgebung
des fertigen Systems. Da es sich bei der Hardware um ein Tablet handelt, das in die-
sen Anwendungsfällen nur in geschlossenen Räumen verwendet wird, benötigt man
keinen zusätzlichen Schutz vor Verschmutzung. Allerdings sollte man solche Geräte an
öffentlich zugänglichen Orten vor Diebstahl schützen, indem man diese beispielsweise
ankettet. Eine Kette würde darüber hinaus auch verhindern können, dass das Tablet auf
den Boden fällt und so beschädigt wird.
Im medizinischen Kontext ist es vorstellbar, dass das System in Wartezimmern platziert
wird. Dabei ist zu beachten, dass möglichst kein Ton abgespielt wird oder alternativ
Kopfhörer bereitgestellt werden, da im Wartebereich meist Ruhe herrscht. In der Schule
wiederum wäre es im Rahmen bestimmter Gruppenarbeiten denkbar, dass zur Bearbei-
tung mancher Fragen eine Tonsequenz abgespielt werden könnte. Hier sollte es also
keine Einschränkung geben, da je nach Szenario auditiver Input benötigt wird oder nicht.
Im Folgenden werden die Anforderungen an das System noch einmal zusammengefasst:
•
Navigation, Hilfestellung und Gestaltung (z.B. Farbschema) an Benutzer anpassen
(siehe Tabelle 3.1)
•
Werkzeuge (für den Administrator) möglichst sinnvoll platzieren (z.B. Bearbeiten
und Löschen von Fragebogen-Modellen)
21
3 Anforderungsanalyse
•Datenschutz
•Mehrsprachigkeit der Applikation und der Fragebögen [6]
•Verwendung durch mehrere Benutzer [6]
•gute Wartbarkeit [6]
•Unterstützung von zwei Modellen: Interview-Modus und Selbsteinschätzung [6]
•
Erstellung von Statistiken einzelner Fragen oder auch der kompletten Fragebögen
durch den Administrator
•Zeitfenster für Zugriff auf Fragebogen festlegen
3.3 Usability-Ziele
Usability-Ziele sind wichtig, damit in Konfliktsituationen entschieden werden kann, welche
Anforderungen an das System wichtiger sind und welche Ziele man deshalb durchsetzen
sollte. Den Eigenschaften, die das System später haben soll, werden bereits im Vorfeld
Prioritäten zugewiesen, die auf den Ergebnissen der bisherigen Anforderungsanalyse
beruhen [9].
Die Ziele, die man sich bezüglich der Usability setzt, können in quantitative und qua-
litative Ziele eingeteilt werden. Während quantitative Ziele objektiv und messbar sind,
können den qualitativen Zielen keine konkreten Zahlen zugewiesen werden. So ergeben
sich für das System QuestionSys folgende Usability-Ziele:
Qualitative Ziele:
•
Die Applikation sollen
neutral gestaltet
sein, da das System in verschiedensten
Branchen eingesetzt werden soll und die Themen der Fragebögen daher variieren
(Priorität: 10)
•
Die Client-Anwendung sollte
ohne Schulung nutzbar
sein (Selbstbeschreibungs-
fähigkeit, Erlernbarkeit) (Priorität: 10)
22
3.3 Usability-Ziele
•
Da die User die Applikation teilweise freiwillig verwenden, sollte die Benutzung
möglichst komfortabel sein (Priorität: 9)
•
Aufgrund ständig wechselnder Benutzer sollte die Applikation
fehlerrobust
sein
(Priorität: 9)
•
Die Anwendung sollte die gleichzeitige Benutzung
mehrerer User
unterstützen
(Priorität: 8)
•Die einzelnen Teilsysteme sollen konsistent gestaltet werden (Priorität: 7)
•Die Anwendung sollte verfügbar sein (Priorität: 5)
Quantitative Ziele:
•
Das
Ausfüllen
eines digitalen Fragebogens sollte nicht länger dauern als bei
einem papierbasierten Fragebogen (unabhängig davon, ob ein User im Umgang
mit Mobilgeräten erfahren ist oder nicht) (Priorität: 10)
•Die Applikation muss in verschiedenen Sprachen verfügbar sein (Priorität: 10)
•
Die Aufgabe des Administrators, eine
Statistik
zu einer speziellen Aufgabe eines
Fragebogens zu erzeugen, beträgt maximal 20 Minuten. (Priorität: 10)
•
Fragebögen sollten durch den Administrator deutlich schneller
bearbeitet
und
wieder verfügbar gemacht werden können, als Papier-Fragebögen (Priorität: 9)
•
Die
Zusammenstellung eines Fragebogens
sollte nicht länger dauern als die
eines papierbasierten Fragebogens (Priorität: 8)
•Zufriedenheit und Motivation der User
sollten durch die Verwendung von Mobil-
geräten höher sein, als bei Fragebögen auf Papier (Priorität: 8)
Diesen Usability-Zielen wurden Prioritäten zwischen 1 und 10 zugeordnet. Falls bei-
spielsweise Zeit- oder Finanzprobleme im Projektverlauf entstehen sollten, werden nur
die höher bewerteten Ziele umgesetzt.
23
4
User-Interface Entwurf
In dieser Phase soll nun der User-Interface-Entwurf entstehen. Um diesen möglichst
benutzerfreundlich zu gestalten, werden die bisher gewonnenen Anforderungen als
Grundlage verwendet. Besonders die Usability-Ziele sollten bei der Gestaltung der Ent-
würfe eingehalten werden.
Schritte in dieser Phase können die Überarbeitung bisheriger Arbeitsabläufe sein, die
Entwicklung eines konzeptuellen User-Interface Modells, der Mockups oder eines (elek-
tronischen oder papierbasierten) Prototyps. Hinzu kommt jeweils die Evaluierung der
Entwürfe mit Hilfe von Usability-Tests, so dass aus dieser Phase schlussendlich ein
Detailentwurf und ein Styleguide resultieren [
11
]. Im Rahmen dieser Arbeit ist es zweck-
mäßig, sich die Arbeitsabläufe anzuschauen, konzeptuelle Entwürfe zu erarbeiten und
anschließend die detaillierteren Mockups anzufertigen. Dabei sollten die Ergebnisse
immer wieder mit den erarbeiteten Anforderungen und Usability-Zielen abgeglichen
werden.
Bei dem Entwurf von User-Interfaces für Mobilgeräte gibt es grundlegende Schwie-
rigkeiten, die berücksichtigt werden müssen. Dies sind beispielsweise die relativ kleinen
Displays, auf denen die Informationen angezeigt werden. Zudem kommen die ver-
schiedensten Formate der Geräte hinzu, d.h. die Breite der Benutzeroberfläche muss
responsibel sein, um sich an die verschiedenen Displays anzupassen. Des Weiteren
muss darauf geachtet werden, dass interaktive Elemente groß genug angezeigt werden,
damit der Benutzer in der Lage ist, sein Ziel auf dem Touchscreen zu treffen. Dies
löst man zu Beispiel durch zusätzliche Abstände (Padding) und Weißräume. Zuletzt
25
4 User-Interface Entwurf
sollte man möglichst wenig Texteingabe fordern, oder zumindest Autovervollständigung
anbieten, da das Tippen auf Touchscreens mühsam ist [19].
4.1 Änderungen im Arbeitsfluss
Bei der Umgestaltung oder Neuentwicklung eines System kann es passieren, dass
Arbeitsabläufe grundlegend verändert werden müssen. In solchen Fällen ist es meistens
sinnvoll, Endbenutzer in die Umgestaltung einzubeziehen, sie mit den neuen Abläufen
vertraut zu machen und gleichzeitig Feedback einzuholen. Stehen keine Anwender
zur Verfügung oder handelt es sich um keine komplexe Arbeitsabläufe, kann statt der
Evaluation überprüft werden, ob die Usability-Ziele vollständig umgesetzt sind.
Im Falle von QuestionSys soll die Auswertung einer Umfrage nun innerhalb der Ap-
plikation Questionnaire möglich sein, indem Evaluationsregeln auf die Fragebögen
angewendet werden. So soll die Verwendung eines zusätzlichen Programmes (siehe
Liste in [
20
]) unnötig werden. Um dies so komfortabel und aufgabenangemessen wie
möglich umzusetzen, ist es empfehlenswert, Benutzer einzubeziehen, die sich bereits
mit dieser Aufgabe befasst haben. Die Handhabung der neuen Auswertungsfunktion
sollte sich nicht grundlegend von der in den alternativen Programmen unterscheiden,
um von den Benutzern akzeptiert zu werden. Questionnaire soll keineswegs die kom-
plette Funktionalität eines Statistikprogrammes beinhalten, aber die Möglichkeiten die
angeboten werden, sollten ansprechend gestaltet sein und gute Ergebnisse erzeugen.
Der Benutzer, der die administrativen Aufgaben übernimmt, kann nicht nur Auswertun-
gen vornehmen, sondern muss beispielsweise Servereinstellungen und Funktionen,
wie Markierungen und Evaluationsregeln, verwalten. Dies sind neue Aktivitäten, die
bei Umfragen auf Papier nicht nötig waren und nun ebenfalls durch Benutzerbeteili-
gung so komfortabel wie möglich gestaltet werden sollen. Alternativ sollte der Benutzer
später an den entsprechenden Stellen Hilfestellung durch Anweisungstexte erwarten
können, auf die er zurückgreifen kann, falls etwas nicht selbsterklärend genug sein sollte.
Die Funktionen, die der Administrator im Bezug auf die Fragebogen-Modelle und de-
26
4.1 Änderungen im Arbeitsfluss
ren Instanzen hat, sowie die Anpassungen, sind an dieser Stelle noch einmal in den
Use-Case-Diagrammen in Abbildung 4.1, 4.2 und 4.3 dargestellt.
Administrator
FB-Modell auswählen
(nicht archiviert)
Fragebogeninstanzen
aufrufen
Aktivierte FB-Modelle
FB-Modell aktivieren
oder archivieren
FB-Modell deaktivieren
Deaktivierte FB-Modelle <<erweitern>>
<<erweitern>>
Bedingung:
FB-Modell ist
aktiviert
Bedingung:
FB-Modell ist
deaktiviert
FB-Modell hinzufügen
FB-Modell
bearbeiten/löschen
FB-Modell
exportieren
Abbildung 4.1: Use-Case-Diagramm für die Übersicht der Fragebogen-Modelle.
Im Gegensatz zu den Fragebogen-Modellen im aktivierten und deaktivierten Zustand ist
es im archivierten Zustand nicht mehr möglich, Aktionen auf die Fragebögen und deren
Instanzen auszuüben. Des Weiteren sollte erwähnt werden, dass die Evaluationsregeln
nicht innerhalb der Applikation Questionnaire angelegt werden können, weswegen dem
Administrator in Abbildung 4.3 nur die Funktionen „Evaluationsregeln ansehen“ und
„löschen“ zur Verfügung stehen.
27
4 User-Interface Entwurf
Administrator
einen oder mehrere
Instanzen auswählen
löschen
Evaluationsregeln
anwenden
Inhalt einer
Instanz ansehen auswerten
<<einschließen>>
Server
Datenbank
markieren/
Markierung
löschen
Abbildung 4.2: Use-Case-Diagramm für die Übersicht der Fragebogeninstanzen.
Administrator
Standardsprache festlegen
Markierung hinzufügen
Markierung löschen
Markierung bearbeiten
Evaluationsregeln
ansehen
Evaluationsregeln
löschen
Servereinstellungen
Abbildung 4.3: Use-Case-Diagramm für die Einstellungen des Administrators.
28
4.2 Konzeptueller User-Interface Entwurf
4.2 Konzeptueller User-Interface Entwurf
Nachdem Veränderungen im Arbeitsablauf identifiziert wurden, kann im nächsten Schritt
die grobe Architektur der Navigationspfade konstruiert und visualisiert werden. In die-
sem Schritt geht es noch nicht darum, konkrete Entwürfe der Benutzeroberflächen
zu erstellen, sondern verschiedene konzeptuelle Ideen auszuarbeiten. Deborah May-
hew beschreibt in [
11
], dass es zielführend sei, durch die konzeptuellen Entwürfe eine
Grundlage für die darauffolgenden, immer detaillierteren Skizzen zu schaffen und den
Designern erste Regeln zu geben, anhand derer folgende Designentscheidungen getrof-
fen werden sollen.
Bei der Entwicklung der Konzepte soll laut [
11
] zunächst entschieden werden, ob die
Modelle produkt- oder prozessorientiert sein sollen. Anschließend soll man sich mit
Aspekten wie der Darstellung von Prozessen und Produkten, sowie Designregeln für
Fenster (oder hier: Activities) beschäftigen, bevor man sich den eigentlichen Entwürfen
widmet. Im Fall von Questionnaire macht der prozessorientierte Ansatz mehr Sinn, da kei-
ne Produkte am Ende stehen, die erzeugt werden. Viel eher werden bereits vorhandene
Fragebogen-Modelle, sowie Einstellungen innerhalb der Applikation manipuliert.
Wie die grundlegende Navigation des Administratorbereichs von Questionnaire aussieht,
wird in
Abbildung 4.4
dargestellt. Nachdem sich die Person mit Administratorrechten
eingeloggt hat, wird ihr die Übersicht aller Fragebogen-Modelle angezeigt. Diese Liste
befindet sich in einem von vier Tabs. Durch die Auswahl der anderen Tabs wird auto-
matisch gefiltert, ob Fragebogen-Modelle aktiviert, deaktiviert oder bereits archiviert
sind. In dem zweiten Menüpunkt „Anpassungen“ werden ebenfalls Tabs verwendet, um
Einstellungen zu allgemeinen Themen, Markierungen und Evaluationsregeln zu trennen.
Die Navigation sollte über ein Menü möglich sein, das von überall aus erreichbar ist.
Für Mobilgeräte kommt daher entweder eine Sidebar in Frage (siehe Abbildung 4.5),
die nur bei Bedarf über den Button links in der Actionbar angezeigt wird, oder ein
Menü, das über den rechten Button in der Actionbar aufgerufen werden kann (siehe
Abbildung 4.6
). Die beiden Möglichkeiten sind auch kombinierbar. So kann man schnell
zwischen Fragebogen-Modellen, den Anpassungen und sonstigen Einstellungen hin und
29
4 User-Interface Entwurf
Splashscreen Aktivierte
Fragebogen-
Modelle
Fragebogen-
instanz
Login/Logout
Administratorbereich
Alle
Übersicht Fragebogen-Modelle
Archiviert
Aktiviert Deaktiviert
Anpassungen
Allgemein
Markierungen
Evaluations-
regeln
Sonstige
Funktionen in der
Seitennavigation
START
START
START
START
Abbildung 4.4:
Statechart der Client-Anwendung Questionnaire. In diesem Kontext sind
allerdings nur die eingefärbten Bereiche interessant.
her wechseln, oder den Administrationsbereich verlassen. Die Einstellungen und das
Logout könnten alternativ auch in ein separates Menü ausgelagert werden.
Im nächsten Schritt werden die verschiedenen Ansichten und deren grober Aufbau
betrachtet. In dieser Applikation enthalten alle Hauptansichten im Bereich der Admi-
nistration Listen. Dies sind beispielsweise die Übersicht der Fragebogen-Modelle oder
die Auflistung bereits definierter Markierungen. Enthält eine Liste Elemente verschiede-
ner Kategorien, ist es sinnvoll die Liste aufzuteilen, um Übersichtlichkeit zu gewähren
30
4.2 Konzeptueller User-Interface Entwurf
ÜberschriftÜberschrift
Fragebogen-Modelle
Anpassungen
Listen-
element
Navigation
Drawer
Header
(Bild)
Einstellungen
Logout
Abbildung 4.5: Wireframes einer Listendarstellung und der Sidebar.
und übermäßiges Scrollen zu verhindern. Eine Möglichkeit dafür bieten die Tabs in
Abbildung 4.6.
Ein weiterer Aspekt, der in dieser Phase betrachtet werden muss, ist das Verhalten
der Fenster oder Activities. Da die Anzahl der Ansichten für den Administrator sehr
überschaubar ist, muss nicht für jede Funktion eine neue Activity geladen und gestartet
werden. Wie sich die Activities und UI-Elemente an sich verhalten, wird hauptsächlich
Googles Styleguide für Android 5.0 [21] entnommen.
31
4 User-Interface Entwurf
Fragebogen-Modelle
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
ALLE AKTIVIERT DEAKTIVIERT ARCHI
Tabs
Listenelement
(Symbol
und Text)
Fragebogen-Modelle
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
ALLE AKTIVIERT DEAKTIVIERT ARCHI
Einstellungen
Logout Menü
Abbildung 4.6:
Wireframe zur Listenansicht, den Tabs und dem Menü, das über das
Symbol rechts in der Actionbar aufgerufen wird.
Fragebogen-Modelle
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
ALLE AKTIVIERT DEAKTIVIERT ARCHI
2 ausgewählt
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
ALLE AKTIVIERT DEAKTIVIERT ARCHI
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Titel des Listenelements
Zeile mit Informationen
Ausgewählte
Elemente
Funktionen für
einzelnes Element
Funktionen für
ausgewählte
Elemente
Abbildung 4.7:
Wireframe zur Darstellung der Funktionen nach Auswahl beliebiger Lis-
tenelemente (links) und der Funktionen, für jedes einzelne Element zur
Verfügung stehen (rechts).
32
4.3 Mockups
4.3 Mockups
Im folgenden wird nun ein kleiner Teil der Gesamtfunktionalität der Applikation ausge-
wählt und durch Mockups visualisiert. Sind im Rahmen des konzeptuellen Entwurfs
mehrere konkurrierende Skizzen entstanden, sollte diese Auswahl für die Mockups
eingeschränkt werden. Bei der Entscheidung bezüglich der Funktionalitäten, könnten
folgende Kriterien entscheidend sein: Oberflächen, die von mehreren Benutzergruppen
verwendet werden, besonders auffällige Merkmale, sowie arbeits- oder sicherheitskriti-
sche Aspekte [11].
Ziel der (konzeptuellen) Mockups ist es, Input für weitere iterative Evaluationen zu liefern,
um so unter mehreren Entwürfen den besten zu finden und weiterzuentwickeln oder
auch Verbesserungsmöglichkeiten im favorisierten Entwurf zu identifizieren. Auch hier
muss weiterhin auf die vollständige Einhaltung der Anforderungen geachtet werden, falls
keine Benutzer für Feedback zur Verfügung stehen.
Bei der Entwicklung von Oberflächen gibt es meistens bereits Entwurfsprinzipien oder
Styleguides nach denen man sich richtet. Dazu können unter anderen das Corporate De-
sign einer Firma oder die Gestaltungsrichtlinien für Betriebssysteme zählen. Im Rahmen
dieser Arbeit wird diesbezüglich der Styleguide von Google für Android 5.0 (Material
Design) verwendet [21], sowie allgemeine Gestaltungshinweise für Mobilgeräte [22].
Wie bereits erwähnt, beinhalten die Hauptansichten zum Großteil Listen, weswegen
man sich mit diesem Thema genauer auseinandersetzen sollte. Googles Styleguide
für Android 5.0 erläutert dazu, dass Listen immer einspaltig sind und Platz für unter-
schiedlich große Kacheln beinhalten. In diesen Kacheln wiederum befindet sich dann
der Inhalt. Informationen sollen in maximal drei Zeilen dargestellt werden, andernfalls
solle man sogenannte Cards verwenden. Cards sind (farbige) Rechtecke, die beliebige
Größen annehmen können. Beide Möglichkeiten bieten die Option, Avatare, Symbole
oder Aktionen einzubinden. In Abbildung 4.8 sind beide Typen von Listenelementen zu
sehen: links die Cards, rechts die zweizeiligen Reihen mit Avatar. Die Farbcodierung
steht dabei jeweils für die Zustände aktiviert,deaktiviert und archiviert.
33
4 User-Interface Entwurf
Fragebogenmodell 001-432-2-99-0
Hinzugefügt am: 17.02.2015
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua.
Fragebogenmodell 123-6690-6-5-11 a
Hinzugefügt am: 10.01.2015
Lorem ipsum dolor sit amet, consetetur sadipsc:
- At vero eos et accusam et justo.
- Sed ut perspiciatis unde omnis iste natus.
- Et harum quidem rerum facilis.
Fragebogenmodell 673-2-111-65
Hinzugefügt am: 02.12.2014
Lorem ipsum dolor sit amet, consetetur.
LÖSCHEN
LÖSCHEN
LÖSCHEN
Fragebogenmodell 673-2-111-65
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae d
icta sunt explicabo. Nemo enim ipsam voluptatem quia.
Fragebogen-Modelle
12:30
ALLE
AKTIVIERT
DEAKTIVIERT
ARCHIVIERT
Fragebogen-Modelle
12:30
ALLE
AKTIVIERT
DEAKTIVIERT
ARCHIVIERT
Fragebogenmodell 001-432-2-99-0
Hinzugefügt am: 17.02.2015
Thema: Hier steht das Thema des Fragebogens
Hinzugefügt am: 31.01.2015
Thema: Besonders interessantes Thema für Patienten mit X
Hinzugefügt am: 01.12.2014
Das ist der Titel eines Fragebogen-Modells 1.7
Hinzugefügt am: 20.03.2015
Thema: Modell des Fragebogens Nr. 329-44-8901
Hinzugefügt am: 07.12.2014
Thema: Hier steht der Titel - sehr aussagekräftig
Hinzugefügt am: 15.01.2015
Thema: Hier steht das Thema des Fragebogens 4390-22
Hinzugefügt am: 01.04.2015
Thema: Das ist der letzte Fragebogen
Hinzugefügt am: 23.11.2014
Abbildung 4.8:
Mockups zur möglichen Listendarstellung: Cards (links) oder zweizeilige
Listen, bestehend aus einem Avatar, Text und einem Icon zum Löschen
des Listenelements (rechts).
Es ist offensichtlich, dass Cards mehr Platz benötigen als maximal dreizeilige Listenele-
mente und daher weniger Fragebogen-Modelle auf einen Screen passen. Zudem hat
der Administrator dieser Anwendung eine rein verwaltende Funktion. Das bedeutet, die
Übersicht über Fragebögen ist wichtiger als die Darstellung möglichst vieler Zusatzin-
formationen wie beispielsweise der Beschreibungstext. Wichtige Informationen für den
Administrator sind der Titel, der Status, das Datum an dem das Modell hochgeladen
wurde und optional der festgelegte Zugriffszeitraum für Benutzer.
Eine weitere Funktion des Administrators ist die Markierung von Fragebogen-Modellen
und deren Instanzen. In den Entwürfen aus [
13
] wurden gesetzte Markierungen durch
bunte „Fähnchen“ dargestellt, die am oberen Rand eines Listenelements platziert wur-
den. Im Material Design Styleguide wird alles recht einfach und flach gehalten, das
bedeutet Formen wie Fahnen sind unpassend. In Abbildung 4.9 sind dazu alternative
Darstellungen zu sehen, die als Markierung in Frage kommen könnten.
In den beiden oberen Entwürfen in Abbildung 4.9 muss die Anzahl der Markierungen aus
Platzgründen auf maximal drei beschränkt werden, während in den unteren Konzepten
34
4.3 Mockups
Fragebogen-Modelle
12:30
ALLE
AKTIVIERT
DEAKTIVIERT
ARCHIVIERT
Fragebogenmodell 001-432-2-99-0
Hinzugefügt am: 17.02.2015
Thema: Hier steht das Thema des Fragebogens
Hinzugefügt am: 31.01.2015
Fragebogen-Modelle
12:30
ALLE
AKTIVIERT
DEAKTIVIERT
ARCHIVIERT
Fragebogenmodell 001-432-2-99-0
Hinzugefügt am: 17.02.2015
Thema: Hier steht das Thema des Fragebogens
Hinzugefügt am: 31.01.2015
Fragebogen-Modelle
12:30
ALLE
AKTIVIERT
DEAKTIVIERT
ARCHIVIERT
Fragebogenmodell 001-432-2-99-0
Hinzugefügt am: 17.02.2015
Thema: Hier steht das Thema des Fragebogens
Hinzugefügt am: 31.01.2015
Fragebogen-Modelle
12:30
ALLE
AKTIVIERT
DEAKTIVIERT
ARCHIVIERT
Fragebogenmodell 001-432-2-99-0
Hinzugefügt am: 17.02.2015
Thema: Hier steht das Thema des Fragebogens
Hinzugefügt am: 31.01.2015
Abbildung 4.9:
Verschiedene Ideen zur Darstellung der Markierungen an einzelnen
Listenelementen.
eine ganze Zeile dafür zur Verfügung steht. Ein weiterer Vorteil der unten dargestellten
Möglichkeiten ist, dass der Platz am rechten Rand weiter für Funktionen wie „Löschen“
oder „Archivieren“ zur Verfügung steht. Auf der anderen Seite kann die letzte Zeile der
Listenelemente nicht für weitere inhaltliche Informationen genutzt werden, wie beispiels-
weise mehr Beschreibungstext, den festgelegten Zugriffszeitraum oder die Anzahl der
Fragebogen-Instanzen.
An dieser Stelle wäre zu überlegen ob es sinnvoll ist, Markierungen nicht nur manuell
setzen lassen zu können, sondern dies teilweise zu automatisieren. So könnte ein
Fragebogen-Modell, auf dessen Instanzen bereits in irgendeiner Form Evaluationsregeln
ausgeführt worden sind, automatisch einen Marker in einer vordefinierten Farbe erhalten.
Allerdings sollte der Administrator in diesem Fall die Möglichkeit haben, automatische
Markierungen in den Einstellungen zu deaktivieren.
Als nächster Punkt werden die Konzepte zur Navigation betrachtet. Hier ergaben sich
35
4 User-Interface Entwurf
die Möglichkeiten für einen Navigation Drawer, ein Menü, das über einen Button in der
Actionbar aufgerufen werden kann, oder eine Kombination aus beiden. Da die Navigati-
on für die Benutzer möglichst einfach gestaltet werden sollte, ist die Entscheidung für
eine der beiden Menü-Typen sinnvoll. Für diese Applikation wird der Navigation Drawer
eingesetzt und beinhaltet neben den möglichen Zielen auch die Funktion „Logout“ (siehe
Abbildung 4.10). Der Header ist hierbei optional, kann das Design für den Administrator
allerdings ansprechender machen, wenn der Platz nicht für die Navigation benötigt wird.
Page title
Anpassungen
Fragebogen-Modelle
Administrator
12:30
Hilfe
Impressum
Einstellungen
Logout
Abbildung 4.10: Navigation Drawer mit allen Funktionen.
Beim Thema Farbe oder Farbschema gibt es wichtige Fakten, die bei der Auswahl der
Farben eine Rolle spielen. Zunächst ist es wichtig zu berücksichtigen, nicht Rot und Grün
als Hauptfarben zu verwenden, da nach [
11
] etwa 10% der Männer und 1% der Frauen
Schwierigkeiten bei der Unterscheidung dieser beiden Farben haben. Eine bekannte
Persönlichkeit, die unter dieser Sehschwäche leidet, ist der Facebook-Gründer Mark
Zuckerberg. In [
23
] wird angegeben, dass Facebook unter anderem aus diesem Grund
zu seinem blauen Farbschema gekommen sei.
Auch in [
24
] wird das Thema Farbenblindheit behandelt. Für die Farbwahl in diesem
Designprozess resultiert daraus, dass der Kontrast zwischen den verwendeten Farben
angemessen hoch sein muss, damit auch ohne Farbsehen deren Bedeutung erkennbar
ist. Um den Kontrast der gewählten Farben zu überprüfen, können diese beispielsweise
36
4.3 Mockups
Überschrift
Kleine Überschrift
Dark Primery Color #00796B
Default Primery Color #009688
Light Primery Color #B2DFDB
Accent Color #FF4081
Überschrift
Dark Primery Color #00796B
Default Primery Color #009688
Light Primery Color #B2DFDB
Accent Color #FF9800
Überschrift
Kleine Überschrift Kleine Überschrift
Dark Primery Color #455A64
Default Primery Color #607D8B
Light Primery Color #CFD8DC
Accent Color #FFC107
Überschrift
Kleine Überschrift
Accent Color #CDDC39
Accent Color #00BCD4
Überschrift
Kleine Überschrift
Dark Primery Color #303F9F
Default Primery Color #3F51B5
Light Primery Color #C5CAE9
Überschrift
Kleine Überschrift
Dark Primery Color #512DAB
Default Primery Color #673AB7
Light Primery Color #D1C4E9
Dark Primery Color #455A64
Default Primery Color #607D8B
Light Primery Color #CFD8DC
Accent Color #FFC107
Abbildung 4.11: Verschiedene Farbschmata für die Applikation.
als Screenshot in Programmen wie Adobe Photoshop geöffnet und in ein Schwarz-Weiß-
Bild umgewandelt werden. Darüber hinaus bietet Photoshop die Möglichkeit, Rot- und
Grün-Sehschwächen zu simulieren, um dem Designer ein Gefühl dafür zu geben, wie
betroffene Personen die verwendeten Farben wahrnehmen.
Eine weitere Einschränkung in der Farbwahl erläutert Mayhew in [
11
]. Sie rät, kei-
ne Komplementärfarben übereinander zu verwenden, also für Schrift und Hintergrund,
da dies sehr anstrengend zu lesen sei. Abbildung 4.11 zeigt verschiedene Möglichkeiten
für das Farbschema der Applikation, die sich an der Material Palette in Googles Style-
37
4 User-Interface Entwurf
guide [
21
] orientieren. Aus dieser Auswahl können allerdings mit den bisher genannten
Kriterien bereits mehrere Vorschläge aussortiert werden. Hinzu kommt ein weiteres
Kriterium von Mayhew: Farben mit hoher Sättigung haben einen eigenen Charakter,
weswegen nicht mehr als zwei kräftige Farben kombiniert werden sollten [
11
]. Die Kom-
bination zweier Farbwerte sollte einen Charakter ergeben, der zu den Anforderungen
und der Einsatzumgebung passt. Da in diesem Fall ein eher neutrales Farbschema
angestrebt wird, wird als Hauptfarbe im Folgenden das
Blaugrau (#607D8B)
verwendet.
Dazu wiederum passt dann eine Farbe mit hoher Sättigung wie das
Amber (#FFC107)
der Material Palette. Blau und Orange liegen im Farbkreis zwar gegenüber und sind
damit Komplementärfarben, doch durch die Abweichung ins Gräuliche und Gelbe wird
die Leserlichkeit wieder verbessert.
In den Entwürfen für das iPad4 [
13
] wurde bereits ein Logo für das Gesamtsystem
QuestionSys und dessen Teilsysteme entworfen. Somit auch für die Client-Anwendung
Questionnaire. Das Logo setzt sich aus einem Fragezeichen und einem Q zusammen
(siehe Abbildung 4.12), sowie dem Namen des entsprechenden Teilsystems. Das Logo
ist modern, hat Wiedererkennungswert, ist plattformunabhängig gestaltet und kann
deshalb auch für die Android Applikation verwendet werden.
B2
Abbildung 4.12: Logo der Client-Anwendung Questionnaire für das iPad4 [13].
38
5
Styleguide
In diesem Kapitel werden nun bisher erarbeiteten Ziele, Anforderungen und Richtlinien
in Form eines Styleguides festgehalten. In späteren Phasen des Softwareentwicklungs-
prozesses können sich User-Interface Designer und Entwickler daran orientieren und
die festgelegten Regeln und Standards umsetzen.
Ein Styleguide kann sich nach [
11
] zum einen auf ein einzelnes Produkt beziehen, auf
eine ganze Produktreihe, auf eine Firma (Corporate Design) oder auf die Zielplattform.
In diesem Fall gilt der Styleguide für die Client-Anwendung Questionnaire.
5.1 Farbkonzept
Das Standardfarbschema soll laut Anforderungsanalyse möglichst neutral sein. Da die
Farbpalette des Material Design Styleguides hauptsächlich Farben mit hoher Sättigung
anbietet und deren Kombination teilweise sehr charakterstark ist, fiel die Wahl für die
Hauptfarbe auf das ebenfalls in der Palette enthaltene
Blaugrau
. Bei der Wahl der
Akzentfarbe musst darauf nur geachtet werden, dass der Kontrast zu dem Blaugrau hoch
genug war und größere Flächen der Akzentfarbe nicht unangenehm wahrgenommen
wurden, beispielsweise bei Auswahlelementen innerhalb eines Fragebogens. Hier fiel
die Wahl auf die Farbe
Amber
. In Abbildung 5.1 ist die Anwendung der beiden Farben
auf das User-Interface der Applikation dargestellt.
In Abbildung 5.1 sind des Weiteren relevante Angaben zu einzelnen Farbwerten enthal-
ten, wie die Anwendungsbereiche einzelner Farben oder die Werte in hexadezimal und
im RGB-Farbraum. Für mobile Anwendungen spielen die Farbräume CMYK und HSB
39
5 Styleguide
Überschrift
Kleine Überschrift
Text auf hellem Hintergrund
#455A64
R: 69 G: 90 B: 100
Dunkle Hauptfarbe
#FFFFFF
R: 255 G: 255 B: 255
Helle Schriftfarbe
#FFC107
R: 255 G: 193 B: 7
Akzentfarbe
#CFD8DC
R: 207 G: 216 B: 220
Helle Hauptfarbe
#000000
Deckkraft: 87%
Dunkle Schriftfarbe
#607D88
R: 96 G: 125 B: 139
Hauptfarbe
Abbildung 5.1: Farbschema der Client-Anwendung Questionnaire.
weniger wichtige Rollen, weswegen auf diese Angaben verzichtet wurde.
Erscheint einer der Farbwerte in bestimmten Situationen unpassend, kann auf soge-
nannte Fallback-Farben zurückgegriffen werden. Dies gilt besonders für die Akzentfarbe,
da hier bisher nur ein Wert vorgegeben ist. In Abbildung 5.2 sind jeweils ein heller und
ein dunkler Farbwert als Alternative zur Standardakzentfarbe angegeben. Die Werte
sind ebenfalls der Material Palette in [21] entnommen.
Accent Color #FFC107 Dark Fallback Color #FFA000Bright Fallback Color #FFE57F
Abbildung 5.2:
Fallback Colors: Farben, die alternativ zur Akzentfarbe verwendet werden
können, wenn sie besser passen.
Unter dem Aspekt Farbe gibt es eine weitere Komponente, die betrachtet werden
muss. Auf der Startseite des Administrators sind alle vorhandenen Fragebogen-Modelle
aufgelistet. Diese können die Zustände aktiviert, deaktiviert und archiviert annehmen.
Diese drei Zustände sollen farblich kodiert werden, um dem Administrator eine schnellere
Orientierung in der Liste zu ermöglichen. Andernfalls kann der Administrator über das
Tab-Menü zwischen den Modellen verschiedener Zustände hin- und her wechseln und
sieht dadurch nur noch Fragebögen einer Farbe.
In Abbildung 5.3 sind die drei ausgewählten Farben bildlich dargestellt. Auf der einen Sei-
te sollten die Farbtöne unterschiedlich genug sein, um sofort zwischen den Fragebogen-
40
5.1 Farbkonzept
Fragebogen-Modelle
12:30
ALLE AKTIVIERT DEAKTIVIERT ARCHIVIERT
Fragebogenmodell 001-432-2-99-0
Hinzugefügt am: 17.02.2015
Thema: Hier steht das Thema des Fragebogens
Hinzugefügt am: 31.01.2015
Thema: Besonders interessantes Thema für Patienten mit X
Hinzugefügt am: 01.12.2014
Das ist der Titel eines Fragebogen-Modells 1.7
Hinzugefügt am: 20.03.2015
Thema: Modell des Fragebogens Nr. 329-44-8901
Hinzugefügt am: 07.12.2014
Thema: Hier steht der Titel - sehr aussagekräftig
Hinzugefügt am: 15.01.2015
Thema: Hier steht das Thema des Fragebogens 4390-22
Hinzugefügt am: 01.04.2015
Thema: Das ist der letzte Fragebogen
Hinzugefügt am: 23.11.2014
Aktivierte FB-Modelle
#33CC33
R: 51 G: 204 B: 51
Deaktivierte FB-Modelle
#CC3333
R: 204 G: 51 B: 51
Archivierte FB-Modelle
#66CCFF
R: 102 G: 204 B: 255
Abbildung 5.3: Farbcodierung für die Zustände aktiviert,deaktiviert und archiviert.
Farbton (Hue) Sättigung (Saturation) Helligkeit (Brightness)
Grün 120◦74% 80%
Rot 0◦74% 80%
Blau 199◦60% 100%
Tabelle 5.1: Farben der Fragebogen-Modelle im HSB-Farbraum.
Modellen verschiedenen Typs unterscheiden zu können. Auf der anderen Seite sollten
die Farben nicht zu kräftig sein und möglichst nicht der Haupt- oder Akzentfarbe der
Applikation ähneln.
Betrachtet man die Farbtöne im HSB-Farbraum in Tabelle 5.1, ist erkennbar, dass Blau
sich abgesehen vom Farbwert auch durch den Sättigungs- und Helligkeitswert von den
anderen beiden Farben unterscheidet. Hier wurde ein hellerer Blauton gewählt, damit
der Kontrast zwischen den drei Werten auch in Graustufen und damit für Farbenblinde
gut unterscheidbar ist.
Sollte der Administrator von einer Farbsehschwäche betroffen sein und beispielsweise
die Farben Rot und Grün nicht auseinanderhalten können, hindert ihn das allerdings
nicht an seinen Aufgaben. Da die Fragebogen-Modelle auch über die Tabs differenziert
werden können, ist man nicht auf die Farbcodierung der Zustände angewiesen.
41
5 Styleguide
5.2 Icons
App-Icon
Das Icon ist in den meisten Fällen das erste, das der Benutzer von der Applikation sieht.
Daher ist es wichtig, sich mit der Gestaltung eines Icons auseinanderzusetzen. Googles
Material Design Styleguide [
21
] bietet hierzu eine detaillierte Anleitung und Hilfsmittel
wie Farbpaletten und Raster für die Entwicklung von Produkt Icons.
Abbildung 5.4: App-Icon in Anlehnung an [13].
Für die Gestaltung eines Icons rät Google zu einer von vier einfachen Formen: Kreis,
Quadrat, horizontales oder vertikales Rechteck. Für die Applikation Questionnaire wurde
das Quadrat ausgewählt, weil dies die gängigste Form ist. Wie in Abbildung 5.4 zu sehen
ist, wurde für das Icon das Symbol aus dem Buchstabe „Q“ und einem Fragezeichen
verwendet. Dies kann beispielsweise wie hier mit einem langen Schatten und entspre-
chenden Abständen zum Rand (Padding) versehen werden.
User-Interface Icons
Aufgrund kleiner Displays mobiler Geräte bietet es sich an, Icons zu verwenden, um so
Platz zu sparen. Die Verwendung von Icons hat aber auch Vorteile für den Benutzer [
25
]:
•Icons können leichter im Gedächtnis behalten werden als Text
•Icons bieten Anreiz zur Interaktion (Affordance)
•
Dadurch, dass Benutzer Icons Text vorziehen, steigt deren Motivation durch die
Verwendung von Icons
42
5.3 Themes
Löschen Navigation
zu FB-Modellen Navigation
zu Anpassungen
(a) Piktogramme
Avatar
aktivierte
FB-Modelle
Avatar
archivierte
FB-Modelle
Avatar
deaktivierte
FB-Modelle
(b) Avatare
Abbildung 5.5: Verwendete Piktogramme und Avatare
Auch hierfür bietet Google bereits eine große Palette von User Interface Icons an, die
laut [
21
] „modern, freundlich und manchmal eigenartig “ entworfen sind. Für die hier
gestaltete Applikation, oder genauer den administrativen Bereich, werden insgesamt
wenig Symbole verwendet. In Abbildung 5.5 (a) sind die Icons aufgeführt, die der
Sammlung des Material Design Styleguides entnommen wurden. Das „Löschen“-Symbol
befindet sich in den Listen der Fragebogen-Modelle, während die anderen beiden Icons
im Navigation Drawer platziert wurden.
Die Avatare, die in Abbildung 5.5 (b) zu sehen sind, repräsentieren die Fragebogen-
Modelle in ihren Zuständen aktiviert,deaktiviert und archiviert. Diese wurden, wie auch
das App-Icon, mit dem Logo von QuestionSys versehen, um der Applikation ihren
eigenen Charakter zu verleihen und den Fragebogen-Modellen besondere Bedeutung
zu verleihen. Ähnliche Avatare (ohne Symbol) werden auch im Anpassungsbereich
verwendet, in dem der Administrator farbige Markierungen definieren kann.
5.3 Themes
Aufgrund des großen Benutzerspektrums und der vielen Anwendungsbereiche ist es
nicht möglich, die Benutzeroberflächen für alle Beteiligten zufriedenstellend zu gestalten.
Eine Möglichkeit zur Adaption in die verschiedenen Domänen bietet die Einführung
mehrerer Themes, aus denen der Administrator ein geeignetes Farbschema auswählen
kann.
In Abbildung 5.6 sind drei mögliche Schemata dargestellt, zwischen denen der Adminis-
trator wählen kann. Jeder dieser Vorschläge passt in eine bestimmte Domäne oder zu
43
5 Styleguide
Überschrift
Kleine Überschrift ÜberschriftÜberschrift
Kleine Überschrift
Kleine Überschrift
Abbildung 5.6: Vorschläge für verschiedene mögliche Farbschemata.
einer bestimmten Zielgruppe. Deswegen bietet sich ein neutrales Standardfarbschema
an, sodass diese Vorschläge nur bei Bedarf bewusst eingestellt werden. Diese Freiheit
sollte man dem Administrator allerdings geben.
5.4 Typografie
Im Material Design Styleguide [
21
] werden zwei verschiedene Schriftarten aufgeführt:
Roboto
und
Noto
. Roboto wird für alle englischen und englisch-ähnlichen Texte und
Wörter verwendet, für alle weiteren Sprachen wie Arabisch, Chinesisch oder Thai die
Schriftart Noto. Da für die Applikation im Rahmen dieser Arbeit hauptsächlich Deutsch
und Englisch verwendet werden, wird der typografische Fokus im Folgenden auf die
Schriftart Roboto gelegt.
Wie in Abbildung 5.7 (a) zu sehen ist, handelt es sich bei Roboto um eine serifen-
lose Schrift, die auf Displays gut lesbar ist. Die verschiedenen Schriftschnitte bieten viel
Gestaltungsspielraum. In Abbildung 5.7 (b) ist die Verwendung der Schriftart Roboto
in einem Mockup dargestellt. In den mehrzeiligen Listenelementen beinhaltet die erste
Zeile die wichtigsten Informationen einer gesamten Kachel. Orientiert man sich an Goo-
gles Styleguide, arbeitet man in solchen Fällen mit Kontrasten, statt den Schriftschnitt
Roboto Bold zu verwenden.
Schrift sollte nicht zu viel, aber auch nicht zu wenig Kontrast zum Hintergrund haben.
Deswegen wird in Applikationen von Google kein volles Schwarz auf weißem Hinter-
grund verwendet, sondern eines, dessen Transparenz auf 87% reduziert ist. Eine weitere
44
5.4 Typografie
Roboto Thin
Roboto Light
Roboto Light Italic
Roboto Regular
Roboto Italic
Roboto Medium
Roboto Medium Italic
Roboto Bold
Roboto Black
(a) Schriftschnitte Roboto
Fragebogen-Modelle
12:30
ALLE AKTIVIERT DEAKTIVIERT ARCHIVIERT
Fragebogenmodell 001-432-2-99-0
Hinzugefügt am: 17.02.2015
Thema: Hier steht das Thema des Fragebogens
Hinzugefügt am: 31.01.2015
Thema: Besonders interessantes Thema für Patienten
Hinzugefügt am: 01.12.2014
Das ist der Titel eines Fragebogen-Modells 1.7
Hinzugefügt am: 20.03.2015
(b) Mockup mit Schriftart Roboto
Abbildung 5.7: Schriftart Roboto
Abstufung der Transparenz liegt bei 54%, welche auch in Abbildung 5.7 (b) für die Zu-
satzinformationen eines Fragebogen-Modells verwendet wurde. Zur Darstellung von
Weiß als Schriftfarbe gilt die Abstufung 100% und 70%.
Bei der Schriftgröße wird nach [
21
] für Überschriften Größe 32pt verwendet, für Unter-
überschriften 24pt beziehungsweise 28pt und für Textkörper 20pt oder 28pt.
45
6
Zusammenfassung
Das Ziel dieser Arbeit war es, ein benutzerfreundliches Konzept für die mobile Client-
Anwendung zum Verwalten und Ausfüllen von Fragebögen zu entwickeln und einen
Styleguide zu erarbeiten. Mit Hilfe von Modellen des Usability Engineering zur Vor-
gehensweise und den entsprechenden Usability-Aktivitäten sollte dieses Ziel erreicht
werden. Aus der Anforderungsanalyse ergaben sich die wichtigsten Ziele für den Gestal-
tungsprozess:
•Neutrale Gestaltung, da die Zielgruppe der Endbenutzer sehr groß ist
•Einfach (d.h. ohne Schulung) nutzbar
•Intuitive, einfache Navigation
•Verfügbarkeit in verschiedenen Sprachen
Im nächsten Schritt wurden diese Anforderungen in einem konzeptuellen Entwurf verar-
beitet. Daraus resultierten nach und nach feinere Mockups, die als Grundlage für den
Styleguide dienten.
In der Phase der Anforderungsanalyse war die Untersuchung der Anwendungssze-
narien ein besonders wichtiger Schritt. Hierbei wurde zum einen der Prozess eines
Asylantrags und dessen Digitalisierung untersucht, zum anderen die Verwendung der
mobilen Client-Anwendung im Schulunterricht. Das erste Szenario zeigte dabei beson-
ders, wie wichtig Mehrsprachigkeit und einfache Benutzung sind. Während in diesem
Szenario bereits kaum Einschränkungen im Bereich der Zielgruppe gemacht werden
konnten, ging es im zweiten Szenario hauptsächlich um Schüler im Alter von etwa 11
bis 19 Jahren, sowie die zugehörige Lehrpersonen. In diesem zweiten Anwendungsfall
47
6 Zusammenfassung
wurde von regelmäßiger Verwendung der Anwendung ausgegangen, da dies in vielen
Schulfächern für Arbeitsblätter und Klausuren sinnvoll sein könnte. Zudem wurde hier
deutlich, dass es im Bezug auf die Gestaltung der Oberfläche schwierig war, ein neutra-
les Farbschema zu finden, welches sowohl den jüngeren Schülern im Schulalltag, als
auch den Flüchtlingen in ihrer Situation gerecht wird.
Weitere Erkenntnisse, die im Rahmen der Anwendungsfälle gemacht wurden, betreffen
die Evaluation während oder direkt nach der Bearbeitung eines Fragebogens. In beiden
Szenarien wurden bestimmte Angaben direkt ausgewertet und bewirkten eine Verzwei-
gung im Ablauf des Fragebogens. Im Falle des Asylverfahrens gelangte der Benutzer je
nach Sprachauswahl zu dem entsprechenden Fragebogen. Im zweiten Szenario wurde
der Aufbau einer Klausur beschrieben, die Fragen zu verschiedenen Projekten beinhaltet.
Der Schüler gelangte je nach Gruppenzugehörigkeit zu den projektspezifischen Aufga-
ben. In anderen Anwendungsfällen dagegen, wie im medizinischen Kontext, werden
Daten in Umfragen erhoben und zu einem späteren Zeitpunkt anonymisiert ausgewertet.
In den beiden Anwendungssituationen ergaben sich Ideen für eher zweitrangige Funk-
tionen, die allerdings die Verwendung der mobilen Applikation für den Benutzer und
den Administrator komfortabler machen könnten. Beispielsweise könnten Fragebogen-
Instanzen, auf die Evaluationsregeln angewendet wurden, automatisch eine Markierung
erhalten. Zudem könnte man Fragebogen-Modelle oder auch spezifische Instanzen
als Favorit markieren, so dass dieses Element an den Listenanfang gesetzt wird. Eine
andere optionale Funktion könnte die Festlegung eines Zeitraumes sein, in dem ein Fra-
gebogen gestartet werden kann oder die sofortige Trennung vom Internet nach Beginn
der Bearbeitung. Diese Funktionalitäten haben im Entwicklungsprozess sehr geringe
Priorität und fallen vorerst in die Kategorie „Nice-to-Have“. Durch Nutzerfeedback kann
das System jederzeit um weitere nützliche Funktionen erweitert werden.
Die wichtigsten Funktionen sind in den entwickelten Entwürfen erfasst. Durch Mockups
wurde allerdings nur ein Teil der Gesamtfunktionalität dargestellt, da die Entwicklung der
Gestaltungsrichtlinien im Vordergrund stand. Die Erstellung von Anwendungsszenarien
spielte dabei eine wichtige und hilfreiche Rolle.
48
In weiteren Schritten soll nun ein elektronischer Prototyp entwickelt werden, der durch
Usability-Tests und Nutzerfeedback evaluiert wird. Durch die Verwendung von evolutio-
närem Prototyping kann die Anwendung nach und nach vervollständigt werden.
49
Literaturverzeichnis
[1]
Abstoss, S.: Top-Liste: 10 kostenlose Umfrage-Tools (2010)
http://blog.
marketingshop.de/top-liste-10-kostenlose-umfrage-tools/
Accessed: 30.11.2015.
[2]
Schmidt, H.: (Anzahl der Smartphone-Nutzer in Deutschland
in den Jahren 2009 bis 2015 (in Millionen))
http://de.
statista.com/statistik/daten/studie/198959/umfrage/
anzahl-der-smartphonenutzer-in-deutschland-seit-2010/
Accessed: 26.11.2015.
[3]
Schobel, J., Ruf-Leuschner, M., Pryss, R., Reichert, M., Schickler, M., Schauer, M.,
Weierstall, R., Isele, D., Nandi, C., Elbert, T.: A generic questionnaire framework
supporting psychological studies with smartphone technologies. In: XIII Congress
of European Society of Traumatic Stress Studies (ESTSS) Conference. (2013)
69–69
[4]
Schobel, J., Schickler, M., Pryss, R., Maier, F., Reichert, M.: Towards Process-
Driven Mobile Data Collection Applications: Requirements, Challenges, Lessons
Learned. In: 10th Int’l Conference on Web Information Systems and Technologies
(WEBIST 2014), Special Session on Business Apps. (2014) 371–382
[5]
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
[6]
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
[7]
Schobel, J.: (Generic Questionnaire Framework QuestionSys)
http:
//www.uni-ulm.de/fileadmin/website_uni_ulm/iui.inst.030/
51
Literaturverzeichnis
research/QuestionSys/_img/architecture_small_en.jpg
Accessed:
13.10.2015.
[8]
Standardization, I.O.F.: ISO 9241-11: 1998: Ergonomic Requirements for Office
Work with Visual Display Terminals (VDTs) - Part 11: Guidance on Usability.
International Organization for Standardization (1998)
[9]
Nielsen, J.: Usability Engineering. Morgan Kaufmann Publishers Inc., San Francisco,
CA, USA (1995)
[10] Akkreditierungsstelle, D.: Leitfaden Usability V1. 3 (2010)
[11]
Mayhew, D.: The Usability Engineering Lifecycle: A Practitioner’s Handbook for User
Interface Design. Interactive Technologies Series. Morgan Kaufmann Publishers
(1999)
[12]
Reisser, A.: Technische Konzeption und Realisierung einer dynamisch generierten
Anwendung für prozess-orientierte Fragebögen am Beispiel der mobilen Android
Plattform. Diploma thesis (2014)
[13]
Scherle, S.: Konzeption und Evaluierung einer domänenspezifischen
Modellierungsumgebung für prozessorientierte Fragebögen. Diploma thesis (2014)
[14]
BAMF: (Anzahl der Asylanträge (Erstanträge) in Deutschland von Oktober 2014
bis Oktober 2015)
http://de.statista.com/statistik/daten/studie/
151124/umfrage/asylantraege-in-deutschland/
Accessed: 26.11.2015.
[15]
Cloppenburg, A., Spengler, A.: (Überblick über das Asylverfahren)
http://asyl.journalistenschule-ifp.de/wp-content/uploads/
2013/08/%C3%9Cbersicht-Asyl-ENDG%C3%9CLTIG2.jpg
Accessed:
28.10.2015.
[16]
Henderson, S., Yeow, J.: iPad in education: A case study of iPad adoption and
use in a primary school. In: 2012 45th Hawaii International Conference on System
Science (HICSS), IEEE (2012) 78–87
[17]
Dündar, H., Akçayır, M.: Implementing tablet PCs in schools: Students’ attitudes
and opinions. Computers in Human Behavior 32 (2014) 40–46
52
Literaturverzeichnis
[18]
Twining, P., Evans, D.: Should there be a future for Tablet PCs in schools? Journal
of Interactive Media in Education 2005 (2010) Art–20
[19] Tidwell, J.: Designing Interfaces. Ö’Reilly Media, Inc."(2010)
[20]
Gabele, T.: (List of free statistical software)
http://statistiksoftware.com/
free_software.html Accessed: 09.11.2015.
[21]
Google: (Material Design)
http://www.google.com/design/spec/
material-design/introduction.html Accessed: 09.11.2015.
[22] Nielsen, J., Budiu, R.: Mobile Usability. MITP-Verlags GmbH & Co. KG (2013)
[23]
Bollini, L.: Topos vs. Iris. Colour design in Web 3.0 mobile app and OS: a critical
review. (2014)
[24] Wong, B.: Points of View: Color Blindness. nature methods 8(2011) 441–441
[25]
Huang, S.M., Shieh, K.K., Chi, C.F.: Factors Affecting the Design of Computer Icons.
International Journal of Industrial Ergonomics 29 (2002) 211–218
53
Abbildungsverzeichnis
1.1
Anzahl der Smartphonebenutzer in Deutschland im Zeitraum von 2009
bis2015[2].................................... 2
1.2
Aufbau dieser Arbeit. Zudem werden wichtige Fragen aufgeführt, die in
den jeweiligen Kapiteln beantwortet werden. . . . . . . . . . . . . . . . . 3
2.1 Übersicht des generischen Fragebogensystems QuestionSys [7]. . . . . . 6
2.2
Gestaltungsrahmen nach dem Leitfaden Usability Engineering [
10
], aufgeteilt
in Phasen, die in die einzelnen Schritte des Softwareentwicklungsprozesses
eingegliedert werden können. . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1
Die Applikation startet mit einem Splashscreen, worauf nach kurzer Zeit
die Startseite folgt. Inhalte dieser Grafik stammen aus [13]. . . . . . . . . 10
3.2 Die Startseite des geschützten Administrator-Bereichs. . . . . . . . . . . 11
3.3 Hierarchische Navigation für Fragebogenmodelle und deren Instanzen. . 12
3.4 Die Startseite des passwortgeschützten Administrator-Bereichs [13]. . . . 13
3.5
Anzahl der Asylanträge (Erstanträge) in Deutschland von Oktober 2014
bisOktober2015[14].............................. 15
3.6 Überblick über das Asylverfahren in Deutschland [15]. . . . . . . . . . . . 16
3.7 Einsatz von QuestionSys im Ayslverfahren. . . . . . . . . . . . . . . . . . 17
3.8 Einsatz von QuestionSys im Schulalltag. . . . . . . . . . . . . . . . . . . . 18
3.9 Diese Button Bar kann automatisch ausgewertet werden [13]. . . . . . . . 19
3.10
Der erste Teil des Tests besteht aus allgemeinen Fragen, die zweite Hälfte
der Klausur beinhaltet projektspezifischen Fragen. . . . . . . . . . . . . . 20
4.1 Use-Case-Diagramm für die Übersicht der Fragebogen-Modelle. . . . . . 27
4.2 Use-Case-Diagramm für die Übersicht der Fragebogeninstanzen. . . . . . 28
4.3 Use-Case-Diagramm für die Einstellungen des Administrators. . . . . . . 28
4.4
Statechart der Client-Anwendung Questionnaire. In diesem Kontext sind
allerdings nur die eingefärbten Bereiche interessant. . . . . . . . . . . . . 30
4.5 Wireframes einer Listendarstellung und der Sidebar. . . . . . . . . . . . . 31
55
Abbildungsverzeichnis
4.6
Wireframe zur Listenansicht, den Tabs und dem Menü, das über das
Symbol rechts in der Actionbar aufgerufen wird. . . . . . . . . . . . . . . . 32
4.7
Wireframe zur Darstellung der Funktionen nach Auswahl beliebiger Listenelemente
(links) und der Funktionen, für jedes einzelne Element zur Verfügung
stehen(rechts).................................. 32
4.8 Mockups zur möglichen Listendarstellung: Cards (links) oder zweizeilige
Listen, bestehend aus einem Avatar, Text und einem Icon zum Löschen
des Listenelements (rechts). . . . . . . . . . . . . . . . . . . . . . . . . . 34
4.9
Verschiedene Ideen zur Darstellung der Markierungen an einzelnen
Listenelementen................................. 35
4.10 Navigation Drawer mit allen Funktionen. . . . . . . . . . . . . . . . . . . . 36
4.11 Verschiedene Farbschmata für die Applikation. . . . . . . . . . . . . . . . 37
4.12 Logo der Client-Anwendung Questionnaire für das iPad4 [13]. . . . . . . . 38
5.1 Farbschema der Client-Anwendung Questionnaire.............. 40
5.2
Fallback Colors: Farben, die alternativ zur Akzentfarbe verwendet werden
können, wenn sie besser passen. . . . . . . . . . . . . . . . . . . . . . . . 40
5.3 Farbcodierung für die Zustände aktiviert,deaktiviert und archiviert. . . . . 41
5.4 App-Icon in Anlehnung an [13]. . . . . . . . . . . . . . . . . . . . . . . . . 42
5.5 Verwendete Piktogramme und Avatare . . . . . . . . . . . . . . . . . . . . 43
5.6 Vorschläge für verschiedene mögliche Farbschemata. . . . . . . . . . . . 44
5.7 SchriftartRoboto................................ 45
56
Tabellenverzeichnis
3.1
Erkenntnisse über die Benutzer der mobilen Applikation in den jeweiligen
Szenarien.................................... 21
5.1 Farben der Fragebogen-Modelle im HSB-Farbraum. . . . . . . . . . . . . 41
57
Name: Andrea Reidel Matrikelnummer: 801880
Erklärung
Ich erkläre, dass ich die Arbeit selbstständig verfasst und keine anderen als die angegebenen
Quellen und Hilfsmittel verwendet habe.
Ulm,den .............................................................................
Andrea Reidel