Universität Ulm | 89069 Ulm | Germany Fakultät für
Ingenieurwissenschaften,
Informatik und
Psychologie
Institut für Datenbanken
und Informationssysteme
Konzeption und Realisierung einer
webbasierten Anwendung zur
Unterstützung von Managern bei der
Zuteilung von Worklist Items
Masterarbeit an der Universität Ulm
Vorgelegt von:
Johannes Schmid
Gutachter:
Prof. Dr. Manfred Reichert
Dr. Rüdiger Pryss
Betreuer:
Michael Stach
2018
Fassung 29. Oktober 2018
c
2018 Johannes Schmid
This work is licensed under the Creative Commons. Attribution-NonCommercial-ShareAlike 3.0
License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/de/
or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California,
94105, USA.
Satz: PDF-L
A
TEX2ε
Kurzfassung
Digitalisierung ist in der heutigen Zeit ein bedeutender Faktor und ist nicht mehr aus dem
Alltag wegzudenken. Eine große Herausforderung hierbei ist die digitale Transformation
in Unternehmen. Die stetige Weiterentwicklung von digitalen Technologien erfordert
eine kontinuierliche Anpassung der Geschäftsmodelle innerhalb von Unternehmen. Ein
wichtiger Grund hierfür ist die Veränderung der Erwartungshaltung von potentiellen
Nutzern. Meist kann diese nur mit digitalen Technologien erfüllt werden. Für viele Unter-
nehmen ist der einfachste Weg von der Digitalisierung zu profitieren, die bestehende
Softwarelösungen durch neue, bessere zu ersetzen.
Zudem ist die stetig steigende Komplexität von Geschäftsprozessen in Unternehmen
eine Herausforderung, welche aus der digitalen Transformation resultiert. Um dieser
schweren Aufgabe entgegenzuwirken, sollen Prozessabläufe durch menschliche Inter-
aktion unterstützt werden. Flexibilität, Effizienz und Agilität sind hierbei von essentieller
Bedeutung.
Ziel dieser Arbeit ist die Erstellung eines Konzepts für eine webbasierte Anwendung zur
Unterstützung von Managern. Die Anwendung soll dabei bei der Zuteilung von Worklist
Items an die Mitarbeiter unterstützen. Anhand dieses Systems soll der Manager neben
der Verwaltung und Betreuung von Mitarbeitern auch die Rahmenbedingungen für die
Zuteilung der Items definieren. Dabei soll die einfache Bedienung durch eine einheitliche
Darstellung gewährleistet werden.
iii
Danksagung
An dieser Stelle möchte ich mich bei allen
Freunden
bedanken, die mich während meiner
Studienzeit und auch bei der Erstellung dieser Arbeit unterstützt und motiviert haben.
Zunächst gebührt ein besonderer Dank
Herrn Prof. Dr. Manfred Reichert
für die Begut-
achtung dieser Arbeit.
Ein sehr großer Dank gilt meinem Betreuer
Michael Stach
für die herzliche Betreuung
und tatkräftige Unterstützung während meines Masterstudiums, insbesondere während
der Erstellung meiner Masterarbeit.
Des Weiteren gilt ein sehr großer Dank meinem Gutachter
Dr. Rüdiger Pryss
. Für die
hilfreichen Diskussionen, konstruktive Kritik und sehr gute Betreuung während meines
Studiums möchte ich mich herzlich bedanken.
Zudem gilt ein besonderer Dank den wissenschaftlichen Mitarbeitern
Johannes Schobel
und
Robin Kraft
für die gute und reibungslose Zusammenarbeit bei diversen gemeinsa-
men Projekten.
Außerdem möchte ich mich herzlich bei meinem
Vater Dieter
und meiner
Cousine
Stefanie bedanken, die viel Zeit in die Korrektur dieser Arbeit investiert haben.
Besonderen Dank gilt meiner
Freundin
für ihre Geduld und ihr Verständnis während
meiner Studienzeit.
Zuletzt gebührt der Dank meinen
Eltern Dieter und Vera
für die unermüdliche und be-
dingungslose Unterstützung in jeglicher Hinsicht während meines gesamten Studiums.
v
Inhaltsverzeichnis
1 Einleitung 1
1.1 Problemstellung und Motivation . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Ziel dieser Arbeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Aufbau der Arbeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 Grundlagen 5
2.1 BPM System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Worklist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 Worklist Item . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.4 Verteilungsverfahren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3 Related Work 11
3.1 Activiti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2 Camunda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.3 jBPM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.4 AristaFlow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4 Anforderungsanalyse 17
4.1 Nutzerrollen im System . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.2 Anwendungsfälle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.3 Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.3.1 Funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . 25
4.3.2 Nichtfunktionale Anforderungen . . . . . . . . . . . . . . . . . . . . 29
5 Konzeption 31
5.1 Styleguide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.1.1 Themes und Farben . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.1.2 Typographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.2 Verwendete GUI-Komponenten . . . . . . . . . . . . . . . . . . . . . . . . 34
5.2.1 Checkboxen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
vii
Inhaltsverzeichnis
5.2.2 Radio-Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.2.3 Textfelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
5.2.4 Registerkarten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
5.2.5 Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.2.6 Fortschrittsbalken . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.2.7 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.2.8 Breadcrumbs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.2.9 Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2.10 Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.2.11 Datumsauswahl . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.2.12 Diagramme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.3 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
6 Umsetzung und finaler Entwurf 53
6.1 Übersicht des Gesamtsystems . . . . . . . . . . . . . . . . . . . . . . . . 53
6.2 Dialogstrukturdiagramm . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
6.3 Paper Mockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
6.4 Finaler Entwurf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
6.4.1 Account-Modul . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
6.4.2 Systemnachrichten-Modul . . . . . . . . . . . . . . . . . . . . . . . 70
6.4.3 Zuteilung-Modul . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
6.4.4 Mitarbeiter-Modul . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
6.4.5 Statistik-Modul . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
7 Anforderungsabgleich 95
7.1 Funktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . 95
7.2 Nichtfunktionale Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . 97
8 Zusammenfassung und Ausblick 99
8.1 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
8.2 Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
viii
1
Einleitung
In diesem Kapitel wird die Problemstellung und Motivation über die vorliegende Arbeit
erläutert, sowie die Ziele dieser Arbeit genannt. Abschließend folgt eine Übersicht über
den Aufbau dieser Arbeit.
1.1 Problemstellung und Motivation
Digitalisierung ist in der heutigen Zeit ein bedeutender Faktor und ist nicht mehr aus dem
Alltag wegzudenken. Eine große Herausforderung hierbei ist die digitale Transformation
in Unternehmen. Die stetige Weiterentwicklung von digitalen Technologien erfordert
eine kontinuierliche Anpassung der Geschäftsmodelle innerhalb von Unternehmen. Ein
wichtiger Grund hierfür ist die Veränderung der Erwartungshaltung von potentiellen
Nutzern. Meist kann diese nur mit digitalen Technologien erfüllt werden. Für viele Unter-
nehmen ist der einfachste Weg von der Digitalisierung zu profitieren, die bestehende
Softwarelösungen durch neue, bessere zu ersetzen [1, 2, 3, 4].
Eine Studie [
5
] zur digitalen Transformation 2018 mit rund 2000 befragten Unternehmen
ergab, dass sich 42% der Teilnehmer sehr gut bis gut auf die digitale Transformation
vorbereitet fühlen. Das ist ein Wachstum von 7% im Vergleich zum Vorjahr. 26% gaben
sogar an, dass zusätzliche Arbeitsplätze im Unternehmen entstehen. Des Weiteren sind
63% der Befragten der Meinung, dass sich die digitale Transformation positiv auf die
Attraktivität als Arbeitgeber auswirkt. Dem gegenüber stehen große Hürden, welche
überwunden werden müssen, um die digitale Transformation voranzutreiben. Hürden
sind unter anderem die Verteidigung bestehender Strukturen, fehlende Erfahrungen
oder blockierende Sicherheitsanforderungen.
1
1 Einleitung
Abbildung 1.1: Stellenwert der digitalen Transformation in Unternehmen. Quelle: [6]
Die Abbildung 1.1 zeigt den Stellenwert der digitalen Transformation in Unternehmen
seit 2016. Daraus ist erkenntlich, dass der Stellenwert für Unternehmen immer wichtiger
wird. Die Studie geht davon aus, dass der Trend in den nächsten Jahren weiter anhält
oder sogar zunimmt.
Zudem ist die stetig steigende Komplexität von Geschäftsprozessen in Unternehmen
eine Herausforderung, welche aus der digitalen Transformation resultiert. Um dieser
schweren Aufgabe entgegenzuwirken, sollen Prozessabläufe durch menschliche Inter-
aktion unterstützt werden. Flexibilität, Effizienz und Agilität sind hierbei von essentieller
Bedeutung. Dabei werden Business Process Management Systeme eingesetzt. Diese
sollen die korrekte Ausführung der Geschäftsabläufe sicherstellen. In dieser Arbeit wird
ein Konzept erarbeitet, welches den Herausforderungen der menschlichen Interaktionen
mit Geschäftsprozessen gerecht werden soll.
1.2 Ziel dieser Arbeit
Ziel dieser Arbeit ist die Erstellung eines Konzepts für eine webbasierte Anwendung
zur Unterstützung von Managern. Die Anwendung soll dabei bei der Zuteilung von
2
1.3 Aufbau der Arbeit
Worklist Items an die Mitarbeiter unterstützen. Anhand dieses Systems soll der Manager
neben der Verwaltung und Betreuung von Mitarbeitern auch die Rahmenbedingungen
für die Zuteilung der Items definieren. Die Bedienung des Systems soll durch eine
einheitliche und einfache Darstellung erleichtert werden. Zusätzlich sollen verwandte
Arbeiten analysiert werden und in die Entwicklung einwirken. Darüber hinaus sollen
Styleguides 5.1 definiert werden, um eine einheitliche und konsistente Struktur zu
erreichen [
7
,
8
]. Zum Abschluss soll ein kurzer Ausblick auf Zukunftsvisionen und
mögliche Erweiterungen dieser Anwendung gegeben werden.
1.3 Aufbau der Arbeit
Dieses beinhaltet die Einführung in die Problemstellung, sowie die Motivation des
Projektes. Zudem werden die Ziele der Arbeit genannt und näher erläutert.
In
Kapitel 2
werden notwendige Grundlagen von Business Process Management Sys-
teme, Worklists, Worklist Items und Verteilungsverfahren erarbeitet, auf welchen diese
Arbeit basiert.
Anschließend werden in
Kapitel 3
Erkenntnisse, welche aus verwandten Anwendungen
gewonnen wurden, vorgestellt. Dabei werden diese auf Funktionalität, Bedienbarkeit
sowie auf potentielle Fehler untersucht. Zu den verwandten Anwendungen zählen Activiti,
Camunda, jBPM und AristaFlow.
Darauf folgend wird in
Kapitel 4
eine ausführliche Nutzeranalyse, auf welche das
Rahmenwerk des Systems basieren soll, durchgeführt. Zuerst werden die Nutzerrollen
des Systems beschrieben und danach die Anwendugsfälle vorgestellt. Anschließend
werden die funktionale und nichtfunktionale Anforderungen an das System definiert.
In
Kapitel 5
werden Styleguides definiert und die verwendeten GUI-Elemente dargestellt.
In
Kapitel 6
wird zunächst das Gesamtsytsem und die ersten Papermockups vorge-
stellt. Anschließend wird auf Basis der Anforderungsanalyse ein finaler Entwurf der
webbasierten Anwendung erarbeitet.
3
1 Einleitung
Danach werden in
Kapitel 7
die funktionalen und nicht-funktionalen Anforderungen aus
dem Kapitel 4 auf ihre Umsetzung geprüft.
Abschließend umfasst das
Kapitel 8
eine kurze Zusammenfassung dieser Arbeit, sowie
einen Ausblick auf mögliche Erweiterungen dieser Anwendung.
4
2
Grundlagen
In diesem Kapitel werden grundlegende Themen erklärt, welche eine wichtige Rolle zum
Grundverständnis dieser Arbeit einnehmen.
In Abschnitt 2.1 soll auf die Thematik Business Process Management System einge-
gangen werden. Anschließend soll Abschnitt 2.2 eine Kurzübersicht über Worklists
zeigen. Des Weiteren soll in Abschnitt 2.3 Grundlegendes zu Worklist Items erläutert
werden. Abgeschlossen wird das Kapitel durch die Darstellung der Verteilungsverfahren
in Abschnitt 2.4.
2.1 BPM System
Ein Business Process Management System (BPM System) wird eingesetzt, um Prozesse
in einem Unternehmen zu überwachen, dokumentieren, auszuführen und zu modellieren.
Ziel dieses Systems ist es, Geschäftsabläufe effizienter, flexibler und agiler zu gestal-
ten. Dadurch sollen Kosten und Verarbeitungszeiten reduziert und die Produktqualität
gesteigert werden. Zudem soll das BPM System auf kurzfristige Veränderungen der
Geschäftsprozesse reagieren können, um die genannten Ziele nicht zu gefährden. Ein
weiteres Augenmerk liegt auf der Bereitstellung von Informationen für den Endanwender
(nachfolgend Nutzer genannt). Damit dieser die richtigen Prozessschritte korrekt aus-
führen kann, sollen ihm diverse Informationen zum richtigen Zeitpunkt zur Verfügung
gestellt werden. Diese Vorgehensweise erhöht das effiziente Arbeiten und die einfache
Bedienung durch den Nutzer [9, 10, 11].
Für die Abarbeitung von Prozessschritten werden sogenannte Worklists (Arbeitslis-
5
2 Grundlagen
ten) eingesetzt. Darin sind eine Vielzahl an Arbeitsaufgaben enthalten, welche der
Nutzer nacheinander bearbeiten soll. Die Reihenfolge der Ababreitung legt dabei das
System aufgrund von verschiedenen Attributen fest. Attribute können beispielsweise die
Angabe eines Fälligkeitsdatums oder einer Bearbeitungswichtigkeit einer Aufgabe sein.
Dabei kann grundsätzlich zwischen zwei verschiedenen Typen unterschieden werden.
Zum einen Aufgaben, welche von einem Nutzer bearbeitet werden müssen, beispiels-
weise das Ausfüllen von Formularen, und zum anderen automatisierte Systemaufgaben,
welche vom BPM System ohne menschliche Interaktion ausgeführt werden. [
12
,
13
,
14
].
2.2 Worklist
Worklists sind Sammlungen von Arbeitsaufgaben (nachfolgend Worklist Items genannt).
Diese Items werden durch die Worklist verwaltet und meist in einer Liste dargestellt. Der
Nutzer hat somit stets eine Übersicht über Aufgaben, welche er bearbeiten soll. Zudem
werden Items, die eine hohe Priorität besitzen oder fällig werden, in der Auflistung
hervorgehoben, um dem Nutzer die Dringlichkeit kenntlich zu machen [15, 16, 17].
2.3 Worklist Item
Ein Worklist Item ist ein einzelner Prozessschritt im Prozessablauf innerhalb eines Un-
ternehmens. Es entspricht einer Arbeitsaufgabe, welche ein Nutzer zu einer bestimmten
Zeit im Prozessverlauf bearbeiten soll. Diese Items verfügen über Informationen, welche
bei der Festlegung der Abarbeitungsreihenfolge eine wichtige Rolle spielen [13].
In der Folge werden Attribute näher erläutert, welche Worklist Items enthalten kön-
nen [13, 12]:
Identifikationsnummer
Die Identifikationsnummer garantiert eine eindeutige Kennzeichnung des Worklist
6
2.3 Worklist Item
Items.
Titel
Der Titel ist der Name des Worklist Items. Er wird meist so gewählt, dass er den
Prozessschritt widerspiegelt.
Beschreibung
Ebenfalls kann eine kurze Beschreibung des vorliegendenen Prozessschrittes
enthalten sein.
Typ des Worklist Items
Die einzelnen Items können einer bestimmten Aktivität zugeordnet werden.
Potentielle Bearbeiter
Dieses Attribut enthält eine Auflistung von möglichen Nutzern, welche aufgrund
ihrer Qualifikationen das Item bearbeiten können.
Status
Der aktuelle Bearbeitungsstatus des Worklist Items kann ebenfalls angezeigt wer-
den.
Priorität
Das Attribut Priorität spiegelt die Wichtigkeit der Bearbeitung eines Items wider.
Aufgabenzuordnung
Dieses Attribut bestimmt die Prozessschrittzugehörigkeit eines Worklist Items.
7
2 Grundlagen
Erstelldatum
Das Erstelldatum ist das Datum, an dem das Item initiiert wurde.
Startdatum
Das Startdatum ist das Datum, an dem die Bearbeitung des Items beginnen soll.
Fälligkeitsdatum
Das Fälligkeitsdatum ist das Datum, an dem die Bearbeitung des Items spätestens
beendet sein muss.
Abschlussdatum
Das Abschlussdatum ist das Datum, an dem die Bearbeitung des Items beendet
wurde.
Anmerkungen
Dem Worklist Item können diverse Notizen angehängt werden.
2.4 Verteilungsverfahren
Ein Verteilungsverfahren wird eingesetzt, um Worklist Items den Systemnutzern oder
existierenden Worklists möglichst optimal zuzuteilen. Eine Verteilung ist optimal, wenn
die Nutzer gleichmäßig ausgelastet sind. Die Überlastung und Unterlastung von Nutzern
lassen daher auf eine nicht optimale Verteilung schließen. Verschiedene Algorithmen
und Daten bilden die Basis für die Zuteilung. Beliebte Parameter bei der Verteilung sind
die priorisierte und lastabhängige Zuteilung. Allerdings sind diese Parameter kein Garant
für eine optimale Verteilung [18].
In dieser Arbeit werden folgende drei Verteilungsverfahren angewandt [18]:
8
2.4 Verteilungsverfahren
•Lastabhängige Verteilung
: Die Worklist Items werden denjenigen Nutzern zu-
geteilt, welche am niedrigsten ausgelastet sind. Die Auslastung wird anhand der
Worklist und den bereits beinhalteten Items ermittelt.
•Priorisierte Verteilung
: Die Worklist Items werden je nach Wichtigkeit an die Nut-
zer verteilt. Basis für die Verteilung ist die Worklist und deren bereits beinhalteter
Items in Hinblick auf Prioritäten.
•Gleichmäßige Vorabverteilung durch Round Robin
: Jedes Item wird einem
bestimmten Nutzer zugewiesen. Dabei erfolgt die Abarbeitung sequentiell.
9
3
Related Work
Im folgenden Kapitel sollen Erkenntnisse von bereits vorhandenen Anwendungen ge-
wonnen werden. Dafür werden diese auf Funktionalität, Bedienbarkeit und potentielle
Fehler untersucht. Die Ergebnisse dieser Untersuchung sollen bei der Definition der
Anforderungen in Kapitel 4 berücksichtigt werden. Activiti [
19
], Camunda [
20
], jBPM [
21
]
und Aristaflow [
22
] werden in diesem Kapitel vorgestellt. Dabei handelt es sich um die
jeweiligen Monitoringfunktionen.
3.1 Activiti
Activiti ist ein BPM System von Alfresco [
19
], welches auf Java basiert. Mit diesem Sys-
tem lassen sich BPMN2.0-Modelle [
23
] definieren und ausführen. Nachfolgend werden
die Funktionen des Monitorings genauer überprüft. In der Abbildung 3.1 ist die Ansicht
der Reports des BPM Systems Activiti aufgeführt. Diese Reportansicht ist in zwei Be-
reiche unterteilt. Im linken Teilbereich befindet sich eine Auflistung mit wesentlichen
Funktionen im Reportbereich. Im rechten Teilbereich ist hingegen der dazugehörige
Inhalt zu sehen. In dieser Arbeit wird die Funktionalität der Prozessdefinitionsübersicht
behandelt. Zu den restlichen Funktionen zählen eine
heat map
der Prozessdefinitionen,
eine Übersicht der Prozessinstanzen und eine Übersicht der Aufgaben (Tasks).
Es besteht die Möglichkeit den angezeigten Report über den Button
Save this report
zu exportieren. Des Weiteren werden auf der obreren Seite die Anzahl der Prozessde-
finitionen, aller Prozessinstanzen, aktive und beendete Prozessinstanzen aufgeführt.
Abschließend wird die Zusammensetzung aller Instanzen anhand eines Kreisdiagramms
11
3 Related Work
dargestellt. Zudem kann die Statistik über das Symbol
trash
am rechten oberen Bereich
zurückgesetzt werden.
Abbildung 3.1: Reportansicht des BPM System Activiti [24]
3.2 Camunda
Camunda basiert auf Java und baute ursprünglich auf Activiti auf. Jedoch wurde die
Weiterentwicklung von Camunda BPM von Activiti im 2013 abgespalten. Die Funktionali-
täten des Cockpits spiegelt hierbei das Monitoring Tool wider. Die Abbildung 3.2 stellt die
Cockpitansicht des BPM Systems Camunda dar. Diese ist in drei Teilbereiche aufgeteilt
und bildet eine ausführliche Analyse eines Prozesses zur Laufzeit ab.
Im linken Teilbereich werden wichtige Informationen über die Prozessinstanz aufge-
listet. Neben der eindeutigen Kennzeichnung der Instanz und Definition wird auch der
Definitionsname und die Definitionsversion angezeigt. Weitere Kennzeichnungen werden
ebenfalls aufgelistet. Neben der Informationsdarstellung besteht auch die Möglichkeit,
einen Filter anzuwenden. Zwischen den genannten Funktionen im linken Teilbereich
kann durch die Nutzung von Registerkarten umgeschalten werden. Zusätzlich besteht
12
3.2 Camunda
die Möglichkeit, den Bereich über das Symbol
Pfeil mit linker Ausrichtung
zu verstecken.
Die weiteren Teilbereiche können dem rechten größeren Bildschirmbereich zugeordnet
und übereinander angezeigt werden. Der zweite Teilbereich auf der oberen Seite zeigt
das zugehörige Prozessmodell in der Modellierungssprache BPMN2.0 [
23
]. Dabei wird
der ausgewählte Prozess dick umrandet. Somit kann der Nutzer die Einordnung im
Modell sehr schnell und einfach erkennen. Zudem kann der Nutzer über diverse Buttons
am unteren rechten Rand des Bereiches in das Modell hinein oder heraus zoomen
beziehungsweise es zentrieren. Zusätzlich lässt sich dieser Bereich über den Button
Pfeil mit Ausrichtung nach oben auf der linken unteren Seite verstecken.
Abbildung 3.2: Cockpitansicht des BPM System Camunda [20]
Im dritten Bereich werden Details zum Prozess angezeigt. Über Registerkarten kön-
nen diese dargestellt werden. In der Abbildung 3.2 sind die dazugehörigen Variablen
aufgelistet. Diese können zur Laufzeit bearbeitet oder entfernt werden. Die weiteren
Registerkarten zeigen Informationen zu Vorkommnissen, aufgerufene Prozessinstanzen,
Nutzeraufgaben und externe Aufgaben.
13
3 Related Work
3.3 jBPM
Das BPM System jBPM ist ein Tool zur Erstellung von Geschäftsanwendungen, welche
zur Automatisierung von Geschäftsprozessen und Entscheidungen führen. In dieser
Arbeit werden die Funktionalitäten des Monitorings näher betrachtet. In der Abbildung
3.3 wird die Reportansicht des BPM Systems jBPM vorgestellt. Diese Ansicht ist sehr
einfach und übersichtlich gehalten. Auffällig ist die Darstellung der einzelnen Bestand-
teile durch die Verwendung von Kacheln. Auf der oberen Seite werden die Status der
Prozesse inklusiver der dazugehörigen Anzahl abgebildet. Darunter werden verschiede-
ne Diagramme für einzelne Komponenten des Reports genutzt. Für die Darstellung der
Prozesstypen und -versionen kommt ein Kreisdiagramm zum Einsatz. Zudem werden
das Start- und Enddatum der Prozesse mithilfe von Liniendiagramme dargestellt. Ein Bal-
kendiagramm verdeutlicht den Prozessstart durch die Nutzer und ein Koordinatensystem
beschreibt Prozesse, welche sich in der Ausführung befinden.
Abbildung 3.3: Reportansicht des BPM System jBPM [21]
14
3.4 AristaFlow
3.4 AristaFlow
Die AristaFlow BPM Suite unterstützt die effiziente Entwicklung von Workflow-Lösungen.
Dabei stehen viele Tools wie die Prozessmodellierung, Prozessausführung und Analyse
zur Verfügung. Das Analyse-Tool enthält unter anderem eine Echtzeitprotokollierung, um
Geschäftsprozesse gut nachvollziehen zu können. Dieses Analyse-Tool wird durch die
Monitoransicht in Abbildung 3.4 dargestellt. Im linken Teilbereich kann ein serverseitiger
Filter durch die Auswahl von Checkboxen angewendet werden. Dieser Filter beschränkt
sich auf die vorhandenen Prozesse. Zusätzlich kann nach diesen mit einer Volltextsuche
gefiltert werden.
Abbildung 3.4: Monitoringansicht des BPM System AristaFlow [22]
Im rechten Teilbereich wird auf der oberen Seite ebenfalls eine serverseitige Filterfunktion
abgebildet. Durch die Auswahl von Checkboxen in Kombination mit einem Texteingabe-
feld beziehungsweise einer Auswahlbox kann diese Funktion auf die Prozessinstanzen
angewandt werden. Zusätzlich kann das Ergebnis nach der Anwendung eines Filters mit
einer Volltextsuche verfeinert werden. Zu jeder Prozessinstanz werden zudem weitere
15
3 Related Work
Attribute aufgelistet. Am unteren Rand der Ansicht wird das Prozessmodell zu einer aus-
gewählten Prozessinstanz angezeigt. Darin werden die einzelnen Prozesse, Variablen
und den Abhängigkeiten dargestellt. Beendete und laufende Prozesse werden hierbei
farblich gekennzeichnet, um den aktuellen Zustand der Instanz zu verdeutlichen.
16
4
Anforderungsanalyse
In diesem Kapitel wird eine Anforderungsanalyse durchgeführt. In Abschnitt 4.1 wer-
den die Nutzerrollen des Systems definiert. Anschließend werden im Abschnitt 4.2
die verschiedenen Anwendungsfälle dargestellt. Im letzten Abschnitt 4.3 werden die
funktionalen und nichtfunktionalen Anforderungen erläutert.
4.1 Nutzerrollen im System
Im folgenden Abschnitt werden alle beteiligten Akteure des Systems definiert und deren
Abhängigkeiten dargestellt. Akteure sind Gast, Mitarbeiter, Manager und Administrator.
Gast
Der Gast ist ein nicht angemeldeter Benutzer, welcher in seiner Funktionsweise sehr
eingeschränkt ist. Er kann sich lediglich über den Login am System anmelden. Weitere
Funktionen stehen ihm nicht zur Verfügung.
Mitarbeiter
Der Mitarbeiter ist ein angemeldeter Benutzer des Systems. Der Hauptaspekt des Mitar-
beiters liegt in der Bearbeitung von Worklist Items. Diese kann er sich selber aus einer
Menge an Items zugewiesener Worklists zuteilen oder werden ihm durch den Manager
beziehungsweise durch die Zuteilung des Systems übergeben. Der Mitarbeiter wird in
dieser Arbeit nicht weiter betrachtet.
17
4 Anforderungsanalyse
Manager
Der Manager nimmt in dieser Arbeit die zentrale Rolle ein. Manager können die Zuteilung
von Worklist Items konfigurieren. Wichtige Funktionen hierbei sind die Verwaltung von
Worklists und Mitarbeiter. Zudem können Manager direkte Nachrichten an Mitarbeiter
versenden und auf Delegationen beziehungsweise Eskalationen reagieren. Weiterhin ist
das Abrufen von Statistiken über einzelne Mitarbeiter oder Worklists essenziell.
Administrator
Der Administrator hat die Möglichkeit Benutzer zu verwalten. Er kann Mitarbeiter als auch
Manager und Zuteilungsverfahren konfigurieren. Demgegenüber haben Administratoren
keinen Zugriff auf die Verteilung von Worklist Items.
4.2 Anwendungsfälle
In diesem Abschnitt werden alle Anwendungsfälle des Systems anhand von Anwen-
dungsfalldiagrammen erläutert. Anwendungsfalldiagramme beschreiben Funktionalitäten
und Beziehungen aus Sicht des Benutzers. Die Verdeutlichung der Beziehung zwischen
Systemkomponenten und Benutzer ist hierbei ein wichtiges Ziel.
Account-Modul
Im Account-Modul können sich Gäste, Mitarbeiter, Manager und Administratoren an-
melden. Damit erhalten sie Zugriff auf ihre zur Verfügung stehenden Funktionalitäten.
Die Benutzer haben die Möglichkeit einen personalisierten Kalender einzusehen, in
welchem Termine und Worklist Items vermerkt sind. Diesen Kalender können sie sich
in Form einer Auflistung von ausstehenden Terminen oder in Form einer Kalenderan-
sicht, welche Monats-, Wochen- und Tagesansicht beinhaltet, anzeigen lassen. Zudem
können sie neben der Änderung ihrer Stammdaten auch ein Profilbild hochladen, den
Benutzeraccount sperren oder das Zugangspasswort ändern.
18
4.2 Anwendungsfälle
Das folgende Anwendungsfalldiagramm in Abbildung 4.1 beschreibt alle Funktionen und
Beziehungen des Account-Moduls:
Gast
{abstract}
Benutzer
Login
Administrator
Manager
Mitarbeiter
Logout
Profil verwalten
Passwort ändern
Bild hochladen
<<erweitern>>
Stammdaten ändern
<<erweitern>>
Account sperren
<<erweitern>>
Kalender
verwalten
Tagesansicht
einsehen
Monatsansicht
einsehen
<<erweitern>>
<<erweitern>>
Abbildung 4.1: Anwendungsfalldiagramm des Account-Moduls
19
4 Anforderungsanalyse
Systemnachrichten-Modul
Das folgende Anwendungsfalldiagramm in Abbildung 4.2 beschreibt alle Funktionen und
Beziehungen des Systemnachrichten-Moduls:
Manager
Administrator
Nachrichten
schreiben
Nachrichten
lesen
Worklistaktivität
referenzieren
Nachrichten
löschen
<<einschließen>>
Nachrichten
verwalten
<<erweitern>>
<<erweitern>>
<<erweitern>>
Benachrichtigungen
anzeigen
Eskalation
anzeigen
Delegation
anzeigen
<<erweitern>>
<<erweitern>>
behandeln
<<einschließen>>
<<einschließen>>
Abbildung 4.2: Anwendungsfalldiagramm des Systemnachrichten-Moduls
Im Systemnachrichten-Modul können Manger auf Nachrichten verschiedener Arten
reagieren. Sie können Systembenachrichtigungen einsehen, welche Informationen
über Änderungen von Status oder Handeln von Mitarbeiter enthalten. Managern bietet
sich die Möglichkeit, auf Delegationen und Eskalationen reagierend einzuwirken oder
als Informationsquelle aufzunehmen. Zudem können Nachrichten verwaltet werden.
Nachrichten können an Mitarbeiter, andere Manager oder Administratoren versendet
werden. Hierbei ist die Referenzierung auf ein Worklist Item essenziell und erlaubt dem
Manager eine effiziente Kommunikation über gegenwärtige Sachgegenstände.
20
4.2 Anwendungsfälle
Zuteilung-Modul
Das folgende Anwendungsfalldiagramm in Abbildung 4.3 beschreibt alle Funktionen und
Beziehungen des Zuteilung-Moduls:
Manager
Administrator
Verteilungsverfahren
auswählen
Worklist
verwalten
erstellen
<<einschließen>>
bearbeiten
löschen
Worklist
zuweisen
<<erweitern>>
<<erweitern>>
<<erweitern>>
<<erweitern>>
Organisationsmodell
abfragen
<<einschließen>>
Item
favorisieren
<<erweitern>>
Abbildung 4.3: Anwendungsfalldiagramm des Zuteilung-Moduls
Im Zuteilung-Modul bietet sich Managern die Möglichkeit, Worklists zu verwalten. Sie
können diese erstellen, bearbeiten und löschen. Zusätzlich können Worklists zugewiesen
werden. Als Grundlage hierfür dient das Organisationsmodell von Aristaflow [
22
]. Work-
lists können demnach der Unternehmenstruktur angepasst werden und sind dadurch
dynamisch gestaltet. Eine wichtige Rolle nimmt die Zuteilung der Worklist Items ein, in
welcher das gewünschte Verteilungsverfahren aus vorgegebenen Verfahren ausgewählt
werden kann. Zudem kann der Manager Worklist Items favorisieren.
21
4 Anforderungsanalyse
Mitarbeiter-Modul
Das folgende Anwendungsfalldiagramm in Abbildung 4.4 beschreibt alle Funktionen und
Beziehungen des Mitarbeiter-Moduls:
Manager
Administrator
Mitarbeiter
verwalten
erstellen
<<erweitern>>
bearbeiten
löschen
<<erweitern>>
<<erweitern>>
Kalender
ansehen
Kalendereintrag
einfügen
<<erweitern>>
Mitarbeiter
zuweisen Aktivität
zuweisen
Organisationsmodell
abfragen
<<einschließen>>
<<erweitern>>
Abbildung 4.4: Anwendungsfalldiagramm des Mitarbeiter-Moduls
Im Mitarbeiter-Modul können Manager ihre Mitarbeiter verwalten. Sie können diese im
System anlegen, bearbeiten oder löschen. Zudem können sie sich den personalisierten
Kalender des Mitarbeiters ansehen und Termine eintragen. Eine weitere Funktion ist
die Zuteilung von Worklist Items. Diese erfolgt in Form eines Termineintrags in den
22
4.2 Anwendungsfälle
Kalender. Weiterhin kann ein Mitarbeiter einer Worklist zugewiesen werden. Dazu dient
das Organisationsmodell von Aristaflow als Grundlage.
Statistik-Modul
Das folgende Anwendungsfalldiagramm in Abbildung 4.5 beschreibt alle Funktionen und
Beziehungen des Statistik-Moduls:
Manager
Administrator
Einzelstatistiken
ansehen
Gesamtstatistiken
ansehen
Auslastung
Ø - Bearbeitungszeit
Ø - Wartezeit
Anzahl bearbeitete
Aktivitäten
<<einschließen>>
<<einschließen>>
<<einschließen>>
<<einschließen>>
<<einschließen>>
<<einschließen>>
<<einschließen>>
<<einschließen>>
Echtzeitüberblick
ansehen
Worklists
anzeigen
<<einschließen>>
Eskalationen
ansehen
Delegationen
ansehen
Dashboard anzeigen
Abbildung 4.5: Anwendungsfalldiagramm des Statistik-Moduls
Im Statistik-Modul können sich Manager Statistiken über einzelne Mitarbeiter, Gesamtvor-
gänge, abgeschlossene Vorgänge und Echtzeitdaten ansehen. Zu den abgeschlossenen
Vorgängen zählen vorgenommene Eskalationen und Delegationen sowie Statusände-
rungen und weitere Daten. Informationen über Auslastungen, durchschnittliche Bearbei-
23
4 Anforderungsanalyse
tungszeiten und durchschnittliche Wartezeiten können auf wichtige Entscheidungen zu
Optimierungen der Prozesse Einfluss nehmen. Zudem sollen vereinzelte Statistiken auf
dem Dashboard des Systems angezeigt werden.
4.3 Anforderungen
Im Folgenden wird eine Anforderungsanalyse durchgeführt. Darin werden alle Abläu-
fe und Abhängigkeiten des Systems festgehalten.
Funktionale Anforderungen (FA)
stellen dabei das Verhalten des Systems dar,
Nichtfunktionale Anforderungen (NFA)
hingegen die Qualität. Alle Anforderungen können den Tabellen 4.1 und 4.2 entnommen
werden.
Kürzel Bezeichnung Seite
Account-Modul
FA-01 Anmelden 25
FA-02 Abmelden 26
FA-03 Kalenderverwaltung 26
FA-04 Profilverwaltung 26
Systemnachrichten-Modul
FA-05 Nachrichten verwalten 26
FA-06 Worklist Item referenzieren 26
FA-07 Benachrichtigungen anzeigen 26
FA-08 Eskalationen behandeln 26
FA-09 Delegationen behandeln 27
Zuteilung-Modul
FA-10 Worklist anzeigen 27
FA-11 Worklist verwalten 27
FA-12 Verteilungsverfahren anzeigen 27
Tabelle 4.1: Anforderungen I
24
4.3 Anforderungen
Kürzel Bezeichnung Seite
Zuteilung-Modul
FA-13 Worklist Items zuteilen 27
FA-14 Worklist Item favorisieren 27
FA-15 Prozessinstanz anzeigen 27
Mitarbeiter-Modul
FA-16 Mitarbeiter anzeigen 28
FA-17 Mitarbeiter verwalten 28
FA-18 Kalender anzeigen 28
FA-19 Worklist Items zuteilen 28
FA-20 Worklist zuweisen 28
Statistik-Modul
FA-21 Logs anzeigen 28
FA-22 Gesamtstatistiken anzeigen 28
FA-23 Echtzeitstatistiken anzeigen 29
FA-24 Dashboard anzeigen 29
Qualitätseigenschaften
NFA-01 Erwartungskonformität 29
NFA-02 Benutzbarkeit 29
NFA-03 Zuverlässigkeit 29
NFA-04 Übertragbarkeit 29
NFA-05 Verfügbarkeit 29
NFA-06 Wartbarkeit 29
NFA-07 Robustheit 30
Tabelle 4.2: Anforderungen II
4.3.1 Funktionale Anforderungen
FA-01 Anmelden
Im Account-Modul sollen Mitarbeiter, Manager und Administratoren die Möglichkeit
25
4 Anforderungsanalyse
haben, mit Zugangsdaten, welche ihnen zugeteilt wurden, sich am System anzumelden.
Eine Registrierung am System für Gäste soll nicht möglich sein.
FA-02 Abmelden
Dem Benutzer soll auch das Abmelden vom System ermöglicht werden.
FA-03 Kalenderverwaltung
Zusätzlich soll der Benutzer die Möglichkeit haben, einen persönlichen Kalender zu
verwalten. Diesen soll er in verschiedenen Ansichten anzeigen können. Zudem soll die
Möglichkeit bestehen, Worklist Items direkt in den Kalender einzutragen.
FA-04 Profilverwaltung
Jeder Benutzer soll seine Stammdaten ändern, ein Profilbild hochladen, das Passwort
ändern und seinen Account sperren können. Nicht änderbare Stammdaten sind der
Benutzername und die E-Mail-Adresse. Sperrt ein Mitarbeiter seinen Account, soll der
zugehörige Manager darüber benachrichtigt werden.
FA-05 Nachrichten verwalten
Im Systemnachrichten-Modul sollen Nachrichten verwaltet werden, das heißt sie sollen
verfasst, angezeigt und gelöscht werden können.
FA-06 Worklist Item referenzieren
Zudem sollen Worklist Items referenziert werden. Dabei soll auf das Prozessmodell und
die einzelnen Informationen des Items zugegriffen werden.
FA-07 Benachrichtigungen anzeigen
Dem Manager sollen Benachrichtigungen wie neue Nachrichten, Eskalationen, Delega-
tionen und Accountsperrung eines Mitarbeiters angezeigt werden.
FA-08 Eskalationen behandeln
Zusätzlich soll der Manager über Eskalationen benachrichtigt werden und darauf rea-
26
4.3 Anforderungen
gieren können.
FA-09 Delegationen behandeln
Ebenso soll der Manager über Delegationen benachrichtigt werden und darauf reagieren
können.
FA-10 Worklist anzeigen
Im Zuteilung-Modul sollen die angelegten Worklists dargestellt werden. In der Übersicht
sollen kurze Informationen und in der Detailsübersicht ausführliche Informationen abge-
bildet werden.
FA-11 Worklist verwalten
Worklists sollen erstellt, bearbeitet und gelöscht werden können.
FA-12 Verteilungsverfahren anzeigen
Es soll die Möglichkeit bestehen, die hinterlegten und integrierten Verteilungsverfahren
anzuzeigen. Es sollen ausschließlich Informationen dargestellt werden.
FA-13 Worklist Items zuteilen
Der Manager soll Worklist Items verschiedenen Einheiten zuteilen können. Dabei soll er
entscheiden können, auf welche Items er sich bezieht und welches Verteilungsverfahren
dazu verwendet werden soll.
FA-14 Worklist Item favorisieren
Zudem soll er die Möglichkeit haben, einzelne Worklist Items zu favorisieren und für
verschiedene Funktionen vorzumerken.
FA-15 Prozessinstanz anzeigen
Dem Manager soll eine Übersicht über das zugehörige Prozessmodell des Worklist
Items illustriert werden. In dieser Übersicht soll die aktuelle Instanz abgebildet werden.
27
4 Anforderungsanalyse
FA-16 Mitarbeiter anzeigen
Im Mitarbeiter-Modul sollen alle Mitarbeiter aufgelistet und Details zu ihnen angezeigt
werden. Zu den Details sollen unter anderem eine Kurzübersicht über Statistiken sowie
anstehende Termine und Aktivitäten zählen. Weiterhin soll die Möglichkeit bestehen dem
ausgewählten Mitarbeiter eine Nachricht zu senden.
FA-17 Mitarbeiter verwalten
Der Manager soll die Möglichkeit haben, Mitarbeiter zu erstellen, zu bearbeiten und
zu löschen. Bei der Erstellung soll der Benutzername generiert werden, um so die
Eindeutigkeit sicherzustellen.
FA-18 Kalender anzeigen
Zusätzlich soll zu jedem Mitarbeiter der zugehörige Kalender inklusive Termine ange-
zeigt werden. In diesen Kalender soll der Manager auch Termine eintragen können.
FA-19 Worklist Items zuteilen
Dem Mitarbeiter sollen vorhandene Worklist Items zugeteilt werden können.
FA-20 Worklist zuweisen
Zudem soll die Möglichkeit bestehen, dem Mitarbeiter eine bereits vorhandene Worklist
zuzuweisen.
FA-21 Logs anzeigen
Im Statistik-Modul soll es möglich sein, Logs einzusehen. In den Logs sollen alle Zu-
standsänderungen der Worklist Items sowie Delegationen und Eskalationen dargestellt
werden.
FA-22 Gesamtstatistiken anzeigen
Zusätzlich sollen Gesamtstatistiken über die Auslastung, durchschnittliche Wartezeit,
durchschnittliche Bearbeitungszeit und bereits bearbeitete Items illustriert werden. Diese
Darstellung soll durch verschiedene Filter intuitiv gestaltet werden.
28
4.3 Anforderungen
FA-23 Echtzeitstatistiken anzeigen
Dem Manager sollen zudem Echtzeitinformationen über Vorgänge und Auslastung von
Mitarbeitern bereit gestellt werden.
FA-24 Dashboard anzeigen
Des Weiteren soll dem Manager ein Dashboard zur Verfügung stehen. Auf diesem soll
eine kurze Zusammenfassung vom Zustand des Gesamtsystems dargestellt werden.
4.3.2 Nichtfunktionale Anforderungen
NFA-01 Erwartungskonformität
Das System soll konsistent sein und anerkannten Konventionen entsprechen.
NFA-02 Benutzbarkeit
Das System soll einfach und verständlich aufgebaut sein, um das Erlernen und die
Bedienbarkeit zu erleichtern.
NFA-03 Zuverlässigkeit
Das System soll Daten bei Verlust wiederherstellen sowie tolerant gegen Fehler sein.
NFA-04 Übertragbarkeit
Das System an sich und einzelne Module daraus soll jederzeit auf andere Projekte
adaptierbar sein.
NFA-05 Verfügbarkeit
Das System soll jederzeit erreichbar und für den Manager unterstützend bei seinen
Aufgaben sein.
NFA-06 Wartbarkeit
Um die Stabilität zu gewährleisten, die Performanz zu optimieren und Fehler zu behe-
29
4 Anforderungsanalyse
ben, soll das System jederzeit änderbar sein.
NFA-07 Robustheit
Das System soll gegenüber Fehleingaben robust sein.
30
5
Konzeption
In diesem Kapitel werden zunächst die User-Interface-Styleguides 5.1 näher erläutert.
Darin werden in Abschnitt 5.1.1 die Themes und Farben sowie in Abschnitt 5.1.2 die
Typographie behandelt. Abschließend werden im Abschnitt 5.2 die verwendeten GUI-
Komponenten vorgestellt.
5.1 Styleguide
Im Folgenden werden die Styleguides des Systems vorgestellt. Styleguides sind vordefi-
nierte Richtlinien, welche bei der Erstellung eines Entwurfes eingehalten werden sollen.
Ziel der Styleguides ist es, Bedienoberflächen einheitlich und konsistent zu gestalten
[7, 8].
In dieser Arbeit werden zuerst die Themes und Farben definiert. Anschließend die
Typographie erklärt und abschließend die in diesem System verwendeten grafischen
Bedienelemente vorgestellt. Die folgenden Richtlinien dienen der Umsetzung des Sys-
tems, an die sich Designer und Entwickler bei der Umsetzung halten sollen. Zusätzlich
wird eine einheitliche Struktur geschaffen, welche dem Nutzer zu Gute kommt, da die
Bedienung des System erleichtert wird. Dadurch findet der Nutzer sich von Anfang an
im System zurecht und kann dadurch effizienter und effektiver arbeiten.
5.1.1 Themes und Farben
Es wird ein Farbkonzept benötigt, um eine einheitliche und konsistente Bedienoberfläche
schaffen zu können.
31
5 Konzeption
Laut den Grundprinzipien des Usabilty Engineerings [
7
,
8
] soll beim Einsatz von Farben
auf folgendes geachtet werden:
•
Wiedererkennungswert, um ein einheitliches visuelles Erscheinungsbild zu schaf-
fen.
•
Verwendung von maximal fünf bis sieben unterschiedliche Farben, da sich das
Auge bei jeder Farbe neu fokussieren muss.
•
Keine Verwendung von ähnlichen Farben, um diese gut voneinander unterscheiden
zu können.
In der Tabelle 5.1 werden die verwendeten Farben illustriert. Dabei erfüllt jede über eine
bestimmte Bedeutung:
Farbe Hex R G B
1 #ea9b41 234 155 65
2 #303030 48 48 48
3 #666666 102 102 102
4 #f3f3f4 243 243 244
5 #d9edf7 217 237 247
6 #fcf8e3 252 248 227
7 #f2dede 242 222 222
Tabelle 5.1: Farbkonzept
Die Farbe
orange (1)
ist die Akzentfarbe des Systems. Sie wird unter anderem für
Verknüpfungen, hervorgehobene Schaltflächen oder für aktive Navigationselemente
eingesetzt.
Dark grey (2)
hingegen wird als zusätzliche Hintergrundfarbe verwendet, um ein akti-
viertes Navigationselement abzuheben.
Die Schriftfarbe wird in der Farbe middle grey (3) verwendet.
32
5.1 Styleguide
Light grey (4)
wird im Hintergrund der webbasierten Anwendung angewandt. Inhalte
werden mit weißen Boxen dargestellt. Somit wird eine einfache Veranschaulichung der
Inhalte ermöglicht.
Die Farbe
light blue (5)
kommt in diesem System für statische Benachrichtigungen zum
Einsatz. Dies sind Meldungen, die den Nutzer über einen Vorgang im System informieren.
Zusätzlich wird diese Farbe eingesetzt, um Vergleiche farblich zu kennzeichnen.
In
light yellow (6)
werden Benachrichtigungen über Delegationen von Mitarbeitern
angezeigt. Auf diese können reagiert und weitere Aktionen ausgeführt werden. Zudem
werden Worklist Items mit dieser Farbe hinterlegt, falls das Item schnellstmöglich abge-
arbeitet werden soll.
Die Farbe
light red (7)
veranschaulicht Benachrichtigungen über Eskalationen von
Mitarbeitern. Auch hier kann reagiert werden. Zusätzlich wird diese Farbe eingesetzt, um
Worklist Items hervorzuheben, welche bis zum Fälligkeitsdatum nicht bearbeitet wurden.
5.1.2 Typographie
In dem konzipiertem System wird die Schriftfamilie
Open Sans
verwendet. Diese wurde
unter der Lizenz
Apache License 2.0
veröffentlich und kann unter
Google Fonts
[
25
]
heruntergeladen werden.
Abbildung 5.1: HTML-Überschriften
33
5 Konzeption
Diese Schriftfamilie wird hauptsächlich für die Darstellungen auf Bildschirmen und im
Web verwendet. Da sie eine serifenlose Schriftart ist, ist sie für Nutzer einfach zu lesen.
In dieser Konzeption werden vordefinierte HTML-Überschriften 5.1 eingesetzt. Des
Weiteren ist die Schriftgröße der Standard-Texte auf 13px definiert.
5.2 Verwendete GUI-Komponenten
Das in dieser Arbeit behandelte System basiert auf einfachen und konsistenten Benutze-
roberflächen. Dies wird durch den Einsatz von verschiedenen grafischen Bedienelemen-
ten erreicht. Jedes einzelne Element ist dabei für eine bestimmte Interaktion zuständig
und verfügt über eine spezielle Funktion. Auch die Kombination von verschiedenen
Komponenten ist von wesentlicher Bedeutung, um ein einheitliches und bestmögliches
Resultat zu erreichen.
In diesem Abschnitt werden die einzelnen grafischen Bedienelemente vorgestellt, die bei
der Gestaltung von Benutzeroberflächen verwendet wurden. Die Basis der grafischen
Bedienelemente bildet das Framework Bootstrap [26].
5.2.1 Checkboxen
Checkboxen sind Optionsfelder und werden zur Auswahl einer oder mehrerer Optionen
aus einer Liste verwendet. Eine Checkbox kann durch das
input
-Element 5.2.1 mit dem
Typ
checkbox
erzeugt werden. Weiterhin können verschiedene Einstellungen vorge-
nommen werden. Beispielsweise kann eine Checkbox durch das Schlagwort
disabled
deaktiviert werden.
Abbildung 5.2: GUI-Komponente - Checkboxen
Im Folgenden wird der zugehörige HTML-Code 5.2.1 zur Abbildung 5.2 dargestellt:
34
5.2 Verwendete GUI-Komponenten
1<div class="i-checks">
2<input type="checkbox"> Check 1
3<input type="checkbox"> Check 2
4<input type="checkbox"> Check 3
5<input type="checkbox"> Check 4
6</div>
Listing 5.1: HTML-Code - Checkboxen
5.2.2 Radio-Buttons
Radio-Buttons sind Optionsfelder, die zur Auswahl einer aus mehreren Optionen dienen.
Die Anordnung dieser Buttons kann sowohl vertikal, als auch horizontal erfolgen. Dieses
Optionsfeld kann durch das input-Element 5.2.2 mit dem Typ radio erzeugt werden.
Abbildung 5.3: GUI-Komponente - Radio-Buttons
Im Folgenden wird der zugehörige HTML-Code 5.2.2 zur Abbildung 5.3 dargestellt:
1<div class="i-checks">
2<input type="radio" name="a"> Radio 1
3<input type="radio" name="a"> Radio 2
4<input type="radio" name="a"> Radio 3
5<input type="radio" name="a"> Radio 4
6</div>
Listing 5.2: HTML-Code - Radio-Buttons
35
5 Konzeption
Um ein Radio-Button zu deaktivieren, kann das Schlagwort
disabled
verwendet werden.
Weitere Einstellungen sind ebenfalls möglich. Auf diese werden an dieser Stelle nicht
genauer eingegangen.
5.2.3 Textfelder
Textfelder sind grafische Bedienelemente, die Texteingaben des Nutzers aufnehmen
und weiterverarbeiten können. Diese Komponente kann durch das
input
-Element 5.2.3
erzeugt werden. Auch Textfelder können mit dem Schlagwort
disabled
deaktiviert werden.
Zusätzlich kann das Schlagwort
required
eingesetzt werden, welches die Eingabe eines
Textes erzwingt.
Außerdem existieren neben den Textfeldern auch Textareas. Diese werden mit dem
textarea
-Element erzeugt. Die Schlagwörter
disabled
und
required
können auf der
gleichen Art und Weise wie bei den Textfeldern eingesetzt werden.
Abbildung 5.4: GUI-Komponente - Textfelder
Im Folgenden ist der zugehörige HTML-Code 5.2.3 zur Abbildung 5.4 dargestellt:
1<form method="get" class="form-horizontal">
2<div class="form-group">
3<label class="col-sm-2 control-label">Benutzername</label>
4<div class="col-sm-10">
5<input type="text" class="form-control" placeholder="wird
generiert ..." disabled>
6</div>
36
5.2 Verwendete GUI-Komponenten
7</div>
8<div class="hr-line-dashed"></div>
9
10 <div class="form-group">
11 <label class="col-sm-2 control-label">Vorname</label>
12 <div class="col-sm-10">
13 <input type="text" class="form-control">
14 </div>
15 </div>
16 <div class="hr-line-dashed"></div>
17
18 <div class="form-group">
19 <label class="col-sm-2 control-label">Nachname</label>
20 <div class="col-sm-10">
21 <input type="text" class="form-control">
22 </div>
23 </div>
24 <div class="hr-line-dashed"></div>
25
26 <div class="form-group">
27 <div class="col-sm-4 col-sm-offset-2">
28 <a href="mitarbeiter.html" class="btn btn-default">
Abbrechen</a>
29 <a href="mitarbeiter.html" class="btn btn-primary">
Erstellen</a>
30 </div>
31 </div>
32 </form>
Listing 5.3: HTML-Code - Textfelder
37
5 Konzeption
5.2.4 Registerkarten
Registerkarten sind im Grunde eine spezielle Art der Navigation. Sie verfügen über
mehrere inhaltliche Ansichten, zwischen denen umgeschaltet werden kann. Dabei ist
wichtig, dass nur eine Registerkarte, auch Tab genannt, aktiv sein kann. Der Inhalt
der nicht aktivierten Karten wird versteckt und erst bei der Aktivierung im Vordergrund
angezeigt. Diese GUI-Komponente erlaubt dem Nutzer eine einfache, intuitive und
effektive Bedienung der Systemoberfläche.
Neben der horizontalen Ausrichtung der Reiter ist zudem eine vertikale möglich. Der
Einsatz von Icons kann zur leichteren Bedienung beitragen. Um Registerkarten zu
erzeugen, müssen die Klassen nav und nav-tabs verwendet werden.
Abbildung 5.5: GUI-Komponente - Textfelder
Im Folgenden wird der zugehörige HTML-Code 5.2.4 zur Abbildung 5.5 dargestellt:
1<ul class="nav nav-tabs">
2<li class="active">
3<a data-toggle="tab" href="#tab-1"><i class="fa fa-user"></
i> Uebersicht</a>
4</li>
5<li class="tab-inactive">
6<a data-toggle="tab" href="#tab-2"><i class="fa fa-globe"><
/i> Verteilungsverfahren</a>
7</li>
8</ul>
9
10 <div class="tab-content">
11 <div id="tab-1" class="tab-pane active">
38
5.2 Verwendete GUI-Komponenten
12 [...]
13 </div>
14 [...]
15 </div>
Listing 5.4: HTML-Code - Registerkarten
5.2.5 Tabellen
Tabellen werden durch das
table
-Element erzeugt und dienen zur einfachen bzw. struk-
turierten Darstellung großer Mengen an Informationen. Mit der Klasse
table-stripped
können Tabellenzeilen mit verschiedenen Hintergrundfarben belegt werden. Neben
unterschiedlichen Hintergrundfarben können auch weitere GUI-Komponenten mit Ta-
bellen kombiniert werden. Deren HTML-Code muss dazu in die entsprechenden Zellen
eingefügt werden. Auch das Verbinden von mehreren Zeilen und Tabellenzeilen ist
möglich.
Abbildung 5.6: GUI-Komponente - Tabelle
Im Folgenden wird der zugehörige HTML-Code 5.2.5 zur Abbildung 5.6 dargestellt:
1<table class="table table-striped table-hover tbl-allo">
2<tbody>
3<tr class="tbl-worklists">
4<td>ID </td>
5<td>Item</td>
39
5 Konzeption
6<td>Prioritaet</td>
7<td>Status</td>
8</tr>
9<tr>
10 <td>1</td>
11 <td>Aktivitaet 1</td>
12 <td>Hoch</td>
13 <td>Aktiviert</td>
14 </tr>
15 <tr>
16 [...]
17 </tr>
18 </tbody>
19 </table>
Listing 5.5: HTML-Code - Tabelle
5.2.6 Fortschrittsbalken
Fortschrittsbalken bilden den Verlauf einer Statistik ab. Sie werden auch
Progess Bar
genannt und dienen zur visuellen Darstellung eines Fortschritts.
Um eine
Progess Bar
zu erstellen, ist die Verwendung der Klasse
progress
notwendig.
Mit weiteren Klassen, wie
progress-stripped
, kann der Fortschrittsbalken animiert wer-
den. Weitere Klassen können hinzugefügt werden, um zusätzliche Einstellungen, wie
beispielsweise die Größe des Balkens, vorzunehmen.
Abbildung 5.7: GUI-Komponente - Fortschrittsbalken
Im Folgenden wird der zugehörige HTML-Code 5.2.6 zur Abbildung 5.7 dargestellt:
40
5.2 Verwendete GUI-Komponenten
1<div class="progress progress-striped active">
2<div style="width: 75%;" aria-valuemax="100" aria-valuemin="0
" aria-valuenow="75" role="progressbar" class="progress-
bar">
3<span>75%</span>
4</div>
5</div>
Listing 5.6: HTML-Code - Fortschrittsbalken
5.2.7 Navigation
Eine Navigation ist ein Menü, welches Verknüpfungen auf verschiedene Unterseiten
darstellt. Es besteht aus mehreren Untermenüs und kann auch geschachtelt zusammen-
gesetzt sein. Um eine Navigation zu erzeugen, wird das
nav
-Element in den HTML-Code
integriert. Durch die Klassen
navbar
und
navbar-default
wird die Navigation, so wie in
der Abbildung 5.9 illustriert, dargestellt.
Im Folgenden wird der zugehörige HTML-Code 5.2.7 zur Abbildung 5.9 dargestellt:
1<nav class="navbar-default navbar-static-side" role="navigation
">
2<div class="sidebar-collapse">
3<ul class="nav metismenu" id="side-menu">
4<li class="nav-header">
5[...]
6</li>
7<li class="nav-role">Manager</li>
8<li class="active">
9<a href="../../index.html"><i class="fa fa-tachometer">
</i> <span class="nav-label">Dashboard</span></a>
10 </li>
41
5 Konzeption
11 [...]
12 <li>
13 <a href="#"><i class="fa fa-calendar"></i> <span class=
"nav-label">Kalender</span><span class="fa arrow"></
span> </a>
14 <ul class="nav nav-second-level collapse">
15 <li><a href="../kalender/tagesansicht.html">
Tagesuebersicht</a></li>
16 <li><a href="../kalender/monatsansicht.html">
Gesamtuebersicht</a></li>
17 </ul>
18 </li>
19 [...]
20 </ul>
21 </div>
22 </nav>
Listing 5.7: HTML-Code - Hauptnavigation
Neben der Hauptnavigation kann eine weitere Navigation in das System integriert
werden. Das sekundäre Menü wird häufig dazu verwendet, um Benachrichtigungen,
Warenkörbe, Einstellungen oder das Abmelden vom System zu verknüpfen.
In dieser Arbeit wird das Menü verwendet, um den Zugriff auf Benachrichtigungen,
Favoriten und das Abmelden vom System zu ermöglichen. Die sekundäre Navigation
wird ebenfalls durch das navbar-Element erzeugt. Um diese Navigation von der Haupt-
navigation zu unterscheiden, ist das Hinzufügen der Klasse
navbar-static-top
notwendig.
Abbildung 5.8: GUI-Komponente - Sekundäre Navigation
Im Folgenden wird der zugehörige HTML-Code 5.2.7 zur Abbildung 5.8 dargestellt:
42
5.2 Verwendete GUI-Komponenten
1<nav class="navbar navbar-static-top" role="navigation" style="
margin-bottom: 0">
2[...]
3</nav>
Listing 5.8: HTML-Code - Sekundäre Navigation
Abbildung 5.9: GUI-Komponente - Hauptnavigation
5.2.8 Breadcrumbs
Breadcrumbs sind Pfade, welche die aktuelle Position in der bestehenden Hierarchie
eines webbasierten Systems widerspiegeln. Dadurch kann sich der Nutzer einfach
zurecht finden und seine momentane Position einsehen.
43
5 Konzeption
Abbildung 5.10: GUI-Komponente - Breadcrumb
Im Folgenden wird der zugehörige HTML-Code 5.2.8 zur Abbildung 5.8 dargestellt:
1[...]
2<h2>Breadcrumb</h2>
3<ol class="breadcrumb">
4<li><a href="#">Home</a></li>
5<li><a href="#">Unterseite 1</a></li>
6<li><a href="#">Unterseite 2</a></li>
7<li class="active"><strong>Aktuelle Position</strong></li>
8</ol>
9[...]
Listing 5.9: HTML-Code - Breadcrumb
5.2.9 Buttons
Buttons sind Schaltflächen, die bei einem Klick bestimmte definierte Funktionen ausfüh-
ren. Sie können durch
a
-Elemente,
button
-Elemente oder auch durch
input
-Elemente
erzeugt werden.
Zudem können sie als Gruppen, beispielsweise
dropdown-buttons
, dargestellt oder mit
einzelnen Attributen versehen werden. Zum Beispiel führt das Attribut
disabled
zur
Deaktivierung des Buttons.
In der nachfolgenden Abbildung 5.11 werden Buttons und Buttongruppen in verschiede-
nen Größen dargestellt:
44
5.2 Verwendete GUI-Komponenten
Abbildung 5.11: GUI-Komponente - Buttons
Im Folgenden wird der zugehörige HTML-Code 5.2.9 zur Abbildung 5.11 dargestellt:
1<a class="btn btn-default btn-xs">Size xs</a>
2<a class="btn btn-default btn-sm">Size sm</a>
3<a class="btn btn-primary">Size normal</a>
4<a class="btn btn-primary btn-lg">Size lg</a>
5<div class="btn-group">
6<a data-toggle="dropdown" class="btn btn-default dropdown-
toggle">
7Dropdown
8<span class="caret"></span>
9</a>
10 </div>
Listing 5.10: HTML-Code - Buttons
Bei einem Klick auf Dropdown-Buttons wird eine Liste mit mehreren Auswahlmöglich-
keiten ausgeklappt. Diese Buttons sind bei der Verwendung von kleinen Menüs sehr
beliebt, da sie ein Untermenü einfach darstellen können. Vor allem bei Filter-Funktionen
kommen diese häufig zum Einsatz.
Im Folgenden wird der zugehörige HTML-Code 5.2.9 zur Abbildung 5.12 dargestellt:
1<div class="btn-group">
2<a data-toggle="dropdown" class="btn btn-default dropdown-
toggle" aria-expanded="false"> <span id="dm-text">Dropdown
</span> <span class="caret"></span> </a>
3<ul class="dropdown-menu">
45
5 Konzeption
4<li><a id="#">Auslastung in %</a></li>
5<li><a id="#">Wartezeit in Stunden</a></li>
6<li><a id="#">Bearbeitungszeit in Stunden</a></li>
7<li><a id="#">Bearbeitete Items</a></li>
8</ul>
9</div>
Listing 5.11: HTML-Code - Dropdown-Button
Abbildung 5.12: GUI-Komponente - Dropdown-Button
5.2.10 Labels
Mit Labels werden dem Nutzer kurze Hinweise angezeigt. In dieser Arbeit werden sie
hauptsächlich dazu verwendet, um den Status der Worklist Items zu illustrieren und die
Anzahl der ungelesenen Nachrichten darzustellen. Zusätzlich werden Labels verwendet,
um die Anzahl der Benachrichtigung bereitzustellen.
Im Folgenden wird der zugehörige HTML-Code 5.2.10 zur Abbildung 5.13 dargestellt:
1<span class="label label-success">Aktiviert</span>
2<span class="label label-primary">Laufend</span>
3<span class="label">Beendet</span>
46
5.2 Verwendete GUI-Komponenten
4<span class="label label-info">5 / 7</span>
Listing 5.12: HTML-Code - Labels
In der nachfolgenden Abbildung 5.13 werden Labels in verschiedenen Farben dargestellt:
Abbildung 5.13: GUI-Komponente - Labels
5.2.11 Datumsauswahl
Bei der Datumsauswahl, auch
date picker
genannt, hat der Nutzer die Möglichkeit,
aus einem Kalender ein Datum auszuwählen. Dieser Kalender öffnet sich mit einem
Klick in das Auswahlfeld. Dadurch wird dem Nutzer eine einfache Bedienung sowie die
Bereitstellung von Zusatzinformationen, wie Wochentage, geboten.
Abbildung 5.14: GUI-Komponente - Datumsauswahl
Im Folgenden wird der zugehörige HTML-Code 5.2.11 zur Abbildung 5.14 dargestellt:
47
5 Konzeption
1<div id="data_5">
2<div class="input-daterange input-group" id="datepicker">
3<input type="text" class="form-control" name="start" value=
"05/14/2018"/>
4<span class="input-group-addon">bis</span>
5<input type="text" class="form-control" name="end" value="
05/22/2019"/>
6</div>
7</div>
Listing 5.13: HTML-Code - Datumsauswahl
5.2.12 Diagramme
Um Auswertungen von diversen Vorgängen darzustellen, werden Diagramme verwendet.
Diese können Datensammlungen in bestimmten Zeiträumen visuell aufbereiten.
Abbildung 5.15: GUI-Komponente - Diagramme
Dem Nutzer wird somit eine einfache Möglichkeit geboten, eine sehr große Menge an
Daten leicht verstehen zu können. In dieser Arbeit werden vorallem
line charts
und
48
5.3 Layout
bar charts
eingesetzt. Darüber hinaus gibt es eine Vielzahl an Diagrammtypen, auf die
hier nicht weiter eingegangen wird. Um ein solches Diagramm zu erzeugen, wird das
canvas-Element verwendet.
Im Folgenden wird der zugehörige HTML-Code 5.2.12 zur Abbildung 5.15 dargestellt:
1<div>
2<canvas id="bc-wartezeit" height="140"></canvas>
3</div>
Listing 5.14: HTML-Code - Diagramme
5.3 Layout
Die in dieser Arbeit erarbeitete Anwendung wird in einer einheitlichen Struktur aufgebaut.
Das Layout in der Abbildung 5.16 wird als Vorlage zu allen Szenarien herangezogen. Die
Benutzeroberfläche wird in verschiedene Bereiche eingeteilt, welche bei verschiedenen
Ansichten als Grundstruktur verwendet wird.
Abbildung 5.16: GUI-Komponente - Diagramme
49
5 Konzeption
Markierung 1
Die Hauptnavigation verknüpft die Unterseiten und bestehenden Funktionalitäten.
Markierung 2
Die sekundäre Navigation ist am oberen Rand der Benutzeroberfläche fest ver-
ankert und beinhaltet die Funtkionalitäten
Abmelden
,
Benachrichtigungen
und
Favoriten.
Markierung 3
Der Nutzer kann durch Breadcrumbs seine aktuelle Position im System sehen.
Diese wird unter der sekundären Navigation angezeigt.
Markierung 4
Der eigentliche Inhalt kann aus verschiedenen Elementen bestehen.
Im Folgenden wird der zugehörige HTML-Code 5.3 zur Abbildung 5.16 dargestellt:
1<html>
2<head>
3<meta charset="utf-8">
4<meta name="viewport" content="width=device-width, initial-
scale=1.0">
5[...]
6<link href="css/customized.css" rel="stylesheet">
7<link href="css/navi.css" rel="stylesheet">
8</head>
9<body>
10 <div id="wrapper">
11 <nav class="navbar-default navbar-static-side" role="
navigation">
12 [...]
50
5.3 Layout
13 </nav>
14
15 <div id="page-wrapper" class="gray-bg">
16 <div class="row">
17 <nav class="navbar navbar-static-top" role="
navigation" style="margin-bottom: 0">
18 [...]
19 </nav>
20 </div>
21 <div class="row wrapper border-bottom white-bg page-
heading">
22 <div class="col-lg-10">
23 <h2>Dashboard</h2>
24 <ol class="breadcrumb">
25 <li class="active"><strong>Home</strong></li>
26 </ol>
27 </div>
28 <div class="col-lg-2"></div>
29 </div>
30
31 <div class="wrapper wrapper-content animated
fadeInRight">
32 [...]
33 </div>
34 </div>
35 </div>
36
37 <script src="js/jquery-3.1.1.min.js"></script>
38 <script src="js/bootstrap.min.js"></script>
39 <script src="js/plugins/metisMenu/jquery.metisMenu.js"></
script>
51
5 Konzeption
40 <script src="js/plugins/slimscroll/jquery.slimscroll.min.js
"></script>
41 [...]
42 </body>
43 </html>
Listing 5.15: HTML-Code - Layout
52
6
Umsetzung und finaler Entwurf
Im Themenkomplex
Umsetzung und finaler Entwurf
wird zuerst das Gesamtsystem
6.1 beschrieben. Anschließend wird die Dialogstruktur 6.2 anhand von Diagrammen
dargestellt und danach die ersten Grundideen mithilfe von Paper Mockups 6.3 skizziert.
Abschließend wird der finale Entwurf des Prototyps 6.4 abgebildet.
6.1 Übersicht des Gesamtsystems
Die Zukunft der Unternehmen liegt in der Digitalisierung ihrer Systeme und Prozesse.
Mithilfe von intelligenten mobilen Geräten wird versucht, bestehende Systeme innovativ
und zukunftsweisend zu gestalten, das heißt vorhandene und miteinander verbunde-
ne Geräte sollen in die bestehenden Systeme integriert werden. Das Gesamtsystem
beschreibt einen Ansatz, der die Interaktion von menschlichen Mitarbeitern mit den
Geschäftsprozessen unterstützt. Dabei spielt die Nutzung von Daten eine enorme Rolle
und darf nicht vernachlässigt werden. Diese tragen zur Leistungssteigerung und Ef-
fizienzsteigerung von Prozessen bei. Aus dem entwickelten Ansatz von [
27
] geht ein
solches Framework hervor.
In Abbildung 6.1 wird das Framework mit seinen Komponenten, deren Zusammen-
spiel und Abhängigkeiten illustriert. Grundsätzlich kann das Framework in zwei Bereiche
unterteilt werden. Zum einen die serverseitigen Systemkomponenten und zum anderen
die WPAN
1
-fähigen Geräte. Zu den Systemkomponenten gehören die Process Engi-
ne, die Application Middleware und die Cloud. Diese Bestandteile enthalten wiederum
1Wireless Person Area Network
53
6 Umsetzung und finaler Entwurf
Softwareprovider, Softwarekomponenten und Datenspeicher. Der Bereich WPAN-fähige
Geräte besteht aus Mobile Companion und der Work Station. Die Companions enthalten
ebenfalls weitere Provider und Softwarekomponenten. Die in dieser Arbeit behandelte
Anwendung ist im Softwareprovider Worklist Manager in der Komponente Application
Middleware angesiedelt.
Abbildung 6.1: Übersicht Gesamtsystem [27]
6.2 Dialogstrukturdiagramm
Die nachfolgenden Abbildungen illustrieren die Dialogstrukturen des Systems. Dabei
werden alle Dialoge mit ihren Erreichbarkeiten dargestellt.
54
6.2 Dialogstrukturdiagramm
Um eine einfachere Übersicht zu ermöglichen, werden das Gesamtsystem und die ein-
zelnen Module gesondert und mithilfe eines Bussystemes dargestellt. In der Abbildung
6.2 wird das Gesamtsystem vorgestellt. Das Zusammenspiel der einzelnen Module
sollen hier insbesonders verdeutlicht werden. Anschließend werden die Dialogstrukturen
der einzelnen Module in den Abbildungen 6.3, 6.4, 6.5, 6.6 und 6.7 aufgezeigt.
Im Folgenden werden die Erreichbarkeiten und Details der Systemmodule von der Navi-
gation ausgehend vorgestellt.
Gesamtsystem
In der Abbildung 6.2 wird die Dialogstruktur des Gesamtsystems dargestellt, welches
das Zusammenspiel der einzelnen Systemmodule symbolisiert.
Abbildung 6.2: Dialogstruktur - Gesamtsystem
55
6 Umsetzung und finaler Entwurf
Account-Modul
Die Dialogstruktur des Account-Moduls zeigt in der Abbildung 6.3 das Zusammenwirken
der verschiedenen Bestandteile des Moduls. Um auf die Funktionen des Systems zurück-
greifen zu können, muss sich der Nutzer zuerst am System anmelden. Nach Anmeldung
hat dieser die Möglichkeit, über die Navigation auf den Kalender und die Profilverwaltung
zuzugreifen. Darüber hinaus kann sich der Nutzer über den Dialog
Kalender anzeigen
einen Kalendereintrag hinzufügen. Über den Dialog
Profildaten anzeigen
besteht die
Möglichkeit, ein Profilbild hochzuladen, die Profildaten zu bearbeiten, das Passwort zu
ändern oder den Account zu sperren. Im Falle einer Sperrung kann der Nutzer nicht
weiter auf die Funktionalitäten des Systems zugreifen.
Abbildung 6.3: Dialogstruktur - Account-Modul
56
6.2 Dialogstrukturdiagramm
Systemnachrichten-Modul
In der nachstehenden Abbildung 6.4 wird das Zusammenspiel der verschiedenen Be-
standteile des Systemnachrichten-Moduls anhand von Dialogen dargestellt. Dazu ge-
hören die Anzeige der Benachrichtigungen inklusive der Delegationsbehandlung sowie
der Nachrichtenbereich. Dieser umfasst das Verfassen von Nachrichten inklusive das
Anhängen von Worklist Items, das Anzeigen der Nachrichten sowie deren Details.
Abbildung 6.4: Dialogstruktur - Systemnachrichten-Modul
57
6 Umsetzung und finaler Entwurf
Zuteilung-Modul
Folgend wird die Dialogstruktur des Zuteilung-Moduls 6.5 näher erläutert. Ausgehend
von der Anzeige der existierenden Worklists können verschiedene Dialoge aufgerufen
werden. Neben dem Löschen einer Worklist besteht die Möglichkeit der Erstellung,
der Bearbeitung und Zuweisung von Worklists. Des Weiteren kann der Nutzer sich die
Worklist Items anzeigen lassen. Zusätzlich ist es ihm möglich, von diesem Dialog aus
bestimmte Worklist Items zu favorisieren, ein Item zuzuweisen, die Verteilungsverfahren
anzuzeigen, das zum Item zugehörige Prozessmodell anzeigen und zuletzt die Zuteilung
zu starten.
Abbildung 6.5: Dialogstruktur - Zuteilung-Modul
58
6.2 Dialogstrukturdiagramm
Mitarbeiter-Modul
Die Abbildung 6.6 zeigt die Darstellung der Mitarbeiterverwaltung in Form von Dialogen.
Der Nutzer kann durch die Navigation die Dialoge Mitarbeiter anzeigen und Mitarbeiter
Details anzeigen
aufrufen. Der Nutzer soll einem Mitarbeiter eine Worklist durch die
Erstellung oder Bearbeitung des jeweiligen Mitarbeiters zuweisen können. Des Weiteren
besteht die Möglichkeit, einen Mitarbeiter zu löschen und ihm durch die personalisierte
Kalenderanzeige ein Worklist Item zuzuweisen.
Abbildung 6.6: Dialogstruktur - Mitarbeiter-Modul
59
6 Umsetzung und finaler Entwurf
Statistik-Modul
Die Dialogstruktur des Statistik-Moduls wird in der Abbildung 6.7 visuell abgebildet.
Dem Nutzer stehen verschiedene Dialoge zur Verfügung, um sich die Auswertungen
von Daten anzeigen zu lassen. Neben der Anzeige des Dashboards kann er auf die
Echtzeitdaten, Gesamtstatistiken und Logs zugreifen. Zudem kann er sich zu jedem
Logeintrag das zugehörige Prozessmodell anzeigen lassen. Des Weiteren besteht die
Möglichkeit zum Aufruf aller Auswertungen mit Vergleichsdaten.
Abbildung 6.7: Dialogstruktur - Statistik-Modul
6.3 Paper Mockups
Papierbasierte Mockups (Paper Mockups) werden bevorzugt in der frühen Entwurfspha-
se eingesetzt. Es handelt sich hierbei um erste Grundideen, welche für den späteren
Entwicklungsverlauf von enormer Bedeutung sind.
Im Vergleich zum finalen Entwurf 6.4 besitzen die Paper Mockups einige Vorteile. Einer
dieser Vorteile bezieht sich auf die einfache Änderbarkeit der Entwürfe. Paper Mockups
können dabei ohne großen zusätzlichen Aufwand angepasst werden.
Im Folgenden werden verschiedene Szenarien als Paper Mockups skizziert. Die Ab-
60
6.3 Paper Mockups
bildung 6.8 stellt eine Skizze der ersten Grundüberlegung über den Designaufbau der
webbasierten Anwendung dar. Zum einen wird die Navigation gezeigt und zum anderen
die Position des Inhalts. Die Navigation setzt sich aus der Hauptnavigation und der
oberen sekundären Navigation zusammen.
Abbildung 6.8: Paper Mockup - Statistik-Modul
In der Abbildung 6.9 wird die Hauptstruktur des Zuteilung-Moduls dargestellt. Neben
einer Auflistung der Worklist Items mit den zugehörigen Attributen soll die Darstellung
durch eine Filterfunktion und ein Suchfeld erleichtert werden. Dies soll die Bedienung vor
allem bei einer Vielzahl an Items vereinfachen. Mit dem Klick auf den Button
Zuteilung
starten
soll der Nutzer die Möglichkeit haben, die Zuteilung auf bestimmte Worklist Items
und ein konkretes Verfahren zu beschränken.
61
6 Umsetzung und finaler Entwurf
Abbildung 6.9: Paper Mockup - Zuteilung-Modul
Abbildung 6.10: Paper Mockup - Mitarbeiter-Modul
62
6.4 Finaler Entwurf
Der Großteil der Funktionalitäten des Mitarbeiter-Moduls 6.10 sollen wegen der Über-
sichtlichkeit auf einen Blick dem Nutzer zur Verfügung stehen. Somit sind alle nutzbaren
Funktionalitäten sofort erkennbar. Die Übersicht zeigt eine Auflistung aller Mitarbei-
ter sowie eine Detailansicht eines einzelnen Mitarbeiters. In der Auflistung sollen die
Mitarbeiter namentlich mit ihren Kontaktdaten genannt werden. In der Detailansicht
sollen personalisierte Statistiken angezeigt sowie Zugriff auf den Mitarbeiterkalender ge-
währt werden. Zudem soll die Möglichkeit bestehen, dem ausgewählten Mitarbeiter eine
Nachricht zu senden, ihn zu löschen oder zu bearbeiten. Zusätzlich soll ein Mitarbeiter
angelegt werden können.
Weitere Abbildungen der Paper Mockups können im Anhang A.1 angesehen werden. Im
finalen Entwurf 6.4 wird die webbasierte Anwendung auf Basis der Paper Mockups 6.3
vorgestellt.
6.4 Finaler Entwurf
Auf Basis der Papermockups 6.3 wurde der finale Entwurf erstellt. Hierbei handelt es
sich um einen Prototypen der webbasierten Anwendung. Umgesetzt wurde der Prototyp
mithilfe des HTML-Templates
Inspinia
[
28
]. Inspinia ist ein Framework, welches auf
JavaScript [29], HTML [30], CSS [31] und Bootstrap [26] basiert.
Das Design der einzelnen Ansichten wurde sehr ähnlich gehalten, um die Wieder-
erkennbarkeit und Vertrautheit der Anwendung zu steigern. Bei allen Ansichten wurden
die in Kapitel 5.1 definierten Styleguides als Richtlinien herangezogen.
Aufgrund der besseren Übersichtlichkeit wird die Vorstellung des finalen Entwurfs in die
einzelnen Module aufgeteilt.
63
6 Umsetzung und finaler Entwurf
6.4.1 Account-Modul
Das Account-Modul behandelt das Anmelden, die Kalenderübersichten (Tages- und
Monatsansicht) sowie die Funktionalitäten der Profilverwaltung. Zusätzlich werden in
diesem Abschnitt die Navigationen (Haupt- und sekundäre Navigation) vorgestellt.
Anmelden
In der Abbildung 6.11 wird die Maske dargestellt, auf welcher sich die Nutzer am System
anmelden können. Hierbei wurde bewusst auf die Möglichkeit zur Nutzerregistrierung
verzichtet, da das System innerhalb eines Unternehmens zum Einsatz kommen soll.
Daher ist es nicht öffentlich zugänglich. Mitarbeiter, Manager und Administratoren kön-
nen sich durch die Eingabe der ihnen zugeteilten Anmeldedaten Zugang zum System
verschaffen. Die Anmeldedaten werden den Mitarbeitern durch ihren Manager zugeteilt
und sie können diese im angemeldeten Bereich bearbeiten.
Abbildung 6.11: Finaler Entwurf - Anmelden
Navigation
Die Navigation in Abbildung 6.13 setzt sich aus zwei Teilen zusammen. Der erste bildet
die Hauptnavigation und ist auf der linken Seite der Ansicht zu sehen. Dem Nutzer wird
64
6.4 Finaler Entwurf
sein Profilbild und Name angezeigt. Darunter ist seine Rolle im Unternehmen darge-
stellt. Zur visuellen Hervorhebung wurde diese eingerahmt. Darunter befinden sich die
Verknüpfungen der einzelnen Seiten, um durch das System navigieren zu können. Ein
einzelner Punkt setzt sich dabei aus einem Icon und Text in Kurzform zusammen. Dieser
Text weist auf die verknüpften Funktionalitäten hin. Besteht ein Navigationspunkt aus
mehreren Unterpunkten, so wird das mit einem Pfeil auf der rechten Seite innerhalb der
Navigation angedeutet. Mit einem Klick darauf werden diese ausgeklappt und farblich zu
den restlichen Navigationspunkten unterschieden. Somit kann der Nutzer sehr schnell
und einfach erkennen, an welcher Position er sich gerade im System befindet.
Der zweite Teil bildet die sekundäre Navigation und befindet sich auf der oberen Seite
der Ansicht. In diesem Bereich werden die Funktionalitäten des Abmeldens, der favori-
sierten Items und der Benachrichtigungen angedeutet. Der Nutzer besitzt somit einen
Schnellzugriff, inklusive Anzahl der einzelnen Punkte, auf die genannten Funktionen.
Beispielsweise werden mit Klick auf das Glockensymbol die Zusammenstzung der Be-
nachrichtigungen angezeigt. Diese fungieren ebenfalls als Navigationspunkte und sind
mit den dazugehörigen Unterseiten verknüpft. In Abbildung 6.12 wird die ausgeklappte
Navigation dargestellt.
Abbildung 6.12:
Finaler Entwurf - Ausgeklappter Menüpunkt der sekundären Navigation
Die Besondertheit der gesamten Navigation ist, dass sie als festes Menü agiert, das
heißt die Position ist in jeder Ansicht und jedem Zustand der Anwendung fest. Dies führt
65
6 Umsetzung und finaler Entwurf
zur Steigerung der Übersichtlichkeit und Benutzerfreundlichkeit.
Kalender - Tagesübersicht
Des Weiteren besitzt jeder Nutzer einen personalisierten Kalender. Darin werden die
anstehenden Termine auf zwei Arten angezeigt. Die erste Art wird in der Abbildung 6.13
abgebildet. Die Tagesansicht beinhaltet eine Auflistung der anstehenden Termine. Dabei
wird anhand eines Icons erkenntlich, um welche Art von Termin es sich hierbei handelt.
Zudem wird zu jedem Eintrag eine Beschreibung ausgegeben. Neben der Uhrzeit der
Terminansetzung wird zusätzlich die Zeitspanne zwischen der aktuellen Zeit bis zum
eigentlichen Termin angezeigt. Dadurch hat der Nutzer einen strukturierten Plan, welche
Ereignisse ihm bevorstehen.
Abbildung 6.13: Finaler Entwurf - Tagesübersicht des Kalenders
Kalender - Gesamtübersicht
In der zweiten Art den Kalender anzuzeigen, wird auf eine visuelle Kalenderdarstellung
zurückgegriffen. Die Termine werden direkt im Kalender angezeigt, welcher sich in ver-
schiedenen Darstellungen einstellen lässt. In Abbildung 6.14 ist eine solche Darstellung
zu sehen. Dabei hat der Nutzer eine Gesamtübersicht über einen Monat. Es besteht die
66
6.4 Finaler Entwurf
Möglichkeit diesen Kalender in der Monats-, Wochen- und Tagesansicht anzuzeigen.
Weitere Ansichten des Kalenders können dem Anhang A.10 und A.11 entnommen
werden. Der aktuelle Tag wird bei allen drei Ansichten farblich hinterlegt.
Die Termineintragung erfolgt per Drag’n’Drop
2
der Elemente in den Kalender hinein. Bei
den aufgelisteten Elementen handelt es sich um Worklist Items aus der Favoritenliste
des Managers. Diese lassen sich nach Namen über ein Eingabefeld suchen. Damit wird
bei einer Vielzahl an Elementen die Effizienz der Bedienung erhöht.
Abbildung 6.14: Finaler Entwurf - Gesamtübersicht des Kalenders
Profildatenverwaltung
In der Profilansicht 6.15 werden nicht nur die Nutzerdaten angezeigt, sondern es stehen
zusätzlich die nachfolgenden Funktionen zur Verfügung. Zu den Stammdaten jedes
Nutzers zählen der Benutzername, Vor- und Nachname, E-Mail-Adresse, Telefonnummer
2Ziehen und Ablegen
67
6 Umsetzung und finaler Entwurf
und der Arbeitsplatz. Diese werden auf der rechten Seite angezeigt. Um den Profilda-
tenblock abzurunden, besteht zudem die Möglichkeit, diese Daten zu bearbeiten oder
das Zugangspasswort zu ändern. Bei einem Klick auf einen der zwei Buttons wird der
Profildatenblock durch den jeweiligen Inhalt der dahinterliegenden Funktion ersetzt. Der
Nutzer kann alle Daten mit Ausnahme des Benutzernamens bearbeiten. Dadurch wird
die Eindeutigkeit des Nutzers sichergestellt. Da sich die Ansicht der Bearbeitung von
Profildaten und Änderung des Passwort nicht gravierend von der Profilansicht 6.15
unterscheidet, können diese dem Anhang A.12 und A.13 entnommen werden.
Abbildung 6.15: Finaler Entwurf - Übersicht der Profildaten
Eine weitere Funktion ist die Möglichkeit zur Sperrung des Nutzeraccounts. Durch das
Sperren werden die Zugangsdaten ungültig und der Nutzer kann sich nicht mehr am
System anmelden. Damit der Account nicht irrtümlich gesperrt werden kann, poppt eine
zusätzliche Abfrage in Form eines modalen Fensters 6.16 auf. Erst nach Bestätigung
der Abfrage durch den Nutzer wird der Account endgültig gesperrt. Dadurch bleibt das
System robust gegen Fehleingaben. Die Freischaltung eines Accounts kann lediglich
durch den Systemadministrator erfolgen.
68
6 Umsetzung und finaler Entwurf
Dazu öffnet sich ebenfalls ein modales Fenster. Per Drag’n’Drop oder durch ein Klick auf
die gekennzeichnete Fläche lässt sich das gewünschte Bild hochladen.
6.4.2 Systemnachrichten-Modul
Das Systemnachrichten-Modul wird im folgenden Abschnitt näher beschrieben. Dieses
Modul beinhaltet das Anzeigen von Benachrichtigungen, die Delegationsbehandlung,
das Verfassen der Nachrichten sowie die Ansicht von Nachrichten und deren Inhalt.
Benachrichtigungen Übersicht
Über das sekundäre Menü kann die Ansicht der Benachrichtigungen aufgerufen werden.
Die Abbildung 6.18 zeigt eine solche Übersicht von Meldungen. Diese werden in Form
einer Auflistung angezeigt.
Abbildung 6.18: Finaler Entwurf - Benachrichtigungen Übersicht
Verschiedene Hintergrundfarben stehen dabei für unterschiedliche Kategorien, in welche
die einzelnen Meldungen eingeteilt werden können. Bei den blauen Listenelemente
handelt es sich um Informationsmeldungen. Der Manager wird über verschiedenen Vor-
gänge der Mitarbeiter oder des Systems informiert. Bei den gelben Elementen handelt
70
6.4 Finaler Entwurf
es sich um Delegationen der Mitarbeiter, auf die der Manager reagieren kann. Bei den
roten Meldungen handelt es sich um Eskalationen. Bei einer Eskalation eines Worklist
Items wird dieses in die Favoritenliste des Managers gelegt. Somit wird er darüber
benachrichtigt und kann direkt darauf reagieren.
Delegationsbehandlung
Wird durch den Manager auf eine Delegationsmeldung reagiert, öffnet sich ein modales
Fenster 6.19 mit allen relevanten Informationen. Zu diesen zählen einzelne Attribute
des Worklist Items: um welches es sich handelt, der Mitarbeiter, der das Item delegiert
hat, sowie der Mitarbeiter, der es nach der Delegation bearbeiten soll. Zudem wird
angezeigt, zu welcher Worklist es gehört. Zusätzlich besitzt der Manager die Möglichkeit,
die Delegation zu revidieren und das Item neu zu verteilen. Diese Funktion wird in der
Abbildung 6.20 näher beschrieben. Des Weiteren besteht die Möglichkeit zur Anzeige
des zugehörigen Prozessmodells.
Abbildung 6.19: Finaler Entwurf - Delegation Übersicht
Die Abbildung 6.20 stellt die Möglichkeiten zur Neuzuteilung des Items dar. Falls der
Manager sich für die Neuzuteilung des Worklist Items entscheidet, wird ihm durch
71
6 Umsetzung und finaler Entwurf
einen Klick auf das dafür vorgesehene Symbol eine Auflistung im modalen Fenster
eingeblendet. Darin sind die Worklists mit der jeweiligen Anzahl der Worklist Items
und deren Teilnehmer, hier Bearbeiter genannt, enthalten. Der Manager kann das Item
mehreren Worklists durch eine Mehrfachauswahl der Checkboxen zuteilen. Zusätzlich
wird dem Nutzer die Möglichkeit zum Sortieren, Filtern und Durchsuchen der Liste
geboten. Die Listenelemente können aufsteigend oder absteigend sortiert werden. Des
Weiteren kann der Filter auf
private
und
shared
Worklists angewandt werden. Private
Worklists beschreibt hierbei die Worklist eines einzelnen Mitarbeiters. Shared Worklists
sind Worklists, welche mehrere Mitarbeiter enthalten. Diese können beispielsweise
Projekte oder Teams abbilden. Die Auflistung kann durch das Eingabefeld
Durchsuchen
auf Basis einer Volltextsuche gefiltert werden.
Abbildung 6.20: Finaler Entwurf - Delegationsitem zuteilen
In der Abbildung 6.21 wird die Informationsmeldung über eine erfolgreiche Neuzuteilung
des Worklist Items skizziert. Diese Meldungen werden dem Nutzer angezeigt, um die
Erwartungskonformität zu steigern. Die Informationsmeldungen werden für verschiedene
Arten von Informationen verwendet. Die Meldungen in grüner Farbe weisen auf einen
erfolgreichen Vorgang hin, die Meldungen in roter Farbe hingegen auf einen fehlerhaften
72
6.4 Finaler Entwurf
Vorgang.
Ist die Neuzuteilung eines Worklist Items erfolgreich, so wird die Benachrichtgungsmel-
dung der Delegation direkt aus der Benachrichtigungsübersicht 6.18 entfernt.
Abbildung 6.21: Finaler Entwurf - Delegationsitem zuteilen
Nachrichtenübersicht
Ein weiterer Bestandteil des Systemnachrichten-Moduls ist die Nachrichtenverwaltung.
Die Abbildung 6.22 zeigt eine Übersicht der eingegangenen Nachrichten. Dabei ist die
Ansicht in zwei Teile unterteilt. Der erste Teil befindet sich auf der linken Seite und
beinhaltet ein weiteres Untermenü. Dabei kann zwischen den eingegangenen, gesende-
ten und gelöschten Nachrichten gewechselt werden. Zudem beinhaltet das Untermenü
einen Button, welcher die Verknüpfung zum Bereich
Nachricht verfassen
6.4.2 darstellt.
Dieses Untermenü wird bei allen Ansichten im Bereich Nachrichten auf der linken Seite
angezeigt und führt somit zu einer besseren Übersichtlichkeit und Bedienbarkeit.
Der zweite Teil stellt den eigentlichen Inhalt dar. Dieser umfasst eine Auflistung der
eingegangenen Nachrichten. Die ungelesenen werden zur besseren Lesbarkeit farblich
hervorgehoben. In der Liste werden der Absender, der Betreff, das Datum und optio-
73
6 Umsetzung und finaler Entwurf
nale Anhänge angezeigt. Zudem besteht die Möglichkeit, ausgewählte Nachrichten zu
löschen, als gelesen zu markieren oder zu durchsuchen.
Abbildung 6.22: Finaler Entwurf - Nachrichtenübersicht
Die Struktur des Bereiches Nachrichten ist an den Aufbau eines gewöhnlichen E-Mail-
Programms angelehnt.
Nachrichtendetails
In der Abbildung 6.23 wird die Detailansicht einer Nachricht dargestellt. Neben einer
Kopfzeile beinhaltet diese den eigentlichen Inhalt der Nachricht und eine Fußzeile. Die
Kopfzeile enthält relevante Informationen über den Absender, das Eingangsdatum und
den Betreff. Zudem hat der Nutzer die Möglichkeit, über Buttons auf diese Nachricht zu
antworten oder diese zu löschen.
Der eigentliche Inhalt setzt sich aus der Textnachricht und dem optional angehängten
Worklist Item zusammen. Beim Klick auf den Anhang einer Nachricht öffnet sich ein
modales Fenster mit allen relevanten Informationen. Diese Ansicht kann dem Anhang
A.15 entnommen werden und wird im weiteren Verlauf dieser Arbeit vorgestellt.
74
6.4 Finaler Entwurf
Die Fußzeile besteht aus drei Buttons. Hinter diesen stehen die Funktionen
Antworten
,
Weiterleiten und Löschen der Nachricht.
Abbildung 6.23: Finaler Entwurf - Nachrichtendetails
Nachrichten verfassen
Die Ansicht
Nachricht verfassen
6.24 wird bei der Verfassung einer neuen Nachricht,
beim Antworten sowie beim Weiterleiten aufgerufen. Der Nutzer kann dabei einen Emp-
fänger, Betreff und die eigentliche Nachricht eingeben. Beim Antworten und Weiterleiten
werden der Empfänger und der Betreff automatisch vom System ausgefüllt. Allerdings
können diese im Nachhinein vom Nutzer angepasst werden. Zudem besteht die Möglich-
keit, den Nachrichtenentwurf zu verwerfen oder abzusenden. Dies erfolgt über Buttons
auf der unteren Seite der Ansicht.
Die Besonderheit bei dieser Ansicht ist das Anhängen von Worklist Items. Durch den
Button
Items anhängen
öffnet sich ein modales Fenster, welches die Auflistung der
existierenden Items beinhaltet.
75
6.4 Finaler Entwurf
Um die Liste der Worklist Items zu minimieren und die Übersichtlichkeit zu erhöhen,
stehen verschiedene Funktionen zur Sortierung und Filterung zur Verfügung. Zur Filter-
funktion zählen die Mehrfachauswahl aus verschiedenen Kategorien (wird im Zuteilung-
Modul 6.4.3 näher erläutert), die Eingrenzung der Deadline mit einer Datumsauswahl
sowie eine Volltextsuche. Die mehrfache Anhängung der Items kann durch die Mehrfach-
auswahl von Worklist Items erreicht werden. Auf die farbliche Kennzeichnung einzelner
Listenelemente wird im Zuteilung-Modul 6.4.3 eingegangen.
6.4.3 Zuteilung-Modul
Die Hauptfunktionen Worklistverwaltung und das Zuteilen von Worklist Items bilden
das Zuteilung-Modul. Die Worklistverwaltung beinhaltet dabei die Übersicht sowie die
Erstellung, Bearbeitung und Löschen der Worklists. Funktionen wie das Zuteilen von
einzelnen und eine Sammlung von Worklist Items fließen in die zweite Hauptfunktion
ein. Des Weiteren beinhaltet dieses Modul das Anzeigen des Prozessmodells, der
Verteilungsverfahren sowie von favorisierten Items.
Worklistverwaltung
In der Abbildung 6.26 werden alle Funktionalitäten, welche zur Worklistverwaltung
gehören, dargestellt. Für die Darstellung der einzelnen Worklists wurde das Kachelsys-
tem gewählt. Somit kann der Nutzer Informationen und Bedienungsmöglichkeiten direkt
sehen. Dies soll zu einer effizienteren und schnelleren Bedienung des Systems führen.
Neben dem Worklistnamen werden zudem die Anzahl der zugeteilten Worklist Items
und Teilnehmer angezeigt. In der Fußzeile jeder Kachel befinden sich Buttons, welche
zur Bearbeitung oder Löschen einer Worklist führen.
Des Weiteren lassen sich die Worklists sortieren und filtern. Es kann aufsteigend, ab-
steigend oder nach den neuesten erstellten Worklists sortiert werden. Der Filter liefert
Ergebnisse über einzelne oder mehrere Mitarbeiter. Zusätzlich besteht die Möglichkeit,
mit einer Volltextsuche die Ergebnisse zu durchsuchen.
77
6.4 Finaler Entwurf
Neben dem Worklistnamen muss die Worklist auch Mitarbeitern zugewiesen werden.
Dabei kann es sich um einen einzelnen oder mehrere Mitarbeiter handeln. Mit dem Klick
auf den Button
Los
öffnet sich ein modales Fenster. In diesem ist eine Auflistung mit den
Mitarbeitern enthalten. Durch die Auswahl der Mitarbeiter und der Bestätigung werden
diese der Worklist hinzugefügt. Die Auswahl kann jederzeit geändert werden.
Worklist Items Übersicht
Der Kern des Zuteilung-Moduls ist die Ansicht der einzelnen Worklist Items mit zuge-
hörigen Attributen sowie die Zuteilung der Items auf Worklists. In Abbildung 6.28 wird
diese Kernfunktion vorgestellt.
Über die Registerkarten auf der oberen Seite kann zwischen den einzelnen Inhalten
hin und her navigiert werden. In diesem Abschnitt wird der Inhalt
Übersicht vorgestellt
.
Die Ansicht der Worklist Items erfolgt mittels einer Auflistung. Dadurch wird dem Nutzer
eine strukturierte Übersicht über alle relevanten Informationen und Bedienmöglichkeiten
geboten. Zu den angezeigten Attributen zählen der Titel, die Priorität, der Status, das
Fälligkeitsdatum, der zugeteilte Mitarbeiter und die zugehörige Worklist.
Des Weiteren wird dem Nutzer die Möglichkeit geboten, verschiedene Aktionen auf
ein einzelnes Item auszuführen. Das Item kann einzeln zugeteilt 6.4.3 oder favorisiert
6.4.3 werden. Zusätzlich kann sich der Nutzer zu jedem Worklist Item das zugehörige
Prozessmodell 6.4.3 anzeigen lassen.
Die farblichen Kennzeichnungen der Items haben unterschiedliche Bedeutungen. Ist ein
Item mit gelber Farbe hinterlegt, wird darauf hingewiesen, dass das Fälligkeitsdatum
bald erreicht ist. Dies dient zur einfachen Information für den Manager. Ist ein Item aller-
dings mit roter Farbe hinterlegt, zeigt es dem Manager an, dass das Fälligkeitsdatum
überschritten wurde und eine Handlung zwingend erforderlich ist.
Zusätzlich werden bei dieser Ansicht die Sortier- und Filterfunktionen eingesetzt. Es
kann aufsteigend, absteigend oder nach einzelnen Attributen sortiert werden. Der Filter
kann auf verschiedene Arten angewandt werden. Mit Klick auf den Dropdown-Button
-Filter-
kann eine Mehrfachauswahl aus den Kategorien Status, Priorität, Zuteilung und
Favoriten getroffen werden. Eine Ansicht dazu wird im Anhang A.22 aufgelistet. Eine
weitere Möglichkeit ist die Eingrenzung des Fälligkeitsdatums durch die Benutzung
79
6 Umsetzung und finaler Entwurf
der Datumsauswahl. Zuletzt wird dem Nutzer auch die Möglichkeit der Nutzung einer
Volltextsuche geboten. Hinter dem Button
Zuteilung starten
verbirgt sich die Funktion
der Zuteilung einer Menge von Worklist Items.
Abbildung 6.28: Finaler Entwurf - Worklist Items Übersicht
Zuteilung einer Menge von Worklist Items
Die im System hinterlegten Verteilungsverfahren können auf die Worklist Items ange-
wandt werden. Die Abbildung 6.29 zeigt das modale Fenster um die Items zuzuteilen.
Dabei kann der Manager auswählen, auf welche Anzahl von Worklist Items er die
Verteilungsverfahren anwenden möchte. Es besteht die Möglichkeit, die Verfahren auf
die Menge der nicht verteilten, der bereits verteilten, der favorisierten oder aller Items
anzuwenden. Wird die Auswahlmöglichkeit
alle Items
gewählt, werden auch die bereits
verteilten als nicht verteilte angesehen und auf Basis der Verfahren neu verteilt. Kombi-
nationen der einzelnen Verteilungsverfahren oder der verschiedenen Mengen sind nicht
möglich.
War die Zuteilung der Worklist Items erfolgreich, wird dem Nutzer eine Informationsmel-
dung darüber auf der rechten oberen Bildschirmseite angezeigt. Die Abbildung 6.30
verdeutlicht dies.
80
6.4 Finaler Entwurf
Abbildung 6.29: Finaler Entwurf - Zuteilung einer Menge von Worklist Items
Abbildung 6.30:
Finaler Entwurf - Meldung über erfolgreiche Zuteilung der Menge an
Worklist Items
81
6 Umsetzung und finaler Entwurf
Zuteilung einzelner Worklist Items
Zusätzlich kann ein einzelnes Item zugeteilt werden. Mit dem Klick auf den entspre-
chenden Button öffnet sich ein modales Fenster. Darin sind die existierenden Worklists
enthalten und können diesen zugeteilt werden. Diese Auflistung kann sortiert, gefiltert
sowie eine Volltextsuche durchgeführt werden.
Abbildung 6.31: Finaler Entwurf - Zuteilung einzelner Worklist Items
Prozessmodell anzeigen
In Abbildung 6.32 wird das Prozessmodell dargestellt. Dieses kann sich der Nutzer
über jedes Worklist Item anzeigen lassen. Darüber hinaus wird nicht nur das allgemeine
Prozessmodell angezeigt, sondern auch der Status der enthaltenen Aktivitäten. Somit
kann der Nutzer direkt erkennen, an welcher Position sich das Modell zum Aufrufzeitpunkt
befindet.
82
6 Umsetzung und finaler Entwurf
Diese Ansicht zeigt die im System hinterlegten Verteilungsverfahren. Diese werden
über die Administrator-Rolle des Systems verwaltet. Neben dem Verfahrenstitel wird
auch ein kurzer Informationstext angezeigt. Dieser soll dem Nutzer helfen, die einzelnen
Verteilungsverfahren zu verstehen und auf welcher Basis diese agieren.
Favorisierte Worklist Items anzeigen
Der letzte Bestandteil dieses Moduls wird in Abbildung 6.34 aufgezeigt. Über die se-
kundäre Navigation kann die Ansicht der favorisierten Items aufgerufen werden. Diese
ähnelt sehr stark der ursprünglichen Worklist Item Übersicht 6.4.3 und weicht nur gering
ab. Über den Button
Zuteilen
kann die Menge der favorisierten Items auf derselben
Basis zugeteilt werden. Dazu muss lediglich ein Verteilungsverfahren ausgewählt wer-
den. Unter dem Abschnitt
Aktionen
besteht die Möglichkeit, ein Worklist Item aus der
Favoritenliste zu entfernen.
Abbildung 6.34: Finaler Entwurf - Favorisierte Worklist Items anzeigen
84
6.4 Finaler Entwurf
6.4.4 Mitarbeiter-Modul
Das Mitarbeiter-Modul behandelt im Wesentlichen verschiedene Funktionen, welche die
Mitarbeiterverwaltung stützen. Zu den Funktionalitäten zählen die Mitarbeiterübersicht,
-erstellung, -bearbeitung, -entfernung und den -kalender.
Mitarbeiterübersicht
Die Abbildung 6.35 stellt die Auflistung aller Mitarbeiter sowie deren Detailansicht dar.
Abbildung 6.35: Finaler Entwurf - Mitarbeiterübersicht
Die Gesamtansicht ist in zwei Teile unterteilt. Auf dem linken breiteren Teil werden
die Mitarbeiter anhand einer Auflistung dargestellt. In der Kurzübersicht sind das Pro-
filbild, der Namen und die Kontaktdaten des Mitarbeiters enthalten. Zudem ist eine
Volltextsuche auf die Mitarbeiter und deren Kurzinformationen möglich. Dadurch kann
sehr schnell ein bestimmter Mitarbeiter oder eine bestimmte Anzahl von Mitarbeitern
85
6 Umsetzung und finaler Entwurf
gefunden werden. Über den Button
Mitarbeiter erstellen
kann ein neuer Benutzer mit der
Rolle Mitarbeiter am System angelegt werden. Klickt man auf den Namen eines existie-
renden Mitarbeiters, so wird dessen Detailansicht auf der rechten Seite angezeigt. Diese
enthält eine Kurzübersicht über Statistiken sowie anstehende Aktivitäten. Zusätzlich
besteht die Möglichkeit, den ausgewählten Mitarbeiter zu bearbeiten, zu löschen, ihm
eine Nachricht zu senden oder seinen personalisierten Kalender aufzurufen. Die Ansicht
des Löschens ist äquivalent zu der Funktion
Account sperren
in der Abbildung 6.16 aus
dem Account-Modul. Der personalisierte Kalender des Mitarbeiters ist im Design und in
der Funktionalität ebenfalls äquivalent zum Kalender 6.14 aus demselben Modul.
Mitarbeiter erstellen
In Abbildung 6.37 wird die Möglichkeit zur Erstellung eines Mitarbeiters vorgestellt.
Abbildung 6.36: Finaler Entwurf - Mitarbeiter erstellen
86
6.4 Finaler Entwurf
Wird ein neuer Benutzer mit der Rolle Mitarbeiter benötigt, müssen verschiedene An-
gaben zur Person erfasst werden. Die Erfassung dieser Angaben wird mittels eines
Formulars gehandhabt.
Der Benutzername kann nicht vom Manager eingegeben werden. Das dafür vorgesehe-
ne Eingabefeld ist dazu deaktiviert. Der Benutzername wird vom System aus dem Vor-
und Nachname generiert. Dadurch wird die Eindeutigkeit eines Nutzers sichergestellt.
Des Weiteren werden neben dem Vor- und Nachnamen die E-Mail-Adresse, Telefonnum-
mer und der Arbeitsplatz benötigt. Der Mitarbeiter kann auch einer Worklist zugewiesen
werden. Diese Ansicht ist äquivalent zu bereits behandelten Zuweisungsansichten und
ist im Anhang A.27 dargestellt.
Mitarbeiter bearbeiten
Die Ansicht der Mitarbeiterbearbeitung ist sehr ähnlich zur Mitarbeitererstellung 6.36.
Abbildung 6.37: Finaler Entwurf - Mitarbeiter bearbeiten
87
6 Umsetzung und finaler Entwurf
In diesem Szenario sind die existierenden Daten des Mitarbeiters bereits in die Ein-
gabefelder des Formulars eingetragen. Änderungen können durch Textänderungen in
den Eingabefeldern vorgenommen werden. Durch Speichern des Formulars werden die
neuen Daten übernommen. Durch das Abbrechen werden die geänderten Daten nicht
gespeichert und die vorherigen Daten bleiben im System bestehen.
Mitarbeiter Nachricht senden
Die Abbildung 6.38 beinhaltet die Ansicht der Nachrichtenverfassung. Wird der Button
Nachrichten senden
in der Mitarbeiterdetailansicht geklickt, öffnet sich diese Ansicht. Sie
ist äquivalent zur Nachrichtenverfassenansicht 6.24 aus dem Systemnachrichten-Modul.
Allerdings ist hier die Besonderheit, dass der Empfänger bereits mit der betreffenden
E-Mail-Adresse ausgefüllt ist. Zusätzlich existiert am oberen rechten Rand der Button
Zurück. Dieser ist mit dem Button Verwerfen gleichzusetzen.
Abbildung 6.38: Finaler Entwurf - Mitarbeiter Nachricht senden
88
6.4 Finaler Entwurf
6.4.5 Statistik-Modul
Das Statistik-Modul umfasst die detaillierte Auswertung von Daten. Die Auswertung
von Echtzeit-, Gesamt- und Logdaten zählen genau so dazu, wie die Darstellung von
dementsprechenden Vergleichsdaten. Zuletzt wird das Dashboard des Systems für die
Rolle Manager vorgestellt.
Echtzeitdaten anzeigen
Über die drei Registerkarten auf der oberen Seite können verschiedene Auswertungs-
kategorien aufgerufen werden. Dieser Abschnitt beschäftigt sich mit der Kategorie der
Echtzeitdaten, welche in der Abbildung 6.39 verdeutlicht werden. Dazu wird eine Live-
Chart verwendet. Diese zeigt die Auslastung der letzten zehn Minuten an. Die Werte
werden jede Sekunde neu angezeigt und erzeugt somit beim Nutzer eine animierte
Bewegung. Zudem werden die aktuelle Anzahl der ausstehenden Worklist Items, der
aktivierten und laufenden Instanzen dargestellt. Diese werden mit Icons zur freundli-
cheren Darstellung untermauert. Über den Button
Vergleichen
können Vergleichsdaten
angezeigt werden.
Abbildung 6.39: Finaler Entwurf - Echtzeitdaten anzeigen
89
6 Umsetzung und finaler Entwurf
Gesamtdaten anzeigen
Eine weitere Auswertungskategorie ist die Gesamtdatenauswertung 6.40. Hierbei fließen
alle erfassten Vorgänge des Systems ein. Um die Übersichtlichkeit zu steigern, wurden
die Daten in Charts aufbereitet. Für die visuelle Darstellung der Auslastung und die An-
zahl der bearbeiteten Items wurden jeweils Line-Charts verwendet. Dagegen werden die
Daten der durchschnittlichen Wartezeit und Bearbeitungszeit in Bar-Charts aufbereitet.
Dabei wird standardmäßig der Zeitraum der letzten sieben Monate herangezogen.
Abbildung 6.40: Finaler Entwurf - Gesamtdaten anzeigen
Die Charts lassen sich durch die Anwendung des Filters flexibel gestalten. Die Filterfunkti-
on beinhaltet die wöchentliche, monatliche und jährliche Aufbereitung der Auswertungen.
90
6.4 Finaler Entwurf
Durch die Datumsauswahl können die Daten für einen beliebigen Zeitraum aufbereitet
werden.
Logdaten anzeigen
Die dritte und letzte Auswertungskategorie bilden die Logs 6.41. Das bedeutet, dass
jegliche Vorgänge im System archiviert. Dadurch kann der Manager jederzeit einsehen,
welchen Zustandswechsel und Status die einzelnen Worklist Items haben. Dazu wird
der Zeitstempel und der Mitarbeiter, welcher den Vorgang durchgeführt hat, gespeichert.
Die Archivierung erfolgt in einer Liste und kann nach verschiedenen Vorgängen gefiltert
sowie nach den einzelnen Attributen sortiert werden. Auch die Filterung mittels der
Datumsauswahl und Volltextsuche ist möglich. Über das Informationsicon lässt sich das
zu dem Worklist Item zugehörige Prozessmodell anzeigen.
Werden in der Zuteilung oder beim Bearbeiten der Worklist Items Unregelmäßigkeiten
festgestellt, kann der Manager über die Logs den Ursprung dieser Unregelmäßigkeiten
herausfinden und passend darauf reagieren.
Abbildung 6.41: Finaler Entwurf - Logdaten anzeigen
91
6 Umsetzung und finaler Entwurf
Vergleichsdaten anzeigen
Ein weiterer wichtiger Bestandteil des Statistik-Moduls ist die Anzeige von Vergleichs-
daten 6.42. Hierzu können die Daten einzelner Mitarbeiter herangezogen werden. Die
Daten des Mitarbeiters werden in die bestehenden Grafiken mit einer unterschiedlichen
Farbe eingezeichnet. Somit hat der Manager den direkten Vergleich und kann daraus
seine Schlüsse ziehen. Die Daten mit oranger Kennzeichnung gehören zu den Ver-
gleichsdaten. Die Ansichten der weiteren Auswertungskategorien können dem Anhang
A.2 entnommen werden.
Abbildung 6.42: Finaler Entwurf - Vergleichsdaten anzeigen
92
6.4 Finaler Entwurf
Zudem können über den Button
Neuer Vergleich
die Vergleichsdaten eines anderen Mit-
arbeiters angezeigt werden. Über den Button
Zurücksetzen
werden die Vergleichsdaten
aus den Grafiken entfernt.
Dashboard anzeigen
Die Abbildung 6.43 zeigt das Dashboard für die Systemrolle Manager.
Abbildung 6.43: Finaler Entwurf - Dashboard
93
6 Umsetzung und finaler Entwurf
Meldet sich der Nutzer erfolgreich am System an, wird er auf das Dashboard wei-
tergeleitet. Dieses dient als Startseite und bietet eine Übersicht über verschiedene
Auswertungen und Zustände des Systems.
Auf der oberen Seite werden ihm Kurzinformationen über die Anzahl der Mitarbeiter,
Worklists, Items und Verteilungsverfahren angezeigt. Des Weiteren werden ihm die
Echtzeitdaten über die Auslastung für den Zeitraum der letzten sechs Minuten visuell
aufbereitet. Ebenfalls werden ihm die restlichen Echtzeitdaten angezeigt. Über den jewei-
ligen Button im Übersichtsblock gelangt der Nutzer zu den dazugehörigen Unterseiten.
Darüber hinaus werden ihm Gesamtstatistiken visuell dargestellt, welche er durch die
den Dropdown-Button auswählen kann.
Zusätzlich werden dem Nutzer die nächsten drei anstehenden Aktivitäten sowie ungele-
sene Nachrichten aufgelistet.
94
7
Anforderungsabgleich
In diesem Kapitel werden die in Kapitel 4.3 erläuterten funktionalen 4.3.1 und nicht-
funktionalen 4.3.2 Anforderungen abgeglichen. Der Status beschreibt, ob die jeweilige
Anforderung umgesetzt oder nicht umgesetzt wurde.
7.1 Funktionale Anforderungen
In diesem Abschnitt werden die funktionalen Anforderungen in den Tabellen 7.1 und 7.2
dargestellt. Diese beschreiben das Verhalten des Systems.
Kürzel Bezeichnung Seite Status
Account-Modul
FA-01 Anmelden 25
umgesetzt
FA-02 Abmelden 26
umgesetzt
FA-03 Kalenderverwaltung 26
umgesetzt
FA-04 Profilverwaltung 26
umgesetzt
Systemnachrichten-Modul
FA-05 Nachrichten verwalten 26
umgesetzt
FA-06 Worklist Item referenzieren 26
umgesetzt
Zuteilung-Modul
FA-07 Benachrichtigungen anzeigen 26
umgesetzt
FA-08 Eskalationen behandeln 26
umgesetzt
Tabelle 7.1: Anforderungsabgleich - Funktionale Anforderungen I
95
7 Anforderungsabgleich
Kürzel Bezeichnung Seite Status
Zuteilung-Modul
FA-09 Delegationen behandeln 27
umgesetzt
FA-10 Worklist anzeigen 27
umgesetzt
FA-11 Worklist verwalten 27
umgesetzt
FA-12 Verteilungsverfahren anzeigen 27
umgesetzt
FA-13 Worklist Items zuteilen 27
umgesetzt
FA-14 Worklist Item favorisieren 27
umgesetzt
FA-15 Prozessinstanz anzeigen 27
umgesetzt
Mitarbeiter-Modul
FA-16 Mitarbeiter anzeigen 28
umgesetzt
FA-17 Mitarbeiter verwalten 28
umgesetzt
FA-18 Kalender anzeigen 28
umgesetzt
FA-19 Worklist Items zuteilen 28
umgesetzt
FA-20 Worklist zuweisen 28
umgesetzt
Statistik-Modul
FA-21 Logs anzeigen 28
umgesetzt
FA-22 Gesamtstatistiken anzeigen 28
umgesetzt
FA-23 Echtzeitstatistiken anzeigen 29
umgesetzt
FA-24 Dashboard anzeigen 29
umgesetzt
Tabelle 7.2: Anforderungsabgleich - Funktionale Anforderungen II
96
7.2 Nichtfunktionale Anforderungen
7.2 Nichtfunktionale Anforderungen
In Tabelle 7.3 werden die nichtfunktionalen Anforderungen dargestellt. Diese beschreiben
die Qualität des Systems.
Kürzel Bezeichnung Seite Status
NFA-01 Erwartungskonformität 29
umgesetzt
NFA-02 Benutzbarkeit 29
umgesetzt
NFA-03 Zuverlässigkeit 29
umgesetzt
NFA-04 Übertragbarkeit 29
umgesetzt
NFA-05 Verfügbarkeit 29
umgesetzt
NFA-06 Wartbarkeit 29
umgesetzt
NFA-07 Robustheit 30
umgesetzt
Tabelle 7.3: Anforderungsabgleich - Nichtfunktionale Anforderungen
97
8
Zusammenfassung und Ausblick
Abschließend wird in Abschnitt 8.1 ein Überblick über den vorgestellten Inhalt dieser
Arbeit gegeben. Zusätzlich wird ein Ausblick auf potentielle Erweiterungen und Zukunfts-
visionen der Anwendung in Abschnitt 8.2 folgen.
8.1 Zusammenfassung
Im Rahmen dieser Arbeit wurde eine Konzeption für eine webbasierte Anwendung
zur Unterstützung von Managern erarbeitet. Diese Anwendung soll Managern bei der
Zuteilung von Worklist Items unterstützen. Darüber hinaus wurden eine Vielzahl von
Funktionalitäten vorgestellt, um die Zuteilung möglichst effizient gestalten zu können.
Die Mitarbeiter- und Worklistverwaltung sowie Delegations- und Eskalationsbehandlung
sind hierfür wichtige Beispiele.
Um potentielle Fehler in diesem System ausschließen zu können, wurden zuerst beste-
hende Systeme überprüft. Die Erkenntnisse flossen dann in die Anforderungsanalyse
dieser Arbeit ein. Danach wurden Styleguides definiert, um eine einheitliche Struktur zu
schaffen. Anschließend wurden erste Grundideen anhand von Paper Mockups skizziert.
Auf Basis dieser Skizzen wurde schließlich die webbasierte Anwendung mithilfe des
In-
spinia Framework, welches auf Bootstrap,HTML,CSS, und JavaScript basiert, erstellt.
Abschließend wurde ein Anforderungsableich durchgeführt. Dabei wurde die Einhaltung
der definierten Anforderungen überprüft.
99
8 Zusammenfassung und Ausblick
8.2 Ausblick
Eine mögliche Erweiterung ist die Entwicklung einer Admin-Ansicht. In dieser sollen
die administrativen Funktionen des Systems gesteuert werden. Beispiele dafür sind die
Verwaltung von Managern, Freigabe von gesperrten Nutzer-Accounts und die Verwaltung
von Verteilungsverfahren. Demgegenüber sollen sie keinen Zugriff auf die Verteilung von
Worklist Items erhalten.
Des Weiteren soll eine automatisierte Datenübernahme in das System integriert werden.
Die Anwendung agiert in einem geschlossenen System im Unternahmen und ist nicht öf-
fentlich zugänglich. Die Mitarbeiter existieren bereits als Benutzer vorhandener Systeme.
Um die Bedienbarkeit effizienter zu gestalten, sollen über einen Button diese vorhan-
denen Stammdaten bei der Erstellung von Mitarbeitern in der konzipierten Anwendung
übernommen werden. Dadurch ist eine manuelle Eingabe nicht erforderlich.
Zudem soll der Nutzer eine Sprache auswählen können, welche bei der Nutzung der
Anwendung angezeigt wird. Die Mehrsprachigkeit bewirkt die Einsatzbereitschaft des
Systems auf internationaler Ebene.
Zusätzlich ist es denkbar ein Einstellungsmodul für die webbasierte Anwendung zu
definieren und konzipieren. Dabei soll der Nutzer diverse Einstellungen vornehmen
können und somit die Anwendung auf seine individuellen Bedürfnisse zuschneiden.
Mögliche Einstellungen sollen das Verhalten von Benachrichtigungen und das Einstellen
von auditiven sowie visuellen Rückmeldungen sein.
100
Literaturverzeichnis
[1]
Schallmo, D.R.: Digitale Transformation von Geschäftsmodellen. In: Jetzt digital
transformieren. Springer (2016) 3–8
[2]
Zhu, K., Dong, S., Xu, S.X., Kraemer, K.L.: Innovation diffusion in global
contexts
:
Determinants of post-adoption digital transformation of
European
companies.
European journal of information systems 15 (2006) 601–616
[3]
Matt, C., Hess, T., Benlian, A.: Digital Transformation Strategies. Business &
Information Systems Engineering 57 (2015) 339–343
[4]
Berman, S.J.: Digital transformation: opportunities to create new business models.
Strategy & Leadership 40 (2012) 16–24
[5]
etventure: Digitale Transformation. (
https://www.etventure.de/
digitale-transformation/) [Letzter Abruf: 12.09.2018].
[6]
etventure: Digitale Transformation: Trendreport 2018. (
https://www.
etventure.de/digitale-transformation/etventure_Studie_
2018-Trendreport.pdf) [Letzter Abruf: 16.09.2018].
[7]
Offergeld, M.: „Skript zur Vorlesung Usability Engineering, Universität Ulm “ (2015)
[8]
Mayhew, D.J.: Departments-Book Preview-The Usability Engineering Lifecycle: A
Practitioner’s Handbook for User Interface Design. Interactions-New York
6
(1999)
59–61
[9]
Reichert, Manfred and Weber, Barbara: Enabling Flexibility in Process-Aware
Information Systems: Challenges, Methods, Technologies. Springer Science &
Business Media (2012)
[10]
Dumas, Marlon and Van der Aalst, Wil M and Ter Hofstede, Arthur H: Process-Aware
Information Systems: Bridging People and Software Through Process Technology.
John Wiley & Sons (2005)
101
Literaturverzeichnis
[11]
Dumas, Marlon and La Rosa, Marcello and Mendling, Jan and Reijers, Hajo A and
others: Fundamentals of Business Process Management. Volume 1. Springer
(2013)
[12]
Pryss, Rüdiger: Robuste und kontextbezogene Ausführung mobiler Aktivitäten in
Prozessumgebungen. PhD thesis, Ulm University (2015)
[13]
Panzer, B.: Worklist 2.0–Konzepte und Lösungsvorschläge für eine kontextsensitive
Arbeitslistenverwaltung. Diploma thesis, Ulm University (2015)
[14]
Becker, J., zur Muehlen, M., Gille, M.: Workflow Application Architectures:
Classification
and Characteristics of Workflow-based Information Systems. Work-
flow handbook 2002 (2002) 39–50
[15]
Brown, R., Paik, H.y.: Resource-Centric Worklist Visualisation. In: OTM Confede-
rated International Conferences “On the Move to Meaningful Internet Systems“,
Springer (2005) 94–111
[16]
Hollingsworth, D., Hampshire, U.: Workflow Management Coalition: The Workflow
Reference Model. Document Number TC00-1003 19 (1995) 16
[17]
Weske, M.: Business Process Management Architectures. In: Business Process
Management. Springer (2012) 333–371
[18]
Opitz, R.: Konzeption und Entwurf einer Komponente für die Arbeitslistenverwaltung.
Masterarbeit an der Universität Ulm (2007)
[19]
Alfresco Software Inc.: Activiti: Open Source Business Automation. (
https:
//www.activiti.org/) [Letzter Abruf: 12.09.2018].
[20]
Camunda Services GmbH: Camunda BPM Open Source - Workflow and Decision
Automation Platform. (https://camunda.com/) [Letzter Abruf: 12.09.2018].
[21]
Red Hat Inc.: jBPM - Open Source Business Automation Toolkit. (
https://www.
jbpm.org/) [Letzter Abruf: 12.09.2018].
[22]
AristaFlow GmbH: BPM Suite. (
https://www.aristaflow.com/
) [Letzter
Abruf: 05.09.2018].
102
Literaturverzeichnis
[23]
Jakob Freund, Bernd Rücker, Thomas Henninger: Praxishandbuch BPMN. Carl
Hanser Verlag München (2010)
[24]
paladro: Blog: Alfresco Activiti 1.3. (
https://www.appnovation.com/blog/
alfresco-activiti-13) [Letzter Abruf: 12.09.2018].
[25]
Google Inc.: Google Fonts. (
https://fonts.google.com/
) [Letzter Abruf:
21.08.2018].
[26]
Twitter Inc.: Bootstrap - The most popular HTML, CSS, and JS library in the World.
(https://getbootstrap.com/) [Letzter Abruf: 22.08.2018].
[27]
Michael Stach and Tim Mohring and Rüdiger Pryss and Manfred Reichert: Towards
a Beacon-based
Situational
Prioritization Framework for Process-Aware Information
Systems. In: 15th
International
Conference on Mobile Systems and Pervasive
Computing (
MobiSPC
2018). Number 134 in Procedia Computer Science, Elsevier
Science (2018) 153–160
[28]
WebAppLayers: INSPINIA - Responsive Admin
Theme. (
https://wrapbootstrap.com/theme/
inspinia-responsive-admin-theme-WB0R5L90S
) [Letzter Abruf:
20.07.2018].
[29]
Brendan Eich: JavaScript. (
https://www.javascript.com/
) [Letzter Abruf:
30.08.2018].
[30]
World Wide Web Consortium (W3C): HTML. (
https://www.w3.org/html/
)
[Letzter Abruf: 30.08.2018].
[31]
World Wide Web Consortium (W3C): CSS. (
https://www.w3.org/Style/
CSS/Overview.de.html) [Letzter Abruf: 30.08.2018].
103
A Anhang
Abbildung A.2: Paper Mockup - Zuteilung I
Abbildung A.3: Paper Mockup - Zuteilung II
106
A.1 Paper Mockups
Abbildung A.4: Paper Mockup - Dashboard
107
A Anhang
Abbildung A.5: Paper Mockup - Mitarbeiter
Abbildung A.6: Paper Mockup - Kalender
108
A.1 Paper Mockups
Abbildung A.7: Paper Mockup - Statistik I
Abbildung A.8: Paper Mockup - Statistik II
109
A Anhang
Abbildung A.9: Paper Mockup - Statistik III
A.2 Finaler Entwurf
Abbildung A.10: Finaler Entwurf - Kalender Gesamtübersicht Woche
110
A.2 Finaler Entwurf
Abbildung A.11: Finaler Entwurf - Kalender Gesamtübersicht Tag
111
A Anhang
Abbildung A.12: Finaler Entwurf - Profildaten bearbeiten
Abbildung A.13: Finaler Entwurf - Passwort ändern
112
A.2 Finaler Entwurf
Abbildung A.14: Finaler Entwurf - Delegation Itemzuteilung Filter
Abbildung A.15: Finaler Entwurf - Nachrichtendetails Item
113
A Anhang
Abbildung A.16: Finaler Entwurf - Delegation Prozessmodell anzeigen
Abbildung A.17: Finaler Entwurf - Worklist Item beim Nachrichtenverfassen anhängen
114
A.2 Finaler Entwurf
Abbildung A.18: Finaler Entwurf - Worklistübersicht Sortieren
Abbildung A.19: Finaler Entwurf - Worklist löschen
115
A Anhang
Abbildung A.20: Finaler Entwurf - Worklist zuweisen
Abbildung A.21: Finaler Entwurf - Worklist bearbeiten
116
A.2 Finaler Entwurf
Abbildung A.22: Finaler Entwurf - Worklist Items Filterfunktion
Abbildung A.23: Finaler Entwurf - Worklist Items Sortierfunktion
117
A Anhang
Abbildung A.24: Finaler Entwurf - Worklist Items Zuteilung Error
Abbildung A.25: Finaler Entwurf - Favoriten Zuteilung
118
A.2 Finaler Entwurf
Abbildung A.26: Finaler Entwurf - Favoriten entfernen
Abbildung A.27: Finaler Entwurf - Mitarbeiter zuweisen
119
A Anhang
Abbildung A.28: Finaler Entwurf - Mitarbeiterkalender
120
A.2 Finaler Entwurf
Abbildung A.29: Finaler Entwurf - Auswertungen Logs Filterfunktion
Abbildung A.30: Finaler Entwurf - Auswertungen Vergleichsauswahl
121
A Anhang
Abbildung A.31: Finaler Entwurf - Echtzeitdaten Vergleich
Abbildung A.32: Finaler Entwurf - Logdaten Vergleich
122
Abbildungsverzeichnis
1.1 Stellenwert der digitalen Transformation in Unternehmen. Quelle: [6] . . . 2
3.1 Reportansicht des BPM System Activiti [24] . . . . . . . . . . . . . . . . . 12
3.2 Cockpitansicht des BPM System Camunda [20] . . . . . . . . . . . . . . . 13
3.3 Reportansicht des BPM System jBPM [21] . . . . . . . . . . . . . . . . . 14
3.4 Monitoringansicht des BPM System AristaFlow [22] . . . . . . . . . . . . 15
4.1 Anwendungsfalldiagramm des Account-Moduls . . . . . . . . . . . . . . . 19
4.2 Anwendungsfalldiagramm des Systemnachrichten-Moduls . . . . . . . . . 20
4.3 Anwendungsfalldiagramm des Zuteilung-Moduls . . . . . . . . . . . . . . 21
4.4 Anwendungsfalldiagramm des Mitarbeiter-Moduls . . . . . . . . . . . . . 22
4.5 Anwendungsfalldiagramm des Statistik-Moduls . . . . . . . . . . . . . . . 23
5.1 HTML-Überschriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.2 GUI-Komponente - Checkboxen . . . . . . . . . . . . . . . . . . . . . . . 34
5.3 GUI-Komponente - Radio-Buttons . . . . . . . . . . . . . . . . . . . . . . 35
5.4 GUI-Komponente - Textfelder . . . . . . . . . . . . . . . . . . . . . . . . . 36
5.5 GUI-Komponente - Textfelder . . . . . . . . . . . . . . . . . . . . . . . . . 38
5.6 GUI-Komponente - Tabelle . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.7 GUI-Komponente - Fortschrittsbalken . . . . . . . . . . . . . . . . . . . . 40
5.8 GUI-Komponente - Sekundäre Navigation . . . . . . . . . . . . . . . . . . 42
5.9 GUI-Komponente - Hauptnavigation . . . . . . . . . . . . . . . . . . . . . 43
5.10 GUI-Komponente - Breadcrumb . . . . . . . . . . . . . . . . . . . . . . . . 44
5.11 GUI-Komponente - Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . 45
5.12 GUI-Komponente - Dropdown-Button . . . . . . . . . . . . . . . . . . . . . 46
5.13 GUI-Komponente - Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.14 GUI-Komponente - Datumsauswahl . . . . . . . . . . . . . . . . . . . . . 47
5.15 GUI-Komponente - Diagramme . . . . . . . . . . . . . . . . . . . . . . . . 48
5.16 GUI-Komponente - Diagramme . . . . . . . . . . . . . . . . . . . . . . . . 49
123
Abbildungsverzeichnis
6.1 Übersicht Gesamtsystem [27] . . . . . . . . . . . . . . . . . . . . . . . . . 54
6.2 Dialogstruktur - Gesamtsystem . . . . . . . . . . . . . . . . . . . . . . . . 55
6.3 Dialogstruktur - Account-Modul . . . . . . . . . . . . . . . . . . . . . . . . 56
6.4 Dialogstruktur - Systemnachrichten-Modul . . . . . . . . . . . . . . . . . . 57
6.5 Dialogstruktur - Zuteilung-Modul . . . . . . . . . . . . . . . . . . . . . . . 58
6.6 Dialogstruktur - Mitarbeiter-Modul . . . . . . . . . . . . . . . . . . . . . . . 59
6.7 Dialogstruktur - Statistik-Modul . . . . . . . . . . . . . . . . . . . . . . . . 60
6.8 Paper Mockup - Statistik-Modul . . . . . . . . . . . . . . . . . . . . . . . . 61
6.9 Paper Mockup - Zuteilung-Modul . . . . . . . . . . . . . . . . . . . . . . . 62
6.10 Paper Mockup - Mitarbeiter-Modul . . . . . . . . . . . . . . . . . . . . . . 62
6.11 Finaler Entwurf - Anmelden . . . . . . . . . . . . . . . . . . . . . . . . . . 64
6.12 Finaler Entwurf - Ausgeklappter Menüpunkt der sekundären Navigation . 65
6.13 Finaler Entwurf - Tagesübersicht des Kalenders . . . . . . . . . . . . . . . 66
6.14 Finaler Entwurf - Gesamtübersicht des Kalenders . . . . . . . . . . . . . . 67
6.15 Finaler Entwurf - Übersicht der Profildaten . . . . . . . . . . . . . . . . . . 68
6.16 Finaler Entwurf - Modal Account sperren . . . . . . . . . . . . . . . . . . . 69
6.17 Finaler Entwurf - Profilbild hochladen . . . . . . . . . . . . . . . . . . . . . 69
6.18 Finaler Entwurf - Benachrichtigungen Übersicht . . . . . . . . . . . . . . . 70
6.19 Finaler Entwurf - Delegation Übersicht . . . . . . . . . . . . . . . . . . . . 71
6.20 Finaler Entwurf - Delegationsitem zuteilen . . . . . . . . . . . . . . . . . . 72
6.21 Finaler Entwurf - Delegationsitem zuteilen . . . . . . . . . . . . . . . . . . 73
6.22 Finaler Entwurf - Nachrichtenübersicht . . . . . . . . . . . . . . . . . . . . 74
6.23 Finaler Entwurf - Nachrichtendetails . . . . . . . . . . . . . . . . . . . . . 75
6.24 Finaler Entwurf - Nachrichten verfassen . . . . . . . . . . . . . . . . . . . 76
6.25 Finaler Entwurf - Nachrichten verfassen Items anhängen . . . . . . . . . . 76
6.26 Finaler Entwurf - Worklistübersicht . . . . . . . . . . . . . . . . . . . . . . 78
6.27 Finaler Entwurf - Neue Worklist erstellen . . . . . . . . . . . . . . . . . . . 78
6.28 Finaler Entwurf - Worklist Items Übersicht . . . . . . . . . . . . . . . . . . 80
6.29 Finaler Entwurf - Zuteilung einer Menge von Worklist Items . . . . . . . . 81
6.30
Finaler Entwurf - Meldung über erfolgreiche Zuteilung der Menge an
Worklist Items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
124
Abbildungsverzeichnis
6.31 Finaler Entwurf - Zuteilung einzelner Worklist Items . . . . . . . . . . . . . 82
6.32 Finaler Entwurf - Prozessmodell anzeigen . . . . . . . . . . . . . . . . . . 83
6.33 Finaler Entwurf - Verteilungsverfahren anzeigen . . . . . . . . . . . . . . . 83
6.34 Finaler Entwurf - Favorisierte Worklist Items anzeigen . . . . . . . . . . . 84
6.35 Finaler Entwurf - Mitarbeiterübersicht . . . . . . . . . . . . . . . . . . . . . 85
6.36 Finaler Entwurf - Mitarbeiter erstellen . . . . . . . . . . . . . . . . . . . . . 86
6.37 Finaler Entwurf - Mitarbeiter bearbeiten . . . . . . . . . . . . . . . . . . . 87
6.38 Finaler Entwurf - Mitarbeiter Nachricht senden . . . . . . . . . . . . . . . 88
6.39 Finaler Entwurf - Echtzeitdaten anzeigen . . . . . . . . . . . . . . . . . . . 89
6.40 Finaler Entwurf - Gesamtdaten anzeigen . . . . . . . . . . . . . . . . . . . 90
6.41 Finaler Entwurf - Logdaten anzeigen . . . . . . . . . . . . . . . . . . . . . 91
6.42 Finaler Entwurf - Vergleichsdaten anzeigen . . . . . . . . . . . . . . . . . 92
6.43 Finaler Entwurf - Dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . 93
A.1 Paper Mockup - Worklist . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
A.2 Paper Mockup - Zuteilung I . . . . . . . . . . . . . . . . . . . . . . . . . . 106
A.3 Paper Mockup - Zuteilung II . . . . . . . . . . . . . . . . . . . . . . . . . . 106
A.4 Paper Mockup - Dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . 107
A.5 Paper Mockup - Mitarbeiter . . . . . . . . . . . . . . . . . . . . . . . . . . 108
A.6 Paper Mockup - Kalender . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
A.7 Paper Mockup - Statistik I . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
A.8 Paper Mockup - Statistik II . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
A.9 Paper Mockup - Statistik III . . . . . . . . . . . . . . . . . . . . . . . . . . 110
A.10 Finaler Entwurf - Kalender Gesamtübersicht Woche . . . . . . . . . . . . 110
A.11 Finaler Entwurf - Kalender Gesamtübersicht Tag . . . . . . . . . . . . . . 111
A.12 Finaler Entwurf - Profildaten bearbeiten . . . . . . . . . . . . . . . . . . . 112
A.13 Finaler Entwurf - Passwort ändern . . . . . . . . . . . . . . . . . . . . . . 112
A.14 Finaler Entwurf - Delegation Itemzuteilung Filter . . . . . . . . . . . . . . 113
A.15 Finaler Entwurf - Nachrichtendetails Item . . . . . . . . . . . . . . . . . . 113
A.16 Finaler Entwurf - Delegation Prozessmodell anzeigen . . . . . . . . . . . 114
A.17 Finaler Entwurf - Worklist Item beim Nachrichtenverfassen anhängen . . 114
A.18 Finaler Entwurf - Worklistübersicht Sortieren . . . . . . . . . . . . . . . . 115
125
Abbildungsverzeichnis
A.19 Finaler Entwurf - Worklist löschen . . . . . . . . . . . . . . . . . . . . . . 115
A.20 Finaler Entwurf - Worklist zuweisen . . . . . . . . . . . . . . . . . . . . . . 116
A.21 Finaler Entwurf - Worklist bearbeiten . . . . . . . . . . . . . . . . . . . . . 116
A.22 Finaler Entwurf - Worklist Items Filterfunktion . . . . . . . . . . . . . . . . 117
A.23 Finaler Entwurf - Worklist Items Sortierfunktion . . . . . . . . . . . . . . . 117
A.24 Finaler Entwurf - Worklist Items Zuteilung Error . . . . . . . . . . . . . . . 118
A.25 Finaler Entwurf - Favoriten Zuteilung . . . . . . . . . . . . . . . . . . . . . 118
A.26 Finaler Entwurf - Favoriten entfernen . . . . . . . . . . . . . . . . . . . . . 119
A.27 Finaler Entwurf - Mitarbeiter zuweisen . . . . . . . . . . . . . . . . . . . . 119
A.28 Finaler Entwurf - Mitarbeiterkalender . . . . . . . . . . . . . . . . . . . . . 120
A.29 Finaler Entwurf - Auswertungen Logs Filterfunktion . . . . . . . . . . . . . 121
A.30 Finaler Entwurf - Auswertungen Vergleichsauswahl . . . . . . . . . . . . . 121
A.31 Finaler Entwurf - Echtzeitdaten Vergleich . . . . . . . . . . . . . . . . . . 122
A.32 Finaler Entwurf - Logdaten Vergleich . . . . . . . . . . . . . . . . . . . . . 122
126
Tabellenverzeichnis
4.1 Anforderungen I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.2 Anforderungen II . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.1 Farbkonzept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
7.1 Anforderungsabgleich - Funktionale Anforderungen I . . . . . . . . . . . . 95
7.2 Anforderungsabgleich - Funktionale Anforderungen II . . . . . . . . . . . 96
7.3 Anforderungsabgleich - Nichtfunktionale Anforderungen . . . . . . . . . . 97
127
Name: Johannes Schmid Matrikelnummer: 799452
Erklärung
Ich erkläre, dass ich die Arbeit selbstständig verfasst und keine anderen als die angege-
benen Quellen und Hilfsmittel verwendet habe.
Ulm,den .............................................................................
Johannes Schmid
