Universität Ulm | 89069 Ulm | Germany Fakultät für
Ingenieurwissenschaften,
Informatik und
Psychologie
Institut für Datenbanken
und Informationssysteme
Entwicklung eines Design-Konzepts für
eine multinationale Forschungsdaten-
bank zur Speicherung von longitudina-
len Patientendaten
Bachelorarbeit an der Universität Ulm
Vorgelegt von:
Irina Stenske
Gutachter:
Prof. Dr. Manfred Reichert
Betreuer:
Dr. Rüdiger Pryss
2015
Fassung 12. Januar 2016
c
2015 Irina Stenske
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
Beim Tinnitus hören die betroffenen Personen ein Geräusch oder ein Ton ohne akusti-
sche Quelle. Dieses Phänomen ist weltweit verbreitet und kann sogar das alltägliche
Leben der Betroffenen beeinflussen. Daher wurde die Tinnitus Research Initiative (TRI)
gegründet, die viele Forschergruppen unterstützt, die dieses Phänomen untersuchen.
Zusätzlich wurde die Tinnitus Datenbank erstellt, die die Patientendaten erfasst und
diese den Forschergruppen zur Verfügung stellt. Diese Patientendaten umfassen ge-
zielte Untersuchungen, bei denen die Schwere des Tinnitus und die Lebensqualität der
Patienten durch validierte Fragebögen bewertet werden.
Diese Fragebögen wurden bisher Vorort in den jeweiligen TRI Zentren von den Patienten
ausgefüllt und nachträglich in die Datenbank eingepflegt. In Zukunft sollen die Patienten
die Fragebögen direkt im System ausfüllen. Jedoch ist dieses alte System nicht sehr
nutzerfreundlich und für eine Benutzung von Patienten kaum geeignet. Da vor allem es
Personen verschiedenen Alters sind und dementsprechend haben die Patienten unter-
schiedliche Erfahrungen im Umgang mit Webseiten. Daher soll ein Designkonzept einer
Webseiten nur für den Patienten entworfen werden, die das Ausfüllen der Fragebögen
erleichtert, nutzerfreundlich ist und somit die Handhabung mit dem System vereinfacht.
iii
Danksagung
An dieser Stelle möchte ich mich bei meinem Betreuer Dr. Rüdiger Pryss bedanken für
die Betreuung und das Feedback während der gesamten Ausarbeitungszeit.
Ein weiterer Dank geht an meine Familie, die mich die ganze Zeit unterstützt und mir
den nötigen Freiraum eingeräumt haben.
v
Inhaltsverzeichnis
1 Einleitung 1
1.1 Tinnitus ..................................... 1
1.2 Tinnitus Research Initiative . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 Anforderung 7
2.1 Anforderungskatalog.............................. 7
2.2 Zusätzliche Anforderungen der Fragebögen . . . . . . . . . . . . . . . . . 9
3 Aufbau der Webseite 11
3.1 Navigation.................................... 12
3.2 VordemEinloggen............................... 13
3.3 NachdemEinloggen.............................. 14
3.4 Patientenbereich................................ 16
3.4.1 Patientendaten............................. 17
3.4.2 Fragebögen............................... 18
3.4.3 Benutzereinstellungen . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.4.4 Charts.................................. 19
4 Erster Entwurf 21
4.1 Hintergrund................................... 21
4.2 Header ..................................... 24
4.3 Footer...................................... 25
4.4 Navigation.................................... 25
4.5 Content ..................................... 29
4.5.1 Anmeldebereich ............................ 30
4.5.2 Fragebogen............................... 32
5 Finaler Entwurf 39
5.1 VorderAnmeldung............................... 39
vii
Inhaltsverzeichnis
5.2 NachderAnmeldung.............................. 43
5.2.1 Navigation ............................... 43
5.2.2 Fragebogen............................... 45
5.2.3 Charts.................................. 48
5.2.4 Download & Upload . . . . . . . . . . . . . . . . . . . . . . . . . . 49
5.2.5 Einstellungen.............................. 52
5.2.6 Informationen & Hilfe . . . . . . . . . . . . . . . . . . . . . . . . . . 53
6 Abgleich der Anforderungen 55
6.1 Abgleich des Anforderungskatalogs . . . . . . . . . . . . . . . . . . . . . 55
6.2 Abgleich zusätzlicher Anforderungen . . . . . . . . . . . . . . . . . . . . . 60
7 Zusammenfassung 63
7.1 Ausblick..................................... 64
viii
1
Einleitung
„Der neidische Dämon hat meiner Gesundheit einen schlimmen Streich gespielt, näm-
lich mein Gehör ist seit drei Jahren immer schwächer geworden . . . nur meine Ohren,
die sausen und brausen Tag und Nacht fort . . . Ich bringe mein Leben elend zu.“
, dies
schrieb Beethoven 1801 an seinen Freund Dr. Franz Gerhard Wegeler [1].
Mit der Aussage, dass Beethovens Ohren „sausen und brausen Tag und Nacht fort ...“
kann man davon ausgehen, dass er an Tinnitus litt. Er ist einer von vielen, bei denen
das Phänomen Tinnitus auftrat. In der heutigen Zeit sind es bei der erwachsenen Bevöl-
kerung ca. 10 % [2].
Um dieses Phänomen besser erforschen zu können und den Betroffenen ihr alltägli-
ches Leben erträglicher zu gestalten, wurde 2006 die Tinnitus Research Initiative (kurz
TRI) gegründet. Dabei werden verschiedene Forschergruppen unterstützt und seit 2008
versucht man durch eine gemeinsame Datenbank die Tinnitus-Forschung weiter voranzu-
treiben. Zukünftig sollen die Datensätze direkt vom Patienten in die Tinnitus-Datenbank
eingepflegt werden. Daher soll eine Webseite für den Patientengebrauch designt werden.
Diese Ausarbeitung befasst sich mit dem Design der Webseite für die Benutzung der
Patienten. Zum besseren Verständnis wird zunächst das Tinnitus-Symptom beschrieben
und das TRI und die Tinnitus-Datenbank näher vorgestellt.
1.1 Tinnitus
Die betroffenen Personen nehmen meistens ein Ton oder ein Geräusch ohne akustische
Quelle wahr. Diese häufigste Form des Tinnitus wird als subjektiver Tinnitus bezeichnet.
Dabei können die Geräusche von außen nicht wahrgenommen werden. Beim objektiven
1
1 Einleitung
Tinnitus ist es jedoch anders. Da liegt die Quelle der Geräusche meist im Innenohr und
kann sogar vom Arzt wahrgenommen werden [3].
Das Wort Tinnitus wird vom lateinischen Wort tinnire abgeleitet und bedeutet klingeln,
klimpern, dass wörtliche die Geräusche beschreibt. Dabei nehmen die Personen oftmals
einen kurzen Pfeifton oder Rauschen im Ohr war. In den meisten Fällen lässt dieses
Geräusch gleich wieder nach und wird somit nicht viel Beachtung geschenkt. Jedoch
kommt es vor, dass dieser Ton anhaltend oder wiederkehrend über Stunden, aber auch
Tage im Kopf bleiben kann. In diesem Fall spricht man von einem akuten Tinnitus, bei
dem der Krankheitsbeginn weniger als drei Monate zurückliegt. Die Aussicht auf Heilung
wird beim akuten Tinnitus höher geschätzt, daher wird bei der Behandlung darauf hinge-
arbeitet den chronischen Tinnitus vorzubeugen. Der chronische Tinnitus, der länger als
drei Monate anhält, gilt als unheilbar [
4
]. Bei der Behandlung des chronischen Tinnitus
wird darauf abgezielt das alltägliche Leben so gut wie möglich mit dem Tinnitus zu
bewältigen beziehungsweise zu lernen die Geräusche zu ignorieren.
Längere Zeit ist man davon ausgegangen, dass der Tinnitus durch eine Veränderung im
Innenohr bzw. im Gehörgang verursacht wird, wie zum Beispiel durch ein Schalltrauma
oder einem Fremdkörper. Durch verschiedene Studien hat es sich jedoch ergeben, dass
das Gehirn bzw. bestimmte Gehirnareale für das Entstehen des Tinnitus verantwortlich
sein sollen [
5
]. Dabei geht man von verschiedenen Theorien aus [
4
]. Bei der Remapping-
Theorie werden Umbaumaßnahmen in der Hörrinde als Verursacher identifiziert. Dabei
bekommt die Hörrinde keinen auditiven Input der Haarzellen, die für bestimmte Fre-
quenzen verantwortlich sind, und holen sich somit von benachbarten Nervenzellen
die Informationen. In der Hörrinde sind jedoch die Frequenzen überrepräsentiert und
verursachen somit die Geräusche.
Eine Theorie des Georgetown University Medical Center in Washington besagt, dass das
limbische System ebenfalls eine entscheidende Rolle spielt. Bei den Tinnitus-Leidenden
wurde das Volumen des präfrontalen Cortex, der zum limbischen System dazugehört,
vermindert vorgefunden. Somit unterdrückt dieser den auditorischen Cortex nicht richtig,
d. h., die Geräusche des Tinnitus werden komplett wahrgenommen.
Da die Ursache des Tinnitus bis jetzt nicht ganz klar ist, macht es die Behandlung davon
nicht leicht. Vor allem da bei einigen Patienten eine Therapie hervorragend funktioniert,
2
1.2 Tinnitus Research Initiative
während bei anderen wiederum nicht. Außerdem kommt es bei 1 % der Betroffenen [
6
]
zu Begleiterscheinungen wie Schlafstörungen, Konzentrationsstörungen oder anderen
gesundheitlichen Problemen.
1.2 Tinnitus Research Initiative
Um die Forschung und die Zusammenarbeit von verschiedenen Gruppen, die sich mit
dem Tinnitus befassen, voranzutreiben, wurde die Tinnitus Research Initiative (TRI) 2006
ins Leben gerufen [
7
]. Sie unterstützt die Forschergruppen, die sich mit der Entwicklung
effektiver Behandlungsmethoden des Tinnitus befassen und verbreitet diesbezüglich
neue Informationen. Um die Fortschritte bei der Tinnitus-Forschung weiter voranzutrei-
ben, wurde 2008 eine gemeinsame internationale Datenbank eingerichtet, die Tinnitus
Datenbank [8].
Die Datenbank soll die standardisierten Datensätze der Patienten sammeln. Diese Da-
tensätze enthalten bestimmte Merkmale, Behandlungs- und Beratungsergebnisse der
Tinnitus Patienten. Außerdem soll es eine Beschreibung der verschiedenen Formen des
Tinnitus geben und die Identifikation der Prädiktoren von Behandlungsergebnissen für
bestimmte Therapien. Somit können verschiedene Zentren und Forschergruppen auf
die Daten der Datenbank zugreifen. Seitdem das Tinnitus Datenbank Projekt gestartet
wurde, wurden bereits 3000 Tinnitus Patienten dokumentiert. Es nehmen 19 Zentren
von 11 Ländern daran teil.
Der Hauptgrund die Datenbank ins Leben zu rufen, war vor allem, dass es viele Forscher-
gruppen gab, die kleine Patientenproben zur Verfügung hatten und die Behandlungsstu-
dien meist ohne standardisierte Methoden durchführten [
9
]. Es gab somit nur eine kleine
Menge an Ergebnissen, die schlecht wegen der variierenden Methoden miteinander
bewertet werden konnten. Außerdem gab es Schwierigkeiten Behandlungsreaktionen
für bestimmte Ansätze vorhersagen zu können und vielversprechende Therapien für
bestimmte Patienten festzustellen.
Die Ziele der TRI-Datenbank werden unten aufgelistet [8]:
3
1 Einleitung
•
Subtypisierung von verschiedenen Tinnitus-Formen, die auf ihre bestimmten Sym-
ptome und / oder ihre Reaktionen auf Behandlungsmodalitäten (z. B. durch Cluster
Analysen) basieren
•
Identifikation der Prädiktoren von Behandlungsreaktionen bei bestimmten Behand-
lungen
•
Bewertung der Behandlungsergebnisse für bestimmte Behandlungen mit modula-
ren Ansätzen
•
Identifikation der Kandidaten klinischer Merkmale um neurobiologisch verschiede-
ne Tinnitus-Formen zu beschreiben
•
Erläuterung für die abweichenden Ergebnisse der unterschiedlichen Studien (z.
B. durch die Möglichkeit die Unterschiede zwischen den Studienpopulationen
festzustellen)
•Sammlung der epidemiologischen Daten
•
Vergleichsprüfung der verschiedenen Bewertungsinstrumente in verschiedenen
Sprachen
•
Entwicklung eines individuellen Behandlungsalgorithmus für jeden einzelnen Pati-
enten, die auf dem individuellen diagnostischen Profil basieren
•
Beschreibung der Untergruppen mit ähnlichen Merkmalen und erzeugten Daten
über unterschiedliche Einflüsse von diagnostischen Verfahren
Durch diese Ziele soll die Datenbank die zukünftigen Forschungen erleichtern und
individuelle Tinnitus-Behandlungen vorantreiben. Die Forschungsgruppen untersuchen
nicht nur die Ursachen und die Behandlung von Tinnitus, sondern auch wie die Le-
bensqualität der Tinnitus-Leidenden verbessert werden kann. Da es wie im Abschnitt
Tinnitus 1.1 beschrieben neben dem Tinnitus noch zu Begleiterscheinungen kommen
kann. Daher nehmen viele Zentren wie beispielsweise das Zentrum in Regensburg ge-
zielte Untersuchungen vor, um die Lebensqualität der Patienten herauszufinden. Diese
Untersuchungen beinhalten die detaillierte Tinnitus- und Krankengeschichte, otologi-
sche Untersuchung, psychoakustische Maßeinheiten des Tinnitus und eine Vielzahl an
validierten Fragebögen, die die Schwere des Tinnitus und die Lebensqualität beurteilen
4
1.2 Tinnitus Research Initiative
[
9
]. In dieser Studie kommt die Tinnitus Datenbank zum Einsatz, die die Ergebnisse der
Untersuchungen beinhaltet und für weitere Arbeiten zur Verfügung stellt.
Um die Benutzung der Datenbank und die Fortschritte der Forschungen effizienter zu
machen, sollen die Patienten direkt auf die Datenbank Zugriff haben und ihre Daten dort
selbstständig hinterlassen. Die Datenbank ist jedoch für die Benutzung von Patienten
nicht ganz ausgelegt, da die Studie hauptsächlich an den Zentren abgelaufen ist. Dabei
haben die teilnehmenden Patienten an den jeweiligen Zentren die Fragebögen schriftlich
ausgefüllt und diese wurden dann von den Mitarbeitern bzw. den Ärzten nachträglich in
das System eingepflegt. In der Abbildung 1.1 kann man einen Ausschnitt der bisherigen,
unausgereiften Webseite sehen, mit der die Ärzte und die Mitarbeiter arbeiten durften.
In den nachfolgenden Kapiteln wird die bisherige Webseite näher betrachtet.
Die Variante des Vorort Ausfüllens hat den Vorteil, dass die Patienten bei Fragen sich
direkt an die Mitarbeiter wenden können, jedoch verschwenden die Patienten mit der An-
und Abreise zusätzlich Zeit. Außerdem ist das nachträgliche Einpflegen der Fragebögen
in das System für die Mitarbeiter ein zusätzlicher Aufwand.
Daher soll diese Prozedur für die Mitarbeiter, aber auch für die Patienten vereinfacht
werden. Die Patienten sollen zukünftig die Fragebögen direkt von zu Hause aus über
einen Webbrowser ausfüllen. Somit können die Zentren unmittelbar nach dem ausfüllen,
darauf zugreifen. Der Patient hat die Möglichkeit seine Daten einzusehen und sogar den
Verlauf seines Leidens angezeigt zu bekommen.
5
1 Einleitung
Abbildung 1.1: Ansicht der bisherigen Webseite
6
2
Anforderung
In diesem Kapitel werden die Anforderungen an die Webanwendung für das Patienten-
Modul definiert. Dabei wurden Überlegungen angestellt, die sich mit den Problemen
einer international benutzen Webseite befassen und die dementsprechenden Anforde-
rungen dazu. Im weiteren werden Anforderungen an bestimmte Elemente der Webseite
aufgestellt.
2.1 Anforderungskatalog
Dieser Abschnitt beschreibt die Anforderungen, die sich hauptsächlich auf die Sicht des
Patienten beziehen. Es werden nicht nur Anforderungen für das Aussehen dieser Web-
seite aufgezeigt, sondern auch funktionelle, die beim Designentwurf mitberücksichtigt
werden sollen.
Mehrsprachigkeit:
Mitarbeiter und Patienten aus vielen verschiedenen Ländern wer-
den dieses System benutzen. Daher sollten sie immer die Möglichkeit haben, die
Seiten zwischen den Sprachen hin- und herzuschalten. Die Textfelder müssen groß
genug sein, damit die verschiedenen Schriftsätze, wie die persische, kyrillische
und weitere dargestellt werden können. Um einen klaren und vollständigen Text
anzeigen zu können ohne fehlende Schriftzeichen, sollte eine passende Codierung
für die Unicode-Zeichen (z. B. UTF-8) verwendet werden.
Ein System, wie ein Content-Management-System, auf dem dann die Übersetzer
arbeiten, könnte im Laufe des Projekts weitere Sprachen in das System einbinden.
7
2 Anforderung
Die Texte würden gleichzeitig in den Code eingepflegt werden und somit würde
der Aufwand für die Programmierer entfallen.
Barrierefreiheit:
An diesem Forschungsprojekt nehmen verschiedene Personen teil,
darunter befinden sich ältere Menschen, aber auch Personen mit Sehbehinderung.
Die Möglichkeit die Schriftgröße zu verändern, wäre in diesem Fall vorteilhaft.
Außerdem könnte der Kontrast zwischen der Schrift- und der Hintergrundfarbe
veränderbar gemacht werden.
Nutzerfreundlichkeit:
Die unterschiedliche Darstellung der Knöpfe in den Fragebögen
bei der alten Version war ungünstig aufgebaut. Es wurden entweder zu kleine oder
völlig überdimensionierte Knöpfe verwendet. Bei der Darstellung der Elemente
sollte auf eine einheitliche Form geachtet werden.
Fehlervermeidung:
Damit keine Fragebögen oder Seiten übersehen werden, wie es
beim alten System der Fall war, sollte das System übersichtlich durch die Fragebö-
gen und Visiten führen.
Fragebögen ausfüllen:
Keine Voreinstellung: Wenn bei einigen Elementen schon Wer-
te voreingestellt sind, können diese wie bei der Datumeingabe leicht übersehen
werden oder auch sogar zu einer Beeinflussung der Eingabe führen, wie bei der
Tinnitus-Belastung.
Hilfe-Anzeige:
In den Fragebögen und auch bei den Fragen sollte es die Möglichkeit
geben ein Hilfesymbol zu drücken bei dem dann ein Hilfetext erscheint.
Betriebssystem- und Browser unabhängig:
Das System sollte möglichst auf allen
Betriebssystemen und mit den üblichen Browsern laufen.
Ausführbarkeit auf mobilen Geräten:
Zu Beginn der Studie sollten die Patienten auf
die Datenbank auf einem Rechner in einem Browser Zugriff haben. In weiteren
Schritten sollte es möglich sein, die Datenbank mit mobilen Geräten wie einem
Tablet oder einem Smartphone aufrufen zu können.
Verwaltung von Neuroimaging Daten:
Der Patient sollte die Möglichkeit haben Neu-
roimaging Daten, aber auch weitere Daten von sich selbst hoch- und herunterladen
zu können. Dabei sollte die Darstellung der Datenfiles übersichtlich und mit spe-
8
2.2 Zusätzliche Anforderungen der Fragebögen
ziellen Informationen (Art, Größe, Scanner-Typ, Datum, Kommentare) versehen
sein.
2.2 Zusätzliche Anforderungen der Fragebögen
Dieser Abschnitt enthält gesonderte Anforderungen, die sich speziell auf bestimmte
Elemente der einzelnen Fragebögen beziehen. Dabei handelt es sich hauptsächlich um
solche Elemente, die die Ausfüllung des Fragebogens erleichtern sollen.
Eingabe des Tinnitus-Beginns:
Der Patient soll Alternativen haben auszuwählen, falls
das genaue Datum nicht mehr bekannt ist.
1. Das genaue Datum ist bekannt – genaue Eingabe
2.
Nur noch Monat und Jahr ist bekannt – dementsprechende reduzierte Angabe
3.
Vor weniger als x Jahre(n) ist bekannt – das x wird vom Patienten eingegeben
Screening-Baseline-Problem:
Es soll eine Möglichkeit geben eine Wahl zu haben, ob
man zuerst das Screening und dann die Baseline Erhebung durchführt oder die
Screening und Baseline Erhebung am selben Tag durchführen will, damit beide in
der Datenbank eingegeben werden.
Keine Angabe:
Bei der Ausfüllung eines Fragebogens soll der Patient nicht mehr die
Möglichkeit haben „keine Angabe “anzuklicken. Dieses Recht obliegt nur dem
Administrator oder dem Redakteur.
Eingabe der Tinnitusgeräusche:
Falls ein Patient mehrere Tinnitusgeräusche wie
Rauschen links, ein hoher Ton rechts und weitere angeben will, sollte er die Mög-
lichkeit dazu haben. Dafür würde ein Textfeld mit integrierter Autovervollständigung
wie bei Google, aber auch eine Mustererkennung, das beispielsweiße bei der Ein-
gabe von „rauschen l “, „Rauschen links“ angegeben wird, benötigt. Im Hintergrund
sollte das System bei Neueingaben auf vorhandene Einträge prüfen und die Liste
dementsprechend inkrementell wachsen lassen.
9
2 Anforderung
Datumseingabe:
Bei der Eingabe des Datums sollen dem Patienten 2 Optionen ange-
boten werden, entweder direkt über die Tastatur oder über spezielle Felder wie bei
einer Flugbuchung.
Copy & Paste Funktion:
Da im Laufe des Projekts immer wieder die gleichen Fragen
ausgefüllt werden, sollte der Patient nicht die Möglichkeit haben, ein Fragebogen
zu kopieren und beim Nächsten einzufügen.
10
3
Aufbau der Webseite
Wie schon in der Einleitung 1.2 erwähnt, wurde die Tinnitus Datenbank hauptsächlich
von den Mitarbeitern der verschiedenen Zentren, sowie von den Ärzten beziehungsweise
den Forschergruppen verwendet. Daher ist die gesamte Funktionalität der Webseite
auf die jeweiligen Personengruppen ausgelegt. Der Patientenbereich ist so entworfen
worden, dass der Arzt bzw. ein Mitarbeiter einen Patienten anlegen kann und dement-
sprechend die Fragebögen nachträgt.
Dieser Abschnitt zeigt einen kurzen Überblick über die nicht-funktionelle und funktio-
nelle Sicht der bisherigen Webseite sowie einige Probleme, vor allem die sich auf die
derzeitige Patientenhandhabung beziehen. Zur Übersichtlichkeit werden im weiteren
Verlauf nur noch die Mitarbeiter genannt, jedoch sind die anderen Personengruppen
(Arzt, Forschergruppen,etc.) mit einbezogen.
Die Webseite ist in einem schlichten Stil erstellt worden. Wie in der Abbildung 3.1
dargestellt, enthält es einen Header, der nur das Logo der Seite aufzeigt und einen Body,
der den Content und die Navigation enthält. Die Struktur der Seite ist fest angesetzt,
die jeweiligen Bereiche bleiben in ihren vorgeschriebenen Ebenen. So ist jeder Bereich
immer zusehen. Der Navigations- und der Contentbereich bekommen eine Scrollleiste,
wenn diese mehr Inhalt anzeigen müssen, als ihr Bereich darstellen kann.
11
3 Aufbau der Webseite
Abbildung 3.1: Übersicht der Bereiche der Webseite
3.1 Navigation
Die Menüleiste ist vertikal mit einem sogenannten Akkordeoneffekt dargestellt. Dabei
wird die Menüleiste wie bei einem Akkordeon auseinandergezogen, um die Unter-
menüpunkte anzeigen zu können. Jedoch werden in dieser Variante die ausgeklappten
Menüpunkte nicht mehr automatisch eingeklappt. Das hat zur Folge, das die Menüleiste
immer größer wird und somit nicht mehr in ihren angezeigten Bereich reinpasst. In der
Abbildung 3.2 zu sehen, muss die Menüleiste mit einer Scrollleiste versehen werden,
um die anderen Menüpunkte, die nicht angezeigt werden, angezeigt zu bekommen.
Bei den einzelnen Menüpunkten sind neben den Namen zusätzlich Icons sichtbar. Das
hat den Vorteil, das es den Wiedererkennungswert steigert und man ohne den Text zu
lesen meistens schon weiß, worum es geht, wenn man das Symbol anschaut. Jedoch
werden hier zu viele Icons verwendet, die sich sogar weitestgehend ähneln und man
langsam auch den Überblick verliert, welches Icon was bedeuten soll. Daher sind in
diesem Fall die Icons eher schlecht gewählt und können die Benutzer mehr verwirren
als helfen.
Die Hover-Funktion wurde mit der Veränderung der Schriftart verwirklicht. Die Schrift-
12
3.2 Vor dem Einloggen
farbe wird in einem lila-blau-ähnlichen Ton und einer fetten Schriftstärke dargestellt. So
kann man genau sehen, ob man mit dem Mauszeiger über dem richtigen Menüpunkt ist.
Abbildung 3.2: Übersicht der Navigationsleiste
3.2 Vor dem Einloggen
Bei der Startseite wird gleich zu Beginn der Login-Bereich angezeigt und verläuft wie
bei jedem anderen Login. Jedoch gibt es hier keine Möglichkeit etwas anzuklicken, falls
man das Passwort vergisst. Daher liegt es nahe, dass das komplette Verfahren der
Benutzereinstellungen vom Administrator abgewickelt wurde. Diese Variante ist in Bezug
auf das Patienten-Modul, sowohl für den Administrator als auch für die Patienten zu
aufwendig, vor allem wenn dann mehrere Personen in der Datenbank registriert sind.
Wenn beispielsweise 3000 Patienten in der Datenbank registriert sind und 1 % davon
zufälligerweise das Passwort vergessen haben, dann hätte der Administrator genug zu
13
3 Aufbau der Webseite
tun, um den Personen ein neues Passwort zu generieren.
Zusätzlich wird auch keine Registrierung über die Webseite angeboten. Dies hat den
Vorteil, dass der Administrator nur bestimmten Mitarbeitern einen Zugang für die Da-
tenbank gibt und somit nicht jeder x-beliebige sich anmelden kann. Im Patienten-Modul
würde der Ablauf, jedem Patienten seine eigenen Zugangsdaten zu geben, ein hoher
Aufwand für den Administrator sein. Eine Lösung wäre die Möglichkeit der Registrierung
direkt über die Webseite zu machen. Ein Nachteil dieser Variante ist, dass nicht nur
Tinnitus-Patienten sich registrieren können und schlimmsten Falls somit die Studiener-
gebnisse verfälschen. Eine andere Lösung ist, dass sich die Patienten bei den jeweiligen
Zentren bzw. bei ihrem Arzt registrieren und dort ihre Zugangsdaten bekommen.
Außerdem kann man noch die Informationen- und Hilfeseite sowie die Impressum- und
Kontaktseite betrachten. Bei der Informationen- und Hilfeseite werden einige Aspekte
der Fragebögen und der Seite erklärt. Unter der Kontakt-Seite kann man die Kontaktinfor-
mationen der Einzelnen mitwirkenden Mitarbeitern aufrufen und bei der Impressumseite
werden die gesetzlichen Herkunftsangaben der Webseite angezeigt.
3.3 Nach dem Einloggen
Nach dem erfolgreichen Anmelden zeigt die Startseite eine kleine Übersicht. Darin
kann der Mitarbeiter entweder einen neuen Patienten anlegen, einen Patienten suchen
oder sich wieder abmelden. Außerdem hat sich die Menüleiste um weitere Funktionen
erweitert, von denen einige jedoch für die zukünftigen Patienten nicht zur Verfügung
stehen. Dies hat den Grund, das es dem hauptsächlichen Aufgabenbereich der Patienten
nicht wirklich entspricht und somit die Menüleiste zu unübersichtlich machen würde.
Für ein besseres Verständnis der einzelnen Menüpunkte werden diese kurz erläutert.
Startseite: Anzeige der kleinen Übersicht für den Mitarbeiter.
Patientendaten:
Anzeige aller Fragebögen und sonstiger Angaben eines bestimmten
Patienten.
Informationen und Hilfe: Erklärung einiger Aspekte der Fragebögen und der Seite.
14
3.3 Nach dem Einloggen
Impressum und Kontakt:
Anzeige einiger Kontaktinformationen der Einzelnen mitwir-
kenden Mitarbeitern und die gesetzliche Herkunftsangabe der Webseite.
Kommunikation:
Möglichkeit der Nachrichten Verschickung entweder intern an andere
registrierter Mitarbeiter oder extern als E-Mails.
Benutzereinstellungen:
Möglichkeit das Passwort oder die Sprache zu ändern. Außer-
dem eine Übersicht über die benutzereigenen Rechte.
Charts:
Darstellung der ausgewerteten Fragebögen eines Patienten in Form von Dia-
grammen.
Qualitätssicherung:
Generierung und Anzeige der Reports über die Patienten und die
Zentren.
Auswertungen (Eing. Pat.):
Ausgabe der Auswertungen pro Patient oder pro Behand-
lungsmethode eines bestimmten Patienten mit jeweiligem Score und fehlenden
Werten.
Auswertungen (Imp. Pat.):
Anzeige einer Übersicht aller importierten Patienten und
eine Auswertung der jeweiligen Patienten.
Excel Export (Alle Pat.):
Generierung einer Excel-Datei, in der die Werte von den
selbst eingegebenen sowie den importierten Patienten zur Berechnung herange-
zogen werden.
Admin-Menü:
Zugriff und Anzeige der Benutzerübersicht und der Zugriffsstatistiken.
Sowie eine Übersicht über die verwendeten Versionen der PHP und der Datenbank.
Logout: Abmeldung vom benutzereigenen Bereich.
Die Mitarbeiter können sich mit der Menüleiste durch das System arbeiten. Jedoch fällt
auf, dass es kaum Informationen gibt, wo man sich gerade befindet. Entweder werden
die Titel der einzelnen Seiten weggelassen oder diese entsprechen gar nicht den Namen
der Menüpunkte. So kann man schnell die Übersicht verlieren und sich auch später nicht
wirklich erinnern, wo man eine bestimmte Seite finden kann. Vor allem wird auch nicht in
der Menüleiste angezeigt, was gerade angeklickt wurde.
Eine Umsetzung der derzeitigen Positionierung auf der Webseite hätte man leicht mit
15
3 Aufbau der Webseite
den sogenannten Breadcrumbs
1
lösen können oder zumindest durch eine Markierung
des bestimmten Menüpunkts.
3.4 Patientenbereich
Das Analysieren dieses Bereichs hilft dabei, die zukünftige Benutzung der Webseite
aus Sicht des Patienten zu verbessern. Die Bereiche, wie neuen Patienten anlegen und
einen Patienten suchen, stehen im Patienten-Modul später nicht zur Verfügung. Jedoch
werden die Fehler beziehungsweise die unvorteilhaften Objekte hier betrachtet, um diese
anders zu gestalten.
Im Bereich „neuen Patienten anlegen“ kann man sehen, das Elemente wie das Ge-
burtsdatum angeben, sowie der Hilfe- / Informationsbutton auch später gut verwendet
werden kann. In der Abbildung 3.3 sieht man die Kalenderansicht, um das Geburtsda-
tum anzugeben, dabei fällt auf, dass diese zu viele Informationen enthält, das für die
vorgesehene Angabe unnötig ist. Zum Beispiel ist das heutige Datum zusätzlich noch
unten angegeben, sowie an der linken Seite die Kalenderwochen. Außerdem ist die
Funktionalität bei der Auswahl des Jahres nicht so hervorragend gelöst. Anstatt einer
erwartenden Scrollleiste erhält man ein Minus- und Plusfeld, das man nicht anklicken
kann, sondern nur mit dem Mauszeiger direkt darauf gehen muss, damit dieses die
Jahre nach hinten bzw. nach vorne schiebt. Zusätzlich geht diese Verschiebung langsam
voran, sollte somit jemand beispielsweise im Jahr 1924 geboren sein, dann kann dieser
die Jahre beobachten, in denen er schon auf der Welt ist.
Der Info-Button ist gut erkennbar und enthält die wichtigsten Informationen in einem
sichtbar werdenden Feld. Jedoch taucht dieses Feld nur über die Hover-Funktion auf,
dass die Handhabung über mobile Endgeräte schwierig macht.
1Die Breadcrumbs zeigen dabei den Verlaufspfad des Benutzers auf der Seite an.
16
3.4 Patientenbereich
Abbildung 3.3: Kalenderansicht des Geburtsdatum
3.4.1 Patientendaten
Wählt der Mitarbeiter einen Patienten aus, so kann er dessen Daten betrachten. Über
den Menüpunkt Patientendaten werden alle Untermenüpunkte angezeigt. Diese sehen
wie folgt aus:
•Description
•
Screening 01 & 02
•Baseline
•Visite 1-11
•Finale Visite
•Follow Up 1-4
•Adverse
•Comorbidity
•Concomittant
•
Non-
Pharmalogical
•Input-State
•Katamnese
Bei der Description wird die angewandte Behandlung angegeben. Die Punkte Screening
bis Follow Up enthalten die Fragebögen und die restlichen Punkte enthalten zusätzliche
Angaben wie Nebenwirkungen, Begleiterscheinungen, usw. Jedoch fällt es auf, wenn
man sich durch die verschiedenen Patienten durchklickt, dass die Untermenüpunkte
für alle Patienten gleich bleiben, auch wenn diese einige Fragebogensets (z. B. einige
Visiten) nicht ausgefüllt haben.
Diese statische Menüleiste hat den Nachteil, dass es etwas unübersichtlich macht und
17
3 Aufbau der Webseite
die Mitarbeiter sogar sich durch die einzelnen Fragebogensets durchklicken müssen,
um schon ausgefüllte Fragebögen eines Patienten zu finden.
3.4.2 Fragebögen
In den Bereichen Screening bis Follow Up gibt es eine bestimmte Anzahl an Fragebögen,
die der Patient ausfüllen muss. Der Mitarbeiter hat die Möglichkeit die verschiedenen
Fragebögen eines bestimmten Bereichs beispielsweise Screening über die verschie-
denen Reiter zu erreichen. Jedoch sind diese Reiter nicht speziell mit den Namen der
Fragebögen beschriftet, sondern mit Seite 1, Seite 2, etc. Diese Beschriftung ist schlecht
gewählt und allgemein gehalten. Der Mitarbeiter sollte wenigstens wissen, hinter wel-
chem Reiter sich ein Fragebogen befindet.
Die Struktur der Fragebögen erinnert an eine einspaltige Tabelle, jedoch unterscheiden
sich einige Fragebögen diesbezüglich. Bei einigen ist eine Trennlinie zu sehen, während
bei anderen einfach diese weggelassen wurde. Außerdem gibt es leider trotz Trennlinie
keine klar wahrgenommene Trennung zwischen den einzelnen Fragen. Daher kann es
vorkommen, das einige Fragen einfach übersehen werden. Die Buttondarstellungen in-
nerhalb der Fragebögen unterscheiden sich extrem. Einige Buttons sind der Schriftgröße
angepasst, wiederum sind die anderen enorm riesig und verpixelt. Um eine bessere
Benutzerfreundlichkeit zu erhalten, sollte man die Struktur und die Buttons immer einem
gleichmäßigen Schema anpassen.
3.4.3 Benutzereinstellungen
Bei den Benutzereinstellungen kann der Mitarbeiter die Sprache und das Passwort
ändern. Zusätzlich erhält er eine Übersicht über seine benutzereigenen Rechte. Anstatt
die Einstellungen für die Sprache und das Passwort unter einer Seite abzuwickeln,
wurden diese in zwei Seiten verfrachtet. Somit muss sich der Mitarbeiter entweder über
die Reiter oder über die Menüleiste klicken, um die einzelnen Einstellungen zu tätigen.
18
3.4 Patientenbereich
3.4.4 Charts
Von einigen Fragebögen können Werte berechnet werden. Dabei werden diese in
bestimmte Kategorien unterteilt von z. B. gering bis katastrophal. Diese Werte zeigen
dem Mitarbeiter an wie sich der Tinnitus auf bestimmte Patienten auswirkt.
Bei den Charts werden die Werte der einzelnen Fragebögen grafisch dargestellt. Die
einzelnen Kategorien bekommen eine Farbe zugesprochen, um den Werten ihren
Stellenwert farblich darzustellen. Es werden die Standard Farben verwendeten, die klar
symbolisieren was dieser Wert bedeutet. Für beispielsweise die Kategorie gering wird
die Farbe grün verwendet und für die Kategorie katastrophal die Farbe rot.
Im Diagramm 5.7 fehlen leider die Beschriftungen der unteren und der linken Seite.
Außerdem würde eine kleine Legende, für die Bedeutungen der Farbe, den Patienten
hilfreich sein, um das Diagramm besser zu verstehen.
Abbildung 3.4: Ansicht eines Charts
19
4
Erster Entwurf
Die einzelne Entwürfe wurden mit dem Analysieren der bisherigen Seite, wie in Kapitel 3
beschrieben, sowie eine Recherche bezügliche der benutzerfreundlichen Umsetzung
einer Webseite entworfen. Zusätzlich wurden die Anforderungen von Kapitel 2 mitbe-
rücksichtigt.
Der komplette Designentwurf der Webseite für das Patienten-Modul wurde mit Adobe
Photoshop CS5 erstellt.
Da es bisher keine Version einer Webseite nur für den Patienten gab, konnte daher
das komplette Design selbstständig gewählt werden. Somit wurden die Bereiche einer
Webseite wie die Navigation, der Content, der Header und der Footer neu entworfen.
Im ganzen Entwurfsprozess wurden die Designentwürfe hauptsächlich für den Gebrauch
der Webseite mit einem Webbrowser, also die Handhabung nur mit einem Computer,
erstellt. Jedoch wurde die Verwendung eines mobilen Gerätes nicht außer Acht gelassen
und bei einigen Objekten hinsichtlich der gleichen Darstellung beziehungsweise der
gleichen Funktion mitberücksichtigt.
4.1 Hintergrund
Für das Layout der Webseite wurde ein Raster entworfen, das beim Positionieren der
einzelnen Elemente helfen soll, die Seite strukturiert und professionell aussehen zu
lassen. Bei den horizontalen Linien hat man einen Abstand von 34px untereinander,
während die vertikalen Linien 52px haben. Außerdem sieht man in der Abbildung 4.1
zusätzliche Linien, die bei den horizontalen bei 4px liegen und bei den vertikalen bei
21
4 Erster Entwurf
10px. Diese Linien sind weitere Orientierungslinien, die bei der Positionierung helfen
sollen, beispielsweise bei Einrückungen von Elementen. Mit solchen Rastern kann man
laut den Gestaltungsgesetzen [
10
] die Elemente so positionieren, dass die Benutzer eine
Zusammengehörigkeit der einzelnen Elemente wahrnehmen. Solche Wahrnehmungen
kann man z. B. bei der Zusammenstellung und Positionierung der Fragen und ihren
Antworten gut verwenden.
Abbildung 4.1: Übersicht des Gestaltungsrasters
Bei der Benutzung der Webseite kann es vorkommen, dass die Benutzer längere Zeit
auf der Seite verweilen, um die jeweiligen Fragebögen auszufüllen. Daher war beim
Farbschema der Hauptgedanke, welche Farben infrage kommen könnten, um dem
Benutzer das Verweilen erträglich bzw. nicht unangenehm zu gestalten.
Da Farben Personen bewusst, aber auch unbewusst beeinflussen können, spielt diese
eine wichtige Rolle im Webdesign.[
11
] So ist die Farbe Rot beispielsweise anregend und
belebend, jedoch bei einer vorherigen Nervosität und Reizbarkeit können diese Gefühle
verstärkt werden.[
12
] Somit wurden auf Farben geachtet, die beruhigend und angenehm
auf die Augen und den Geist wirken. In der Abbildung 4.2 des Farbdreiecks[
13
] zusehen,
stellten sich somit zwei Farben besonders in den Vordergrund, die Farbe blau und grün.
Die Farbe Blau steht für Ruhe, Gelassenheit und Ordentlichkeit, während die Farbe Grün
beruhigend wirkt und für Gesundheit steht. Beide Farben wirken vor allem beruhigend
auf die Menschen.
Schon zu Beginn der Entwurfsphase wurde die Farbe Blau ausgewählt. Diese Farbe
ist sehr angenehm zu betrachten und man assoziiert diese Farbe nicht mit bestimmten
negativen Gefühlszuständen, wie bei der Farbe grün, z. B. Grün vor Neid sein. Es wurden
daher fünf verschiedene Blautöne zusammengestellt, die bei der Webseitengestaltung
verwendet wurden.
22
4.1 Hintergrund
Abbildung 4.2: Farbendreieck und ihre Wirkung
In der Abbildung 4.3 sind die Farbtöne mit ihrem Hex-Code und deren vorgedachte
Verwendung zusehen. Jedoch wurden einige Farbtöne nicht direkt mit ihren Farbwerten
verwendet, sondern mit bestimmten Effekten, wie Farbverläufe, gaußsche Weichzeichner,
usw. versehen, um das Aussehen etwas aufzupeppen.
23
4 Erster Entwurf
Abbildung 4.3: Übersicht der verwendeten Farben
4.2 Header
Als Header bezeichnet man den oberen Bereich einer Webseite, das über mehrere
Seiten meist gleich bleibt. Dieser enthält standardmäßig das Logo einer Webseite.
Beim Entwurf des Headers wurde darauf geachtet, dass es eine klare Abgrenzung durch
das Logo-Design zu den unteren Bereichen gibt. Die Logo-Hintergrundfläche wurde
im Gegensatz zum Alten breiter und größer gemacht. Zusätzlich wurde die Fläche mit
einem farblichen Verlauf versehen, um ein 3-D-Effekt zu bewirken. Dem Logo-Design
wurde nicht so viel Beachtung geschenkt, da es sich hierbei um eine Studienseite han-
delt und nicht um eine Firma, die sich mit ihrem Logo präsentieren wollen. Daher wurde
kein Icon oder Bild dazu designt, sondern der Text wurde einfach mit farblichen Effekten
ausgestattet, sodass es sich vom Logo-Hintergrund abhebt. Außerdem ist die Position
nicht mehr zentral, sondern auf der linken Seite.
Bisher konnte man die Sprache der Seite nur im eingeloggten Zustand über die Be-
nutzereinstellungen ändern. Diese Variante ist für Besucher der Seite zu umständlich,
da vielleicht einige die eingestellte Sprache der Seite nicht beherrschen und mit viel
Suche die Einstellungen ändern können. Daher bekam der Header-Bereich zusätzliche
Features, wie die Einstellung der Sprache sowie die Schriftgrößen Änderung, um den
Benutzern die Handhabung zu erleichtern. Diese Funktionen direkt in den Header einzu-
24
4.3 Footer
binden, hat einen kleinen Vorteil, da die Besucher meist zu Beginn immer den Header
einer Seite sehen und erst später die unteren Bereiche. Somit sind diese zwei Features
dort gut aufgehoben und müssen nicht erst durch langes Suchen gefunden werden.
Die Position dieser zwei Features wurde entweder rechts über dem Logo-Bereich gesetzt
oder direkt darunter. Die linke Seite wurde nicht gewählt, da dieses schon das Logo
enthält und somit zu überladen wirken könnte.
4.3 Footer
Bei der früheren Seite wurde kein Footer verwendet, obwohl der Einsatz des Footers kei-
ne wirklichen Nachteile bietet. Darin sind meist die wichtigsten Informationen einer Seite
enthalten und bleiben wie beim Header über mehrere Seiten gleich. Außerdem kann
man die vollgepackte Menüleiste wie in Kapitel 3.1 beschrieben, etwas entlasten. Daher
liegt es Nahe, die Links der Menüpunkte Impressum und Kontakt dort unterzubringen.
Beim Entwurf des Footers wurde dieser wie der Logo-Hintergrund designt und grenzt
sich vom restlichen Inhalt der Seite ab.
4.4 Navigation
Die Navigation ist der Dreh- und Angelpunkt einer Webseite.[
14
] Es gibt eine kleine
Übersicht darüber, welche Inhalte angeboten und angezeigt werden können. Daher ist
auch bei der Navigationsstruktur darauf zu achten, vor allem diese logisch und verständ-
lich aufzubauen.
Es gibt 4 Möglichkeiten eine Menüleiste zu positionieren, entweder links, rechts, oben
oder unten.[
15
] Die klassische Variante ist auf der linken Seite und wird oft verwendet,
dies hat den Vorteil, dass sich die Besucher mit dieser Menüleiste am besten auskennen.
Außerdem können große Menüleisten mit vielen Menüpunkten praktisch untergebracht
werden. Die zweit häufigste Variante ist die oben gesetzte, horizontale Menüleiste, die
auch wie die vertikale linke Leiste schnell gesehen wird und die Handhabung sich
logisch aufbauen lässt. Mit dem zusätzlichen Drop-down-Effekt lassen sich weitere
25
4 Erster Entwurf
Menüpunkte ausfahren bzw. aufklappen. Die rechten und unteren Menüleisten werden
selten verwendet und wäre für Webseiten, dessen Besucher nicht so erfahren sind, nicht
empfehlenswert.
Neben den vier Positionen gibt es auch Mischformen, vor allem bei horizontalen Menü-
leisten, die wegen des beschränkten Bereichs, somit zusätzliche Menüpunkte anzeigen
können.
Die Mischformen der Menüleiste werden beim Patienten-Modul nicht benötigt, da sich
die Menüpunkte um einiges verringert haben. Zum einen sind die Menüpunkte des
Impressums und des Kontakts entfallen, da diese im Footer untergebracht wurden und
zum anderen werden nicht alle Menüpunkte, die für den Mitarbeiter noch wichtig waren,
vom Patienten benötigt.
Die neue Menüleiste sieht je nach Status des Benutzers, wie folgt aus:
•Vor dem Einloggen:
Startseite: Enthält den Anmeldebereich.
Informationen & Hilfe Erklärung einiger Aspekte der Fragebögen und der Seite.
•Nach dem Einloggen:
Startseite:
Anzeige über die Möglichkeit den nächsten Fragebogen auszufüllen,
falls noch keiner freigeschaltet wurde, wird angezeigt, wann der nächste
Fragebogen zur Verfügung steht.
Fragebogen:
Anzeige aller schon ausgefüllten Fragebögen und den nächstmögli-
chen Fragebogen zum Ausfüllen.
Charts: Darstellung der ausgewerteten Fragebögen in Form von Diagrammen.
Download & Upload:
Möglichkeit eigene Daten hochzuladen bzw. herunterzula-
den.
Einstellungen: Möglichkeit das Passwort oder die Sprache zu ändern.
Informationen & Hilfe:
Erklärung einiger Aspekte der Fragebögen und der Seite.
Logout: Abmeldung vom benutzereigenen Bereich.
26
4.4 Navigation
Außerdem wird es Benutzer geben, die unterschiedliche Erfahrungen im Umgang mit
Webseiten haben, daher wurde die rechte und untere Menüleiste beim Designentwurf
nicht weiter berücksichtigt.
Die gesamten Menüpunkte brauchen, außer dem Fragebogen, keine Untermenüpunkte,
da mehrere Seiten eines Menüpunkts mit einem Tab-System innerhalb des Content-
Bereichs gelöst wurden. Somit werden keine großen Menüleisten mit vielen Unter-
punkten benötigt. Beim ersten Entwurf wurden die zwei Varianten, die horizontale und
vertikale Menüleiste entworfen. Bei beiden wurde darauf geachtet, dass sie sich, wie in
der Abbildung 4.4 zu sehen, vom Hintergrund der Seite abgrenzen und man diese nicht
mit dem restlichen Text der Seite verwechselt. Auch hier wurde die Menühintergrundfar-
be mit einem farblichen Verlauf versehen, um den gleichen Effekt wie beim Header zu
bewirken.
Die vertikale Menüleiste wurde auf die linke Seite gesetzt. Dabei wurden zwei Möglichkei-
ten bedacht, die Untermenüpunkte darzustellen. Zum einen wurde der Akkordeon-Effekt
eingesetzt, jedoch mit wieder einfahrender Leiste, falls ein anderer Menüpunkt gedrückt
wurde und zum anderen mit einem rechts seitlich einblendenden Bereich, welches die
Untermenüpunkte enthält. Die jeweiligen Bereiche werden nur sichtbar, wenn man den
jeweiligen Menüpunkt gedrückt hat und nicht nur mit der Maus darüber streift. Diese
Modifikation macht es beim seitlich einblendenden Bereich möglich, dass dieser beim
versehentlichen Abrutschen daraus, nicht gleich wieder verschwindet, wie es beispiels-
weise in der Menüleiste beim Windows-System häufig der Fall ist.
Die horizontale Menüleiste wurde unter dem Logo der Seite platziert. Die Menüpunkte
sind auf einer leistenähnlichen Form von links nach rechts verteilt. Die Untermenüpunkte
werden mit dem Drop-down-Menü angezeigt, wobei ein Bereich unterhalb des Menü-
punkts vertikal eingeblendet wird. Beim Anklicken eines Menüpunktes bekommt die
Fläche einen umgekehrten Farbverlauf, um anzuzeigen, dass dieses gerade angeklickt
wurde und verschwindet wieder. Nur bei der Darstellung der Untermenüpunkte bleibt
dieser umgekehrte Farbverlauf, wie in der Abbildung 4.4 zu sehen, am Menüpunkt
bestehen, damit man den Bezug der Untermenüpunkte zum Menüpunkt sieht.
Das Patienten-Modul enthält nicht so viele Seiten bzw. verschachtelte Ebenen, bei
27
4 Erster Entwurf
denen eine Navigationshilfe, wie die Breadcrumbs, sinnvoll wäre. Der Patient kann meist
durch einen Klick die gewünschte Seite schon erreichen und sieht die aktuelle Position
dadurch, dass der Titel der Seite dem Namen des Menüpunktes meist gleicht.
Abbildung 4.4: Übersicht der Menüleisten
Bei beiden Navigationsleisten kann man erkennen auf welchen Menüpunkt der Mauszei-
ger geschoben wurde. Diese Hoverfunktion gibt dem Benutzer das Feedback, ob dieser
mit der Maus über das richtige Menüpunkt ist. Daher wurden verschiedene Variationen
der Hoverfunktion entworfen. Die einfachste Variante, aber auch nicht die gleich sicht-
barste, war die Schriftart des Menüpunktes fetter zu machen. In der Abbildung 4.5 zu
sehen, wurden noch verschiedene Varianten mit Strichen ausgearbeitet, die unterhalb,
oberhalb oder beides komplett durchgezogen oder gestrichelt am Menüpunkt zu sehen
sind. Die Sichtbarste war das Rechteck, das im dunklen bläulichen Farbton transparent
über dem Menüpunkt erschien oder mit einem weißlichen Farbton. Außerdem konnten
28
4.5 Content
noch Kombinationen aus den verschiedenen Varianten erstellt werden.
Durch die Inspiration der Taskleiste in Windows 8, wurde bei der horizontalen Menü-
leiste eine Hoverdarstellung entworfen. Dabei wurde ein weißlich, etwas transparenter
Rechteck mit rechten und linken Balken auf den Menüpunkt gelegt und ein kleiner
Kreisausschnitt unterhalb vom Namen gesetzt.
Die vertikale, aber auch die horizontale Menüleiste bieten eine Menge an Vor- und
Abbildung 4.5: Übersicht der Hover-Funktionen
Nachteilen.[
16
] Bei der vertikalen hat man keine Einschränkungen bezüglich der Menü-
punkte, jedoch muss man bei zu langen Menüleisten scrollen. Während die horizontale
bezüglich der Anzahl der Menüpunkte beschränkt ist, damit die Leiste nicht zu breit
wird und aus dem vorgesehenen Bereich hinausragt. Außerdem müssen die Namen der
Menüpunkte gut gewählt werden und dürfen hier auch nicht zu lang werden. Andererseits
sind alle Menüpunkte im sichtbaren Seitenbereich, hierbei ist kein Scrollen notwendig.
Zusätzlich nimmt die horizontale Navigationsleiste im vertikalen Bereich einen geringen
Platz ein und somit kann der Contentbereich den kompletten vorgesehenen Platz der
Webseite ausnutzen.
4.5 Content
Der Content umfasst meist den gesamten restlichen Bereich der Webseite. Der Content-
bereich ist für die Darstellung der inhaltlichen Themen der einzelnen Seiten zuständig.
29
4 Erster Entwurf
Somit wurde der Hintergrund für die Seiteninhalte in einem helleren Farbton als die
restliche Webseite gehalten.
Die Schriftfarbe wurde auf Schwarz gesetzt, da zum einen die Farbe auf hellem Hin-
tergrund gut lesbar ist und zum anderen für Personen mit Farbenblindheit bzw. Farb-
sehstörungen die Kombination von schwarzer Schriftfarbe und hellem Hintergrund
kontrastreicher erscheint.
Um die Menüleiste weiter zu entlasten und diese klein zu halten, wurde über dem
eigentlichen Inhalt zusätzlich noch Tab-artige Reiter gesetzt. Diese enthalten weitere
Seiten eines Menüpunktes. Somit mussten keine weiteren Untermenüpunkte erstellt
werden. Auf die Seiteninhalte können einfach über diese Tabs zugegriffen werden. Das
hat den Vorteil, dass man die einzelnen Reiter schnell anklicken kann und somit auch die
Ladezeit der Webseite etwas verringert wird, da die komplette Seite somit nicht geladen
werden muss, sondern nur noch der Inhalt eines Reiters. Der ausgewählte Reiter hat
die gleiche Farbe wie der Contenthintergrund, während die restlichen nicht-angeklickten
Reiter eine etwas dunklere Farbe haben.
4.5.1 Anmeldebereich
Für eine Webseite, in der Benutzer sich anmelden können, spielt der Anmeldebereich
eine wichtige Rolle. Da in diesem Fall man nur über eine Anmeldung an die Inhalte
der Webseite gelangen kann. Somit wurden in der Entwurfsphase drei Möglichkeiten
bedacht, wie sich der Patient überhaupt in das System registrieren kann:
1. direkt über die Webseite
2. über den Administrator
3. direkt über einen Mitarbeiter oder einem Arzt
Die einfachste und schnellste Methode ist natürlich über die Webseite die Registrierung
zu machen. Der Patient muss somit nicht extra aus dem Haus gehen, sondern kann
sich daheim über die Webseite registrieren. Jedoch stellt sich hier die Frage, wie wird
man für das System freigeschaltet. Dabei gibt es verschiedene Varianten dieses zu
lösen, entweder direkt nach der Registrierung ist der Patient freigeschaltet, über den
30
4.5 Content
Administrator, der extra den Patienten freischalten muss oder über einen Link, den man
per E-Mail erhält.
In dieser Methode hat man jedoch nicht die Kontrolle, ob der registrierte Patient wirklich
an dem Symptom Tinnitus leidet und wie schon in Kapitel 3.2 erwähnt, könnte die Studie
verfälscht werden.
Bei der zweiten Methode würde der Administrator die Registrierung tätigen. Jedoch
wäre dies zu viel Arbeit für den Administrator und außerdem stellt sich hier die Frage,
wie dieser die Registrierungsdaten des Patienten erhält. Eine Möglichkeit wäre, dass er
wie in der ersten Methode erwähnt die Registrierungsdaten des Patienten erhält und
er nur noch diesen freischalten muss. Bei diesem Ansatz hat man wieder das schon
vorher erwähnte Problem der Kontrolle. Eine zweite Möglichkeit wäre die Angabe der
E-Mail-Adresse des Administrators auf der Webseite unter dem Hinweis, wie man sich
auf dieser Seite registrieren kann, und wird somit direkt vom Patienten angeschrieben.
Jedoch gibt es hier auch das Problem der Kontrolle. Bei der letzten Möglichkeit erhält der
Administrator die Daten des Patienten vom Arzt bzw. Mitarbeiter und muss diese nur noch
in das System einpflegen und freischalten. Somit entfällt das erwähnte Problem, jedoch
ist diese Variante zu aufwendig für einen Administrator, die ganzen Daten einzupflegen.
Bei der letzten Methode entfällt schon mal das Problem der Kontrolle, da das Anlegen
neuer Patienten, wie schon im alten System vom Mitarbeiter bzw. vom Arzt direkt getätigt
wird. Der Arzt bzw. Mitarbeiter registriert den Patienten über seinen eigenen Account
und leitet die Zugangsdaten an den Patienten weiter. Somit liegt hier die Hauptarbeit
nicht mehr beim Administrator, da dieser lediglich nur die Mitarbeiter bzw. Ärzte für
das System registrieren muss. Diese Methode ist nicht die schnellste wie die Erste,
jedoch hat man hierbei eine Sicherheit, dass der Patient wirklich bei der Registrierung
an Tinnitus litt. Außerdem ist die Belastung für den Administrator geringer.
Die Anmeldung in das System erfolgt standardmäßig über einen Benutzernamen und ein
Passwort, die während der Registrierung generiert wurden. Um die Usability zu steigern,
ist es ratsam, eine gute Fehlerbehandlung mit einfließen zu lassen. Somit wurde bedacht,
dass es vorkommen kann, dass der Patient sein Passwort vergessen könnte. Unter
dem Link „Passwort vergessen“ wurde dieses Problem mitberücksichtigt. Dabei wäre
die beste Lösung bei der Registratur eine E-Mail-Adresse zu hinterlassen und nach der
31
4 Erster Entwurf
Angabe des Benutzernamens eine Mail mit dem neu generierten Passwort zu erhalten.
Dieses Passwort kann dann jederzeit wieder unter den Benutzereinstellungen geändert
werden.
Beim Vergessen des Benutzernamens gibt es jedoch nur die Möglichkeit sich direkt an
den Administrator, den Arzt oder den Mitarbeiter zu wenden.
4.5.2 Fragebogen
Beim Menüpunkt Fragebogen gibt es Untermenüpunkte. Diese sehen wie folgt aus:
•Screening
•Baseline
•Visiten 1-12
•Follow Up 1-4
•begleitende Angaben
Die jeweiligen Punkte bis auf „begleitende Angaben“ stellen ein komplettes Fragebo-
genset dar. Anzumerken ist jedoch, dass von Beginn an nur die Unterpunkte Screening,
Baseline und begleitende Angaben zu sehen sind. Im weiteren Verlauf der Studie wer-
den dementsprechend die restlichen Unterpunkte angezeigt. Der Vorteil resultiert sich
daraus, dass die Benutzer genau sehen können welche Fragebogensets sie schon aus-
gefüllt haben und welches jetzt zur Verfügung steht. Der Unterpunkt Follow-Up erscheint
auch dann nur, wenn der Benutzer mit der Studie nach den 12 Visiten weiter fortfahren
will.
Das Ausfüllen der Fragebögen ist der wichtigste Teil der Studie und nimmt die meiste
Zeit des Benutzers in Anspruch, daher ist es wichtig die Fragen strukturiert und mit klarer
Abgrenzung zueinander darzustellen. Mit der schon oben erwähnten Reiterstruktur kön-
nen die einzelnen Fragebögen des Fragebogensets angesehen und angeklickt werden.
Es gibt dem Benutzer somit eine kleine Übersicht über die auszufüllenden Fragebögen.
Die Fragebogensets enthalten meist die gleichen Fragebögen und ähneln sich somit
sehr. Daher konnte meist eine gleiche sequenzielle Struktur bei der Anordnung der
32
4.5 Content
Fragebogen und deren Fragen verwendet werden. Mit so einer Struktur versucht man
vorzubeugen, das der Benutzer vielleicht ein Fragebogen komplett übersieht oder sogar
einige Fragen vergisst auszufüllen.
Die Fragebögen THI, Tinnitus Fragebogen, TBF12 und WHOQOL sind in allen Fragebo-
gensets enthalten und ähneln sich mit der Tatsache, dass diese bei den verschiedenen
Fragen meist immer die gleichen Antwortmöglichkeiten zum Ankreuzen bieten. Daher
lag es nahe diese Fragebögen ähnlich anzuordnen. Wie in der Abbildung 4.6 gezeigt,
wurden die Fragen links angeordnet und mit einem horizontalen Balken voneinander
getrennt. Die Button für die Antworten sind rechts neben den Fragen gesetzt. Es gibt
hierbei nur eine Beschriftung für die Antwortmöglichkeiten, die direkt über den jeweili-
gen ersten Button stehen und die Button verlaufen somit senkrecht zu ihren jeweiligen
Antworten. Falls man jedoch runter scrollen muss und wissen will welche Antwort zu
welchem Button gehört, wurden die Button zusätzlich mit einer Hover-Funktion versehen.
Dabei erscheint eine kleine Sprechblase mit der jeweiligen Antwort.
Bei den restlichen Fragebögen wie TSCHQ, Tinnitus Schweregrad, usw. erfordert es
Abbildung 4.6: Übersicht der einen Fragebögen
meist eine andere Anordnung der Fragen und Antworten wie bei den vorherigen Fra-
gebögen, da es sonst zu unübersichtlich werden könnte und die Antwortmöglichkeiten
auch nicht immer auf eine Ebene passen. Dabei wurden 4 Varianten für die Anordnung
entworfen, obwohl sich die Varianten 1 & 2 und Varianten 3 & 4 weitestgehend ähneln.
Die Abbildung 4.7 zeigt die verschiedenen Varianten und deren Unterschiede. Bei den
Varianten 1 und 2 wurden die Fragen links gesetzt und die Antwortmöglichkeiten rechts.
Bei der ersten Variante wurden zusätzlich die ungeraden Zahlen der Fragen mit einem
bläulichen Balken versehen, um eine Abgrenzung untereinander zu schaffen. Jedoch
33
4 Erster Entwurf
fällt der Abstand der einzelnen Fragen zueinander geringer aus, das zur Folge haben
kann, dass man eine Frage leicht übersehen kann. Bei der zweiten Variante wurde ein
dünner bläulicher Balken unterhalb der Fragen durchgezogen, dass den Fragebogen
schon übersichtlicher erscheinen lässt.
Die Fragen bei den Varianten 3 und 4 erhalten einen bläulichen Balken und unter den
Balken stehen die Antwortmöglichkeiten. Somit wurden die Fragen und Antworten direkt
voneinander abgegrenzt. Die Anordnung der zwei Varianten ist jeweils gleich, jedoch
erhält die vierte Variante zusätzlich über ihrem Balken eine dunkelblaue Linie, um eine
stärkere Abgrenzung der einzelnen Fragen zu erhalten.
Wie schon vorher erwähnt, kann es vorkommen, dass ein Fragebogen selbst mehrere
Seiten beinhaltet. Daher werden die derzeitige Seitenzahl und die Gesamtseitenanzahl
am unteren Ende des Contents angezeigt. Der Benutzer hat somit eine Übersicht über
die Seitenanzahl eines Fragebogens.
Abbildung 4.7: Anordnung der verschiedenen Varianten
34
4.5 Content
Einzelne Elemente der Fragebögen
Bei der Entwurfsphase wurde bei einigen Elementen in den Fragebögen meist mehr
als nur eine Variation erstellt. Außerdem wurden einige Elemente so entworfen, um
entweder ihre Handhabung zu erleichtern oder um diese einfach im Aussehen etwas
aufzuwerten. Im weiteren Verlauf werden diese Elemente beschrieben.
Bei einigen Fragebögen gibt es Fragen, in denen man Werte eintragen muss. Hierbei
wurde ein sogenannter Slider
1
verwendet. Somit wird kein langweiliges Textfeld ange-
zeigt, in denen man die Werte eintragen muss, sondern hier wird einfach eine Leiste
mit einem Button angeboten, den man anklicken und verschieben kann, um einen Wert
einzutragen. So ein Slider kann schon vom Aussehen punkten. Außerdem ist die Hand-
habung nicht kompliziert und die Werte können schnell mit einem Mausklick eingetragen
werden.
Wie in der Abbildung 4.8 zu sehen, wurden beim Entwurf zwei Varianten erstellt, um den
Slider darzustellen. Bei der ersten Variante sieht man zu Beginn dieses Slider. Jedoch
musste wegen der Anforderung 2.1, dass keine Werte bei den Fragebögen voreingestellt
sind, etwas ausgedacht werden. Somit erscheint erst beim Slider ein kleines Feld über
dem Button mit dem Wert darin, wenn man auf den Button klickt. Bei der Verschiebung
des Buttons auf der Leiste ändert sich dementsprechend dieser Wert und nach dem
Loslassen des Buttons bleibt das Feld mit dem eingestellten Wert vorhanden.
Die zweite Variante zeigt zu Beginn nur ein Textfeld, in den man anscheinend die Werte
eintragen muss. Jedoch beim Klicken auf das Textfeld erscheint ein kleines Fenster mit
dem Slider darin. Die Handhabung ist wie bei der ersten Variante, jedoch wird hier das
Feld mit dem Wert zu Beginn gezeigt. Nach der Einstellung des Wertes, erscheint dieses
nach dem klicken auf den Bestätigungsbutton im Textfeld.
Der Vorteil der ersten Variante ist, dass man den Wert gleich einstellen kann, jedoch ist
die zweite Variante platzsparender, da der Slider erst über ein Fenster erscheint.
Die Datumseingabe unterscheidet sich darin, ob man ein Geburtsdatum eingeben muss
oder ein Datum, das im aktuellen Jahr ist. Laut den Anforderungen 2.2 sollte man den
Benutzern bei der Datumseingabe zwei Optionen anbieten, entweder direkt über die
1Schieberegler; Ist ein graphisches Kontrollelement
35
4 Erster Entwurf
Abbildung 4.8: Übersicht der Slider-Varianten
Tastatur oder über spezielle Felder wie bei der Flugbuchung. Für die direkte Eingabe
wurden drei Textfelder nebeneinandergesetzt für den Tag, den Monat und das Jahr. Für
die zweite Option wurde ein Icon erstellt, das einem Kalender ähnlich sieht und neben
dem letzten Textfeld gesetzt wurde. Dieses Icon kann man anklicken und dabei erscheint
eine Kalenderansicht.
Hierbei wird jetzt zwischen dem Geburtsdatum und dem anderen Datum unterschieden.
Um keine großen Unterschiede zwischen den verschiedenen Eingaben zu haben, sieht
man wie in der Abbildung 4.9 bei beiden ein Kalender. Man sieht die Wochentage und
einen farblich-unterschiedlichen Monatsbalken mit der Jahreszahl. Man kann mit den
Buttons, die im Monatsbalken auf der rechten und linken Seite enthalten sind, Monat für
Monat entweder nach hinten oder nach vorne springen.
Bei der Geburtstagseingabe muss man nicht nur den Tag und den Monat eingeben,
sondern auch das Jahr. Dabei kann man im Monatsbalken den Monat und das Jahr extra
einstellen. Beide werden durch ein Feld dargestellt und bei einem Klick darauf erscheint
eine Auswahl der jeweiligen Felder. Somit kann der Monat ausgewählt werden und das
Jahr. Die Kalenderansicht verändert sich dementsprechend und es muss nur noch der
36
4.5 Content
Tag angeklickt werden.
Bei der Eingabe des Datums, meist im gleichen Jahr, benötigt man die Jahresauswahl
nicht. Daher kann man nur noch im Monatsbalken den rechten oder linken Button
verwenden, um den richtigen Monat einzustellen.
Abbildung 4.9: Übersicht der Datumseingaben
Im Fragebogen Audiometry gibt es zwei Möglichkeiten diesen Fragebogen zu machen,
entweder die Fragen direkt auszufüllen oder durchs hochladen der Audiometry-Datei.
Dabei gibt es die Auswahl „Audiometry Datei einfügen“. Wenn der vorgesehene Button
ausgewählt wurde, verschwinden die Fragen des Fragebogens und es erscheint ein Feld,
mit dem man die Datei hochladen kann. Diese Datei kann später unter dem Menüpunkt
Download & Upload eingesehen werden.
37
4 Erster Entwurf
Die schriftlichen Fragebögen enthalten noch zusätzliche Abfragen über Begleiterkrankun-
gen, Nebenwirkungen, usw. Diese Abfragen wurden unter dem Tab „Weiteres“ realisiert.
Dabei werden Abfragen über die schon in Kapitel 1.1 erwähnten Begleiterscheinungen,
wie klinisch relevante Begleiterkrankungen, Nebenwirkungen bei Behandlungen oder
auch die Einnahme von Medikamenten, gemacht.
Nachdem der Patient alle Fragebögen nacheinander ausgefüllt hat, kommt er zum letz-
ten Tab und hierbei wird diese Abfrage getätigt. Falls bei einem Patienten eines von
diesen Begleiterscheinungen auftreten sollte, dann erscheint, wie in der Abbildung 4.10
zusehen, beim Ankreuzen des Ja-Buttons bei der jeweiligen Abfrage, Felder für eine
Angabe, die man ausfüllen kann. Um weitere Angaben einer Abfrage zu machen, kann
man den Plus-Button anklicken, um weitere Felder für die nächste Angabe zu erhalten.
Diese Angaben können auch später über den Menüpunkt Fragebogen - begleitende An-
gaben verändert werden oder man kann die Begleiterscheinungen direkt dort angeben.
Abbildung 4.10: Übersicht der begleitende Angaben
38
5
Finaler Entwurf
Die endgültige Fassung der Webseite für den Patientengebrauch wird hier vorgestellt.
Dabei wird die Vorstellung der Webseite in zwei Bereiche gegliedert, zum einen vor dem
Anmelden und zum anderen nach dem Anmelden.
5.1 Vor der Anmeldung
Die Abbildung 5.1 zeigt den endgültigen Entwurf des Headerbereichs für die Webseite.
Darin kann man die Abgrenzung des Logo-Hintergrunds zum Webseiten-Hintergrund
erkennen und den farblichen Verlauf, der den kleinen 3-D-Effekt bewirkt.
Die zwei Features „Sprache ändern“ und „Schriftgröße ändern“ wurden über dem Logo-
Bereich untereinander gesetzt, da dieser Platz gut sichtbar ist und wenig Platz von
den anderen Elementen der Webseite weg nimmt. Nähere Informationen zu den zwei
Features gibt es in Kapitel ?? Abgleich der Anforderungen.
Im endgültigen Entwurf wurde die horizontale Navigationsleiste ausgewählt, somit be-
findet sich diese im Headerbereich. Die horizontale Navigationsleiste bietet mehr Platz
für den Contentbereich an, dass bei der Darstellung der Fragebögen sehr nützlich sein
kann. Die wenigen Menüpunkte machen außerdem den ausschließlichen Einsatz der
horizontalen Navigationsleiste möglich. Die Navigationsleiste hat vor der Anmeldung nur
zwei Menüpunkte, diese wären Anmelden und Informationen & Hilfe.
Die Startseite ist der Anmeldebereich. Man kann auch über den Menübutton Anmelden
darauf zugreifen. Dort wird die Anmeldung in das System abgewickelt. Zusätzlich hat
39
5 Finaler Entwurf
Abbildung 5.1: Übersicht des Headerbereichs vor der Anmeldung
man die Möglichkeit die Informationen & Hilfe-Seite sowie über den Footer die Kontakt-
und Impressum-Seite aufzurufen.
Bei der Registrierung für das System wurde die Vorort-Variante gewählt, da man in
diesem Fall die Sicherheit hat, dass der Patient bei der Registrierung wirklich in irgendei-
ner Weise an Tinnitus litt. Dabei registriert ein Mitarbeiter bzw. ein Arzt den Patienten.
Außerdem können die Mitarbeiter bzw. Ärzte die Patienten komplett über die Studie und
dessen Verlauf aufklären und auch die Webseiten Handhabung erklären. Zusätzlich
kann der Audiometrie-Test, der für das erste Fragebogenset gebraucht wird, gleich Vorort
getätigt werden. Daher wurde der Registrierungsbereich für die Webseite nicht weiter
berücksichtigt.
Wie in der Abbildung 5.2 zu sehen, benötigt der Patient für die Anmeldung einen Benut-
zernamen und ein Passwort. Diese Zugangsdaten werden nach der Registrierung dem
Patienten übermittelt.
Neben der Eingabe der Zugangsdaten kann man beim Vergessen des Passworts den
vorgesehenen Link anklicken. Es erscheint ein zusätzliches Fenster, dass beim Eingeben
des Benutzernamens eine E-Mail mit dem neu generierten Passwort versendet. Dazu
sei noch angemerkt, dass der Benutzername nicht gleich die E-Mail-Adresse ist. Der
Benutzername könnte z. B. eine Patienten-ID oder etwas Ähnliches sein. Der Benutzer-
name wird mit dem in der Datenbank verglichen und das neu generierte Passwort an die
hinterlegte E-Mail-Adresse versendet. Eine E-Mail-Adresse sollte bei der Registrierung
angegeben werden, um in so einem Fall die Fehlerbehandlung komfortabel abwickeln
zu können.
Bei falscher Eingabe des Passworts oder des Benutzernamens erscheint unterhalb der
40
5.1 Vor der Anmeldung
Abbildung 5.2: Anmeldebereich
Leiste beim Anmelden ein Hinweis in roter Farbe, dass der Benutzername mit dem
Passwort nicht übereinstimmt und das entweder der Benutzername oder das Passwort
falsch sind.
Bei der falschen Eingabe des Benutzernamens im „Passwort vergessen?“ Fenster, er-
scheint wie in der Abbildung 5.3 zu sehen ein Hinweis, dass dieser Benutzername nicht
in der Datenbank enthalten sei.
41
5 Finaler Entwurf
Abbildung 5.3: Übersicht der falschen Eingabe des Benutzernamens
42
5.2 Nach der Anmeldung
5.2 Nach der Anmeldung
Nach der erfolgreichen Anmeldung wird man auf die Startseite des angemeldeten Zu-
standes weitergeleitet. Dort wird der Patient gleich zu Beginn über die Studie und über
die einzelnen Bereiche wie Fragebögen, Charts und Download & Upload informiert. Au-
ßerdem kann man von der Startseite aus direkt auf das nächstmögliche Fragebogenset
weitergeleitet werden. Dazu wurde ein Button mit „Fragebogen starten“ gesetzt. Die
Fragebögen können auch über den Menüpunkt „Fragebogen“ aufgerufen werden.
5.2.1 Navigation
Von der Startseite aus kann man über die Menüleiste alle anderen Seiten aufrufen oder
sich wieder ausloggen. Die Menüleiste hat jetzt, wie in der Abbildung 5.4 zu sehen,
weitere Menüpunkte erhalten. Über das kleine Häuschen Symbol gelangt man wieder
auf die Startseite. Die anderen Menüpunkte wurden bereits in Kapitel 4.4 vorgestellt.
Die Abbildung 5.4 zeigt die verschiedenen Funktionen der Navigationsleiste. Dabei
sieht man, dass bei der Hoverfunktion die inspirierte Variante gewählt wurde. Bei dieser
Variante bekommt man den genauen Menüpunktbereich zu sehen, den man anklicken
kann.
Die nächste Funktion, die zu sehen ist, ist das der Menüpunkt während des Anklickens
einen umgekehrten Farbverlauf erhält und beim Loslassen des Menüpunktes verschwin-
det dieses wieder. Nur beim Menüpunkt „Fragebogen“ bleibt dieser Farbverlauf erhalten,
jedoch nur so lange, wie der Untermenübereich angezeigt wird. Die Untermenüpunk-
te haben keine Anzeige, ob sie angeklickt wurden. Jedoch wird durch einen bläulich
transparenten Farbton dargestellt, welcher Untermenüpunktbereich mit dem Mauszeiger
betreten wurde.
Der Untermenübereich vergrößert sich vertikal während der Studie. Da am Anfang nicht
gleich alle Fragebogensets dargestellt werden, sondern erst im Nachhinein erscheinen.
Dies hat den Vorteil, dass der Patient sehen kann, welchen Fragebogenset dieser als
Nächstes ausfüllen kann und welche schon ausgefüllt wurden. Somit muss der Patient
nicht durch langes Suchen herausfinden, welches Fragebogensets ausgefüllt werden
43
5 Finaler Entwurf
Abbildung 5.4: Übersicht der Navigationsleiste mit den Funktionen
44
5.2 Nach der Anmeldung
sollte. Man hätte auch die Menüpunkte für die Fragebogensets alle anzeigen können
und die noch nicht freigeschaltet einfach grau untermalen. Jedoch erscheint die Variante
des wachsenden Untermenübereichs übersichtlicher.
5.2.2 Fragebogen
Die Fragebogensets beinhalten meist ohne Audiometrie und die begleitenden Angaben
7-8 Fragebögen, die die Patienten ausfüllen sollten. Diese folgenden Fragebögen sind
im System enthalten:
•
Tinnitus Sample Case History Questionnaire (TSCHQ) – nur im Screening und
Baseline
•Tinnitus Handicap Inventory (THI)
•Tinnitus Fragebogen
•Tinnitus Impairment Questionnaire (TBF-12)
•Tinnitus Schweregrad
•Beck Depression Inventory (BDI) / Major Depression Inventory (MDI)
•Fragebogen zum Allgemeinen Gesundheitszustand (WHOQOL- BREF)
•Clincial Global Impression (CGI) – ab Visiten
Auf ein Fragebogenset kann man über die Menüleiste zugreifen und über das Reiter-
system, wie in der Abbildung 5.5 zu sehen, auf die beinhalteten Fragebögen. Hierbei
wurde auf eine Beschriftung der Reiter geachtet, damit die Benutzer sehen können,
welche Fragebögen dieses Set enthält und auch welcher Fragebogen als Nächstes
folgen könnte.
Einige Fragebögen beinhalten eine Menge an Fragen, die zur besseren Darstellung
und Übersichtlichkeit nicht auf eine Seite gequetscht, sondern auf andere Seiten verteilt
wurden. Somit kann es vorkommen, dass ein Fragebogen mehrere Seiten enthält. Damit
die Benutzer sehen können, wie viele Seiten ein Fragebogen beinhaltet, wurde bei jedem
45
5 Finaler Entwurf
Abbildung 5.5: Übersicht des Reiters
Fragebogen die aktuelle Seitenzahl mit der Gesamtseitenanzahl am unteren Rand des
Fragebogens gesetzt. Somit bekommt der Patient ein zusätzliches Feedback darüber,
wie viele Seiten dieser ausfüllen sollte.
Innerhalb eines Fragebogens können die einzelnen Seiten durch den Button „weiter“ bzw.
„zurück“ durchlaufen werden. Man kann jedoch nur eine Seite vor bzw. zurückblättern,
somit wird das versehentliche Übersehen einer Seite verhindert. Die eingestellten Werte
werden bis zum Schluss des Fragebogens zwischengespeichert. Bei der letzten Seite
eines Fragebogens ist, anstatt des Buttons „weiter“ ein Button „speichern“ zu sehen.
Der Button „speichern“ soll dem Benutzer zusätzlich symbolisieren, dass die letzte Seite
des Fragebogens erreicht wurde und dass man danach auf den nächsten Fragebogen
weitergeleitet wird. Hierbei wird der Fragebogen mit den zwischengespeicherten Werten
in die Datenbank abgespeichert.
Man kann auch über die Reiter auf den nächsten Fragebogen springen. Wenn jedoch ein
Fragebogen nicht vollständig ausgefüllt wurde und man über das Reitersystem auf den
nächsten Fragebogen springt, dann bleiben die schon ausgefüllten Fragen zwischen-
gespeichert, und falls man auf den vorherigen Fragebogen klickt, dann wird man direkt
auf die Seite geladen, die man vor dem Weiterspringen geöffnet hatte. Falls man jedoch
nicht wieder auf den nicht vollständig ausgefüllten Fragebogen springt, dann wird beim
Abspeichern am Schluss im Reiter „Weiteres“, der Fragebogen mit den ausgefüllten
Fragen in die Datenbank gespeichert.
Wenn man während des Ausfüllens auf einem Menüpunkt klickt oder die Seite neu laden
will, dann erscheint ein Hinweisfenster mit der Information, dass das Fragebogenset
noch nicht vollständig ausgefüllt wurde und später nur die abgespeicherten Fragebögen
bewertet werden können. Dazu kann man sich entscheiden, ob man trotzdem fortfahren
will oder man doch die Fragebögen zu Ende ausfüllen will.
46
5.2 Nach der Anmeldung
Das Abfangen von Fehlern, wie das Vergessen von Fragen oder nicht komplett aus-
gefüllte Fragebögen, wird erst am Schluss im Reiter „Weiteres“ abgewickelt. Da wird
nach dem Abspeichern erstmals überprüft, ob alle Fragen ausgefüllt wurden. Wenn alles
ausgefüllt wurde, dann wird die Datenbank nicht aktualisiert und der Benutzer bekommt
einen kleinen Hinweis, dass alles in Ordnung war.
Wenn jedoch einige Fragen bzw. Fragebögen vergessen wurden, dann werden dem
Patienten zwei Möglichkeiten angeboten. Entweder man kann die fehlenden Fragen noch
ausfüllen oder die Fragebögen, die nicht vollständig sind, werden bei der Überschreitung
einer bestimmten Fehlertoleranz, die bei einigen Fragebögen enthalten sind, nicht in
die Bewertung mit einberechnet. D. h., dass die Fragebögen trotzdem in der Datenbank
bleiben, jedoch können einige Fragebögen bei der Berechnung der Werte wie bei den
Charts nicht mitberücksichtigt und somit nicht grafisch dargestellt werden.
Wenn der Benutzer jedoch die fehlenden Fragen ausfüllen möchte, dann kennzeichnet
das System wie in der Abbildung 5.6 zu sehen, zum einen die Reiter, in denen die
Fragen fehlen und zum anderen die Fragen selbst. Die Reiter bekommen eine rote
Umrandung und der Text im Reiter auch. Bei den Fragen wird die dünne obere Leiste
über dem Fragebalken rot umrandet und zusätzlich zeigt eine rot umrandete Pfeilspitze
auf die Frage. Der erste Fragebogen wird angezeigt, bei dem die Fragen fehlen. Bei
der Fehlerbehandlung konzentriert sich das System nur auf die fehlenden Fragen und
springt somit beim Klick auf den Button „weiter“ zur nächsten Seite, in der die Fragen
fehlen. Somit kann der Benutzer schnell die Fehlerbehandlung durcharbeiten und die
Datenbank wird dementsprechend aktualisiert.
Bei der Darstellung der Fragebögen wurden in Kapitel 4.5.2 vier Varianten vorgestellt,
wie man die Fragen und Antwortmöglichkeiten positionieren kann. Die Varianten eins und
zwei wurden gleich zu Beginn verworfen, da es wegen der links gesetzten Fragen und
der rechts gesetzten Antworten vorkommen kann, dass bei mehrzeiligen Fragen oder bei
mehreren Antwortmöglichkeiten die Seitenanzahl eines Fragebogens erheblich steigen
könnte. Der Grund dafür ist, dass man allen Fragen die gleiche Breite zuweist, um eine
symmetrische Struktur zu erhalten, und somit bleiben die Fragen in ihren Bereichen
und überschreiten diese nicht. Daher nehmen solche mehrzeiligen Frageblöcke vertikal
mehr Platz ein und somit verschieben sich die anderen Fragen nach unten oder auf die
47
5 Finaler Entwurf
Abbildung 5.6: Anzeige der fehlenden Fragen
nächste Seite.
Für eine geringere Seitenanzahl kommen daher die Varianten 3 und 4 infrage. Außerdem
haben beide eine klare Abgrenzung von Fragen und Antwortmöglichkeiten. Somit sieht
der Patient genau welches die Fragen und welches die Antwortmöglichkeiten sind. Die
vierte Variante verschafft durch ihren extra Balken über den Fragebalken eine optische
Abgrenzung der einzelnen Fragebereiche. Daher wurde im endgültigen Entwurf die
vierte Variante gewählt.
5.2.3 Charts
In den Visiten werden bei den Fragebögen THI, TBF12, Tinnitus Fragebogen, BDI und
WHOQOL Werte berechnet, die dem Patienten aufzeigen, wie das Symptom Tinnitus
auf die eigene Gesundheit, Psyche und Weiteres wirken kann. Diese Werte werden
nach eigenen Standards automatisch berechnet und dem Patienten grafisch dargestellt.
Unter dem Menüpunkt Charts können diese Grafiken eingesehen werden und über die
Reiter die Fragebögen ausgewählt werden.
48
5.2 Nach der Anmeldung
Die grafische Darstellung ist wie in Kapitel 3.4.4 beschrieben, größtenteils übernommen
worden. Jedoch werden, wie bei der Abbildung 5.7 zu sehen, gleich zwei Ansichten
gezeigt. Zum einen die Einzelansicht der Visiten und zum anderen die Gesamtansicht.
Bei der Einzelansicht wird ein waagrechter Balken verwendet, der die verschiedenen
Kategorien in farbliche Einheiten unterteilt. Diese Kategorien sind bestimmte Werte-
einheiten, die den Schweregrad der errechneten Werte einteilen. Es kann von drei bis
zu fünf verschiedene Kategorien von gering bis zu katastrophal geben, die zusätzlich
zum besseren Verständnis eingefärbt wurden. Dabei wurden wie üblich die Farben
verwendet, die dem Benutzer vertraut bei bestimmten Zuständen vorkommen. So wurde
beispielsweise für die Kategorie gering die Farbe grün verwendet, während die Kategorie
katastrophal die Farbe rot erhält. Somit kann der Patient assoziieren, welchen Stand
sein berechneter Wert hat.
In dem Balken wird eine Raute positioniert, in dem der Wert liegt. Unter dem Balken
werden die Wertgrenzen einer Kategorie an einer Leiste angezeigt. Der Benutzer kann
den genau errechneten Wert beim drüber streifen der Raute mit dem Mauszeiger ange-
zeigt bekommen. Außerdem kann man die vorherigen Visiten einsehen, wenn man im
Dropdown-Listenfeld die jeweilige Visite auswählt.
Die Gesamtansicht zeigt die kompletten 12 Visiten mit den Wertgrenzen der jeweiligen
Kategorien an. Für ein besseres Verständnis der farblichen Einteilung wird eine Legende
angezeigt, die die Bedeutung der Farben angibt. Wenn der Patient nach den 12 Visiten
die Studie weiter führen will, dann werden die vier Follow-up-Visiten miteinbezogen und
dementsprechend die Ansichten erweitert.
5.2.4 Download & Upload
Unter dem Menüpunkt Download & Upload erhält man eine Seite, in der man Datenfiles
hochladen bzw. herunterladen kann. Es soll bei den verschiedenen Visiten Neuroima-
ging Daten hochgeladen werden, damit die Mitarbeiter bzw. Ärzte diese einsehen und
gegebenenfalls auch kommentieren können. Außerdem können die Patienten weitere
Daten hinterlegen.
Die Datenfiles, die hochgeladen wurden, werden wie folgt dargestellt: Name, Dateigröße,
49
5 Finaler Entwurf
Abbildung 5.7: Übersicht der Charts-Darstellung
50
5.2 Nach der Anmeldung
Dateityp, Datum, Kommentare. Zusätzlich erhält jede Datei ein Kontrollkästchen, falls
man mehrere Dateien gleichzeitig herunterladen will und zwei Symbole fürs Herunterla-
den und Löschen. Die Kommentare können nur vom Arzt bzw. von einem Mitarbeiter
hinterlassen werden, der Patient kann diese nur Lesen. Bei der Darstellung der Kom-
mentare wird, wie in der Abbildung 5.8 zu sehen, immer nur eine Zeile angezeigt, um die
Darstellung der Datenfiles übersichtlich zu halten. Es wird daher zusätzlich ein Link mit
der Bezeichnung „mehr“ angezeigt, um die weiteren Kommentarzeilen auszuklappen.
Beim Download werden die Datei und die zugehörige Kommentardatei, die eine Textda-
Abbildung 5.8: Übersicht des Downloadbereichs
tei ist, in eine ZIP-Datei gepackt und somit zusammen heruntergeladen. Somit kann der
Patient nicht nur die Datei selbst herunterladen, sondern auch noch die vom Arzt bzw.
Mitarbeiter verfassten Kommentare.
Im weiteren hat der Patient ein Upload-Feld, das er anklicken kann, um die hochzuladen-
de Datei im eigenen Verzeichnis zu suchen. Mit einem Klick auf den speziellen Button
wird diese dann bei den Dateien, die schon hochgeladen wurden, zu sehen sein.
51
5 Finaler Entwurf
5.2.5 Einstellungen
Der Benutzer kann bei den Einstellungen das Passwort und die Sprache ändern. Diese
Einstellungen werden jedoch im Gegensatz zu dem in Kapitel 3.4.3 beschriebenen
Benutzereinstellungen, nicht über mehrere Seiten getätigt, sondern über eine Seite
abgewickelt. Da man in diesem Fall nur zwei Möglichkeiten hat etwas einzustellen, würde
es zu umständlich sein, dieses auf zwei Seiten zu verteilen bzw. auf zwei Reiter. Wie
in der Abbildung 5.9 zu sehen, bekommt der Benutzer auf einer Seite einen Überblick,
welche Einstellungen dieser tätigen kann und mit einem Abspeichern werden je nachdem
entweder beide oder auch nur eines geändert.
Abbildung 5.9: Überblick der Einstellungen
52
5.2 Nach der Anmeldung
5.2.6 Informationen & Hilfe
In der Informations- & Hilfeseite findet man die notwendigen Informationen wie in der
Startseite, bzgl. der Studie sowie der Fragebögen. Außerdem erhält man eine Hilfestel-
lung in Bezug auf die Handhabung der Webseite.
Dabei wird die Informations- & Hilfeseite in zwei Reitern, Informationen und Webseite,
unterteilt. Im Reiter „Informationen“ stehen somit alle notwendigen Erklärungen über die
Studie, das TRI, die Tinnitus Datenbank und die beinhalteten Fragebögen. Außerdem
wird bei Fragen eine Kontaktperson angegeben. Im Reiter „Webseite“ findet man kurze
Erklärungen über die Handhabung, der Menüpunkte und der Einstellungen. Auch hier
wird eine Kontaktperson angegeben, die für die Webseite zuständig ist.
Eine Informations- & Hilfeseite einzurichten, ist in dem Fall nützlich, da die Benutzer
sich somit einen Überblick über das Projekt verschaffen können und die notwendigen
Informationen nicht erst durch langes Suchen auf anderen Webseiten einholen müssen.
Außerdem eine Erklärung für die Benutzung der Webseite bietet den Benutzern, vor
allem den Laien, eine kleine Hilfestellung an.
Neben der Informations- & Hilfeseite gibt es zusätzlich bei den verschiedenen Frage-
bögen sowie bei den Fragen Info-Buttons, die Erklärungen und Beispiele anzeigen, um
den Benutzern weitere Hilfestellungen zu bieten.
53
6
Abgleich der Anforderungen
In Kapitel 2 wurden die Anforderungen an die Webanwendung definiert. In diesem
Abschnitt wird aufgezeigt, welche Anforderungen realisiert wurden und wie.
6.1 Abgleich des Anforderungskatalogs
Mehrsprachigkeit:
Eine Webseite, die von Personen aus verschiedenen Ländern be-
nutzt wird, sollte mehr als eine Sprache zur Verfügung stellen. Daher wird die
Spracheinstellung gleich zu Beginn angeboten. Damit der Benutzer nicht durch
langes Suchen erst die notwendigen Einstellungen vornehmen kann. Dabei wurde
die Spracheinstellung rechts über dem Logobereich positioniert.
Beim Designentwurf wie in der Abbildung 6.1 zu sehen, wurde die englische und
deutsche Sprache als die Landesflagge dargestellt. Die Landesflaggen können
schnell angeklickt werden und symbolisieren somit die jeweilige Sprache. Jede
weitere Sprache kann über die Dropdown-Leiste ausgewählt werden.
Es besteht auch die Möglichkeit, weitere Sprachen in das System einzuarbeiten.
Die Leiste kann dementsprechend erweitert werden.
Abbildung 6.1: Spracheinstellung
55
6 Abgleich der Anforderungen
Der Benutzer kann die Sprache auch über seine Einstellungen im eingeloggten
Zustand ändern.
Barrierefreiheit:
Ein barrierefreies Webdesign ist nicht nur für Menschen mit Behinde-
rung, sondern für jedermann gedacht. Daher wurde zu Beginn darauf geachtet,
dass der Inhalt der Webseite gut leserlich und verständlich aufgebaut ist. Es wurde
versucht den Kontrast vom Hintergrund zur Schriftfarbe so einzustellen, dass der
Text dem Benutzer deutlich erscheint und gut leserlich ist.
Die Schriftgröße liegt am Anfang bei 12 Pt. Jedoch kann man die Schriftgröße
durch das Feature „Schriftgröße“ ändern, das sich über dem Logobereich und
unter dem Feature „Sprache“ befindet. Dabei kann die Schriftgröße immer um 10 %
verändert werden. Die Abbildung 6.2 zeigt die prozentuale Schriftgrößenänderung
mit ihren jeweiligen Pt-Werten. Der Benutzer kann dann entweder die Schriftgröße
vergrößern oder bei größerer Schriftgröße verkleinern und für sich die geeignete
Größe einstellen. Alle Elemente der Webseite bis auf den Logobereich würden
eine Schriftgrößenveränderung durchlaufen.
Jedoch müssen bei der Schriftgrößenveränderung die Texte trotzdem einer glei-
chen Struktur folgen und sollten nicht über ihre Bereiche hinausragen. Damit der
Benutzer die Fragebögen auf einer nutzerfreundlichen Art und Weise ausfüllen
kann.
Daher werden die Bereiche, in denen die Texte enthalten sind, dementsprechend
angepasst. Beispielsweise werden bei einer Frage, dessen Wörter, die nach der
Schriftgrößenänderung nicht mehr in den Fragenblock reinpassen, automatisch
gegliedert und der jeweilige Frageblock wird vertikal vergrößert.
Dieses Verfahren kann bis zur einer Vergrößerung von 40 % erfolgen, danach muss
sich der Text auch horizontal bis zum Rand des Frageblocks anpassen. Ab einer
Schriftgrößenänderung von 70 % muss sogar der Contentbereich sich horizontal
erweitern, damit der Text voll dargestellt werden kann und nicht zu viel Platz im
Vertikalen einnimmt. Da die Breite des Contents nicht der kompletten Webseiten-
breite entspricht, wäre es in diesem Fall möglich den Content dementsprechend
zu erweitern, um die Texte voll darstellen zu können.
56
6.1 Abgleich des Anforderungskatalogs
Abbildung 6.2: Überblick über die Schriftgrößenänderungen
Nutzerfreundlichkeit:
Bei der Beschreibung des alten Systems in Kapitel 3.4.2 wurde
erwähnt, dass die Buttons in unterschiedlichen Größen dargestellt wurden. Daher
wurde auf der gesamten Webseite darauf geachtet, dass alle Buttons im gleichen
Größenverhältnis zueinanderstehen.
Die Nutzerfreundlichkeit einer Webseite bezieht sich nicht nur auf die Darstellung
der einzelnen Elemente, sondern auch auf eine gute Fehlerbehandlung und ein
verständliches Feedback seitens des Systems. Hierbei wurden einige Fehler des
Benutzers wie in Kapitel 5.2.2 beschrieben mit eingeplant und dementsprechend
vorgesorgt oder durch Anweisung an den Benutzer angedeutet.
Fehlervermeidung:
Die Seite wurde so strukturiert, dass das System klar durch die
Fragebögen führen kann. Es werden immer nur die Alten und das aktuelle Frage-
bogenset in der Menüleiste angezeigt, somit kann man die zukünftigen Fragebo-
gensets nicht vorher ausfüllen und eines somit vergessen.
Man füllt Frage für Frage und Seite für Seite eines Fragebogens aus. Die Seitenan-
zahl wird am unteren Rand des Fragebogens angezeigt, damit der Benutzer sehen
57
6 Abgleich der Anforderungen
kann, welche Seite gerade ausgefüllt wurde. Außerdem wurden die Fragebögen in
den Reiter beschriftet und die Farbe des Reiters des dargestellten Fragebogens
mit der Hintergrundfarbe des Contents angepasst, damit der Benutzer sehen kann,
welcher Fragebogen gerade ausgefüllt wird.
Jedoch ist niemand unfehlbar und daher kann es vorkommen, dass man trotzdem
eine Frage oder eine komplette Seite vergisst auszufüllen, somit tritt in diesem Fall
die Fehlerbehandlung in Kraft. Am Ende eines jeden Fragebogensets überprüft
das System, ob irgendwelche Fragen noch offen sind, und teilt dem Benutzer
dementsprechend die Fehlerbehandlung mit.
Fragebögen ausfüllen:
Damit die Patienten nicht voreingenommen die Fragebögen
ausfüllen, sollte man darauf achten, dass bei keinem Element der Fragebögen
Werte voreingestellt sind. Somit bekommt beispielsweise der Slider erst ein Wert
zugewiesen, wenn man auf den Sliderbutton klickt. Vorher ist kein Wert vorhanden.
Bei der Datumseingabe kann man z. B. bei der Eingabe des heutigen Datums
entweder das Datum direkt angeben oder durch die Kalenderansicht.
Hilfe-Anzeige:
In der Webseite wurde versucht soviel Hilfestellung zu geben wie mög-
lich. Daher gibt es bei einigen Fragebögen bzw. Fragen kleine Info-Buttons, die
beispielsweise Hilfestellungen bzw. Beispiele bei einigen Fragen anbieten oder In-
formationen über bestimmte Fragebögen anzeigen. Ein Fenster mit den jeweiligen
Informationen erscheint erst beim Anklicken des Info-Buttons und beim Klicken auf
einen anderen Bereich der Seite verschwindet dieses Fenster wieder.
Betriebssystem- und Browser unabhängig:
Es wurde versucht die Webseite so zu
designen, dass alle Elemente und Seiten der Webseite auf allen Betriebssystemen
und Browsern gleich dargestellt werden können. Jedoch kann man bei einem
reinen Designentwurf nicht garantieren, dass dies wirklich funktioniert. Da in
diesem Fall die Implementierung fehlt und man solche Kompatibilität nur durch
Testen sagen kann, ob es funktioniert [17].
Ausführbarkeit auf mobilen Geräten:
Es wurde darauf geachtet, dass die Webseite
auch auf mobilen Geräten gut dargestellt werden kann. Daher werden keine
wichtigen Funktionen bzw. Informationen mit der Hoverfunktion dargestellt, da
58
6.1 Abgleich des Anforderungskatalogs
diese auf mobilen Geräten schlecht dargestellt werden kann. Außerdem kann man
die Menüleiste auch auf mobilen Geräten bedienen.
Eine Überlegung wäre, die Webseite nach dem responsive Webdesign zu erstellen.
Dabei reagiert das responsive Webdesign auf die verschiedenen Displaygrößen
und stellt die Webseite dementsprechend dar [
18
]. Als kleines Beispiel, kann man
in der Abbildung 6.3 sehen, wie die Webseite dann auf den jeweiligen Displays
dargestellt werden könnte.
Eine andere Überlegung wäre, die Webseite zusätzlich noch für mobile Geräte
anzubieten. Dabei müsste jedoch die komplette Webseite nochmals nur für den
mobilen Gebrauch designt werden.
Abbildung 6.3: Darstellung der Webseite mit verschiedenen Displaygrößen
Verwaltung von Neuroimaging Daten:
Man kann die Neuroimaging Daten unter dem
Menüpunkt Download & Upload verwalten. Zusätzlich kann der Patient auch
weitere Daten wie z. B. die Audiometrie Datei von sich hinterlassen. Die Daten
werden wie in Kapitel 5.2.4 beschrieben, dargestellt.
59
6 Abgleich der Anforderungen
6.2 Abgleich zusätzlicher Anforderungen
Eingabe des Tinnitus-Beginns:
Die Abbildung 6.4 zeigt die Frage mit der Eingabe
des Tinnitus-Beginns. Dabei erscheinen je nach genauem Wissen des Datums
bestimmte Felder, um dieses angeben zu können. Beim ersten Fall kann man das
Datum entweder direkt oder über das Icon mit der Kalenderansicht angeben. Im
zweiten Fall kann man nur noch direkt den Monat und das Jahr angeben und im
letzten Fall den ungefähren Zeitraum. Somit hat der Patient Alternativen, falls das
genaue Datum nicht mehr bekannt ist.
Abbildung 6.4: Übersicht der Alternativen beim Tinnitus-Beginn
Screening-Baseline-Problem:
Wenn man über den Menüpunkt „Fragebogen“ zum
ersten Mal auf „Screening“ klickt oder sich direkt über die Startseite auf das erste
Fragebogenset weiterleiten lässt, dann gibt es hier eine Besonderheit. Das Fra-
60
6.2 Abgleich zusätzlicher Anforderungen
gebogenset „Screening“ und „Baseline“ haben ähnliche Fragebögen, somit kann
man beim ersten Ausfüllen wählen, ob man die beiden Fragebogensets einmal
ausfüllt und für beide abspeichert oder separat ausfüllt. Es besteht also die Mög-
lichkeit, das Screening zuerst auszufüllen und in einem späteren Zeitpunkt dann
die Baseline oder Screening & Baseline gemeinsam zu hinterlegen. Daher wurde
extra eine Abfrage erstellt, die diese Möglichkeit anbietet. So kann der Patient zu
Beginn diese Entscheidung wählen und im System wird dann dementsprechend
seine Entscheidung umgesetzt.
Keine Angabe:
Bei den Fragebögen wurde explizit die Möglichkeit „keine Angabe“ an-
zuklicken weggelassen. Somit hat der Patient nur noch die Möglichkeiten entweder
die Fragebögen mit den jeweiligen Antwortmöglichkeiten auszufüllen oder gar
nichts auszuwählen. Jedoch tritt wiederum im letzten Fall die Fehlerbehandlung
in Kraft. Obwohl man hierbei die Möglichkeit hat, die Fragebögen mit fehlenden
Angaben trotzdem abzuspeichern.
Eingabe der Tinnitusgeräusche:
Bei der Eingabe der Tinnitusgeräusche sollte es
möglich sein, die Geräusche nach eigener Beschreibung zu definieren. Daher gibt
es in diesem Fall ein Textfeld mit einer Autovervollständigung. Man gibt unabhängig
von der Groß- und Kleinschreibung seine Beschreibung ein, wie man das Geräusch
wahrnimmt, z. B. „rau...“. Das System schlägt somit alle Wörter vor, die mit „rau“
beginnen wie „Rauschen...“. Dabei wurde eine Liste mit bestimmten Vorschlägen
erstellt, mit dem die Autovervollständigung arbeitet. Außerdem können selbst
eingegebene Wörter in die Liste eingespeichert werden, falls diese noch nicht in
der Liste enthalten sind.
Datumseingabe:
Bei der Datumseingabe stehen zwei Optionen zur Verfügung, um
das Datum eingeben zu können. Man kann entweder direkt über die Tastatur
bei den vorgesehenen Feldern das Datum eingeben oder das kalenderähnliche
Icon anklicken, das dann eine Kalenderansicht erscheinen lässt, in dem man das
Datum auswählt. Bei der Kalenderansicht wurde extra zwischen zwei Ansichten
unterschieden. Zum einen hat man eine Kalenderansicht für ein Datum, das Jahre
61
6 Abgleich der Anforderungen
zurückliegt und zum anderen hat man eine Kalenderansicht für ein Datum im
gleichen Jahr. Die Vorgehensweise wurde in Kapitel 4.5.2 beschrieben.
Copy & Paste Funktion:
Man kann nicht komplett verhindern, dass die Benutzer einen
Fragebogen kopieren und in den nächsten Fragebogen einfügen, wenn die Be-
nutzer das machen wollen, dann finden die immer einen Weg. Jedoch kann man
versuchen, den Leuten es schwer zu machen. Dazu kann man ein JavaScript-Code
verwenden, das verhindert, dass man den Text auswählt und kopiert. Außerdem
wird auch die „Alles auswählen“-Funktion blockiert, dass das Kopieren verhindert
[
19
]. Jedoch funktioniert solch ein JavaScript-Code nicht bei allen Browsern oder
der Benutzer hat bei sich JavaScript ausgeschaltet. Trotzdem kann es die Sache
für einige erschweren.
Außerdem kann man die Funktion ausschalten, dass man Seiten einer Websei-
te in einem anderen Tab öffnet. Somit verhindert man, dass die Benutzer den
alten Fragebogen in einem neuen Tab öffnen und durch hin und her schalten, ab-
schauen was sie damals angeklickt haben und dieses auf den neuen Fragebogen
übertragen.
62
7
Zusammenfassung
In dieser Ausarbeitung wurde ein Designkonzept einer Webseite für eine Forschungs-
datenbank speziell für Patienten, die an dem Symptom Tinnitus leiden, vorgestellt. Die
Webseite soll dabei helfen, die Patientendaten und die beinhalteten Untersuchungen
auf eine schnelle und angenehme Art und Weise zu erfassen. Die Patienten sollen
sich daher bequem von zu Hause aus auf der Webseite anmelden und die Fragebögen
ausfüllen können.
Es wurden Anforderungen an das neue System ermittelt, um eine nutzerfreundliche und
reibungslose Arbeit mit den Elementen auf der Seite anbieten zu können.
In diesem Zusammenhang wurde das bestehende System betrachtet und analysiert,
um die Vorteile und Nachteile der Seite zu erfassen und die Erkenntnis daraus in das
Designkonzept einfließen zu lassen.
Das Hauptaugenmerk lag vor allem in der Navigation und der Darstellung der Fragebö-
gen, da die Navigation hinsichtlich der Nutzerfreundlichkeit das A und O einer Seite ist
und vor allem sollte das Ausfüllen der Fragebögen nicht außer Acht gelassen werden,
immerhin ist dies der wichtigste Teil der Seite.
Daher wurde zu Beginn überlegt, wie die Fragebögen so dargestellt werden können,
dass diese übersichtlich, strukturiert und gut abgegrenzt zueinander sind.
Bei der Navigation wurden verschiedene Darstellungen entworfen und die Positionierung
auf der Seite abgewogen. Außerdem wurden die Vorteile und Nachteile der einzelnen
Darstellungen gegeneinander abgegrenzt.
Beim endgültigen Entwurf wurden die Elemente nach bestimmten Kriterien, die vor allem
nach der Nutzerfreundlichkeit, den Anforderungen und auch etwas nach dem Aussehen
63
7 Zusammenfassung
aufgestellt wurden, ausgewählt und vorgestellt. Außerdem wurden alle Anforderungen,
die zu Beginn an das neue System gestellt wurden, abgeglichen.
7.1 Ausblick
Das Designkonzept für die Webseite ist nur für die Patientenbenutzung entworfen
worden, jedoch kann das System für eine Benutzung für die Mitarbeiter und Ärzte
erweitert werden. Dabei muss hauptsächlich die Navigation etwas verändert und weitere
Menüpunkte wie beispielsweise einen Patienten suchen hinzugefügt werden. Außerdem
kann man leicht eine Mischform der Navigation mit einbauen, falls die horizontale
Navigationsleiste für die Darstellung der Menüpunkte nicht ausreicht. Somit könnten
einige Menüpunkte in der vertikalen Navigation untergebracht werden.
Für mobile Endgeräte könnte neben der mobilen Darstellung der Webseite zusätzlich
noch eine App angeboten werden, die hauptsächlich nur für das Ausfüllen der Frage-
bögen zuständig wäre. Dabei melden sich die Patienten über die App an und füllen die
Fragebögen so wie auf der Webseite, jedoch in einer mobilen Endgerät-Darstellung
der Fragen, aus und die ausgefüllten Fragebögen werden dann in der Tinnitus Daten-
bank abgespeichert. Die ausgefüllten Fragebögen sind über die Webseite genauso
abrufbar wie die Fragebögen, die auf der Webseite ausgefüllt wurden. Die App könnte
beispielsweise erst nach dem ersten Ausfüllen des Fragebogensets über die Websei-
te heruntergeladen werden. Somit stellt man sicher, dass der Patient zu Beginn der
Studie die Webseite besucht und nicht gleich über die App beginnt, die Fragebogen
auszufüllen. Im Zusammenhang mit der Entwicklung der App für die Tinnitus Daten-
bank wäre das Buch „Entwicklung mobiler Apps: Konzepte, Anwendungsbausteine und
Werkzeuge im Business und E-Health“ [
20
] sehr hilfreich. Die Autoren befassen sich
darin mit den wichtigsten Aspekten einer App-Entwicklung und deren wiederkehrenden
Problemstellungen.
Die Tinnitus Datenbank wird sich in Zukunft mit der Track Your Tinnitus Datenbank
verbinden. Die Track Your Tinnitus Datenbank läuft seit 12 Monaten [Stand April 2015]
und enthält neben einer Webseite und einem Backend noch zusätzlich zwei Apps, die
64
7.1 Ausblick
jeweils für das Android- und iOS-Betriebssystem sind [
21
]. Diese Apps helfen dabei, die
Schwankungen der Tinnitus Wahrnehmung in Echtzeit zu erfassen [
22
]. Dabei müssen
die Patienten Fragebögen ausfüllen, die speziell Fragen über die Tinnitus Wahrnehmung
und die tägliche Routine eines Patienten beinhalten. Diese Befragung erfolgt zufällig
und kann bis zu 12 Benachrichtigungen pro Tag ergeben. Der Patient hat jedoch die
Möglichkeit die Anzahl der Benachrichtigungen pro Tag sowie eine Zeitspanne, an dem
die Benachrichtigungen zufällig erfolgen sollen, in das System einzustellen [23].
Ein zusätzliches Feature der Apps ist, dass diese während dem Ausfüllen der Fragebö-
gen das Umgebungsgeräusche Level aufnehmen und die Ergebnisse abspeichern. Die
Ergebnisse können dann mit den Fragebögen über die Tinnitus Wahrnehmung bewertet
werden und Aufschluss über die Tinnitus Lautstärke während bestimmter Umgebungs-
geräusche geben.
So ein Zusammenschluss ergibt einige Vorteile, zum einen läuft die Track Your Tinnitus
Datenbank schon in der realen Welt und kann somit einige Lehren davon ziehen [
21
] und
zum anderen können mehr Daten vom Patienten erfasst werden, da die Fragebögen der
Tinnitus Datenbank sich hauptsächlich auf die Auswirkungen des Tinnitus auf das eigene
Wohlbefinden und Weiteres beziehen, während die Track Your Tinnitus Datenbank die
Schwankungen der Tinnitus Wahrnehmung erfasst.
65
Literaturverzeichnis
[1]
Zenner, H.P.: Beethovens taubheit: „wie ein verbannter muß ich leben“. Dtsch
Arztebl 99 (2002) A 2762–2766 (Zuletzt besucht am 29.11.2015).
[2]
: Tinnitus research initiative: About tinnitus.
http://www.tinnitusresearch.
org/en/facts/facts_en.php (2006) (Zuletzt besucht am 07.01.2016).
[3]
Nagel, G.: Tinnitus (ohrgeräusche): Definition.
http://www.onmeda.
de/krankheiten/tinnitus-definition-1304-2.html
(2015) (Zuletzt
besucht am 29.11.2015).
[4]
Wolf, C.: Klingeln im ohr.
https://www.dasgehirn.info/wahrnehmen/
hoeren/klingeln-im-ohr-8346/ (2012) (Zuletzt besucht am 22.09.2015).
[5]
: Tinnitus and the brain.
http://www.tinnitusresearch.org/en/facts/
brain_en.php (2006) (Zuletzt besucht am 29.11.2015).
[6]
: Tinnituszentrum universität regensburg: 3. wie viele betroffene gibt
es?
http://www.tinnituszentrum-regensburg.de/htmls/inform
ation/tinnitus-faq.php (2006) (Zuletzt besucht am 29.11.2015).
[7]
: Tri history and targets.
http://www.tinnitusresearch.org/en/history/
history_en.php (2006) (Zuletzt besucht am 29.11.2015).
[8]
: Tinnitus database.
http://database.tinnitusresearch.org/index.
php (2008) (Zuletzt besucht am 29.11.2015).
[9]
Landgrebe, M., Zeman, F., Koller, M., Eberl, Y., Mohr, M., Reiter, J., Staudinger, S.,
Hajak, G., Langguth, B.: The tinnitus research initiative (tri) database: a new
approach for delineation of tinnitus subtypes and generation of predictors for
treatment outcome. BMC medical informatics and decision making
10
(2010)
42
[10]
: Gestaltgesetze.
https://www.e-teaching.org/didaktik/gestaltung/
visualisierung/gestaltgesetze (2015) (Zuletzt besucht am 29.11.2015).
67
Literaturverzeichnis
[11]
Zaglov, I.: Die psychologie des webdesign: Worauf nutzer als erstes
achten.
http://t3n.de/news/psychologie-im-webdesign-447372/
(2013) (Zuletzt besucht am 29.11.2015).
[12]
: Farbwirkungen auf der psychischen ebene.
http://www.farbenundleben.
de/farbwirkung/farbwirkung_psychisch.htm
(2015) (Zuletzt besucht am
29.11.2015).
[13]
Knudtson, A.: Psychology of web design: What consumers notice first.
http://gotgroove.com/ecommerce-blog/design-development/
psychology-of-web-design-what-consumers-notice-first/
(2013)
(Zuletzt besucht am 29.11.2015).
[14]
: Usability: Warum ihre website mehr als nur schön sein sollte.
https:
//www.twt.de/news/detail/usability-warum-ihre-website-m
ehr-als-nur-schoen-sein-sollte.html
(2015) (Zuletzt besucht am
29.11.2015).
[15]
: Links rechts oben unten – welches menü ist richtig?
http://www.beesign.
com/themen/welches-menue-ist-richtig.html
(2012) (Zuletzt besucht
am 29.11.2015).
[16]
Beschnitt, M.: Suchst du noch oder findest du schon? navigationsmechanismen
im www: Teil 1 – grundlegendes.
http://www.usabilityblog.de/
2009/11/suchst-du-noch-oder-findest-du-schon-navigationsm
echanismen-im-www-teil-1-grundlegendes/
(2009) (Zuletzt besucht am
29.11.2015).
[17]
Kilgenstein, J.: Webdienste zum testen der browserdarstellung.
http:
//www.css-einfach.de/artikel/cross-browser-onlinedienste/
(2009) (Zuletzt besucht am 19.12.2015).
[18]
: Responsive webdesign.
http://t3n.de/tag/responsive-webdesign
(n/a) (Zuletzt besucht am 19.12.2015).
[19]
Gaskill, D.: No copy and paste script.
http://www.boogiejack.com/no_
copy_paste.html (n/a) (Zuletzt besucht am 19.12.2015).
68
Literaturverzeichnis
[20]
Schickler, M., Reichert, M., Pryss, R., Schobel, J., Schlee, W., Langguth, B.:
Entwicklung mobiler Apps: Konzepte, Anwendungsbausteine und Werkzeuge im
Business und E-Health. eXamen.press. Springer Vieweg (2015)
[21]
Pryss, R., Reichert, M., Herrmann, J., Langguth, B., Schlee, W.: Mobile crowd
sensing in clinical and psychological trials - a case study. In: 28th IEEE Int’l
Symposium on Computer-Based Medical Systems, IEEE Computer Society Press
(2015) 23–24
[22]
Herrmann, J.: Track your tinnitus.
https://www.trackyourtinnitus.org/
de/home (2013) (Zuletzt besucht am 07.01.2016).
[23]
Pryss, R., Reichert, M., Langguth, B., Schlee, W.: Mobile crowd sensing services for
tinnitus assessment, therapy and research. In: IEEE 4th International Conference
on Mobile Services (MS 2015), IEEE Computer Society Press (2015) 352–359
69
Abbildungsverzeichnis
1.1 Ansicht der bisherigen Webseite . . . . . . . . . . . . . . . . . . . . . . . 6
3.1 Übersicht der Bereiche der Webseite . . . . . . . . . . . . . . . . . . . . . 12
3.2 Übersicht der Navigationsleiste . . . . . . . . . . . . . . . . . . . . . . . . 13
3.3 Kalenderansicht des Geburtsdatum . . . . . . . . . . . . . . . . . . . . . 17
3.4 AnsichteinesCharts.............................. 19
4.1 Übersicht des Gestaltungsrasters . . . . . . . . . . . . . . . . . . . . . . . 22
4.2 Farbendreieck und ihre Wirkung . . . . . . . . . . . . . . . . . . . . . . . 23
4.3 Übersicht der verwendeten Farben . . . . . . . . . . . . . . . . . . . . . . 24
4.4 Übersicht der Menüleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.5 Übersicht der Hover-Funktionen . . . . . . . . . . . . . . . . . . . . . . . 29
4.6 Übersicht der einen Fragebögen . . . . . . . . . . . . . . . . . . . . . . . 33
4.7 Anordnung der verschiedenen Varianten . . . . . . . . . . . . . . . . . . . 34
4.8 Übersicht der Slider-Varianten . . . . . . . . . . . . . . . . . . . . . . . . 36
4.9 Übersicht der Datumseingaben . . . . . . . . . . . . . . . . . . . . . . . . 37
4.10 Übersicht der begleitende Angaben . . . . . . . . . . . . . . . . . . . . . 38
5.1 Übersicht des Headerbereichs vor der Anmeldung . . . . . . . . . . . . . 40
5.2 Anmeldebereich ................................ 41
5.3 Übersicht der falschen Eingabe des Benutzernamens . . . . . . . . . . . 42
5.4 Übersicht der Navigationsleiste mit den Funktionen . . . . . . . . . . . . . 44
5.5 ÜbersichtdesReiters ............................. 46
5.6 Anzeige der fehlenden Fragen . . . . . . . . . . . . . . . . . . . . . . . . 48
5.7 Übersicht der Charts-Darstellung . . . . . . . . . . . . . . . . . . . . . . . 50
5.8 Übersicht des Downloadbereichs . . . . . . . . . . . . . . . . . . . . . . . 51
5.9 Überblick der Einstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . 52
6.1 Spracheinstellung ............................... 55
6.2 Überblick über die Schriftgrößenänderungen . . . . . . . . . . . . . . . . 57
71
Name: Irina Stenske Matrikelnummer: 691473
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 .............................................................................
Irina Stenske
