BACHELORARBEIT // THOMAS SOYTER Ein interaktiver Prototyp ...

BACHELORARBEIT // THOMAS SOYTER
Ein interaktiver Prototyp zum kollaborativen und kooperativen Überarbeiten
und Bewerten von Zeichnungen auf mobilen Endgeräten.

Thomas Soyter
Ein interaktiver Prototyp zum kollaborativen und kooperativen Überarbeiten
und Bewerten von Zeichnungen auf mobilen Endgeräten
Bachelorarbeit im Studiengang Informationsdesign

Hochschule der Medien Stuttgart
Fachbereich 3: Information und Kommunikation
Studiengang Informationsdesign
Ein interaktiver Prototyp zum kollaborativen und kooperativen Überarbeiten
und Bewerten von Zeichnungen auf mobilen Endgeräten
Bachelorarbeit eingereicht am 10. April 2012 von:
Thomas Soyter, Matrikel-Nr. 20130
1. Prüfer: Prof. Ralph Tille, HdM Stuttgart
2. Prüfer: Prof. Dr. Michael Burmester, HdM Stuttgart

EIDESSTATTLICHE VERSICHERUNG
Name: Soyter / Vorname: Thomas / Matrikel-Nr.: 20130 / Studiengang: Informationsdesign
Hiermit versichere ich, Thomas Soyter, an Eides statt, dass ich die vorliegende Bachelorarbeit mit dem Titel „SketchCoLab
– Ein interaktiver Prototyp zum kollaborativen und kooperativen Überarbeiten und Bewerten von Zeichnungen auf mobilen
Endgeräten“ selbständig und ohne fremde Hilfe verfasst und keine anderen als die angegebenen Hilfsmittel benutzt habe.
Die Stellen der Arbeit, die dem Wortlaut oder dem Sinne nach anderen Werken entnommen wurden, sind in jedem Fall unter
Angabe der Quelle kenntlich gemacht. Die Arbeit ist noch nicht veröffentlicht oder in anderer Form als Prüfungsleistung
vorgelegt worden.
Ich habe die Bedeutung der eidesstattlichen Versicherung und prüfungsrechtlichen Folgen (§ 26 Abs. 2 Bachelor-SPO bzw. §
19 Abs. 2 Master-SPO der Hochschule der Medien Stuttgart) sowie die strafrechtlichen Folgen (siehe unten) einer unrichtigen
oder unvollständigen eidesstattlichen Versicherung zur Kenntnis genommen.
Auszug aus dem Strafgesetzbuch (StGB):
§ 156 StGB Falsche Versicherung an Eides Statt
Wer von einer zur Abnahme einer Versicherung an Eides Statt zuständigen Behörde eine solche Versicherung falsch abgibt
oder unter Berufung auf eine solche Versicherung falsch aussagt, wird mit Freiheitsstrafe bis zu drei Jahren oder mit Geldstrafe
bestraft.
Ort, Datum Unterschrift
Eidesstattliche Versicherung
SketchCoLab
•••

•••
Schlagwörter
Kollaboratives Zeichnen,
kooperatives Zeichnen,
Prototyp, Tablet PC, Tablet
Computer, Überarbeitung
von Zeichnungen, Bewertung
von Zeichnungen,
SketchCoLab
ZUSAMMENFASSUNG
Gegenstand dieser Bachelorarbeit ist die Konzeption, Gestaltung sowie Umsetzung eines interaktiven Prototyps zur Unterstützung
der kollaborativen und kooperativen Zusammenarbeit beim Überarbeiten und Bewerten von Zeichnungen. Die
realisierte Anwendung SketchCoLab wurde dabei für den Einsatz auf mobilen Geräten, speziell der Geräteklasse Tablet
Computer konzipiert.
Ziel ist es, kollaborative und kooperative Möglichkeiten der Zusammenarbeit herauszuarbeiten, um Nutzer beim Gestalten
und Entwerfen in einer Gruppe optimal zu unterstützen. Der Schwerpunkt liegt dabei auf der Überarbeitung und Bewertung
von Zeichnungen als mögliche Teilaufgaben innerhalb des Gestaltungsprozesses und wie diese miteinander verbunden
werden können. Es werden praktische Ansätze und Werkzeuge aufgezeigt, die zur Überarbeitung und Bewertung von medialen
Inhalten geeignet sind und in SketchCoLab einfließen. Im Zuge der Entwicklung des Konzepts werden Potentiale der
Kollaboration und Kooperation in den digitalen Kontext übertragen und für den Einsatz auf mobilen Geräten betrachtet. Als
spezielle Geräteklasse wird die Eignung von Tablet Computern in Verbindung mit dem computergestützten Entwerfen für den
entwickelten Prototyp untersucht.
Die erarbeiteten Erkenntnisse sind in einen interaktiven Prototypen eingeflossen, der die wichtigsten Funktionen in Form einer
plattformunabhängigen Web-Applikation umfasst und in HTML5, JavaScript, PHP, MySQL und CSS umgesetzt wurde. Bei
der Realisation lag der Fokus auf der Entwicklung eines übersichtlichen Interfaces und funktionalen Interaktionsdesigns sowie
einer harmonischen Gestaltung.
SketchCoLab
Zusammenfassung

ABSTRACT
The subject of this bachelor thesis is the concept, design and implementation of an interactive prototype to support the collaborative
and cooperative revising and reviewing of drawings. The implemented application was designed for use on mobile
devices, especially tablet computers.
The goal is to work out collaborative and cooperative ways of working together and to support users in a group in designing
and drafting perfectly. The focus is on the review and evaluation of drawings as possible sub-tasks within the design process
and how they can be connected to each other. The thesis identifies practical approaches and tools that are appropriate for
review and evaluation of media content and which are integrated into SketchCoLab. In the course of the development of
the concept, collaboration and cooperation are transferred into digital context and for use on mobile devices. The analysis
examines the suitability of tablet computers, as a special class of device, in conjunction with computer-aided design for the
developed prototype.
The findings have been incorporated into an interactive prototype that includes the most important functions in a platformindependent
web application and which is put to practice by HTML5, JavaScript, PHP, MySQL and CSS. The focus was on
developing a clear interface and a functional and harmonious design.
Abstract
SketchCoLab
•••
Keywords
Collaborative Sketching,
Cooperative Sketching,
Prototype, Tablet PC, Tablet
Computer, Edit Sketches,
Evaluate Sketches,
SketchCoLab

INHALTSVERZEICHNIS
1 EINFÜHRUNG 1
2 THEORIE UND GRUNDLAGEN 5
2.1. Kollaboration und Kooperation .................................................................................................................. 6
2.1.1. Definitionen und Grundlagen .......................................................................................................... 6
2.1.2. E-Kollaboration und E-Kooperation ................................................................................................... 9
2.2. Computergestütztes kollaboratives und kooperatives Gestalten .................................................................... 23
2.2.1. Digitales und analoges Zeichnen ................................................................................................... 23
2.2.2. Praktische Ansätze zum gemeinsamen Überarbeiten von Zeichnungen ............................................... 27
2.2.3. Praktische Ansätze zum gemeinsamen Bewerten von Zeichnungen ..................................................... 38
2.3. Tablet PCs und Tablet Computer ............................................................................................................... 47
2.3.1. Definitionen, Geschichte und Entwicklung ....................................................................................... 47
2.3.2. Berührungsempfindliche Bildschirme ............................................................................................... 54
2.3.3. Tablet Computer als kollaboratives und kooperatives Gestaltungstool .................................................. 58
2.3.4. Das ASUS EeePad Transformer TF101 ............................................................................................ 60
3 KONZEPTION UND PRAKTISCHE UMSETZUNG 65
3.1. Grobkonzept ......................................................................................................................................... 66
3.1.1. Zielgruppenanalyse und –ansprache .............................................................................................. 66
3.1.2. Grundlegendes Prototypkonzept .................................................................................................... 73
3.2. Feinkonzept .......................................................................................................................................... 80
3.2.1. Informationsarchitektur ................................................................................................................. 80
3.2.2. Wireframes (Funktionslayout) ........................................................................................................ 83
3.2.3. Interaktionen ............................................................................................................................. 103
3.3. Gestaltungskonzept ............................................................................................................................. 107
3.3.1. Typografie ................................................................................................................................ 107
Inhaltsverzeichnis
SketchCoLab
•••

•••
SketchCoLab
3.3.2. Farben ..................................................................................................................................... 110
3.3.3. Icons und Symbole..................................................................................................................... 112
3.3.4. Mockups .................................................................................................................................. 115
3.4. Der Prototyp ....................................................................................................................................... 131
4 SCHLUSSBEMERKUNG 135
5 LITERATURVERZEICHNIS 137
6 ANHANG 145
Inhaltsverzeichnis

ABBILDUNGSVERZEICHNIS
Abbildung 1: Unterschied zwischen Kooperation und Kollaboration ......................................................................... 9
Abbildung 2: Einflüsse auf die Entstehung von CSCW und Groupware ................................................................... 10
Abbildung 3: Intensität des Informationsflusses innerhalb einer Gruppe ................................................................... 11
Abbildung 4: Zusammenhang zwischen CSCW und Groupware ........................................................................... 13
Abbildung 5: Raum-Zeit-Matrix in der ursprünglichen Form .................................................................................... 14
Abbildung 6: Erweiterte Raum-Zeit-Matrix (GRUDIN) ............................................................................................ 15
Abbildung 7: Erweiterte Raum-Zeit-Matrix (TEUFEL) ............................................................................................... 16
Abbildung 8: 3K-Modell ................................................................................................................................... 18
Abbildung 9: Potentiale von E-Kollaboration (in Unternehmen) ............................................................................... 22
Abbildung 10: Skitch Interface ........................................................................................................................... 28
Abbildung 11: iAnnotate - Annotation innerhalb Websites ..................................................................................... 29
Abbildung 12: Remarkz .................................................................................................................................... 29
Abbildung 13: u-Annotate ................................................................................................................................. 30
Abbildung 14: PhotoAnnotate............................................................................................................................ 30
Abbildung 15: TheCommentor ........................................................................................................................... 31
Abbildung 16: ConceptShare ............................................................................................................................ 31
Abbildung 17: Twiddla ..................................................................................................................................... 32
Abbildung 18: iAnnotate PDF ............................................................................................................................ 32
Abbildung 19: Multi-User Sketchpad .................................................................................................................. 33
Abbildung 20: ESP Game ................................................................................................................................. 40
Abbildungsverzeichnis
SketchCoLab
•••

•••
Abbildung 21: Sketcharoo ................................................................................................................................ 41
Abbildung 22: LabelMe .................................................................................................................................... 41
Abbildung 23: Buzzillions ................................................................................................................................. 42
Abbildung 24: Rate My Drawings ...................................................................................................................... 43
Abbildung 25: Flickr ......................................................................................................................................... 43
Abbildung 26: Beispiel eines Tablet PCs in der Bauform „Convertible“ (Dell Latitude) ................................................ 48
Abbildung 27: Das iPad als eines der bekanntesten „Slates“ ................................................................................. 49
Abbildung 28: UMPC mit Touchscreen und integrierten Tastaturelementen ............................................................... 50
Abbildung 29: Unterschiede und Merkmale von Tablet PCs und Tablet Computern .................................................... 50
Abbildung 30: Dynabook ................................................................................................................................. 51
Abbildung 31: GridPad .................................................................................................................................... 51
Abbildung 32: Apple Newton ........................................................................................................................... 52
Abbildung 33: PalmPilot ................................................................................................................................... 52
Abbildung 34: Wichtige Meilensteine der Tablet PCs und Tablet Computer .............................................................. 52
Abbildung 35: Entwicklung der Verkaufszahlen von Tablet Computern (weltweit) von 2010 bis 2011 ......................... 53
Abbildung 36: Erwartete Entwicklung der Verkaufszahlen von Tablet Computern (weltweit) in den nächsten Jahren ....... 53
Abbildung 37: Funktionsweise kapazitiver Touchscreens ....................................................................................... 55
Abbildung 38: Funktionsweise resistiver Touchscreens ........................................................................................... 55
Abbildung 39: PLATO IV ................................................................................................................................... 56
Abbildung 40: Touch-Tablet Bill Buxton ................................................................................................................ 56
Abbildung 41: IBM Simon ................................................................................................................................. 57
Abbildung 42: Microsoft Surface ....................................................................................................................... 57
SketchCoLab
Abbildungsverzeichnis

Abbildung 43: Historische Meilensteine der Multitouch-Technologie ........................................................................ 57
Abbildung 44: Iterativer Prozess im Kontext des Prototypen ................................................................................... 59
Abbildung 45: ASUS EeePad Transformer TF101 mit andockbarer Tastatur („hybride“ Bauform) ................................ 60
Abbildung 46: Ablauf des Scenario Based Development Prozesses ......................................................................... 71
Abbildung 47: Grobkonzept SketchCoLab ............................................................................................................ 74
Abbildung 48: Funktionslayout SketchCoLab ......................................................................................................... 75
Abbildung 49: Hierarchien einer Informationsarchitektur ........................................................................................ 80
Abbildung 50: Navigationsstrukturen .................................................................................................................. 81
Abbildung 51: Basisraster als Gestaltungsrichtlinie ................................................................................................ 85
Abbildung 52: Wireframe #1 - Grundaufbau ....................................................................................................... 86
Abbildung 53: Wireframe #2 - Werkzeugoptionen ............................................................................................... 87
Abbildung 54: Wireframe #3 - Projektauswahl ..................................................................................................... 88
Abbildung 55: Wireframe #4 - Wahl der Zeichnung ............................................................................................. 89
Abbildung 56: Wireframe #5 - Werkzeuge: Freiform-Stift ....................................................................................... 90
Abbildung 57: Wireframe #6 - Werkzeuge: Textwerkzeug ..................................................................................... 91
Abbildung 58: Wireframe #7 - Werkzeuge: Radiergummi ..................................................................................... 92
Abbildung 59: Wireframe #8 - Werkzeuge: Textmarker ......................................................................................... 93
Abbildung 60: Wireframe #9 - Workflow: Elemente skalieren und rotieren ............................................................... 94
Abbildung 61: Wireframe #10 - Elemente (nachträglich) verschieben ...................................................................... 95
Abbildung 62: Wireframe #11 - Workflow: Arbeitsfläche vergrößern und verschieben .............................................. 96
Abbildung 63: Wireframe #12 - Aktivitätspanel: Bewertungen einsehen und neue Bewertung vergeben ...................... 97
Abbildung 64: Wireframe #13 - Aktivitätspanel: Bestehende „Tags“ einsehen und neue „Tags“ vergeben .................... 98
Abbildungsverzeichnis
SketchCoLab
•••

•••
Abbildung 65: Wireframe #14 - Aktivitätspanel: Useraktivitäten einsehen ................................................................ 99
Abbildung 66: Wireframe #15 - Ansichtspanel: Bestehende Annotationsversionen einsehen und bearbeiten............... 100
Abbildung 67: Wireframe #16 - Zeichnung bewerten und kommentieren ............................................................... 101
Abbildung 68: Wireframe #17 - „Tags“ zu einer Zeichnung vergeben ................................................................... 102
Abbildung 69: Beispiele verankernder Gesten auf Touchscreens ........................................................................... 103
Abbildung 70: Touch-Interaktionen im Prototyp ................................................................................................... 105
Abbildung 71: Grundbegriffe der Typografie ..................................................................................................... 107
Abbildung 72: Im Prototyp eingesetzte Schriftart Roboto ...................................................................................... 109
Abbildung 73: Bunt-Unbunt-Kontrast in SketchCoLab ............................................................................................ 111
Abbildung 74: Qualitätskontrast in SketchCoLab ................................................................................................. 112
Abbildung 75: Hell-Dunkelkontrast in SketchCoLab .............................................................................................. 112
Abbildung 76: Icons SketchCoLab in der Grundversion ........................................................................................ 113
Abbildung 77: Icons SketchCoLab in der gestalteten Version ................................................................................ 113
Abbildung 78: Beispiele aktive und inaktive Werkzeugicons ................................................................................ 114
Abbildung 79: Symbolik zur Darstellung von Bewertungen ................................................................................... 114
Abbildung 80: Mockup #1 - Splashscreen ......................................................................................................... 116
Abbildung 81: Mockup #2 - Login-Fenster .......................................................................................................... 117
Abbildung 82: Mockup #3 - Oberfläche von SketchCoLab ................................................................................... 118
Abbildung 83: Mockup #4 - Aktivitätspanel ....................................................................................................... 119
Abbildung 84: Mockup #5 - Aktivitätspanel Bereich Gesamtbewertung ................................................................. 120
Abbildung 85: Mockup #6 - Aktivitätspanel Bereich Einzelbewertungen / Bewertungskommentare............................ 121
Abbildung 86: Mockup #7 - Chat-Werkzeug ...................................................................................................... 122
SketchCoLab
Abbildungsverzeichnis

Abbildung 87: Mockup #8 - Textwerkzeug ......................................................................................................... 123
Abbildung 88: Mockup #9 - Werkzeugoptionen: Strichstärke und Strichfarbe ......................................................... 124
Abbildung 89: Mockup #10 - Projektauswahl und Wahl der Zeichnung ................................................................. 125
Abbildung 90: Mockup #11 - Ansicht von Annotationsversionen ........................................................................... 126
Abbildung 91: Mockup #12 - Bewertungs-Fenster (reduzierte Variante) .................................................................. 127
Abbildung 92: Mockup #13 - Bewertungs-Fenster (erweiterte Variante) .................................................................. 128
Abbildung 93: Mockup #14 - Kommentar-Fenster ............................................................................................... 129
Abbildung 94: Mockup #15 - Popup-Fenster zur Kommentarabgabe ..................................................................... 130
Abbildungsverzeichnis
SketchCoLab
•••

TABELLENVERZEICHNIS
Tabelle 1: Überblick zu den Begriffen Kooperation, Koordination und Kollaboration ................................................... 8
Tabelle 2: Vor- und Nachteile von E-Kollaboration und E-Kooperation ...................................................................... 12
Tabelle 3: Vor- und Nachteile digitalen und analogen Zeichnens ............................................................................ 25
Tabelle 4: Mögliche Kernfunktionen / Features für das Überarbeiten (Annotation) von Zeichnungen innerhalb des
Prototyps ......................................................................................................................................................... 36
Tabelle 5: Mögliche Kernfunktionen / Features für das Bewerten von Zeichnungen innerhalb des Prototyps ................. 45
Tabelle 6: Gesten-Potential von Touchscreens ....................................................................................................... 54
Tabelle 7: Vor- und Nachteile kapazitiver und resistiver Touchscreens ...................................................................... 56
Tabelle 8: Überblick der technischen Daten des ASUS EeePad Transformer TF101 .................................................... 60
Tabelle 9: Merkmale einer Zielgruppe ................................................................................................................. 68
Tabelle 10: Eckdaten der Nutzungskontext-Analyse ............................................................................................... 69
Tabelle 11: Technische Daten zum entwickelten Prototyp ...................................................................................... 131
Tabelle 12: Überblick der Funktionen in SketchCoLab ........................................................................................... 133
Tabellenverzeichnis
SketchCoLab
•••

ABKÜRZUNGSVERZEICHNIS
CSS Cascading Style Sheets
CSS ist eine Auszeichnungssprache mit der (X)HTML- Dokumente formatiert werden können
HTML Hypertext Markup Language
HTML ist eine Markierungssprache zur Darstellung von Inhalten im World Wide Web (WWW)
PHP Hypertext Preprocessor
PHP ist eine serverseitige Skriptsprache zur dynamischen Erstellung von Webseiten
MySQL MY Sequential Query Language
MySQL ist ein frei verfügbares relationales Datenbanksystem
SBD Scenario-Based-Design
Abkürzungsverzeichnis
SketchCoLab
•••

01
EINFÜHRUNG

1 EINFÜHRUNG
Kollaboration und Kooperation als Möglichkeit, Lern-, Geschäfts-
oder Designprozesse zu optimieren, beschleunigen
und zu verbessern ist eine bereits seit vielen Jahren gängige
Strategie und hielt vor allem mit der Etablierung des
Internets immer mehr Einzug in den Bereich des computergestützten
Arbeitens. Mittlerweile zeigen viele Anwendungen
und Konzepte mit verschiedensten Ansätzen, in
welcher Form der Entwurfsprozess in gestalterischen Disziplinen
wie Interfacedesign, Datenvisualisierung, etc. durch
digitale Kollaboration und Kooperation unterstützt werden
kann. Eine Reihe von Anwendungen richtet primär den Fokus
auf den Teilaspekt des Zeichnens und weniger auf die
gemeinsame Überarbeitung und Bewertung. Vor allem die
Kombination der elektronischen Überarbeitung und Bewertung
von Zeichnungen in einer zentralen Anwendung wird
kaum abgedeckt.
Darüber hinaus sind viele der bestehenden Anwendungslösungen
im Bereich des kollaborativen Zeichnens
und der Evaluation vornehmlich auf die Nutzung über
Desktop-PCs ausgelegt und nicht für den Einsatz auf mobilen
Endgeräten. Es gibt einige Projekte, die Devices wie
Multitouch-Tische oder digitale Whiteboards mit mobilen
Geräten verbinden, jedoch spielen Tablet Computer als
ausschließliches Kollaborations- und Kooperationsgerät
bisher weniger eine Rolle. Vor allem für den Bereich des
digitalen Zeichnens bietet das immer mehr an Bedeutung
gewinnende Gerät Möglichkeiten, die Kollaboration und
Kooperation mittels computergestützter Systeme für den
Nutzer zu verbessern und intuitiver zu gestalten.
In der vorliegenden Arbeit wurde deshalb ein interakti-
ver Prototyp (SketchCoLab) entwickelt, der die Chancen und
Potentiale der kollaborativen und kooperativen Zusammenarbeit
in einer Gruppe mit den technischen Vorzügen eines
mobilen Geräts wie dem Tablet Computer kombiniert. Zentraler
Bestandteil der Anwendung ist die Überarbeitung und
Bewertung von Zeichnungen bzw. Scribbles (z. B. Icons,
Interfaces) zur Verbesserung des iterativen Gestaltungsprozesses.
Für die Umsetzung des Prototyps werden zunächst in
Kapitel 2 die theoretische Grundlagen zu den Themen
(elektronische) Kollaboration bzw. Kooperation und computergestütztes
Design sowie relevante Ansätze der Überarbeitung
und Bewertung von Zeichnungen betrachtet.
Ebenfalls wird die Geräteklasse der Tablet Computer und
Tablet PCs genauer vorgestellt und deren Potentiale als
kollaboratives und kooperatives Designtool erörtert. Die in
Kapitel 2 erarbeiteten Grundlagen fließen abschließend in
Kapitel 3 in die Konzeption und Realisierung sowie das
Interface-, Interaktions- und Gestaltungsdesign der Anwendung
ein.
Einführung
SketchCoLab
•••
1

02
THEORIE UND GRUNDLAGEN

2 THEORIE UND GRUNDLAGEN
Die nachfolgenden Kapitel sollen einen grundlegenden
Überblick zum Thema Kollaboration und Kooperation (Kapitel
2.1) schaffen. Zunächst wird in Kapitel 2.1.1 auf die
Bedeutung und Unterschiede der beiden Begrifflichkeiten
Kollaboration und Kooperation im allgemeinen Kontext
eingegangen wird. Darauf aufbauend werden die Begriffe
Kollaboration und Kooperation in Kapitel 2.1.2 um den
Gesichtspunkt der computergestützten Gruppenarbeit erweitert
und somit der Fokus auf das Thema E-Kollaboration
und E-Kooperation bzw. Computer Supported Collaborative
Work / Computer Supported Cooperative Work
(CSCW) gesetzt.
Der Aspekt in Kapitel 2.2 ist neben der Betrachtung
von computergestütztem, kollaborativen und kooperativen
Design als ein spezielles Anwendungsgebiet, auch der
Vergleich der Möglichkeiten des digitalen und analogen
Entwerfens (Kapitel 2.2.1). Darüber hinaus wird ein Überblick
über existierende Ansätze und Konzepte bezüglich
der Überarbeitung (Kapitel 2.2.2) und Bewertung (Kapitel
2.2.3) von Zeichnungen innerhalb des Designprozesses
aufgezeigt.
Abschließend erfolgt im Teil Theorie und Grundlagen in
Kapitel 2.3 eine kurze Einführung in die Welt der TabletPCs
und Tablet Computer, die für den in dieser Bachelorthesis
entwickelten Prototypen eine Rolle spielen. Beginnend mit
der Begriffsdefinition und dem Einstieg in die Historie und
Entwicklung (Kapitel 2.3.1) der TabletPCs und Tablet Computer,
erfolgt im Kapitel 2.3.2 ein kurzer Einblick in die
zugrundeliegende Touchscreen- und Multitouchtechnologie,
bevor in Kapitel 2.3.3 die Eignung von TabletPCs und
Tablet Computern als kollaboratives und kooperatives Designtool
erörtert wird . Abschließend wird in Kapitel 2.3.4
konkret auf das ASUS EeePad Transformer TF101 mit seinen
Spezifikationen eingegangen, das in dieser Arbeit als
Testgerät zur Verfügung stand.
Aufbauend auf den erarbeiteten theoretischen Grundlagen
erfolgt in den nachfolgenden Kapiteln die Übertragung
der Erkenntnisse auf die Konzeption und Gestaltung
der Anwendung SketchCoLab als interaktiver Prototyp zum
kollaborativen und kooperativen Überarbeiten und Bewerten
von Zeichnungen auf mobilen Endgeräten.
SketchCoLab
•••
5

6
•••
2.1. Kollaboration und Kooperation
Im sprachlichen Gebrauch werden Kollaboration und Kooperation
oft ohne Unterscheidung oder gar im selben Kontext
genutzt. Außerdem wird der Begriff der Kollaboration
häufig auf unterschiedliche, unzureichende oder, speziell
in der deutschen Sprache auch mit einer negativen Konnotation
(Kollaboration als Zusammenarbeit mit dem Feind)
(DUDEN, 2000, S. 555) verwendet.
Deshalb ist es für das grundlegende Verständnis wichtig,
sich zunächst der jeweiligen sprachlichen Bedeutung
sowie der Unterschiede zwischen den beiden Begriffen
klar zu werden.
2.1.1. Definitionen und Grundlagen
Es ist hilfreich die Semantik der beiden Wörter zu betrachten.
Die gemeinsame Vorsilbe „Kon-“ hat ihren Ursprung
im lateinischen Präfix „con-“ und wird mit den Begriffen
„mit“, „zusammen“ oder „nebeneinander“ übersetzt (DU-
DEN, 2012).
Dabei wird die Vorsilbe „Kon-“ zu „Ko-“ vor h und
Selbstlauten (Kooperation), zu „Kol-“ vor dem Buchstaben
l (Kollaboration), zu „Kom-“ vor b, m, und p und zu „Kor-“
vor einem r (WISSENMEDIA GMBH, 2012).
Das Präfix „Ko-“ drückt somit eine Beziehung zwischen
zwei Subjekten oder Objekten aus, die „miteinander“, „zusammen“
oder „gemeinsam“ handeln, bzw. etwas miteinander
zu tun haben (STOLLER-SCHAI, 2009, S. 34).
Die Wortstämme der beiden Begriffe weisen ähnliche
Bedeutungen auf. So wird Kollaboration vom lateinischen
SketchCoLab
2
Theorie und Grundlagen
Wort „laborare“ („sich anstrengen“, „abmühen“, „arbeiten“)
abgeleitet, Kooperation stammt vom lateinischen
Wort „operari“ („tätig sein“, „wirken“, „handeln“) (MAR-
QUARDT, VOIGT, 2009).
Es ist daher nachvollziehbar, dass die beiden Wörter
Kollaboration und Kooperation häufig gleichwertig bzw.
im selben Zusammenhang verwendet werden. Um weiter
zu differenzieren findet man in der Literatur einige Definitionen
und Ansätze, welche sowohl die Gemeinsamkeiten,
als auch die Unterschiede der beiden Begriffe genauer verdeutlichen.
Kooperation
ROSCHELLE & TEASLEY definieren die kooperative Arbeit
folgendermaßen:
„cooperative work accomplished by the division of labor
among participants, as an activity where each person is
responsible for a portion of the problem solving…”
(ROSCHELLE & TEASLEY, 1995, S. 70)
Daraus abgeleitet ist Kooperation primär gekennzeichnet
durch die Lösung von Aufgaben durch jeweils verschiedene
Aufgabenträger um ein gemeinsames übergeordnetes
Ziel zu erreichen. Entscheidend dabei ist, dass die zu realisierende
Gesamtaufgabe in unterschiedliche Teilaufgaben
gegliedert wird, für die jeweils eine bestimmte Person oder
eine Gruppe verantwortlich ist. Somit dienen die Aktivitäten
innerhalb einer Kooperation zwar einem Gesamtziel,
jedoch wird durch Arbeitsteilung dafür gesorgt, dass die
kooperierenden Personen oder Gruppen jeweils unterschiedliche
Aufgabenziele verfolgen.

Die Motivation für eine Kooperation ist die Aussicht ein
gemeinsames Ziel besser, leichter oder schneller zu erreichen,
als dies den jeweiligen Kooperationspartnern alleine
möglich wäre (STOLLER-SCHAI, 2009, S. 38).
Darüber hinaus zeichnet sich Kooperation meist durch
Beibehaltung der hierarchischen Strukturen und Befugnisse
der jeweiligen kooperierenden Partner, getrennte Handhabung
der Ressourcen und Austausch von Informationen nur
nach Bedarf aus (KVAN, 2000).
Kollaboration
Grundlegend unterscheidet sich der Ansatz der Kollaboration
von Kooperation dadurch, dass im Vorfeld keine
Arbeitsaufteilung stattfindet und alle Teilnehmer einer Kollaboration
gemeinsam eine oder mehrere Aufgaben bearbeiten.
Auch hier steht, noch deutlicher als bei der Kooperation,
der Aspekt des Erreichens eines gemeinsamen Ziels
im Vordergrund. ROSCHELLE & TEASLEY definieren Kollaboration
gegenüber Kooperation wie folgt:
„…collaboration as mutual engagement of participants
in a coordinated effort to solve the problem together.”
(ROSCHELLE & TEASLEY, 1995, S. 70)
Wichtig bei einer Kollaboration ist demnach auch das
wechselseitig beeinflussende und koordinierte Einbringen
der jeweiligen Kollaborationspartner im Sinne einer gemeinsamen
Problemlösung. Kollaboratives Arbeiten findet
in aller Regel heterarchisch statt, was eine mehr oder weniger
vollkommene Gleichberechtigung aller Teilnehmer bedeutet
und gegenüber der Kooperation Rechte und Pflichten
dynamisch durch den Kollaborationsprozess an sich
entstehen. Wie bei der Kooperation sind mögliche Gründe
für eine Kollaboration das schnelle, bessere und einfachere
Erreichen bestimmter Ziele.
STOLLER-SCHAI (2009, S. 36) erweitert die Motivation
dahingehend, dass Subjekte oder Objekte kollaborieren,
um etwas herzustellen oder um etwas zu erreichen, das
sie jeweils für sich getrennt betrachtet nicht selbst erreichen
könnten und bezeichnet dies als Emergenzeffekt. Währungen
für Emergenzeffekte sind beispielsweise „miteinander
Spass haben“, „mitgestalten können“, „vom Wissen der
anderen profitieren“.
Ähnlich, aber noch einen Schritt weiter bzw. individueller
betrachtet, schreibt MICHAEL SCHRAGE in Bezug auf
kollaborative Kreation in seinem Buch SHARED MINDS:
„...collaboration is the process of shared creation: two or
more individuals with complementary skills interacting to
create a shared understanding that none had previously
possessed or could have come to on their own. Collaboration
creates a shared meaning about a process, a
product, or an event. In this sense, there is nothing routine
about it. Something is there that wasn’t there before.”
(SCHRAGE, 1990, S. 40)
Damit lässt sich Kollaboration dahingehend erweitern,
dass durch den wechselseitigen und sich beeinflussenden
Prozess beim kollaborativen Arbeiten zwischen zwei oder
mehreren Teilnehmern mit sich ergänzenden Fähigkeiten
und Stärken, etwas komplett Neues (beispielsweise in Form
von gemeinsamem Verständnis) entsteht, was die jeweiligen
Individuen von sich aus alleine nicht besitzen oder erreicht
hätten.
Kollaboration und Kooperation
SketchCoLab
•••
Kooperieren
Eine gemeinsame Aufgabe wird
in Teilaufgaben gegliedert und
von verschiedenen Aufgabenträgern
erfüllt. Der Grad der individuellen
Arbeit ist hoch und das
Erreichen eines gemeinsamen
Ziels steht nicht zwangsläufig im
Vordergrund.
Kollaborieren
Zum Erreichen eines gemeinsamen
übergeordneten Ziels erfolgt
die gemeinsame Bearbeitung
einer oder mehrerer Aufgaben
durch die Teilnehmer einer
Gruppe in enger Zusammenarbeit.
Der Grad der individuellen
Arbeit ist dabei niedrig.
7

8
•••
Es zeigt sich somit, dass die Begriffe Kooperation und Kollaboration
beim genaueren Betrachten zwar unterschiedliche
Bedeutungen haben, es aber auch Gemeinsamkeiten
und Schnittpunkte gibt. Sowohl Kooperation als auch Kollaboration
dienen zum Erreichen eines gemeinsamen Ziels
und ergänzen sich darüber hinaus als Aktionsformen. So
müssen beispielsweise die innerhalb einer Kooperation erreichten
Teilaufgaben abschließend zu einer Gesamtlösung
zusammengeführt werden, was ohne kollaborative Prozesse
kaum denkbar ist. Im Gegensatz dazu, können aber
auch kooperative Maßnahmen den Kollaborationsprozess
erleichtern und entlasten (STOLLER-SCHAI, 2009, S. 38).
SketchCoLab
Kooperation Koordination Kollaboration
• Kurze Laufzeit • Längere Laufzeit • Langfristig
• Informelle Beziehungen • Mehr formelle Beziehungen • Tiefgreifende Beziehung
• Oft keine klar definierte Mission • Fokus auf einen speziellen Einsatz oder ein
Programm
2
Theorie und Grundlagen
Bei einer Kooperation ist jedoch der Fokus auf das gemeinsame
Ziel oder die gemeinsame Mission bei den Kooperationspartnern
als weniger ausgeprägt anzusehen, als bei
einer kollaborativen Zusammenarbeit. Abbildung 1 verdeutlicht
noch einmal die Unterschiede zwischen Kooperation
und Kollaboration auch hinsichtlich des stattfindenden
Informationsaustausches.
Während bei der Kollaboration gemeinsam an der
Erfüllung der gleichen Aufgabe gearbeitet wird und ein
wechselseitiger Informations- und Kommunikationsfluss bei
meist Gleichberechtigung der Teilnehmer stattfindet, verhält
es sich bei einer kooperativen Zusammenarbeit anders.
• Verpflichtung gegenüber einer gemeinsamen
Mission
• Keine definierte Struktur • Etwas Planung • Resultiert in einer neuen Struktur
• Kein Planungsbestreben • Offene Kommunikationskanäle • Umfangreiche Planung
• Partner teilen Informationen über das
Projekt soweit vorliegend
• Autorität wird immer noch von den
Individuen beibehalten
• Klar definierte Kommunikationskanäle auf
allen Ebenen
• Individuen behalten Autorität bei • Ressourcen werden geteilt • Kollaborative Struktur bestimmt Autoritäten
• Ressourcen werden seperat beibehalten • Ressourcen werden geteilt
• Kein Risiko • Größeres Risiko
• Geringe Intensität • Höhere Intensität
Fazit:
Informell, oft keine Definition gemeinsamer
Ziele. Kein gemeinsames Planen, Informationen
werden dann geteilt, wenn notwendig
Fazit:
Etwas Planung und Kommunikation wird benötigt
und dadurch ein engeres Arbeitsverhältnis
entwickelt
Tabelle 1: Überblick zu den Begriffen Kooperation, Koordination und Kollaboration
Darstellung nach AASL (1996)
Fazit:
Zusammen arbeiten, gemeinsame in Zusammenarbeit
entwickelte Verpflichtungen und
Ziele. Führung, Ressourcen, Risiken, Kontrolle
und Ergebnisse werden geteilt. Es wird mehr
vollbracht, als jeweils individuell erreicht
werden könnte

Dort ist der Informations- und Kommunikationsaustausch
in der Regel hierarchisch geprägt und ein mögliches gemeinsames
Ziel wird durch das jeweilige Abarbeiten der
Teilaufgaben erreicht (siehe auch Tabelle 1).
2.1.2. E-Kollaboration und E-Kooperation
In Zeiten der Globalisierung und der Flut an Informationen
hat sich die Art der Zusammenarbeit in Gruppen und
Teams nachhaltig geändert. Aufgrund der enormen sozialen
Veränderungen und der daraus entstandenen Herausforderungen
im Arbeitsumfeld, liegt der Schwerpunkt mehr
denn je auf der möglichst optimalen Zusammenarbeit von
Gruppen und räumlich verteilten Partnern. Gefördert wurde
dies durch die sich ständig weiterentwickelnden technologischen
Möglichkeiten, wie beispielsweise die Entwicklung
Gruppe 1
Teilnehmer 1
Teilnehmer 3
...
Gruppe X
Teilnehmer 1
Teilnehmer 3
Teilnehmer 2
Teilnehmer 2
Teilaufgabe
Teilziel
KOOPERATION
Teilaufgabe
Teilziel
Kommunikations- und Interaktionswege
Gesamtaufgabe
Ziel
Teilnehmer 1
Abbildung 1: Unterschied zwischen Kooperation und Kollaboration
Eigene Darstellung
von Großrechnern hin zu vernetzten Personal-Computern
und die damit einhergehende Entstehung lokaler Netzwerke
und des Internets. Ausgehend von dieser Entwicklung
beschreiben E-Kooperation und E-Kollaboration (Vorsilbe
„E-“ für elektronisch) die computergestützte, vernetzte
und somit dezentrale Zusammenarbeit innerhalb virtueller
Teams, in der Regel auf Internetbasis (TSCHANZ, SCHEI-
DEGGER, RÜEGSEGGER & SIEBER, 2003, S. 2).
Computer Supported Collaborative Work / Computer
Supported Cooperative Work (CSCW)
E-Kollaboration und E-Kooperation sind gleichzusetzen mit
den von PAUL CASHMAN und IRENE GREIF erstmalig bereits
1984 geprägten Bezeichnungen Computer Supported
Collaborative Work bzw. Computer Supported Cooperative
Work (CSCW).Nach HASENKAMP (1994, S. 15) befasst
sich das als interdisziplinäres Forschungsgebiet (u. a.
KOLLABORATION
gemeinsame
Aufgabe / Ziel
Teilnehmer 2
Teilnehmer 3 Teilnehmer 4
Kollaboration und Kooperation
SketchCoLab
•••
E-Kollaboration
und E-Kooperation
Die Begriffe sind gleichzusetzen
mit CSCW. Die Vorsilbe “E-„
bezeichnet die Übertragung der
Kommunikation und Handlung
innerhalb der Kollaboration und
Kooperation vom physischen in
den virtuellen Raum.
9

10
CSCW
•••
CSCW steht für Computer
Based Cooperative Work bzw.
Computer Based Collaborative
Work und ist ein interdisziplinäres
Forschungsgebiet, das sich
sowohl mit der Arbeit in einer
Gruppe, als auch mit der möglichst
optimalen Unterstützung
kollaborativer und kooperativer
Prozesse durch Computerunterstützung
beschäftigt.
Informatik, Soziologie, Psychologie) anzusehende CSCW
einerseits mit der Arbeit in der Gruppe und andererseits
mit der Computerunterstützung kooperativen bzw. kollaborativen
Arbeitens und Handelns. Das Ziel dabei ist neben
einem möglichst ganzheitlichen Verständnis für die Arbeitsprozesse
in Teams, die Effektivität und Effizienz von Grup-
SketchCoLab
Soziale Veränderungen
Flexibilisierung
Umstrukturierungen
Globalisierung
Neue Organisationsformen
Allianzen
Kollaborative
Arbeitsgruppen
Abbildung 2: Einflüsse auf die Entstehung von CSCW und Groupware
Darstellung nach JOHANSEN (1991)
2
Team
Theorie und Grundlagen
Team
Glasfaser
Mobile Endgeräte
Team
penarbeit durch den Einsatz von Informations- und Kommunikationstechnologien
zu verbessern.
JOHANSEN (1991) fasst die Einflüsse und Basis für das
Forschungsgebiet CSCW zusammen und unterteilt diese in
soziale und technologische Entwicklungen, die für die Entstehung
verantwortlich sind (siehe Abbildung 2).
Technologische Fortschritte
Groupware
Telefon
Multimedia
Glasfaser
PCs / Laptops
LANs

Kollaboration und Kooperation vs. E-Kollaboration
und E-Kooperation
Der entscheidende Unterschied zu den Begriffen Kollaboration
und Kooperation ist somit in der Übertragung der
Handlungen und Kommunikation vom physischen in den
virtuellen Raum zu sehen. Kommunikation dient innerhalb
des kollaborativen und kooperativen Arbeitens in einer
Gruppe zum Austausch von Informationen und ist ein zentraler
Bestandteil für Interaktionen. So unterscheidet sich
beispielsweise der Grad der Kommunikation je nach Intensität
der auszutauschenden Informationen. (BORGHOFF &
SCHLICHTER, 2000, S. 110) Wie Abbildung 3 zeigt, erfordern
vor allem Kooperation und Kollaboration gegenüber
anderen Phasen der Zusammenarbeit (Information, Koordination)
in einer Gruppe ein hohes Maß an Kommunikation,
da alle Beteiligten auf ein gemeinsames Ziel hinarbeiten.
Mit der Übertragung der Interaktionen und Kommunikation
auf computergestützte Systeme geht jedoch der
komplette oder teilweise Verlust von gestischen, mimischen
und sprachlichen Feinheiten sowie der Informationen zur
kulturellen und sozialen Orientierung einher. Dadurch entsteht
zunächst der Eindruck, dezentrale, computergestützte
Kollaboration und Kooperation kann im virtuellen Raum
nicht oder zumindest nicht zufriedenstellend funktionieren.
INFORMATION KOORDINATION KOOPERATION KOLLABORATION
gering Grad der Kommunikation in der Gruppe hoch
Abbildung 3: Intensität des Informationsflusses innerhalb einer Gruppe
Darstellung nach BORGHOFF & SCHLICHTER [2000]
Trotz der Komplexität, die kooperative und vor allem kollaborative
Handlungen mit sich bringen, und der daraus
resultierenden hohen Ansprüche an CSCW, kann die computervermittelte
Zusammenarbeit neben Problemen, auch
Chancen und neue Möglichkeiten bedeuten.
Diese ergeben sich aus der Übertragung der Interaktionen
in den virtuellen Raum und sind auch nur in diesem
Kontext möglich. So kann beispielsweise die nicht vorhandene
physische Präsenz der Gruppenmitglieder zu einer
erhöhten Kommunikations-Effizienz führen und somit zu
einem schnelleren, leichteren oder einfacheren Erreichen
des angestrebten Ziels. Auch können Arbeitsprozesse
durch computergestützte Kommunikation flexibler gestaltet
werden, sie ermöglichen die Archivierung von Kommunikationsabfolgen
oder erlauben die Anreicherung der Kommunikationsprozesse
durch zusätzliche Informationen, beispielsweise
durch visuelle Elemente wie Bilder und Videos
(STOLLER-SCHAI, 2009, S. 72 ff.).
Eine erweiterte Betrachtung der Probleme und Chancen
von Kommunikationshandlungen innerhalb computergestützter
Systeme zeigt Tabelle 2.
Kollaboration und Kooperation
SketchCoLab
•••
Informieren
Sehr geringe Form der Zusammenarbeit,
da Informationsaustausch
meist nur in einer Richtung
stattfindet und Absender
und Empfänger kaum Kontakt
haben.
Koordinieren
Absender und Empfänger stehen
in direktem Kontakt und stimmen
ihre Handlungen ab, beispielsweise
durch gemeinsame
Nutzung von Ressourcen.
11

12
•••
Groupware
Eine weitere von Greenberg stammende Definition zum
Thema CSCW zeigt, dass neben der Festlegung als
wissenschaftliche Disziplin der Begriff Groupware als ein
zusätzlicher Aspekt im Kontext der computergestützten
Arbeit auftaucht (siehe Abbildung 4).
„CSCW is the scientific discipline that motivates and
validates groupware design. It is study and theory of how
people work together, and how computer and related
technologies affect group behaviour.”
(GREENBERG, 1991, S. 1)
Erweitert man GREENBERGS Aussage durch JOHANSENS
Definition von Groupware, so versteht man darunter den
SketchCoLab
Probleme computervermittelter Kommunikation Chancen computervermittelter Kommunikation
• Große Unsicherheit bei Anfängern, die über keine oder wenige
Erfahrung im Umgang mit den neuen Medien haben
• Verlust der „Orientierung“ innerhalb des virtuellen Raums möglich,
da physischer Kontext fehlt. Kann z. B. zu dissozialem Verhalten
führen
• Anonymität und fehlender sozialer Kontext können zu einem falschen
kommunikativen Verhalten, z. B. Verlust der Höflichkeit führen
• Mögliche Überreaktion auf schriftliche Äußerungen, da z. B.
gestische und mimische Zusatzinformationen fehlen
• Schwierig im virtuellen Raum zusammen produktiv zu sein und z. B.
sinnvolle Entscheidungen effektiv zu treffen
Tabelle 2: Vor- und Nachteile von E-Kollaboration und E-Kooperation
Eigene Darstellung nach STOLLER-SCHAI (2009, S. 73 ff.)
2
Theorie und Grundlagen
„allgemeinen Begriff für spezielle computerbasierte Hilfe,
die für den Einsatz innerhalb kollaborativer Arbeitsgruppen
gestaltet wurde“. Dabei kann „Groupware Software,
Hardware, Dienste und/oder Unterstützung für Gruppenprozesse
beinhalten“ (JOHANSEN, 1988, S. 1, Übers.
THOMAS SOYTER).
Groupware (auch CSCW-System genannt) soll demnach
die computerbasierte kollaborative und kooperative
Zusammenarbeit innerhalb von Teams erleichtern und beim
Erreichen gemeinsamer Ziele helfen. Dies wird in der von
ELLIS, GIBBS & REIN zusammenfassenden Betrachtung unterstützt
und hinsichtlich eines Interfaces für eine gemeinsame
Arbeitsumgebung erweitert wird:
• Kommunikation im virtuellen Raum ist oft persönlicher und ehrlicher
• Lern- und Arbeitsprozesse können mit Hilfe computerunterstützter
Kommunikation flexibler gestaltet werden
• Das Digitalisieren von Kommunikationsabfolgen ermöglicht die
Archivierung und erleichtert die Suche nach relevanten Informationen
- Vorgänge können in Form von Video, Audio, etc. angereichert
werden
• Mehr Zeit zum Überlegen und zur Reflexion bei asynchronen
Kommunikationsabfolgen, da keine sofortige Reaktion erfolgen muss
• Inhalte können gleichzeitig während des Kommunikationsprozesses
dargestellt, diskutiert und überprüft werden
• Durch Wegfallen des Aufwands für die physische Präsenz, kann die
Kommunikation effektiver werden, da vermehrt eine Konzentration
auf die Inhalte erfolgt

„Groupware are computer-based systems that support
groups of people engaged in a common task (or goal)
and that provide an interface to a shared environment.“
ELLIS, GIBBS & REIN (1991)
Klassifikationen von Groupware
Aufgabe der meist softwarebasierten technischen Systeme
respektive Groupware ist es den Aspekt der Gruppenarbeit
neu zu gestalten, sowie die Interaktion zwischen Nutzern
im virtuellen Raum zu fördern und zu koordinieren. Dabei
ergeben sich verschiedene Ansätze zur Einteilung der
computerunterstützten Gruppenarbeit und der verwendeten
Werkzeuge. Eine Möglichkeit ist, die Werkzeuge nach
Wirtschaftswissenschaften
Informatik
Soziologie
Arbeitswissenschaften
Organisationswissenschaften
CSCW
Groupware / CSCW-Systeme
Wirtschaftsinformatik
Abbildung 4: Zusammenhang zwischen CSCW und Groupware
Eigene Darstellung
der Form der Interaktion zwischen Benutzern im Hinblick
auf Zeit und Raum zu unterscheiden. Eine weitere in der
klassischen Literatur vorgenommene Einteilung orientiert
sich am Grad der Unterstützung in Bezug auf die Bereiche
Kommunikation, Koordination und Kooperation. Die Klassifizierung
nach funktionsorientierten Anwendungsbereichen
stellt ebenfalls eine oft genannte Methode der Einteilung
von CSCW-Systemen dar. Im Folgenden sollen die genannten
Ansätze exemplarisch vorgestellt werden, um sowohl
einen Überblick über wichtige Aspekte und Eigenschaften
von Groupware bzw. Groupware-Werkzeugen zu erhalten,
als auch über einen Eindruck bezüglich der Herausforderungen,
die an solche CSCW-Systeme gestellt werden.
Anthropologie
Psychologie
Ethnographie
Kollaboration und Kooperation
SketchCoLab
•••
Groupware
Groupware, auch CSCW-
Systeme genannt, dienen zur
Unterstützung computerbasierter
Kollaboration und Kooperation.
Primär handelt es sich um
Software-Lösungen - aber auch
Hardware, Dienste oder andere
den Gruppenprozess unterstützende
Systeme fallen unter den
Begriff Groupware.
13

14
•••
Raum-Zeit-Taxonomie
Die Unterscheidung von CSCW-Systemen hinsichtlich des
Einsatzes innerhalb von Zeit und Raum wurde von ROBERT
JOHANSEN geprägt. Er entwickelte eine zweidimensionale
Matrix, in der die Werkzeuge zur computergestützten
Arbeit in „synchron“ und „asynchron“ bzw. „räumlich
räumliche
Ko-Präsenz
fehlende räumliche
Ko-Präsenz
Abbildung 5: Raum-Zeit-Matrix in der ursprünglichen Form
Darstellung nach JOHANSEN (1988, S.44)
SketchCoLab
Raum
2
zeitgleich / synchron
• Elektronische Meeting-Systeme
• Face-to-face-Kommunikation
• Wahlsysteme
• Präsentationsunterstützung
• Sitzungsraum
• Video-Konferenz
• Gemeinsam genutzte Whiteboords
• Text-Chat
• Gemeinsame genutzte Anwendungen
• Telefongespräch
Theorie und Grundlagen
Zeit
entfernt“ und „an einem Ort“ kategorisierte. Während
bei synchroner Interaktion bzw. Kommunikation (z. B. per
Chat-System) Benutzer mittels CSCW-Werkzeugen eine gemeinsame
Aufgabe oder Tätigkeit gleichzeitig bearbeiten,
sind asynchrone Interaktionen (z. B. per Email) geprägt
durch die zeitversetzte Zusammenarbeit und Kommunika-
• Elektronische Meeting-Systeme
• E-Mail
• Gemeinsam genutzte Dateien
• Elektronische Bulletin Boards
• Diskussionsdatenbanken
• Workflow-Systeme
• Gruppenkalender
• Geteilte PC-Arbeitsplätze
• Brief
• Fax
• Anrufbeantworter
• E-Mail
• News-Groups
zeitversetzt / asynchron

tion von Nutzern. Neben dem zeitlichen Aspekt wird darüber
hinaus bezüglich der physischen Präsenz der Mitglieder
einer Gruppe unterschieden, also ob sie sich in einem
Raum befinden oder voneinander entfernt sind (JOHAN-
SEN, 1988, S.44).
Abbildung 5 zeigt diese Raum-Zeit-Matrix und gibt einen
Überblick über die Kategorisierung verschiedener Interaktionsformen
und Groupware-Werkzeuge.
Die zeitliche und räumliche Einteilung ist eine zwar oft
genutzte und einfache Klassifizierungsmethode von CSCW-
Systemen, die jedoch durchaus Schwachstellen und Probleme
aufwirft. Einerseits ist es mittlerweile dank der rasanten
Entwicklung der Kommunikationstechnologien nicht mehr
so wichtig, wo und wann die Anwendung der Groupware
erfolgt, da durch die räumlich und zeitlich unabhängige
gleicher Ort
verschiedener Ort,
vorhersehbar
verschiedener Ort,
nicht vorhersehbar
Raum
gleich (synchron)
• Face-to-face-Kommunikation
• Sitzungsraum
• Video-Konferenz
Abbildung 6: Erweiterte Raum-Zeit-Matrix (GRUDIN)
Darstellung nach GRUDIN (1994)
verschieden (asynchron),
vorhersehbar
Zeit
• Organisation von
Schichtarbeit
• Mobilfunkkonferenz • Asynchrone rechnergestützte
Konferenz
Nutzung des Internets orts- und zeitbezogene Grenzen
verschwinden. Andererseits ist die Raum-Zeit-Matrix nicht
als starre Ein- und Abgrenzung geeignet. So können viele
Groupware-Werkzeuge innerhalb der Matrix mehrfach
oder aber auch schwer bzw. gar nicht eingeordnet werden
(BORGHOFF & SCHLICHTER, 2000, S. 119).
Die von JOHANSEN entwickelte Raum-Zeit-Matrix wurde
deshalb von JONATHAN GRUDIN (1994) durch den
zusätzlichen Aspekt der „Vorhersehbarkeit“ erweitert (siehe
Abbildung 6). Durch die Punkte „vorhersehbar“ bzw.
„nicht vorhersehbar“ soll eine Kategorisierung von im Vorfeld
bezüglich Raum oder Zeit nicht definierbaren Systemen
möglich gemacht werden. Dennoch können auch bei
dieser Matrix, Systeme mehr als einer Kategorie zugeordnet
werden, was eine exakte Abgrenzung der einzelnen
verschieden (asynchron),
nicht vorhersehbar
• Schwarzes Brett
• E-Mail • Kooperatives Schreiben
via Draft Passing
• Vorgangsbearbeitung
Kollaboration und Kooperation
SketchCoLab
•••
Raum-Zeit-Matrix
Modell zur Klassifikation von
Groupware, bei dem die
Groupware-Systeme hinsichtlich
der Faktoren Zeit (zeitgleich
oder zeitlich versetzt) und Raum
(räumlich nah und räumlich
entfernt) eingeordnet werden.
15

16
•••
Synchrone
Kollaboration / Kooperation
Zeitgleiche kollaborative und
kooperative Zusammenarbeit
innerhalb einer Gruppe (z. B.
mittels Chat).
Asynchrone
Kollaboration / Kooperation
Zeitversetzte kollaborative und
kooperative Zusammenarbeit
innerhalb einer Gruppe (z. B.
mittels Email).
Werkzeuge und Systeme zum Teil verhindert.
Eine weniger starre Einteilung bietet dagegen die von
TEUFEL, SAUTER, MÜHLHERR & BAUKNECHT (1995, S.
25) angepasste Raum-Zeit-Matrix von JOHANSEN (siehe
Abbildung 7). Anhand der Gruppeneditoren (mehrere Nutzer
arbeiten an einem Dokument oder Objekt) sieht man
bei dieser Form der Kategorisierung beispielsweise, dass
Systeme innerhalb der Matrix keine eindeutige Zuordnung
asynchron
synchron
Zeit
Abbildung 7: Erweiterte Raum-Zeit-Matrix (TEUFEL)
Darstellung nach TEUFEL, SAUTER, MÜHLHERR & BAUKNECHT (1995, S. 25)
SketchCoLab
verteilte
Hypertext-Systeme
2
Workflow Management-Systeme
Sitzungs- und
Entscheidungsunterstützungs-Systeme
Gruppeneditoren
Theorie und Grundlagen
elektronische
Post-Systeme
spez. Datenbanken
spez. Planungs-Systeme
aufweisen müssen. So gibt es Gruppeneditoren, mit denen
Nutzer gleichzeitig an einem Dokument (synchron) arbeiten
können und andere Editoren, die die teilnehmenden
Nutzer über Änderungen benachrichtigen, jedoch nicht in
Realzeit (asynchron). Wichtig ist demnach, dass die Einteilung
innerhalb der Matrix dynamisch gesehen werden
kann und Groupware-Systeme zwischen den Schnittstellen
bzw. innerhalb aller Segmente agieren sollten, da gerade
Bulletin Board-Systeme
Video- bzw.
Desktop-Konferenzen
benachbart entfernt
Raum

das den Einsatz von Groupware notwendig und interessant
macht (JOHANSEN, 1991).
Überträgt man zusammenfassend die Aspekte der
Raum-Zeit-Taxonomie auf Systeme für computergestützte
Kooperation und Kollaboration zeigt sich, dass Groupware-Werkzeuge
zur Unterstützung am gleichen Ort zur gleichen
Zeit, am gleichen Ort zu unterschiedlicher Zeit, sowie
an unterschiedlichen Orten zu gleicher Zeit und an unterschiedlichen
Orten zu unterschiedlicher Zeit zur Verfügung
gestellt werden. Anspruch von Groupware-Systemen sollte
es sein, alle vier Quadranten der Matrix abzudecken und
somit sowohl synchron und asynchron, als auch lokal und
verteilt benutzbar zu sein (ELLIS et al., 1991).
3K-Modell
Eine weitere Möglichkeit der Klassifizierung von CSCW-
Systemen greift den bereits genannten Intensitätsgrad der
stattfinden Interaktionen innerhalb einer Gruppe auf. Beim
3K-Modell (siehe Abbildung 8) wird allgemein zwischen
den drei Bereichen Kommunikation, Koordination und Kooperation
unterschieden. Verteilt nutzbare Werkzeuge werden
danach kategorisiert, in welchem Ausmaß sie jeweils
diese Bereiche unterstützen (TEUFEL et al., 1995, S. 27 f.).
Der Punkt Kooperation ist innerhalb dieses Dreiecks durch
Kollaboration erweiterbar bzw. austauschbar.
Darüber hinaus definieren TEUFEL et al. die sich überschneidenden
Systemklassen Kommunikation, gemeinsame
Informationsräume sowie Workflow Management und
Workgroup Computing, um eine Zusammenfassung von
CSCW-Systemen zu ermöglichen.
Die Systemklasse Kommunikation dient dem Austausch
von Informationen durch das Überwinden von Zeit- und
Raumunterschieden. Ebenfalls, wie in der bereits dargestellten
Raum-Zeit-Matrix, werden die Werkzeuge einer Groupware
somit auch hinsichtlich synchroner und asynchroner
Aspekte beleuchtet. Systeme der Klasse gemeinsame Informationsräume
unterstützen den Informationsaustausch
innerhalb der Gruppe, während die weitere Systemklasse
Workflow Management Werkzeuge zur Gruppenkoordination
zur Verfügung stellt. Ziel der Systeme der Klasse Workgroup
Computing ist eine möglichst optimale Kooperation
und Kollaboration der Gruppenmitglieder zu erreichen.
Kommunikationsorientierte Werkzeuge (z. B. Chat, E-
Mail) dienen dem möglichst zeitnahen und verlässlichen
Austausch von Informationen und stellen somit den Grundstein
für die Zusammenarbeit in einer Gruppe dar. Ziel der
Koordinationswerkzeuge (z. B. Termin- und Ressourcenplanung)
ist es, kooperative und kollaborative Gruppenprozesse
möglichst effizient zu planen, während Werkzeuge
zu Kooperations- und auch Kollaborationszwecken (z. B.
Gruppeneditoren, elektronische Sitzungsräume) dazu dienen,
gemeinsame Ziele möglichst effizient zu erreichen.
Auch hier können die Werkzeuge hinsichtlich asynchron
und synchron unterschieden werden, sind jedoch im Gegensatz
zur Raum-Zeit-Matrix nach JOHANSEN keiner
starren Einordnung innerhalb der Matrixfelder unterworfen.
Beispielsweise ist bei Gruppeneditoren eine zeitgleiche
und / oder zeitversetzte Arbeit an einem Objekt möglich,
die eine unflexible Kategorisierung wenig sinnvoll und
nicht möglich macht (TEUFEL et al., 1995, S. 27 f.).
Anwendungsorientierte Klassen
Abschließend gilt es noch, die ebenfalls oft genannte Einteilung
von CSCW-Systemen nach ELLIS et al. (1991) zu
Kollaboration und Kooperation
SketchCoLab
•••
3K-Modell
Möglichkeit der Klassifikation
von Groupware durch Betrachtung
des Intensitätsgrades der
vorhandenen Interaktionen
innerhalb einer Gruppe. Die drei
Bereiche die zur Kategorisierung
innerhalb des 3K-Dreiecks
dienen, sind Kommunikation,
Koordination und Kooperation
(bzw. Kollaboration).
17

18
•••
ennen. Hier werden CSCW-Systeme in die verschiedenen
Anwendungsklassen Nachrichtensysteme, Gruppeneditoren,
elektronische Sitzungsräume, Computer-Konferenzen,
gemeinsame Informationsräume, intelligente Agenten und
Koordinationssysteme unterteilt.
Nachrichtensysteme ermöglichen die Kommunikation
zwischen Nutzern auf elektronischer Basis (z. B. Email).
SketchCoLab
Koordination
2
Workflow-
Management-
Werkzeuge
Abbildung 8: 3K-Modell
Darstellung nach TEUFEL et al. (1995, S. 27)
spez.
Datenbanken
Theorie und Grundlagen
Kommunikation
E-Mail
Planungssysteme
Videokonferenz-
Systeme
Bulletin-
Board-
Systeme
verteilte
Hypertext-
Systeme
EntscheidungsundSitzungsunterstützungssysteme
Gruppen-
Editoren
Gruppeneditoren erlauben das synchrone bzw. asynchrone
Bearbeiten von Objekten, z.B. Dokumenten. Die elektronischen
Sitzungsräume bieten durch das Sammeln von
beispielsweise Informationen, Arbeitsbereiche zur Unterstützung
von Entscheidungen innerhalb der Gruppe an.
Computer-Konferenzen stellen synchrone und asynchrone
Plattformen für Video-, Audio- und Textkonferenzen dar.
Systemklasse
Kommunikation
gemeinsame
Informationsräume
Workflow-
Management
Workgroup-
Computing
Kooperation

Die gemeinsamen Informationsräume ermöglichen die gemeinsame
Verwaltung bzw. den gemeinsamen Zugriff auf
Informationen. Intelligente Agenten sind meist autonom
agierende Programme innerhalb der Groupware, die für
den Nutzer spezielle Aufgaben erledigen (z.B. Protokollierung).
Koordinationssysteme bilden Aufgaben zur Koordination
von Aktivitäten innerhalb der Gruppe ab, um ein
gemeinsames Ziel zu erreichen.
Diese Art der Einteilung ermöglicht aufgrund des Praxisbezuges
eine einfache Form der Kategorisierung, hat
jedoch ebenfalls das Problem, dass Systeme teilweise auch
mehrfach zugeordnet werden können. Z. B. ist es denkbar,
dass Gruppeneditoren auch Nachrichtensysteme beinhalten
und somit eine redundanzfreie Zuordnung innerhalb
der anwendungsorientierten Klassen schwierig wird. Außerdem
besteht das Problem der Aktualität, da Anwendungsklassen
mit der Zeit verschwinden oder dazukommen
könnten (BORGHOFF & SCHLICHTER, 2000, S. 119 ff.).
„Awareness“
CSCW-Systeme zu Unterstützung von computergestützter
kooperativer bzw. kollaborativer Arbeit erfüllen neben der
Darstellung der eigentlichen Aufgabe eine weitere wichtige
Funktion, den sogenannten Aspekt der „Awareness“.
Damit wird das Bewusstsein der Nutzer bezüglich anderer
am Geschehen beteiligter Gruppenmitglieder innerhalb
der Groupware bezeichnet (auch „User Awareness“
bzw. „Group Awareness“ genannt). DOURISH & BELLOTTI
(1992) definieren „Group Awareness” wie folgt:
“Group Awareness is as an understanding of the activities
of others which provides a context for own activity.”
(DOURISH & BELLOTTI, 1992)
Die Mechanismen der „Awareness“ spielen vor allem bei
der synchronen computergestützten Kollaboration und Kooperation
eine wichtige Rolle. Ein Instrument der „User
Awareness“ bzw. „Group Awareness“ sind beispielsweise
Benutzerlisten innerhalb von Chat-Programmen, bei denen
sichtbar ist, wer sich im Moment im Chatraum befindet und
wer nicht.
Laut GREENBERG, GUTWIN & COCKBURN (1996)
sind verschiedene Arten der „Awareness“ zu unterscheiden,
auf die kurz eingegangen werden soll, da sie einen
wichtigen Bestandteil einer Groupware und des kollaborativen
und kooperativen Arbeitens ausmachen:
„Informal Awareness“ beschreibt ähnlich dem bereits
genannten Begriff „User Awareness“, das Bewusstsein darüber,
welche Gruppenmitglieder derzeit anwesend sind,
ob sie verfügbar oder beschäftigt sind und ggf. mit welcher
Aktivität sie beschäftigt sind.
„Social Awareness“ ist das Bewusstsein über Informationen,
die eine Person über andere im Groupware-System
teilnehmende Nutzer in einem sozialen und dialogorientierten
Kontext erhält, beispielsweise in welchem emotionalen
Zustand eine Person ist oder welche Interessen sie hat.
„Social Awareness“ bedeutet aber auch sich darüber im
Klaren zu sein, was man von anderen Gruppenmitgliedern
erwarten kann und welche Rolle, Stärken und Fähigkeiten
jeder innerhalb einer Gruppe hat (GUTWIN, STARK &
GREENBERG, 1995).
„Structural Awareness“ ist eine Art des „Gewahrseins“
Kollaboration und Kooperation
SketchCoLab
•••
Anwendungs-
orientierte Klassen
Sie erlauben eine praxisnahe
Kategorisierung durch definierte
Anwendungsbereiche in Form
von Nachrichtensystemen,
Gruppeneditoren, elektronische
Sitzungsräumen, Computer-
Konferenzen, Gemeinsamen
Informationsräumen, Intelligenten
Agenten und Koordinationssystemen.
19

20
•••
Awareness
Der Begriff bezeichnet das
“Gewahrsein” bzw. Bewusstsein
bezüglich anderer am Gruppenprozess
beteiligter Mitglieder.
Awareness wird durch Informationen
über beispielsweise
Aufgaben, Ziele, räumliche
Präsenz, Pflichten oder aktuelle
Tätigkeit der Gruppenmitglieder
definiert.
darüber, wie die Strukturen und Prozesse innerhalb einer
Gruppe aussehen und welche Rolle und Verantwortlichkeit
den jeweiligen Gruppenmitgliedern zuzuordnen ist. Darüber
hinaus bedeutet „Structural Awareness“:
„... awareness (that) involves knowledge about such
things as people’s roles and responsibilities, their positions
on an issue, their status, and group processes.“
(GREENBERG et al., 1996)
Demnach gehören Informationen über die Einstellung der
Gruppenmitglieder bezüglich eines Themas oder Problems
genauso dazu, wie das Bewusstsein gegenüber dem eigenen
Status oder bestimmten Abläufen innerhalb der Gruppenarbeit.
„Work Space Awareness“ wird definiert als „... the upto-the
minute knowledge about another group member’s
interaction with a shared workspace.“ (GREENBERG et al.,
1996)
Diese Form der „Awareness“ befasst sich mit der Frage,
in welchem gemeinsamen Arbeitsbereich andere Nutzer
arbeiten, mit welchen Aktionen sie gerade beschäftigt sind
und welche Änderungen sie vornehmen oder vorgenommen
haben. Demnach ist „Work Space Awareness“ das
zeitnahe Wissen über die Interaktionen der anderen Gruppenmitglieder
innerhalb eines gemeinsamen Arbeitsbereiches.Dieses
Wissen über den gemeinsamen Arbeitsbereich
ist essentiell wichtig, um eine möglichst hohe Effektivität
und Effizienz bei der Zusammenarbeit zu gewährleisten.
GUTWIN & GREENBERG (1996) definieren bestimmte
Elemente, welche die „Work Space Awareness“ auszeichnen:
SketchCoLab
2
Theorie und Grundlagen
• Präsenz: Informationen über die Präsenz der verschiedenen
Teilnehmer einer Gruppe
• Ort: Informationen über die Orte, an denen gearbeitet
wird
• Aktivitätsniveau: aktueller Stand der Bearbeitungsintensität
• Aktionen: Informationen über aktuell stattfindende
Handlungen und Aktivitäten
• Absichten: zukünftig relevante Handlungen oder
Orte
• Veränderungen: getätigte Modifikationen
• Objekte: Informationen über geänderte Objekte
• Reichweiten: Reichweite der Sichtbarkeit von Gruppenteilnehmern
• Möglichkeiten: potentielle Handlungen anderer
Teilnehmer
• Einflussbereich: Informationen zum Wirkungskreis
anderer
• Erwartungen: Ideen und zukünftige Handlungen
anderer Gruppenmitglieder
Darüber hinaus gibt es verschiedene Faktoren, die
ebenfalls auf Awareness Einfluss nehmen und die es möglichst
optimal zu steuern gilt. Zum einen ist der Aspekt der
Synchronizität eines Gruppenprozesses zu betrachten. So
werden bei synchronen Interaktionen andere Informationen
benötigt, als bei asynchroner Zusammenarbeit und Kommunikation.
Das Speichern und zeitversetzte Abrufen von
Informationen ist primär bei asynchronen Prozessen relevant,
während bei synchronen Abläufen Informationen in
Echtzeit notwendig sind.
Weitere Faktoren stellen die von GAVER et al. (1992)

genannten Dimensionen Aufmerksamkeit und Planung innerhalb
von Interaktionen dar. Zentrale Fragen dabei sind:
Wie viel Aufmerksamkeit ist für eine bestimmte Interaktion
nötig und wie hoch ist der Planungsaufwand dafür? Je
nach Konstellation werden unterschiedliche Informationen
in verschiedener Intensität benötigt.
Abschließend spielt laut GUTWIN & GREENBERG
(1995) die Ähnlichkeit von Sicht und Aufgabe eine weitere
wichtige Rolle bezüglich des Informationsbedarfs im gemeinsamen
Arbeitsbereich. So werden beispielsweise bei
gleicher Sicht und unterschiedlichen Aufgaben vor allem
allgemeine Informationen über den anderen Teilnehmer
und seine Aufgabe relevant sein. Dies ist z. B. dann der
der Fall, wenn zwei Teilnehmer das gleiche Dokument, jedoch
mit unterschiedlicher Intention lesen. Handelt es sich
dagegen um verschiedene Sichten und verschiedene Aufgaben,
sind bereits weniger detaillierte Informationen zu
Handlungen anderer Teilnehmer oder deren Anwesenheit
ausreichend. (GROSS & KOCH, 2007, S. 26 f.)
Potentiale und Anwendungsgebiete von CSCW
Die bisherigen Ausführungen zum Thema Kooperation /
Kollaboration und E-Kooperation / E-Kollaboration, wie
auch die in Abbildung 9 von STOLLER-SCHAI (2009, S.
5) erwähnten Potentiale (speziell E-Kollaboration im Unternehmen),
zeigen die Möglichkeiten und Chancen der
computergestützten kollaborativen und kooperativen Zusammenarbeit.
Menschen sind in diesem Sinne gemeinsam kreativer
und erarbeiten nachhaltigeres Wissen. Darüber hinaus
können sie mittels (E-)Kooperation und (E-)Kollaboration
gemeinsame Ziele schneller und einfacher erreichen so-
wie insbesondere durch kollaboratives Arbeiten „Neues“
schaffen, zu dem ein Einzelner nicht in der Lage wäre.
Desweiteren ist durch verbesserte Kommunikations-, Koordinations-
und Kooperationsprozesse eine Steigerung der
Effizienz und Transparenz innerhalb von Projekten möglich
(HORNSTEIN, FISCHLER, PERTEK & KOLLER, 2008, S. 16).
Der Einsatz von Kommunikationstechnologien erlaubt
außerdem weitere Möglichkeiten wie Archivierung, Tagging
oder die Anreicherung von Informationen durch Anhänge
und lässt sowohl räumliche, als auch zeitliche Grenzen
verschwinden.
Die Potentiale ermöglichen den Einsatz von CSCW innerhalb
der verschiedensten Anwendungsgebiete. Beispiele
sind der Einsatz kollaborativer und kooperativer Werkzeuge
im Bereich der Softwareentwicklung, der Bildung
und Schulung (E-Learning), sowie der Telekooperation (mediengestützte
arbeitsteilige Leistungserstellung zwischen
individuellen Aufgabenträgern, Organisationseinheiten
und Organisationen, die über mehrere Standorte verteilt
sind).Designorientierte Disziplinen wie Produktdesign oder
Architektur sind ebenfalls denkbare Einsatzgebiete für
CSCW-Systeme, als auch der Bereich des kollaborativen
und kooperativen Gestaltens zur Unterstützung des Designprozesses
(BORGHOFF & SCHLICHTER, 2000, S. 103 ff.).
Dieser Anwendungsbereich soll im nachfolgenden Kapitel
nun genauer betrachtet werden.
Kollaboration und Kooperation
SketchCoLab
•••
21

22
•••
Potenzial
• Menschen sind zusammen kreativer
• Kollaborative Ergebnisse sind nachhaltiger
• Kollaboration macht Wissen und Handlungs-
muster explizit und reflektierbar
• Durch internetgestützte Kollaboration
entstehen neue Geschäftspotenziale
Abbildung 9: Potentiale von E-Kollaboration (in Unternehmen)
Darstellung nach STOLLER-SCHAI (2009, S. 5)
SketchCoLab
Fakten
• Das Internet ist kollaborativ
• Die digitale Wirtschaft ist kollaborativ
• Laterale Kommunikation und laterale
Kooperation nehmen an Bedeutung zu
2
Theorie und Grundlagen
Warum
E-Kollaboration?
Konsequenzen
• Internetbasierte Kollaboration erfordert neue
Strategien und Organisationsstrukturen
• MitarbeiterInnen brauchen kollaborative
Kompetenzen
• Das kollaborative Unternehmen braucht
kollaborative Technologien
Notwendigkeit
• Komplexität erfordert Kollaboration
• Geographische Entfernung erfordert
E-Kollaboration und F2F-Kollaboration
• Internetbasierte Produkte und Dienstleistungen
müssen internetgestützt hergestellt
werden

2.2. Computergestütztes kollaboratives
und kooperatives Gestalten
2.2.1. Digitales und analoges Zeichnen
Warum Zeichnen wichtig ist
„Sketches don’t tell, they suggest.“
(BUXTON, 2007, S. 113)
Für Designer ist die Möglichkeit, durch Zeichnen schnell
und einfach Ideen zu generieren, essentiell für den kreativen
Prozess. Das was viele Worte oft nur unzureichend
erklären können, kann in einem Bild oder einer Zeichnung
meist leichter vermittelt werden. Dabei kommt es zunächst
nicht auf die korrekte und möglichst realistische Darstellung
von Formen, Objekten und Farben an, sondern mit Hilfe
von Scribbles eine Ideen- und Kommunikationsbasis für
sich selbst und andere zu schaffen, die nicht mit unnötigen
Details ablenkt (LANDAY & MYERS, 2001).
Schnelles Zeichnen bzw. Skizzieren ist demnach eine
Problemlösungsmethode mit der Personen Ideen und Gedanken
schnell bewerten, überarbeiten oder ersetzen können.
Dabei ist die kognitive Beanspruchung bezüglich der
Aktivität des Zeichnens an sich (primär beim analogen
Zeichnen) sehr gering, so dass fast die gesamte Konzentration
auf den Designprozess direkt fokussiert werden kann
(PLIMMER & APPERLEY, 2002).
Da Design in der Regel als iterativer Prozess zu sehen
ist (TVERSKY, 1999), wird dieser durch die schnelle und
einfache Möglichkeit des Skizzierens unterstützt. Verschie-
dene Experimente haben gezeigt, dass Zeichnen als unterstützende
Maßnahme während eines Designprozesses zu
qualitativ besseren Ergebnissen führt und darüber hinaus
die Zusammenarbeit, also Kollaboration und Kooperation,
innerhalb einer Gruppe unterstützen und fördern kann.
(CRAFT & CAIRNS, 2009; PLIMMER & APPERLEY, 2002).
Speziell Designer nutzen beim Gestalten, vor allem in
der frühen Ideenphase ebenfalls räumliche Eigenschaften
der Umgebung. So werden Skizzen und Entwürfe auf dem
Tisch ausgebreitet oder an Pinnwänden und auf Whiteboards
gezeigt. Dies fördert die Diskussion und ermöglicht
einen einfachen Zugang und die Sichtbarkeit der Designartefakte
für alle Gruppenmitglieder (GEYER, JETTER, PFEIL
& REITERER, 2010).
Analoges Zeichnen
Das Zeichnen mit Papier und Stift stellt dabei die gängigste
Form dar, die eingesetzt wird um Gedanken und Ideen
darzustellen. Das analoge Skizzieren bietet dabei viele
Vorteile. So können Ideen freier und schneller exploriert
werden, aber auch den Kreativitätsprozess fördern. Forschungsergebnisse
zeigen, dass Designer zu variantenreicheren
Lösungen kommen, wenn sie auf Basis von handgezeichneten
Entwürfen auf Papier arbeiten. Der Grund dafür
ist, dass skizzierte Entwürfe auf Papier meist mehrdeutig
bzw. weniger konkret und detailreich sind als computergenerierte
Ansätze. Somit ist mehr Interpretationsspielraum
vorhanden, der die Aufmerksamkeit nicht auf Details lenkt,
die im frühen Designstadium eher unwichtig sind (LANDAY
& MYERS, 2001).
Darüber hinaus ist das Entwerfen auf Papier günstig,
meist frei verfügbar bzw. ‚wegwerfbar‘ und zeigt charak-
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
23

24
•••
teristische Eigenheiten des Zeichners beim Skizzieren und
Schreiben (BUXTON, 2007, S. 111 ff.). Einen wichtigen
Aspekt stellt dabei Papier als Trägermedium dar, das aus
dem (Design-)Alltag kaum wegzudenken ist und aufgrund
verschiedener physikalischer Eigenschaften überzeugt. Papier
ist beispielsweise sehr flexibel – Zeichnungen können
daher sehr einfach mit anderen Leuten geteilt werden. Darüber
hinaus ist es robust und vielseitig einsetzbar (WEIBEL
et al., 2011).
Kollaboratives Arbeiten wird durch die effektive Kombination
aus Kommunikation und Visualisierung erreicht, die
den Beteiligten ein besseres Problemverständnis und das
gemeinsame Erarbeiten von Lösungen ermöglicht (PLIM-
MER & APPERLEY, 2002).
Analoges Zeichnen hat aber auch eine Reihe von Nachteilen.
So ist die Modifikation nur in begrenztem Maße
möglich, ohne etwas neu zeichnen oder aufwändig vervielfältigen
zu müssen. Der Platz auf einem Blatt ist begrenzt
und auf Skizzen findet man oft Anmerkungen, die meist
hilfreicher als die eigentliche Zeichnung sein können. Papier
eignet sich jedoch weniger als „Designspeicher“ und
lässt die Gründe für bestimmte Entscheidungen während
des Gestaltens oft nicht mehr nachvollziehbar erscheinen
(WEIBEL et al., 2011). Darüber hinaus ist das Archivieren
und Verwalten analoger Skizzen meist wenig komfortabel.
Digitales Zeichnen
Obwohl Stift und Papier beim Skizzieren und Zeichnen
meist präferiert werden, bieten interaktive und computergestützte
Systeme ebenfalls eine Reihe von Möglichkeiten und
Vorteile, um den Designprozess zu unterstützen. Zunächst
zeichnen sie sich vor allem dadurch aus, dass die meisten
SketchCoLab
2
Theorie und Grundlagen
Nachteile der analogen Arbeitsweise aufgehoben werden.
Das Zeichnen im digitalen Kontext bietet grenzenlosen
Platz und einen erweiterten Überblick durch Zoomen und
Verschieben. Eine Vielzahl von Werkzeugen ermöglicht
eine vielfältige Bearbeitung, die im Gegensatz zum analogen
Zeichnen nicht destruktiv erfolgen muss. So können
(z. B. durch Ebenen), Änderungen an Skizzen durchgeführt
werden, ohne den aktuellen Stand direkt modifizieren zu
müssen. Durch die digitale Basis ist das Speichern, Transformieren
und Archivieren von Designartefakten auf einfache
und schnelle Weise möglich (PLIMMER & APPERLEY,
2002).
In Bezug auf Kollaboration und Kooperation bietet das
elektronische Zeichnen z. B. auf einem mobilen Gerät
wie dem Tablet Computer weitere Vorzüge. Zwar ist beim
analogen Zeichnen ebenfalls eine kollaborative und kooperative
Zusammenarbeit möglich, die zwar schnell und
effektiv sein kann, sie ist aber darauf begrenzt, dass sich
die Teilnehmer zeitgleich am selben Ort aufhalten. Computergestützte
Systeme bieten dagegen die Möglichkeit der
Kollaboration und Kooperation über örtliche und räumliche
Grenzen hinweg (siehe Punkt E-Kollaboration und E-Kooperation).
Durch die Verwendung eines Tablet Computers verschwimmen
diese Grenzen aufgrund der hohen Mobilität
des Gerätes noch ein Stück mehr.
Die vielen zusätzlichen Möglichkeiten des digitalen
Zeichnens können jedoch zugleich Nachteile sein. Während,
wie bereits erwähnt, das Skizzieren auf dem Papier
an sich wenig kognitive Belastung erfordert, können computergestützte
Systeme bei deren Verwendung schnell gedanklich
belasten oder gar überfordern. Durch eine Vielzahl
zur Verfügung gestellter Werkzeuge werden Entwürfe

und Ideen oft zu konkret dargestellt, was vor allem während
des frühen prototypischen Skizzierens bezüglich Kreativität
und Ideenreichtum hinderlich sein kann. Darüber hinaus ist
analoges Skizzieren meist schneller als digitales Zeichnen,
da weniger Entscheidungen während des Gestaltens (z. B.
Auswählen des richtigen Werkzeuges) gefällt werden müssen
(PLIMMER & APPERLEY, 2002).
Analoges Zeichnen / Skizzieren Digitales Zeichnen / Skizzieren
Vorteile
• Schnelles und freies Explorieren • Unbegrenzter Platz zum Zeichnen
• Intuitiv und einfach in der Anwendung • Einfache Speicherung, Archivierung und Suche
• Günstig und meist frei verfügbar • Vielfältige Bearbeitungsmöglichkeiten durch viele Werkzeuge
• Sehr schnell in der Umsetzung • Nicht-destruktive Bearbeitung möglich
• Geringe kognitive Belastung beim Zeichnen an sich • Erweiterter Überblick (z. B. durch Zoomen)
• Papier als flexibles, robustes und vielseitiges Medium • Kollaboration und Kooperation ohne räumliche Grenzen möglich
• Kreativitätsfördernd durch Mehrdeutigkeit
• Kollaboratives bzw. kooperatives Arbeiten vor Ort wird gefördert
durch effektive Kombination von Kommunikation und Visualisierung
Nachteile
• Verwalten und Archivieren analoger Zeichnungen aufwendig • Kognitive Be- und Überlastung verursacht durch die vielen
Möglichkeiten bzw. die digitale Arbeitsumgebung
• Papier als räumlich begrenztes Material • Langsamer (aufgrund der vielen zu treffenden Entscheidungen bei der
Nutzung digitaler Zeichnen-Werkzeuge)
• Modifikationen schwierig, ohne neu zeichnen zu müssen • Skizzen z. B. oft zu Beginn zu detailreich (hemmt die Kreativität bzw.
Ideengenerierung)
• Zu Grunde liegende Entscheidungsprozesse in Form z. B. von
Anmerkungen meist schlecht nachvollziehbar (Designspeicher)
• Vervielfältigung aufwendig
Tabelle 3: Vor- und Nachteile digitalen und analogen Zeichnens
Eigene Darstellung
Tabelle 3 zeigt noch einmal zusammenfassend eine Reihe
von Vor- und Nachteilen des digitalen und analogen Zeichnens.
Gemeinsames Gestalten
Der Gestaltungsprozess ist in der Praxis oft durch einen linearen
Ablauf geprägt, bei dem der Informationsfluss zwischen
den Teilnehmern einer Gruppe, die ihr Expertenwis-
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
25

26
•••
sen jeweils einbringen, sequentiell erfolgt. Ein Grund dafür
ist, dass ein Designprozess meist durch eine Reihe von
sich wiederholenden Schritten über mehrere Abteilungen
und Disziplinen geprägt ist. Design an sich besitzt jedoch
grundsätzlich kooperatives und vor allem kollaboratives
Potential. Das unterstützen Studien, die zeigen, dass interaktive
Kollaboration in Gruppen zu besseren Resultaten
führen kann, als durch einzelne Personen. Vor allem für die
frühe Gestaltungphase, in der es auf das schnelle Entwickeln,
Zeichnen, Bewerten und auch Verwerfen von Ideen
ankommt, ist Kollaboration und Kooperation ein wichtiger
Aspekt (CLIFTON et al., 2011).
Bedeutend dabei ist die Betrachtung des Faktors Zeit.
Neben der „Awareness“ spielt beim Gestalten in interaktiven
Umgebungen die Frage nach der synchronen bzw.
asynchronen Zusammenarbeit in einer Gruppe ebenfalls
eine zentrale Rolle (siehe auch vorheriges Kapitel Kollaboration
und Kooperation). So gilt es beispielsweise zu
klären, wann eine zeitgleiche oder zeitversetzte Zusammenarbeit
sinnvoll ist und wie das durch die interaktive
Anwendung möglichst optimal unterstützt werden kann.
Im Folgenden sollen deshalb einige praktische Ansätze
und Projekte dargestellt werden, die für den im Rahmen
dieser Arbeit entstandenen interaktiven Prototypen
(SketchCoLab) von Bedeutung sind. Die Anwendungsbereiche
sind dabei vielfältig und beschränken sich nicht nur
auf Zeichnungen oder Skizzen. Neben den innerhalb eines
Gestaltungprozesses bestehenden Aspekten wie Überarbeiten,
Zeichnen und Bewerten ist auch die mögliche kollaborative
und kooperative Zusammenarbeit in unterschiedlicher
Form zu prüfen. Die Betrachtung relevanter Projekte
soll dabei helfen, wichtige und denkbare Anforderungen
SketchCoLab
2
Theorie und Grundlagen
an eine mobile Anwendung zur gemeinsamen Überarbeitung
und Bewertung von Zeichnungen aufzuzeigen.

2.2.2. Praktische Ansätze zum gemeinsamen
Überarbeiten von Zeichnungen
Annotation
Das Überarbeiten von Texten, Zeichnungen, Skizzen oder
anderen visuellen Elementen ist meist eng verbunden mit
deren Erstellung und ein zentraler Bestandteil innerhalb
des kollaborativen Prozesses. Neben der herkömmlichen
Überarbeitung in Form einer Editierung, bei der bereits Bestehendes
ganz oder teilweise ersetzt wird, stellt die Annotation
(Einzeichnung, Vermerk) (DUDEN, 1990, S. 63)
eine weitere Möglichkeit der Überarbeitung dar.
Dabei bezieht sich eine Annotation immer auf einen
exakten Kontext innerhalb des jeweiligen annotierten Objektes.
Dies kann in einem Textdokument ein bestimmter
Wortlaut bzw. Satz oder in einer Skizze ein bestimmtes
Detail sein. Annotationen können sich aber auch auf ein
komplettes Objekt beziehen. Dabei ist es nicht relevant, ob
eine Annotation visuell direkt auf dem Objekt selbst oder
separat (z. B. auf einem extra Zettel oder im digitalen Bereich
innerhalb eines eigenen Fensters) sichtbar ist. Wichtig
ist lediglich, dass es einen Verweis der Annotation auf
die annotierte Stelle gibt (RIEDEWALD, 2003, S. 6).
Der Vorgang des Annotierens wird folgendermaßen definiert:
„… to add short notes to a book or piece of writing to
explain parts of it.“
(LANGENSCHEIDT-LONGMAN, 2001, S. 45)
Dies bedeutet, dass sich der Begriff der Annotation primär
auf die Bearbeitung analoger oder digitaler Texte be-
zieht. Aber auch das Annotieren anderer Visualisierungen
wie Skizzen, Bilder, Diagramme, Videos oder Websites
sind denkbare Einsatzbereiche.
Das Editieren und Annotieren mit dem Stift auf Papierdokumenten
ist ein einfacher und natürlicher Weg, Anregungen,
Änderungen und Kommentare aufzunehmen. Dadurch
wird die Kommunikation und somit der kollaborative
bzw. kooperative Vorgang zwischen den beteiligten Personen
gefördert. Die Übertragung dieser intuitiven Form
der Überarbeitung in eine interaktive Umgebung, erlaubt
darüber hinaus erweiterte Möglichkeiten. So können Annotationen
beispielsweise modifiziert, übertragen, gespeichert
sowie orts- und zeitungebunden mit anderen „geteilt“
werden (PLIMMER, GRUNDY, HOSKING & PRIEST, 2006).
Generell werden zwei Formen der elektronischen Annotation
unterschieden: Textorientierte Lösungen und Anwendungen
die auf dem Einsatz sogenannter „digitaler
Tinte“ („digital ink“) basieren. „Digital ink“ beschreibt die
Technologie Handgeschriebenes bzw. Handgezeichnetes
erstellt mit Hilfe eines Stifts, Touchscreens oder der Maus
in seiner natürlichen Form auf digitalen Displays darzustellen.
Dagegen erfolgt bei textbasierten Anwendungen, die
Eingabe ausschließlich über die Tastatur (und Maus), was
eher als unintuitiv und umständlich erachtet wird (PLIMMER,
CHANG, DOSHI, LAYCOCK & SENEVIRATNE, 2010).
Für das Verfassen größerer Textmengen eignet sich diese
Form der Annotation jedoch besser als die stiftbasierte
Variante. Meist ist im praktischen Einsatz eine Kombination
der beiden Annotationsformen sinnvoll.
Es gibt eine Reihe von Ansätzen, die die Annotation
und Auszeichnung von Inhalten ermöglichen. Annotation
ist mit nahezu jedem Grafik- oder Illustrationstool wie Ad-
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
Annotation
Annotation ist die Auszeichnung
von Objekten bzw. Details innerhalb
der Objekte in Form von
Anmerkungen oder beigefügten
Informationen. Die Anmerkungen
stehen direkt im Kontext mit den
annotierten Stellen.
27

28
•••
obe Photoshop (Bildbearbeitungssoftware) oder Adobe
Illustrator (Illustrationswerkzeug) möglich. Außerdem gibt
es eine Vielzahl von Anwendungen, die das kollaborative
und kooperativen Zusammenarbeiten in unterschiedlichen
Bereichen, wie z. B. dem Designbereich unterstützen. Die
hier beispielhaft vorgestellten Projekte beziehen sich auf
Anwendungen, die vornehmlich für den Einsatz auf mobilen
Geräten geeignet sind und deren primäres Anwendungsgebiet
die Annotation von Inhalten ist.
RELEVANTE PROJEKTE UND ANWENDUNGEN
Skitch (Abbildung 10)
Ursprünglich für die Annotation und Auszeichnung von
Abbildung 10: Skitch Interface
Quelle: http://www.skitch.com » Abruf am 05.02.2012
SketchCoLab
2
Theorie und Grundlagen
Screenshots gedacht,ist Skitch ein Tool, das sich auch zum
Editieren und Annotieren von Bildern, Skizzen und Zeichnungen
eignet. Skitch ist als App für den mobilen Einsatz
auf Tablet Computern, sowie Smartphones konzipiert. Das
Annotieren, Auszeichnen und auch Bewerten von Inhalten
erfolgt über Formen, Marker, Texte, Pfeile oder kleine
Zeichnungen. Darüber hinaus ist es möglich, z. B. per
Email, Facebook, Twitter oder durch Hochladen auf die
Skitch-Website, die bearbeiteten Inhalte mit anderen Personen
zu „teilen“.
Das Annotieren von direkt über das mobile Gerät erstellten
Fotos und die Möglichkeit schnell und einfach Pfeile
zu setzen, um die Aufmerksamkeit auf bestimmte Details
zu lenken, sind weitere Features. Das kooperative und kollaborative
Überarbeiten eines bestimmten Objektes ist mit
Skitch möglich, erfolgt jedoch in asynchroner Form. Annotierte
und zur Verfügung gestellte Inhalte können somit
zwar von anderen ebenfalls editiert und ausgezeichnet
werden, allerdings nur zeitversetzt. Eine zeitgleiche und
zentrale Überarbeitung des exakt gleichen Inhalts durch
mehrerer Nutzer wird nicht unterstützt.
Neben Skitch gibt es weitere ähnliche Tools, wobei viele
davon zur Erstellung und Annotation von Screenshots ausgelegt
sind.
iAnnotate (Abbildung 11)
Während viele Annotationstools ihren Schwerpunkt auf die
Auszeichnung von Bild- oder Textdokumenten legen, gibt es
ebenfalls eine Reihe von Anwendungen, die speziell für die
Annotation von Internetseiten durch einen Browser erstellt
wurden. Eine wichtiger Aspekt ist der flexible Charakter
von Websites, die sich oft bezüglich Form und Inhalt än-

dern können. iAnnotate ist eine Mehrbenutzer-Lösung, die
die Annotation mittels „digitaler Tinte“ über einen Browser
ermöglicht. Die Anwendung bietet lediglich drei Funktionen
der Annotation: Auszeichnungen mit dem Freiform-
Stift, „Highlighting“ mit dem Marker und das Löschen von
Annotationen. Die erstellten Auszeichnungen und Anmerkungen
können gespeichert, aufgerufen und mit anderen
über eine Internetadresse „geteilt“ werden. Alle zu einer
Website gehörenden und von verschiedenen Anwendern
vorgenommenen Annotationen können auf der gleichen
Seite dargestellt werden. Hier kann die Kollaboration und
Kooperation zwar prinzipiell zeitgleich erfolgen, jedoch
nicht auf einer gemeinsamen Arbeitsoberfläche. iAnnotate
ist mit einem Algorithmus ausgestattet, der die Zuordnung
Abbildung 11: iAnnotate - Annotation innerhalb Websites
Quelle: PLIMMER et al. (2010)
der Annotationen zu den jeweiligen HTML-Elementen innerhalb
einer Website sicherstellt.
Remarkz (Abbildung 12)
Eine ähnliche Lösung stellt Remarkz dar, ein Bookmarklet
(Makro für den Browser) mit dem Websites annotiert werden
können. Neben den Features, Inhalte einer Internetseite
mit Text, Pfeilen oder Freiformen auszuzeichnen, wird auch
die Annotation durch emotionale Symbole (z. B. Smiley)
ermöglicht. Die durch den Nutzer getätigten Auszeichnungen
werden direkt dem nächstliegenden HTML-Element zugeordnet,
können aber auch frei verschoben werden. Eine
besondere Funktion stellt die Timeline dar. Durch sie kann
der sequentielle Ablauf der Auszeichnungen durch einen
bzw. mehrere Benutzer im Nachhinein nachvollzogen werden.
Die Annotationen können mit anderen Nutzern per
Email, Facebook oder Twitter geteilt werden. Somit ist eine
kollaborative und kooperative Zusammenarbeit möglich,
Abbildung 12: Remarkz
Quelle: Screenshot http://www.remarkz.com/F5oRPY » Erstellt am 05.02.2012
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
29

30
•••
die aber nur zeitversetzt und nicht zentral innerhalb eines
gemeinsamen Arbeitsbereiches erfolgen kann.
u-Annotate (Abbildung 13)
Die an der RWTH Aachen entstandene Anwendung u-
Annotate stellt die benutzerzentrierte Möglichkeit der Freiform-Annotation
durch „digitale Tinte“ von Online-E-Learning-Inhalten
zur Verfügung. Ziel des webbasierten Tools
ist das freie Auszeichnen und Annotieren von Inhalten mit
Hilfe stiftgestützter Geräte, wie z. B. einem Tablet Computer.
Neben der freien Annotation durch Stiftwerkzeuge
ist auch die Textauszeichnung durch Marker möglich. Die
Überarbeitungen können gespeichert und über eine Import-
und Exportfunktion mit anderen Lernenden geteilt werden.
Abbildung 13: u-Annotate
Quelle: http://dbis.rwth-aachen.de/cms/projects/u-annotate » Abruf am
05.02.2012
SketchCoLab
2
Theorie und Grundlagen
PhotoAnnotate (Abbildung 14)
Eine reduzierte Form der Annotation ist die Markierung von
Inhalten. Die App PhotoAnnotate arbeitet ausschließlich
mit Markern in Form der Metapher „Stecknadel“, die per
Fingertipp oder Stifteingabe auf Fotos, Bilder, Skizzen, etc.
gesetzt und mit entsprechenden Informationen wie Text, Internetadressen
sowie Audioaufnahmen verknüpft werden
kann. Ein freies Annotieren durch Stift- oder Pfeilwerkzeuge
ist nicht vorgesehen. Die asynchrone Zusammenarbeit wird
durch das „Teilen“ per Email oder Facebook unterstützt,
wobei die zeitgleiche Überarbeitung durch mehrere Anwender
an einem Objekt nicht möglich ist.
Abbildung 14: PhotoAnnotate
Quelle: http://itunes.apple.com/de/app/photo-annotate-ewp/
id439877294?mt=8 » Abruf am 05.02.2012

TheCommentor (Abbildung 15)
Die Webapplikation TheCommentor ermöglicht, neben den
gängigen Formen der Annotation mittels Formen und Text,
die Auszeichnung durch Sprache bzw. Ton. Darüber hinaus
können nicht nur pixelbasierte Formate wie Bilder,
sondern auch PDF-Dokumente markiert und ausgezeichnet
werden. Für das Teilen der annotierten Inhalte können die
gewünschten Nutzer eingeladen werden, die über eine
spezielle Internetadresse dann ebenfalls die entsprechenden
Inhalte auszeichnen und markieren können. Sobald
eine Überarbeitung abgeschlossen wird, werden alle beteiligten
Personen per Email benachrichtigt. Demnach ist eine
zeitgleiche Überarbeitung grundsätzlich möglich, jedoch
ohne Unterstützung einer „Workspace-Awareness“ bzw.
eines gemeinsamen Arbeitsbereiches.
ConceptShare (Abbildung 16)
Bei dieser Anwendung steht neben dem Auszeichnen von
vielfältigen Inhalten (Bilder, Textdokumente, Videos) die Kol-
Abbildung 15: TheCommentor » http://www.thecommentor.com/
Quelle: Screenshot http://www.thecommentor.com/file/sdusl » Erstellt am
06.02.2012
laboration und Kooperation durch unterstützende Kommunikationsmöglichkeiten
im Vordergrund. So können neben
einfachen Textboxen zur Kommunikation auch strukturierte,
sich aufeinander beziehende Kommentare (ähnlich wie in
einem Forum) zu bestimmten Bereichen des annotierten Dokuments
erstellt werden. Auch ein Chat zur Unterstützung
von Diskussionen ist integriert. Die Teilnehmer werden, sofern
sie offline sind, per Email verständigt, wenn eine Überarbeitung
erfolgt bzw. ein neuer Kommentar vorhanden ist.
Weitere interessante Features stellen der Vergleich von Bildern
bzw. Inhalten und die umfangreichen Konfigurationsoptionen
für Benutzerprofile (Rollen und Berechtigungen)
dar. ConceptShare arbeitet mit gemeinsamen Workspaces,
die für definierbare Nutzer zugänglich sind und die bei-
Abbildung 16: ConceptShare » http://www.conceptshare.com/
Quelle: http://media.smashingmagazine.com/images/conceptshare.png »
Abruf am 06.02.2012
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
31

32
•••
spielsweise sämtliche Elemente eines Entwurfs beinhalten.
Damit ist eine synchrone Kollaboration und Kooperation
innerhalb einer gemeinsamen Arbeitsoberfläche möglich.
Twiddla (Abbildung 17)
Die umfangreiche webbasierte Anwendung für Designkollaboration
eignet sich neben der Überarbeitung von Zeichnungen,
Bildern, Websites und Dokumenten auch als Brainstorming-
und sogar eigenständiges Zeichnen-Tool. Wie
eine Reihe ähnlicher Anwendungen ist Twiddla auf eine
Echtzeitkollaboration ausgerichtet, bei der mehrere Nutzer
parallel innerhalb einer gemeinsamen Arbeitsumgebung
arbeiten können. Die Zusammenarbeit kann jedoch auch
zeitversetzt stattfinden. Hier wird der Aspekt der Kommunikation
ebenfalls durch Chat unterstützt. Das Tool bietet
darüber hinaus eine Vielzahl an Annotationsmöglichkeiten
wie Pfeile, Pinsel, Formen und Texte an.
Abbildung 17: Twiddla » http://www.twiddla.com
Quelle: Screenshot http://www.twiddla.com/746559 » Erstellt am
06.02.2012
SketchCoLab
2
Theorie und Grundlagen
iAnnotate PDF (Abbildung 18)
Wie bereits erwähnt, ist die Annotation auch bei Textdokumenten
eine wichtige Form der Überarbeitung. iAnnotate
PDF ist eine App, die das Auszeichnen und Markieren
von PDFs auf dem iPad ermöglicht. Ähnlich der bekannten
Anwendungen Adobe Acrobat und Adobe Acrobat Reader
können Textdokumente in vielfältiger Weise annotiert
werden. Neben der Auszeichnung durch den Freiform-Stift
oder Notizen können Informationen in Form von Sprache
oder Bildern dem Dokument hinzugefügt werden. Darüber
hinaus gibt es spezielle Möglichkeiten der Textmarkierung
durch Unterstreichen und Durchstreichen von beliebigen
Textstellen. Der Aspekt der Kollaboration und Kooperation
erfolgt durch den asynchronen Austausch der markierten
Abbildung 18: iAnnotate PDF
Quelle: http://www.wisecwa.com/digitaloffice/wp-content/uploads/2010/06/iannotate1.jpg
» Abruf am 06.02.2012

Dokumente mit anderen Personen z. B. per Email.
Multi-User Sketchpad (Abbildung 19)
Abschließend soll erwähnt werden, dass eine Vielzahl der
Tools für Designkollaboration vornehmlich für das gemeinsame
Zeichnen oder Malen ausgelegt sind und weniger für
das Annotieren von Inhalten. Ein Beispiel ist das als Experiment
konzipierte webbasierte Multi-User Sketchpad, bei
dem mehrere Personen gleichzeitig an einem Bild arbeiten.
Das Besondere daran ist, dass es keine definierten Nutzer
gibt, die speziell zu einer Zusammenarbeit eingeladen
wurden. Jeder der die Website aufruft, kann sich bei der Erstellung
eines gemeinsamen Werkes beteiligen (Stichwort:
Kunst-kollaboration bzw. Art Collaboration). Der Umfang
der Optionen ist dabei minimal gehalten. Das Zeichnen ist
nur mit einem Stiftwerkzeug mit fester Größe möglich und
Abbildung 19: Multi-User Sketchpad » http://mrdoob.com/projects/
multiuserpad/
Quelle: http://www.usefuldistractions.co.uk/wp-content/uploads/2011/02/
Multiuser-Sketchpad1-695x469.jpg » Abruf am 06.02.2012
die Kommunikation wird lediglich durch eine Chatfunktion
unterstützt.
Auch wenn einige der vorgestellten praktischen Ansätze
sich nicht oder nur zum Teil auf die konkrete Überarbeitung
von Zeichnungen fokussieren wird deutlich, dass kollaboratives
und kooperatives Annotieren von visuellen Inhalten
eine wichtige Funktion darstellt. Maßgeblich führt sie zu
einer intensiven Beschäftigung mit dem Inhalt und einem
verstärkten Ideenaustausch (PLIMMER et al., 2010).
ERKENNTNISSE FÜR DEN PROTOTYP
Die Annotation ist konsequenterweise als zentraler Aspekt
der Überarbeitung von Zeichnungen in den entwickelten
Prototypen eingeflossen. Durch die Betrachtung der vorgestellten
Projekte, die allerdings nur als eine Auswahl zu sehen
sind und weiterer Recherchen, lassen sich einige Kernfunktionen
herausarbeiten. Gemeint sind dabei Funktionen,
die eine mobile Anwendung zur gemeinsamen Überarbeitung
von Zeichnungen in Form der Annotation auszeichnen.
Grundsätzlich lässt sich sagen, dass viele der existierenden
Ansätze webbasierte Lösungen sind. Diese sind
sowohl für den mobilen Einsatz, als auch für den Einsatz
auf Desktop-Rechnern geeignet und ermöglichen eine plattformübergreifende
Verwendung. Die Umsetzung als App,
für mobile Endgeräte wie Tablet Computer oder Smartphones,
ist ebenfalls gängig, jedoch weniger verbreitet.
Annotationsarten
Nahezu alle der untersuchten Annotationstools unterstützen
die beiden gängigen Formen der Annotation durch Texteingabe
und digitale Tinte. Dies ist darauf zurückzuführen,
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
33

34
•••
dass die Kombination der beiden Annotationsarten eine
größtmögliche flexible Überarbeitung durch den Nutzer
erlaubt. So werden die Vorteile beider Annotationsformen
genutzt. Werden beispielsweise Kommentare geschrieben,
ist die Annotation per Texteingabe durch (Touchscreen-)
Tastatur praktischer, als wenn ein bestimmter Inhaltsbereich
nur durch ein Wort ausgezeichnet werden soll. Dann ist
das freihändige Schreiben mit digitaler Tinte intuitiver und
schneller.
Werkzeuge zur Annotation
Die Möglichkeiten zur Annotation sind vielfältig und richten
sich darüber hinaus nach den zu annotierenden Inhalten.
So erfordert das Auszeichnen von Textdokumenten zum Teil
andere Werkzeuge (z. B. Text unterstreichen oder durchstreichen)
als die reine Bild- oder Fotoannotation. Da innerhalb
dieser Arbeit die Überarbeitung von Zeichnungen
und Skizzen im Vordergrund steht, werden vornehmlich die
Werkzeuge zur Bildauszeichnung betrachtet.
Das zentrale Tool zur Auszeichnung stellt der Freiform-
Stift dar. Er entspricht nahezu der intuitiven Auszeichnung
mit Stift und Papier. Der Freiform-Stift wird häufig für eine
erweiterte und verbesserte Annotation durch weitere Optionen
wie Farbwahl oder Strichstärke ergänzt.
Neben der Möglichkeit Inhalte mit dem Freiform-Stift
auszuzeichnen, stellen aber auch verschiedene definierte
geometrische Formen wie Kreise und vor allem Pfeile wichtige
Werkzeuge dar. Letztere dienen in der Regel zur Verknüpfung
von Auszeichnungen mit den jeweils relevanten
Bereichen innerhalb des Annotationsobjekts.
Eine weitere wichtige Form der Auszeichnung ist das
Markieren bzw. „Highlighting“. Ähnlich wie mit einem
SketchCoLab
2
Theorie und Grundlagen
analogen Text-Marker können damit Inhalte hervorgehoben
werden, ohne dass der jeweilige Teil „übermalt“ wird.
Auch dieses Werkzeug besitzt meist zusätzliche Funktionen
wie z. B. die Möglichkeit der Farbwahl.
Eine erweiterte Form der Annotation ist die Integration
von Bildern, Sprach- und Videoaufnahmen, die durch
die Übertragung der Annotation in den digitalen Kontext
ermöglicht wird. Diese Werkzeuge müssen nicht zwangsläufig
Teil eines Annotationstools sein, nutzen jedoch die
vielfältige Ausdrucksweise von Menschen.
Workflow
Abgesehen von der eigentlichen Annotation werden auch
den Workflow betreffende Features benötigt. Primär sind
Möglichkeiten gemeint, die die auf der Arbeitsoberfläche
stattfindenden Nutzer-Aktivitäten kontrollieren. So ermöglichen
nahezu alle Annotationstools das Löschen von Inhalten
durch einen „Radiergummi“ und das Rückgängigmachen
und Wiederholen von Arbeitsschritten. Ebenfalls wird
meist das Zoomen und Verschieben der Arbeitsfläche bzw.
der einzelnen Annotationselemente unterstützt.
Archivieren und Speichern
Eine weitere Stärke elektronischer Annotationstools ist die
einfache Archivierung und Speicherung von Auszeichnungen.
So können die annotieren Inhalte in den gängigen
Tools meist in Form von Bildern auf digitalen Datenträgern
gespeichert werden und erlauben damit einen bequemen
und schnellen Austausch annotierter Inhalte.
Kollaboration und Kooperation
Die Möglichkeit des Austausches der Inhalte ist ein wichti-

ger Aspekt der Kollaboration und Kooperation. Ein Großteil
der recherchierten Tools unterstützt die Zusammenarbeit
durch die Möglichkeit des asynchronen „Teilens“ von annotierten
Inhalten. Die jeweiligen Inhalte werden, beispielsweise
per Email, an andere Nutzer zur Betrachtung oder
weiteren Annotation übermittelt. Es entsteht ein Austausch
zwischen mehreren Personen, der die Zusammenarbeit
fördert. Wenige Tools erlauben das synchrone Annotieren
innerhalb einer zentralen gemeinsamen Arbeitsoberfläche.
Somit ist der Workspace bezüglich der Zusammenarbeit
einer Gruppe ein zentraler Aspekt. Die gängigen Annotationstools
stellen dem Anwender eine persönliche Arbeitsumgebung
zur Verfügung. Das bedeutet, dass innerhalb dieser
Arbeitsfläche lediglich ein Nutzer tätig ist und somit
die Annotation dezentral erfolgt. Denkbar ist aber auch
das Annotieren von Skizzen und Zeichnungen innerhalb eines
gemeinsamen Arbeitsbereiches durch mehrere Nutzer
in Realzeit. Einige Lösungen beinhalten eine Kombination
zwischen synchroner und asynchroner Zusammenarbeit
bzw. erlauben wahlweise eine zeitgleiche bzw. zeitversetzte
Zusammenarbeit auf einer gemeinsamen Arbeitsfläche.
Dabei ist zu bemerken, dass sowohl die synchrone, als
auch asynchrone Form der Kollaboration und Kooperation
jeweils Vor- und Nachteile bietet. Bei der zeitversetzten Zusammenarbeit
ist vor allem die Flexibilität für die einzelnen
Gruppenmitglieder zu nennen. Nutzer können Informationen
in Ruhe ordnen und ihre Interaktionen zeitlich selbst bestimmen.
Der Nachteil der asynchronen Zusammenarbeit
ist demnach, dass eine oft notwendige zeitnahe Kollaboration
und Kooperation unterlaufen wird. Bei der synchronen
Zusammenarbeit dagegen wird eine direkte und natürliche
Kommunikation unterstützt. Informationen erhalten
die Nutzer unmittelbar und können darauf schnellstmöglich
reagieren. Nachteil ist die geringere Flexibilität für alle Beteiligten.
So müssen alle Gruppenmitglieder zu einem bestimmten
Zeitpunkt verfügbar und motiviert sein (VIOLINO,
2007).
Während die zeitversetzte Zusammenarbeit meist durch
asynchrone Werkzeuge wie Emails oder der Sharing-Funktion
sozialer Netzwerke erfolgt, wird eine zeitgleiche Zusammenarbeit
innerhalb elektronischer Annotations- oder
Zeichenanwendungen oft per Chat ermöglicht. Diese Form
der Interaktion erlaubt eine ähnlich direkte Kommunikation
wie ein persönliches Gespräch oder eine Telefonkonferenz.
Synchrone Kommunikationsformen wie Audio- oder Videokonferenz
sind weitere Möglichkeiten, die aber weniger
zum Einsatz kommen.
Welche Form der Zusammenarbeit bzw. welche Kollaborations-
und Kooperationstools ein Annotationstool
unterstützen soll, liegt an der Zielsetzung und wird durch
diese maßgeblich bestimmt. Tabelle 4 zeigt zusammenfassend
sowohl die hier erarbeiteten zentralen Kernfunktionen
von Annotationssoftware, als auch weitere denkbare und
sinnvolle Features die für die Entwicklung des Prototypen
interessant sind.
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
35

36
•••
SketchCoLab
Kernfunktionen Erweiterte Features
2
Theorie und Grundlagen
Werkzeuge zur Annotation
• Freiform-Stift • Geometrische Formen
• Pfeile • Sprach- bzw. Tonaufnahmen
• Marker • Bildintegration
- Material auf dem eigenen PC
- Durch interne Kamera des Gerätes
• Farbe (für Marker und Freiform-Stift) • Verschiedene Pinsel
• Textboxen • Emotionale Symbole (z. B. Smilies, Häkchen, Like-It-Symbol, etc.)
Workflow
• Löschen von Inhalten • Arbeitsfläche leeren
• Arbeitsschritte wiederholen oder rückgängig machen • Verwaltung durch Ebenen
• Zoomen innerhalb der Arbeitsfläche • Historie zur Visualisierung der einzelnen Bearbeitungsschritte
• Verschieben einzelner Annotationselemente • Raster zur Unterstützung der Orientierung
Archivieren und Speichern
• Export als Bild • Spezielles Speicherformat (zur Unterstützung der späteren erneuten
Bearbeitung unter Beibehaltung der einzelnen Annotationselemente)
• Verschiedene Dateiformate für den Export
Tabelle 4: Mögliche Kernfunktionen / Features für das Überarbeiten (Annotation) von Zeichnungen
innerhalb des Prototyps
Eigene Darstellung

Kernfunktionen Erweiterte Features
Kollaboration und Kooperation
Asynchron
• Möglichkeit des „Sharings“ durch Email • Weitere „Sharing“-Funktionen (z. B. soziale Netzwerke, etc.)
Synchron
• Sich aufeinander beziehende und / oder auf bestimmte Bereiche
beziehende Textinformationen
• Unterstützung der Awareness (welche Annotationen wurden von
welcher Person vorgenommen)
• Verschiedene Rollen und Berechtigungen für Nutzer
• Benachrichtigung bei Aktivitäten anderer
• Chat • Audio- und Videokonferenz
• Unterstützung der Workspace-Awareness durch Darstellung der
beteiligten Nutzer
• Sich aufeinanderbeziehende und / oder auf bestimmte Bereiche
beziehende Real-Zeit-Textinformationen
• Unterstützung der Workspace-Awareness durch Kennzeichnung der
Aktivitäten des jeweiligen Nutzers
• Verschiedene Rollen und Berechtigungen für Nutzer
• Benachrichtigung bei Aktivitäten anderer wenn Nutzer offline
• Kombination von gemeinsamer und eigener Arbeitsfläche
Tabelle 4 (Fortsetzung): Mögliche Kernfunktionen / Features für das Überarbeiten (Annotation) von
Zeichnungen innerhalb des Prototyps
Eigene Darstellung
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
37

38
Tagging
•••
„Tagging“ ist die Annotation von
Inhalten durch frei definierbare
Textinformationen (Schlagworte).
„Tags“ erlauben die Identifikation
und Kategorisierung der Inhalte
nach bestimmten Kriterien.
2.2.3. Praktische Ansätze zum gemeinsamen
Bewerten von Zeichnungen
Neben dem Überarbeiten eignet sich Annotation ebenfalls
zur Bewertung von Inhalten. Symbole, die emotionale Zustände
zeigen wie (z. B. Smileys), sind eine einfache und
schnelle Möglichkeit Elemente zu evaluieren und diese Bewertung
anderen Teilnehmern zu kommunizieren. Generell
stellen sowohl die Annotation in Form von Texteingabe
durch Tastatur, als auch mit „digitaler Tinte“ praktische Ansätze
dar. Die Bewertung von Inhalten erfolgt primär nach
optischen und inhaltlichen Gesichtspunkten. Dabei stellt
eine Bewertung eine subjektive Form der Meinungsäußerung
dar, die vor allem durch die Erfahrungen und Sichtweise
des Bewertenden geprägt ist.
Wie eine Bewertung von Inhalten durch freies Schreiben
bzw. Zeichnen stattfinden kann, zeigt sich aus den
Erkenntnissen des vorherigen Kapitels, in dem auf die Form
der Annotation durch „digitale Tinte“ bereits näher eingegangen
wurde. Im Folgenden sollen das Annotieren mit
Hilfe von „Tags“ und weitere Möglichkeiten der Bewertung
dargestellt werden, die auch für den Prototyp relevant sind.
„Tagging“
„Tagging“ oder auch „Labeling“ beschreibt die konkrete
Annotation von Inhalten durch Textinformationen („Tags“)
mittels Tastatureingabe. Erweitert betrachtet versteht man
unter „Tags“ Schlagworte, die in der Regel keinen formalen
Vorgaben unterworfen sind und dem Nutzer eine freie
Auszeichnung von Inhalten erlauben. Vom technischen
Blickwinkel aus gesehen, ist „Taggen“ das Erzeugen eines
Datenbankeintrags, der die Relation zwischen dem
SketchCoLab
2
Theorie und Grundlagen
„getaggten“ Objekt, dem „Tag“ an sich und dem Urheber
darstellt. „Tags“ können laut MÜLLER-PROVE verschiedenste
Aufgaben erfüllen. Gängige Funktionen sind die
Identifikation des „getaggten“ Inhalts nach Themengebiet,
Art oder Urheber. Eine für diese Arbeit relevante Funktion
ist darüber hinaus das Feststellen von Qualitäten und
Charakteristiken („Identifying Qualities or Characteristics“)
von Objekten und meint das Hinterlegen einer subjektiven
Meinung (Bewertung) meist durch Adjektive. Eine weitere
wichtige Aufgabe von Tags ist die Aufgabenorganisation
(„Task Organizing“). Damit beschreiben Anwender Aufgaben,
die zu einem bestimmten „getaggten“ Objekt gehören.
Ein Beispiel hierfür ist das „Taggen“ einer Zeichnung
bzw. eines bestimmten Details innerhalb einer Zeichnung
mit dem „Tag“ „Überarbeiten“ (FROHNER, 2010, S. 13
ff.; MÜLLER-PROVE, 2008, S. 16).
Die Verwendung von „Tags“ hat eine Reihe von Vorteilen.
Neben ihrer einfachen und flexiblen Handhabung, sind
„Tags“ erweiterbar und können darüber hinaus aggregiert
werden. Durch ihre Flexibilität eignen sich „Tags“ für nahezu
jede Situation, jeden Zweck und jede Form von Informationen.
Außerdem erlauben „Tags“ gleichzeitig eine Kategorisierung
sowie eine emotionale Ausdrucksform. Gefühle
und Meinungen, zentrale Bestandteile von Bewertungen,
können somit mitgeteilt werden. „Tags“ helfen Inhalte zu
organisieren und erleichtern die gezielte Suche nach Informationen.
Ein weiterer wichtiger Vorteil ist die Möglichkeit
der Kollaboration und des „Teilens“. So können „Tags“ zu
bestimmten Inhalten zusammen erarbeitet und genutzt werden
(SMITH, 2007, S. 23 ff.). Kollaboratives „Tagging“,
auch „Social Tagging“ genannt, bezeichnet somit den Vorgang
der Annotation (durch Schlagworte) gemeinsam ge-

nutzter Inhalte durch mehrere Nutzer (FROHNER, 2010,
S. 16). Es gibt eine Reihe von Anwendungsgebieten für
„Tagging“. Gängig sind Systeme, die persönliche Informationen
wie Bilder und Emails organisieren oder Anwendungen,
die das „Taggen“ von Websites mit anderen Nutzern
ermöglichen („Social Bookmarking“).
Spielbasierte Ansätze beim „Taggen“
Darüber hinaus gibt es aber auch Ansätze in spielerischer
Form. Hier trägt das „Tagging“ dazu bei, Daten zu einem
bestimmten Objekt zu sammeln, das Objekt zu beschreiben
und somit die Qualität der „Verschlagwortung“ zu erhöhen.
Die Daten werden bei dieser Form innerhalb eines
Spiels „getaggt“. Durch die Vielzahl an diesen kollaborativ
entstandenen „Tags“ zeigt sich ein „gemeinsamer Konsens“
darüber, was z. B. ein Foto oder eine Zeichnung darstellt.
Denkbar sind unterschiedlichste Spielprinzipien, die
den Nutzer motivieren sollen, Inhalte zu „taggen“ (SMITH,
2007, S. 11).
Diese spielbasierten Ansätze lassen sich aber nicht nur
dafür einsetzen möglichst viele Daten zu generieren, sondern
sind ebenfalls als Bewertungstool innerhalb des Designprozesses
denkbar.
„Rating“ durch Symbole
Neben der Auszeichnung und Bewertung von Bildern, Videos
und sonstigen medialen Inhalten mit Hilfe von „Tags“,
stellt das „Rating“ durch bestimmte Zeichen und Symbole
eine weitere Bewertungsmöglichkeit dar. Mit Hilfe einer
frei definierbaren Skala werden beispielsweise Inhalte im
jeweiligen Kontext bewertet. Meist wird dafür eine Skala
von fünf Bewertungsstufen angesetzt, die durch Sterne sym-
bolisiert wird. Je „besser“ etwas bewertet wird, desto mehr
Sterne werden angezeigt. Diese Form des „Ratings“ hat
sich vor allem im Internet etabliert. Neben dem E-Commerce-Bereich,
bei dem das „Rating“ vor allem dem Aufbau
von Vertrauen dient, gibt es ebenfalls eine Reihe von Ansätzen,
bei denen gestalterische Inhalte wie Zeichnungen
oder Fotos auf diese Art bewertet werden. Eine weitere
noch reduziertere Form des „Ratings“ stellt z. B. der durch
Facebook bekannt gewordene „Like-Button“ dar, der mit
einer simplen Geste (Daumen hoch bzw. Daumen runter)
eine Bewertung von Inhalten ermöglicht.
Kommentare
Abschließend soll die Bewertung durch textbasierte Annotation
in Form von Kommentaren erwähnt werden. Wie bereits
bei den Ansätzen zur Überarbeitung von Zeichnungen
angedeutet, eignen sich Kommentare zur Unterstützung der
Kommunikation und können auch bewertende Aussagen
beinhalten.
Kommentare als Bewertungsinstrument sind oft in Verbindung
mit einem „Rating“ durch Symbole verknüpft, die
die vereinfachte Bewertung mit zusätzlichen Informationen
erweitern und deren Zustandekommen erklären.
RELEVANTE PROJEKTE UND ANWENDUNGEN
Es werden nun einige Ansätze zur Bewertung von visuellen
Inhalten aufgezeigt, um relevante Aspekte für den Prototyp
herauszufiltern. Die vorgestellten Projekte sind nicht nur auf
die Bewertung von Bildern oder Zeichnungen ausgelegt,
sondern betreffen auch andere Ressourcen. Dabei wird
der Fokus auf Anwendungen gesetzt, die das „Tagging“
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
39

40
•••
oder „Rating“ als Bewertungsmöglichkeiten einsetzen. Die
Evaluation durch Annotation in Form „digitaler Tinte“ ist
mit den meisten bereits im vorherigen Kapitel vorgestellten
Anwendungen möglich.
ESP Game (Abbildung 20)
Einen interessanten Ansatz zur Auszeichnung und Bewertung
von Bildern liefert LUIS VON AHN mit dem ESP
Game. Ziel war es, die Motivation und Freude von Nutzern
am Spielen mit dem Produzieren nützlicher Ergebnisse
zu kombinieren. Da Computer kaum in der Lage sind
die Bedeutung von Bildern zu erkennen und zu beschreiben,
ist die einzig sinnvolle Möglichkeit, Inhalte manuell
durch Menschen zu „taggen“. Dies kann aber schnell sehr
aufwendig und teuer werden. Von Ahn wollte durch den
spielerischen Ansatz das Auszeichnen großer Bilddatenmengen
erleichtern, ohne den Nutzern das Gefühl einer
langweiligen oder lästigen Pflicht zu geben.
Das ESP Game wird online mit zwei zufällig bestimmten
Partnern gespielt, die nicht miteinander kommunizieren
können, jedoch kollaborativ innerhalb einer zentralen
Spieloberfläche synchron oder asynchron zusammenarbeiten.
Beide Spieler sehen das gleiche Bild und sollen dieses
mit einem Begriff beschreiben. Stimmen die Begriffe der
beiden Spieler überein, wird das nächste Bild angezeigt
und sie erhalten Punkte. Ziel der Spieler ist es in 2 ½ Minuten
so viele Übereinstimmungen beim „Taggen“ der Bilder
zu erreichen wie möglich. Die Vorschläge des jeweils anderen
Teilnehmers sind für die Spieler nicht sichtbar. Durch
die Integration von dynamisch generierten Tabu-Wörtern
wird ein spezifischeres Auszeichnen der Bilder ermöglicht.
Ist zu einem Bild bereits ein gemeinsamer Begriff gefunden
SketchCoLab
2
Theorie und Grundlagen
worden, wird dieser als Tabu-Wort hinterlegt. Erscheint das
entsprechende Bild im Laufe eines Spiels wieder, werden
die Tabu-Wörter den Spielern angezeigt und zwingen diese
nach alternativen bzw. spezifischeren „Tags“ zu suchen.
Zu beachten ist, dass es nicht die Aufgabe der Spieler ist
ein Bild exakt zu beschreiben, sondern lediglich ein aussagekräftiges
Label dafür zu finden. Da es eine Vielzahl
an Paaren gibt, die das Spiel parallel spielen, entsteht
ein großer Bestand aussagekräftiger Daten (VON AHN &
DABBISH, 2004).
Die Anwendungsbereiche für diesen Ansatz sind vielseitig,
weshalb Google nach der Veröffentlichung ein ähnliches
Tool, den „Google Image Labeler“, realisierte. Ziel
Abbildung 20: ESP Game » http://www.gwap.com/gwap/gamesPreview/espgame/
Quelle: http://many.corante.com/images/esp1.jpg » Abruf am 07.02.2012

war es innerhalb kurzer Zeit den riesigen Bildbestand von
Google möglichst optimal zu „verschlagworten“ und damit
eine verbesserte Bildersuche zu ermöglichen.
Sketcharoo (Abbildung 21)
Ein ähnliches Konzept wie das ESP Game verfolgt die
Webplattform Sketcharoo. Dabei stehen jedoch nicht Fotos
sondern Zeichnungen im Vordergrund. Bei der spielbasierten
Anwendung zeichnen zwei zufällig ausgewählte
Spieler jeweils abwechselnd, vorgegebene Begriffe und
erraten den passenden Begriff. Der Gedanke hinter diesem
Konzept ist es, ein besseres Verständnis zu erlangen, wie
Personen Textbegriffe in Zeichnungen und wieder zurück in
Text übertragen. Sketcharoo kombiniert deshalb den spielerischen
Ansatz mit einer Art Umfrage, bei der Teilnehmer
die innerhalb des Spiels entstandenen Zeichnungen
Abbildung 21: Sketcharoo » http://www.sketcharoo.com/
Quelle: Screenshot http://www.sketcharoo.com/game/ » Erstellt am
07.02.2012
mit Begriffen bzw. „Tags“ versehen können (HEBECKER &
EBBERT, 2010).
Eine synchrone und zentrale Kollaboration bzw. Kooperation
erfolgt somit beim Zeichnen und „Erraten“ der Begriffe,
während innerhalb der Umfrage eine asynchrone
kollaborative und kooperative Zusammenarbeit stattfindet.
LabelMe (Abbildung 22)
Die webbasierte Anwendung LabelMe ist eine Kombination
aus Annotations- und Taggingtool. Die Annotation erfolgt
nicht auf die Bilder im Ganzen, sondern auf Details
innerhalb der Bilder. Die Nutzer können mit Hilfe von Annotationswerkzeugen
(Polygontool und Radierer) bestimmte
Objekte in einem zufällig gezeigten Bild (oder Video)
markieren und mit einem passenden Begriff „taggen“. Dem
Anwender werden bereits von anderen Nutzern annotierte
Abbildung 22: LabelMe » http://labelme.csail.mit.edu/
Quelle: Screenshot http://www.labelme.csail.mit.edu/tool.html?collection=La
belMe&mode=i&folder=static_houses_boston_2005&image=IMG_3636.jpg »
Erstellt am 07.02.2012
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
41

42
•••
und „getaggte“ Bereiche mit den jeweiligen Schlagworten
angezeigt. Es steht ihm frei, schon bearbeitete oder noch
offene Bereiche bzw. Objekte zu „taggen“. Ziel dieses Projektes
ist es, möglichst optimale Algorithmen zur computergestützten
Erkennung von Objekten durch einen umfassenden
Datenbestand zu entwickeln („Sketch Recognition
Systems“) (RUSSELL, TORRALBA, MURPHY & FREEMAN,
2008).
Die Umsetzung als kollaboratives Webtool soll bei der
Erarbeitung einer möglichst großen Datenbasis helfen. Im
Gegensatz zum ESP Game werden die Nutzer zum Mitmachen
allerdings nicht in Form eines Spiels motiviert. Kollaboration
und Kooperation kann zeitgleich oder zeitversetzt
erfolgen, unterstützt jedoch nicht die „Awareness“ in Bezug
auf andere Teilnehmer.
Buzzillions (Abbildung 23)
„Rating-Systeme“ werden, wie bereits erwähnt, vor allem
im E-Commerce-Bereich genutzt um Vertrauen zwischen
(potenziellen) Käufern und Verkäufern aufzubauen. Buzzillions
ermöglicht die Kombination eines herkömmlichen „Ratings“
mit Sternen und „Tags“. Dabei können die Reviews,
also Berichte über einzelne Produkte, mit frei definierbaren
„Tags“ zu „Vorteilen“ „Nachteilen“ und „Geeignet für…“
vergeben werden. So können Nutzer Produkte schneller bewerten
und der Einsatz von „Tags“ erlaubt darüber hinaus
die Erstellung flexibler Reviews (SMITH, 2007, S. 10 f.).
Neben der Website gibt es Buzzillions ebenfalls als
mobile App. Der Kollaborations- bzw. Kooperationsaspekt
wird durch das gemeinsame Bewerten von gleichen oder
unterschiedlichen Produkten erreicht, aus dem sich durch
die Menge der Bewertungen eine aussagekräftige Informa-
SketchCoLab
2
Theorie und Grundlagen
tionsbasis ergibt.
Rate My Drawings (Abbildung 24)
Die Website bietet neben dem „DrawChat“, einem Multi-
User-Chatraum in dem Nutzer gemeinsam in Echtzeit ein
Bild oder eine Zeichnung erstellen können, die Bewertung
von Inhalten durch ein einfaches 5-stufiges „Rating-System“
in Verbindung mit einer Kommentarfunktion. Die Kommentare
können durch vordefinierte emotionale Symbole bzw.
Aussagen erweitert werden und losgelöst von der Bewertungsskala
erfolgen.
Bewertungssysteme, die mit einer Kombination aus Kommentaren
und „Rating“ arbeiten, sind in vielfältiger Form
und für unterschiedliche Anwendungsgebiete vertreten.
Abbildung 23: Buzzillions » http://www.buzzillions.com/
Quelle: Screenshot http://www.buzzillions.com/reviews/asus-eee-pad-transformer-tf101-b1-10-1-led-tablet-computer-tegra-2-ghz-reviews#writeReview
» Erstellt
am 07.02.2012

Flickr (Abbildung 25)
Die Foto-Community Flickr ist eine der ersten Webanwendungen
(auch als App verfügbar), die „Tags” einsetzte.
Primär dienen die „Tags“ zur Kategorisierung der Bilder
innerhalb des großen Datenbestands und unterstützen
somit die Nutzer bei der Suche nach relevanten Inhalten.
Bewertende „Tags“ die z. B. die Qualität eines Bildes auszeichnen
sind ebenfalls möglich. Das gemeinsame Ziel,
einen möglichst großen Bestand an Bildern aufzubauen
und Bilder mit anderen zu „teilen“ wird durch kooperatives
„Tagging“ unterstützt, da jeder Urheber eines Bildes
die „Verschlagwortung“ für seine Inhalte vornimmt. Ein
Bewertungsinstrument stellt die Möglichkeit dar, Kommentare
zu den Bildern bzw. für bestimmte Details innerhalb
der Bilder abzugeben.
Abbildung 24: Rate My Drawings » http://www.ratemydrawings.com/
Quelle: Screenshot http://www.ratemydrawings.com/drawings/manga/102935.html
» Erstellt am 07.02.2012
ERKENNTNISSE FÜR DEN PROTOTYP
Wie bereits im vorherigen Kapitel lassen sich durch die
weiteren erarbeiteten Erkenntnisse, mögliche und für den
Prototyp relevante Ansätze zur Bewertung von Zeichnungen
herausfiltern (siehe auch Tabelle 5).
Bewertungsansätze
Nutzer können „Tags“ als kollaboratives und kooperatives
Tool zur Evaluation von Zeichnungen und Skizzen einsetzen.
Dabei ist nicht nur die Annotation der gesamten Inhalte,
sondern auch von Details und Bereichen innerhalb der
Zeichnungen möglich.
„Tagging“ erlaubt die Bewertung sowohl nach gestalterischen
Gesichtspunkten, als auch nach der semantischen
Bedeutung der Inhalte. „Tags“ sind daher eine schnelle und
flexible Möglichkeit den Gestaltungsprozess zu fördern
Abbildung 25: Flickr » http://www.flickr.com/
Quelle: Screenshot http://www.flickr.com/photos/setik01/2505603657/ »
Erstellt am 07.02.2012
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
43

44
•••
und die Ergebnisqualität zu steigern.
Darüber hinaus stellen spielerische Lösungen eine Möglichkeit
dar, den Vorgang des „Taggings“ für Anwender
spannender und motivierender zu gestalten. Dies ist vor
allem dann sinnvoll, wenn ein gemeinsamer Konsens zu
einer Zeichnung oder einem Bild getroffen werden muss.
Positiver Effekt ist die Qualität der „Tags“, die durch die
Erarbeitung einer Übereinstimmung erreicht wird. Die entstandenen
Informationen führen wiederum zu einer verbesserten
Möglichkeit, Zeichnungen im Zuge des Gestaltungprozesses
iterativ und somit effektiv zu überarbeiten.
Die Bewertung durch Kommentare ist ebenfalls eine sinnvolle
Option, beinhaltet jedoch die Problematik, dass die
eigentliche Aussage der Kommentare nicht kategorisierbar
ist. Während „Tags“ und „Ratings“ eine computergestützte
Weiterverarbeitung und Auswertung ermöglichen, kann
die semantische Bedeutung innerhalb der Kommentare nur
von Menschen interpretiert werden. Da der Prototyp die
Auswertung der gewonnenen Ergebnisse erleichtern soll,
ist eine Kommentarfunktion – ähnlich wie die Bewertung
durch Annotation mit „digitaler Tinte“ – als alleiniges Bewertungsinstrument
weniger geeignet. Kommentare können
jedoch als Kommunikationsmittel eingesetzt und zusammen
mit den anderen Ansätzen zur Bewertung kombiniert werden,
um den Überarbeitungs- und Bewertungsprozess von
Zeichnungen zu unterstützen.
Eine weitere intuitive, jedoch weniger aussagekräftige
Form der Bewertung wird durch das „Rating“ erreicht.
Durch „Rating“ in Form von Symbolen wie Sternen oder
Gesten („Like-Button“) wird eine sehr allgemeine Aussage
zur Qualität eines Produktes, einer Zeichnung oder eines
Fotos getätigt. Diese Art der Bewertung ist demnach als
SketchCoLab
2
Theorie und Grundlagen
alleinige Möglichkeit für die Unterstützung des Gestaltungsprozesses
kaum geeignet, da zu wenige Informationen aus
der Bewertung ersichtlich sind. Vielmehr ist eine Kombination
von „Tagging“ und „Rating“ sowie Kommentaren
denkbar, um den Bewertungsprozess möglichst optimal zu
gestalten.
Kollaboration und Kooperation
Die Möglichkeit gemeinsam innerhalb einer Gruppe Inhalte
zu evaluieren, erfolgt meist in asynchroner Zusammenarbeit.
Dies betrifft vor allem die Bewertung und Auszeichnung
von Inhalten durch „Tags“ sowie durch „Rating“ und
Kommentare. Somit ist ein zeitversetztes kollaboratives,
d. h. die gleichen Inhalte werden von mehreren Personen
parallel „getaggt“ oder kommentiert bzw. auch kooperatives
(mehrere Personen „taggen“ oder kommentieren unterschiedliche
Inhalte) Teamwork denkbar.
Bei den vorgestellten spielbasierten Ansätzen, die „Tagging“
verwenden, erfolgt der kollaborative bzw. kooperative
Ansatz oft durch eine zeitgleiche Zusammenarbeit
innerhalb eines gemeinsamen zentralen Arbeits- bzw.
Spielbereichs. Je nach Spielprinzip kann sich die Ansicht
auf den gemeinsamen „Workspace“ jedoch unterscheiden
sowie ein unterschiedlicher Grad der Aufgabenteilung und
Zusammenarbeit ergeben.
Werkzeuge zur Bewertung
Bei textbasierten Annotationsformen, wie dem „Tagging“
und Kommentaren, stellt – im Gegensatz zur Auszeichnung
durch „digitale Tinte“ – die Textbox das zentrale Werkzeug
dar. Unterstützt durch die Möglichkeiten der Tastatur sind
weitere Funktionen in der Regel nicht notwendig, können

aber durch Textauszeichnungsoptionen erweitert werden.
Dies ist primär bei Kommentaren sinnvoll.
Das „Rating“ erfolgt ebenfalls lediglich durch eine einfache
Nutzeraktion, indem entsprechende Symbole angeklickt
werden.
Workflow
Da „Tagging“ und „Rating“ einfache und intuitive Interaktionsmöglichkeiten
darstellen, sind wenige den Workflow
betreffende Features notwendig. Wichtigste Möglichkeit
stellt das Löschen und Editieren von bereits erstellten Texteingaben
durch den Urheber dar. Dies wird meist in Form
Kernfunktionen Erweiterte Features
Ansätze zur Bewertung
• „Tagging“ • Kommentare
• Annotation • „Rating“
Werkzeuge zur Bewertung
• Textboxen • Symbole wie Sterne
• Freiform-Stift • Emotionale Symbole (z. B. Smilies, Häkchen, Like-It-Symbol, etc.)
Workflow
• Vordefinierte „Tags“
• Löschen von „Tags“ • Löschen von „Kommentaren“
• Editieren von „Tags“ • Editieren von „Kommentaren“
• Zuordnung von „Tags“ zu bestimmten Inhalten bzw. Details • Zuordnung von „Kommentaren“ zu bestimmten Inhalten bzw. Details
Tabelle 5: Mögliche Kernfunktionen / Features für das Bewerten von Zeichnungen innerhalb des Prototyps
Eigene Darstellung
von Interaktionselementen ermöglicht, die sich direkt bei
den Textelementen befinden.
• „Tags“ und Kommentare mit entsprechenden Nutzern verknüpfen
Computergestütztes kollaboratives und kooperatives Gestalten
SketchCoLab
•••
45

2.3. Tablet PCs und Tablet Computer
Der Siegeszug der mobilen Endgeräte hält weiter an. Neben
Smartphones verzeichnen nun Tablet PCs und Tablet
Computer, oft auch als Pads bezeichnet, hohe Verkaufszahlen.
Die neuartigen und flachen Geräte erobern seit einiger
Zeit damit sowohl den Markt, als auch immer breitere
Nutzergruppen.
2.3.1. Definitionen, Geschichte und Entwicklung
Einstieg
Im Hinblick auf die Aktualität und kontinuierliche Verbreitung
dieser Form von mobilen Geräten sind einige Begriffe
in Verwendung, die im Vorfeld einer Erklärung bedürfen.
Eine klare Abgrenzung dieser Begriffe ist jedoch zum Teil
schwierig, da die Unterschiede innerhalb der verschiedenen
Arten dieser mobilen Geräteklasse oft nicht eindeutig
sind und es darüber hinaus viele Überlappungen gibt, die
eine exakte Differenzierung erschweren. Im Folgenden
sollen zunächst die oft äquivalent und häufig genutzten
Schlagworte Tablet PCs und Tablet Computer differenziert,
sowie weitere relevante Begriffe zur Thematik erklärt werden.
Als erste Grundlage eignet sich die Betrachtung des gemeinsamen
Begriffs „Tablet“. Aus dem Englischen übertragen
bedeutet dieser so viel wie „Tafel“, „Schrifttafel“ oder
„Notizblock“ (PONS, 2012) und verdeutlicht somit bereits
die Vorteile und Eigenschaften dieser Geräteklasse. Ähnlich
einer Tafel oder eines Notizblockes wird sowohl die
Bedienung mittels natürlicher Eingabemöglichkeiten (z. B.
Stift oder Finger) als auch der Faktor Mobilität vermittelt.
Tablet PC
Zum Einstieg bieten RUTENBECK & RUTENBECK mit folgender
Definition einen ersten Überblick, was Tablet PCs
charakterisiert:
„A tablet PC is a personal computer with a screen that
can be written on with a special pen and held like one
might hold a clipboard. The pen can be used to click or
select objects on the screen (including keys on a visual
keyboard), and most tablet PCs as include software applications
that can record handwriting and convert handwriting
to text. Tablet PCs bring with them most of the same
advantages and disadvantages found with traditional
laptop computers.“
(RUTENBECK & RUTENBECK, 2006, S. 241)
Der von Microsoft eingeführte Begriff des Tablet PCs beschreibt
in erster Linie stiftbasierte Geräte ohne Tastatur,
deren wesentlicher Bestandteil ebenfalls die Handschrift-
und Gestenerkennung darstellt. Meist erfolgt die Eingabe
mit Hilfe von Digitizern, z. B. durch einen speziellen Stift,
dessen Spitze die Druckintensität und Position an den Tablet
PC übermittelt.
Vom Umfang der Funktionen und Bauweise ähneln sie
den Note- und Netbooks und beinhalten somit die üblichen
PC-Komponenten wie Arbeitsspeicher, Festplatte oder Grafikkarte.
Tablet PCs verfügen meist über ein angepasstes
Desktop-Betriebssystem (z. B. Linux, Windows) und sind
darüber hinaus für den mobilen Einsatz konzipiert. Eine
bekannte Form der Tablet PCs stellen die PDAs (Persönli-
Tablet PCs und Tablet Computer
SketchCoLab
•••
Tablet PC
Von Microsoft eingeführter
Begriff, der stiftbasierte Geräte
beschreibt, die ohne eine
Tastatur auskommen und über
Handschrift-, sowie Gestenerkennung
verfügen. Tablet PCs
verfügen über die üblichen PC-
Komponenten und ein angepasstes
Desktop-Betriebssystem.
Tablet Computer
Neue durch das iPad forcierte
Geräteklasse (meist in
Slate-Bauweise), die tragbare
über Touchscreen gesteuerte
Computer beschreibt, welche die
Technologie der Smartphones
aufgreifen und fortführen.
47

48
•••
Abbildung 26: Beispiel eines
Tablet PCs in der Bauform
„Convertible“ (Dell Latitude)
Quelle: http://cdn.crn.de/fileadmin/images/Dell_Latitude%20
XT3_2.jpg » Abruf am 25.01.2012
Convertible
Tablet PCs in der Bauweise „convertible“
können aufgrund des
um 180 Grad drehbaren Bildschirms,
sowohl als Notebook
mit Tastatur, als auch als Tablet
PC mit Stifteingabe verwendet
werden.
cher Digitaler Assistent) dar, die jedoch meist nicht mit Digitizern,
sondern mit berührungsempfindlichen Bildschirmen
zur Stifteingabe arbeiten und darüber hinaus auch weniger
leistungsfähig als allgemeine Tablet PCs sind. (BRAMBERG,
2011, S. 1 ff.; SCHULZE, 2010)
Tablet Computer
Tablet Computer stellen eine umfangreichere Kategorisierung
dar und beschreiben allgemein mobile Computer,
deren Merkmale eine möglichst flache Bauweise, sowie
der Verzicht auf externe Eingabegeräte wie beispielsweise
Tastatur sind. Im Gegensatz zu Tablet PCs ist die Eingabeform
generell nicht auf die Stifteingabe begrenzt, sondern
kann auch in anderer Form, z. B. per Touchscreen erfolgen.
Technologisch gesehen wurden die Eigenschaften von
Smartphones, so auch entsprechende mobile Betriebssysteme
auf diese Form der tragbaren Computer übertragen.
Eine der bekanntesten Eigenschaften von Tablet Computern
ist die Erweiterung der Funktionalität durch „Applications“
sogenannte Apps (kleine Programme). Tablet
Computer werden oft auch als Pads, Surf- oder Webpads
bezeichnet und verfügen über eine geringere Leistungsfähigkeit
als herkömmliche Desktopsysteme oder Notebooks.
Darüber hinaus werden sie primär für den Konsum von
digitalen Medien und Informationen eingesetzt, während
Tablet PCs sich auch für umfangreichere und kreative Aufgaben
wie beispielsweise dem Zeichnen eignen. Den wohl
derzeit bekanntesten Vertreter solcher Tablet Computer
stellt das iPad dar (BRAMBERG, 2011, S. 10 f.; SCHULZE,
2010).
SketchCoLab
2
Theorie und Grundlagen
Merkmale von Tablet Computern und Tablet PCs
Durch die Begriffserklärungen wird deutlich, dass eine
klare Abgrenzung schwierig ist und sich darüber hinaus
viele Parallelen zeigen. Deshalb kommt es in der Praxis
zu einer Vermischung der beiden Begriffe, so dass diese
oft als identisch wahrgenommen und verwendet werden.
Generell lassen sich jedoch einige Eigenschaften die einen
Tablet PC oder Tablet Computer auszeichnen, feststellen.
In ihrem Buch BUILDING TABLET PC APPLICATIONS erörtern
JARRETT & SU diese Eigenschaften, dabei sind die
Grenzen zwischen Tablet PC und Tablet Computer allerdings
fließend zu betrachten.
Ein wichtiges Merkmal eines Tablet PCs und Tablet Computers
ist demnach der Form-Faktor, der sich vor allem in
der Größe und Gestalt der Geräte widerspiegelt. Ziel ist
neben einem angenehm großen Display und einer möglichst
flachen Bauart auch ein möglichst geringes Gewicht.
Die Herausforderung liegt darin, diese drei Parameter in
ihrer optimalsten Ausprägung miteinander zu kombinieren.
JARRETT & SU (2009, S. 4) beschreiben deshalb den idealen
Tablet Computer bzw. Tablet PC als so dünn wie ein
Klemmbrett, so groß wie ein Blatt Papier, so leicht wie eine
Floppy Disk und so langlebig wie eine TV-Fernbedienung.
In Bezug auf den Form-Faktor sind mehrere Konzepte der
Gehäuseform zu unterscheiden.
Die ursprünglichste Form von Tablet PCs ist dabei die
Bauart „Convertible“ (englisch für umwandelbar), die sich
dadurch auszeichnet, dass es sich im Wesentlichen um
ein vollwertiges Notebook mit Tastatur und einem um 180
Grad drehbaren Bildschirm handelt (siehe Abbildung 26).
Umwandelbar bedeutet hier, Nutzer können das Gerät sowohl
als Notebook mit Tastatur, als auch als Tablet PC mit

Stifteingabe verwenden (SCHULZE, 2010).
Eine weitere gängige Bauart sind die sogenannten „Slates”
(englisch für Schiefertafel), Geräte die aus nur einem
Block bestehen. Sie verzichten auf eine physische Tastatur
und sind per Touchscreen und / oder Stifteingabe bedienbar
(siehe Abbildung 27). Der Anschluss zusätzlicher
externer Geräte wie z. B. einer Tastatur ist aber generell
möglich. Die Slates begründen dabei maßgeblich die neue
Kategorie mobiler Geräte der Tablet Computer wie dem
iPad. (BRAMBERG, 2011, S. 3; SCHULZE, 2010)
Die „hybride” Bauform versucht die Vorzüge der beiden
Arten „Convertible“ und „Slate“ miteinander zu verbinden.
Die Tastatur kann ebenfalls hinter dem Bildschirm integriert
werden und ist zugleich jedoch komplett abnehmbar. Es
existieren allerdings nur wenige Modelle dieser Bauart.
(BRAMBERG, 2011, S. 4)
Als „UMPCs” (Ultra-Mobile PC) werden tragbare Computer
bezeichnet, die kleiner als Subnotebooks oder Netbooks,
jedoch etwas größer als PDAs sind. Sie setzen meist
auf den Einsatz eines vollwertigen Betriebssystems wie beispielsweise
Windows 7 (siehe Abbildung 28). Es handelt
sich dabei um einen kompletten Personal Computer, der in
der Regel ausschließlich mittels Finger oder Stift gesteuert
wird. Es existieren aber darüber hinaus auch Modelle, die
die Eingabe per integrierter Tastatur oder spezieller Tasten
ermöglichen. Sie sind deshalb der Bauform der Slates zuzuordnen,
jedoch in der Regel kleiner als herkömmliche
Tablet PCs bzw. Tablet Computer. (BRAMBERG, 2011, S.
4; SCHULZE, 2010)
JARRETT & SU beschreiben neben dem genannten Aspekt
der Form noch weitere Faktoren, die einen Tablet PC bzw.
Tablet Computer auszeichnen (siehe auch Abbildung 29).
So wird die Möglichkeit der Stifteingabe aufgrund
der Präzision, Zielgenauigkeit und Kontrolle als zentrale
Interaktionsart definiert, die jeder Tablet PC und Tablet
Computer zur Verfügung stellen sollte. Weitere Arten der
Steuerungen, z. B. mittels Finger, für alternative Anwendungsszenarien
sind jedoch nicht ausgeschlossen und
werden von den meisten Geräten ebenfalls zur Verfügung
gestellt.
Tablet PCs und Tablet Computer sind darüber hinaus als
eigenständig funktionierende Geräte zu betrachten. Das
bedeutet, dass sie ohne den Anschluss an ein Host-Gerät
oder Netzwerk voll funktionsfähig sein müssen, wobei die
Integration innerhalb von Netzwerken als eine weitere
wichtige Eigenschaft anzusehen ist.
Die Unterstützung möglichst vieler Anwendungsbereiche
ist ebenfalls ein zentraler Bestandteil. Dem Nutzer sollen
alle Möglichkeiten, die auch ein Desktop-System bietet
zur Verfügung stehen ohne Begrenzung auf spezielle
Einsatzbereiche (limitiert z. B. durch die Rechenleistung).
(JARRETT & SU, 2009, S. 5 f.) Dabei ist zu bemerken, dass
dies derzeit in der Praxis eher auf Tablet PCs und weniger
auf Tablet Computer zutrifft, die aufgrund ihrer meist (noch)
geringeren Leistungsfähigkeit und Ausstattung hinsichtlich
der Einsatzgebiete zum Teil eingeschränkt sind. Außerdem
zeigt sich, dass der große Erfolg der Tablet Computer im
Wesentlichen darauf basiert, dass diese Geräteklasse sowohl
die Lücke zwischen Smartphones und Notebooks
schließt, als auch besonders für bestimmte Einsatzgebiete
(z. B. mobiles Surfen, Medieninhalte konsumieren) geeignet
ist. Abschließend fasst die folgende Beschreibung die
bereits ausgeführten zentralen Eigenschaften eines Tablet
Computers bzw. Tablet PCs noch einmal zusammen:
Tablet PCs und Tablet Computer
SketchCoLab
•••
Abbildung 27: Das iPad als
eines der bekanntesten „Slates“
Quelle: http://blog.guifx.
com/2010/01/27/touchscreensthat-changed-the-world/
» Abruf am
28.01.2012
Slates
Diese Bauweise beschreibt
Tablet PCs in sehr flacher Form,
die nur aus einem Block (ohne
Tastatur) bestehen und per Stift
oder Touchscreen bedient werden.
Tablet Computer sind in der
Regel als „Slates“ konzipiert.
49

50
•••
Abbildung 28: UMPC mit
Touchscreen und integrierten
Tastaturelementen
Quelle: http://www.pressrelations.
de/presseservice_material/pressemitteilungen/pics/287356_
20077442215277778.jpg » Abruf
am 25.01.2012
Hybrid
Die hybride Bauweise vereinigt
die Vorteile der Formen „Convertible“
und „Slate“ mittels einer
zusätzlichen, abnehmbaren
Tastatur.
UMPC
Ultra Mobile PCs sind kleine
Tablet PCs, die etwas größer als
PDAs, aber kleiner als Netbooks
sind und per Stift, Touchscreen
und / oder am Geräte vorhandenen
Tastenelementen bedient
werden.
SketchCoLab
Touchscreen / Finger
Stifteingabe
Geringes Gewicht
Mobile Betriebssysteme wie
z. B. Android
2
Stiftbasierte Eingabe
Theorie und Grundlagen
Merkmale
Form-Faktor
Flache Bauweise
Stiftbasierte Eingabe
Angepasste Desktop-
Betriebssysteme wie z. B.
Windows
Vielseitige
Anwendung
Großes Display
Slate Hybrid Convertible UMPC
Tablet Computer
z. B.
Pads
Eigenständiges Gerät
Tablet PCs
Abbildung 29: Unterschiede und Merkmale von Tablet PCs und Tablet Computern
Eigene Darstellung
z. B.
PDAs
Touchscreen / Finger
Hardware wie bei
Desktop-Rechnern z. B.
Festplatte, Grafikkarte

“A tablet computer is a thin stand-alone general-purpose
computer with an integrated interactive screen. It typically
has a large screen und accepts a special pen (a stylus) as
an input device.”
(JARRETT & SU, 2009, S. 4)
Abbildung 29 verdeutlicht noch einmal die Eigenschaften
und Differenzen von Tablet PCs und Tablet Computer.
Geschichte der Tablet PCs und Tablet Computer
Während der Siegeszug der Tablet Computer vor allem
durch die Einführung des iPads erst in den letzten zwei
Jahren begonnen hat, ist die Historie der mobilen und
„handlichen“ PCs entgegen des ersten Eindrucks keine
kurze Geschichte. Bereits vor über 40 Jahren (1968) entstand
mit dem von Alan Kay entwickelten Dynabook (siehe
Abbildung 30) der heutige Vorläufer der Tablet PCs und
Tablet Computer und sogar sämtlicher mobiler Geräte. Vornehmlich
geplant als digitales Malbrett für Kinder, sollte die
Eingabe mittels integrierter Tastatur, sowie per Stift möglich
sein. Obwohl das Dynabook nie gebaut wurde, ist es
dennoch als Grundstein für die darauf folgenden weiteren
Entwicklungen anzusehen. (KEPPLER, 2010)
Erst Ende der 80er- und Anfang der 90er-Jahre entstanden
mit der an Bedeutung gewinnenden stiftbasierten Interaktionsform
neue innovative mobile Geräte, die versuchten
die Grundidee des Dynabooks fortzuführen. Als Grundlage
sollte die in den frühen 80er-Jahren als zukunftsträchtig angesehene
Technologie der Handschrift-Erkennung dienen,
die von Nobelpreisträger DR. CHARLES ELBAUM 1991 in
Form eines ersten Handschrifterkennungssystems (Nestor-
Writer) weiterentwickelt wurde.
Zunächst allerdings wurde Anfang bis Mitte der 80er-
Jahre der Fokus auf die Entwicklung tragbarer Computer,
den Notebooks gelegt. Man sah damals in den Notebooks
eine vielversprechende Möglichkeit, Mobilität mit Rechenpower
und ausreichend Bildschirmplatz ideal zu kombinieren
(MCLEAN, 2011).
1989 entstand dann als eines der ersten mobilen Geräte
mit Touchscreen das von Jeff Hawkins konzipierte
GridPad (siehe Abbildung 31). Der spätere Gründer von
Palm, einem Hersteller von PDAs (Persönlichen Digitalen
Assistenten), setzte dabei auf die Eingabe mittels kleiner
Plastikstifte und trug somit maßgeblich zum Erfolg der PDAs
bei. Aber auch Microsoft sah zu dieser Zeit Potentiale im
Bereich der Tablet Computer und entwickelte ab 1992 die
zur Unterstützung der Stifteingabe gedachten Pen Extensions
für Windows 3.1 (KEPPLER, 2010).Es wurden in den
90er-Jahren einige Geräte entwickelt, die darauf basierten,
durchsetzen konnte sich das Konzept allerdings nicht.
Gründe für das Scheitern wurden sowohl in der schwierigen
Handhabung, als auch in der fehlerhaften Handschriftenerkennung
gesehen (BLICKENSTORFER, 2005).
Eines der Geräte war das von Toshiba entwickelte DynaPad
T100X, das heute neben dem GridPad als einer der
ersten wirklichen Vorläufer der Tablet PCs gilt.
1993 stellte Apple mit Newton (siehe Abbildung 32),
einen als digitales Notizbuch ausgelegten Tablet PC vor,
der über eine lernfähige Handschrifterkennung verfügte
und ebenfalls stiftbasiert bedient werden konnte. Das Gerät
floppte allerdings aufgrund des hohen Preises und fehlerhafter
Funktionalität, führte jedoch erstmals den Begriff
der PDAs ein.
Tablet PCs und Tablet Computer
SketchCoLab
•••
Abbildung 30: Dynabook
Quelle: http://bobjunior.com/wpcontent/uploads/2010/02/Dyna-
Book.png » Abruf am 26.01.2012
Abbildung 31: GridPad
Quelle: http://blog.guifx.
com/2010/01/27/touchscreensthat-changed-the-world/
» Abruf am:
28.01.2012
51

52
•••
Abbildung 32: Apple Newton
Quelle: http://blog.guifx.
com/2010/01/27/touchscreensthat-changed-the-world/
» Abruf am
28.01.2012
Abbildung 33: PalmPilot
Quelle: http://blog.guifx.
com/2010/01/27/touchscreensthat-changed-the-world/
» Abruf am:
Die Idee der stiftbasierten PDAs setzte sich erst ab 1996
mit der Einführung des Palm Pilots (siehe Abbildung 33)
endgültig durch, nachdem der 1992 vorgestellte Zoomer
weniger erfolgreich war, jedoch als Urvater aller PDAs gilt
(KEPPLER, 2010).
Die Bedeutung von PDAs sinkt heute jedoch mit der zunehmenden
Verbreitung der Smartphones.
Nach der Vielzahl von Misserfolgen galt ab 1995 der
Bereich der stiftbasierten Computer und Tablet PCs zumindest
für den Konsumentenmarkt als tot und viele Unternehmen
sahen in dieser Technologie keine Zukunft mehr. Bill
Gates, Mitbegründer von Microsoft, hielt jedoch über die
Jahre an der Idee der stiftbasierten Computer fest und führte
1970
1968
Dynabook
28.01.2012 Abbildung 34: Wichtige Meilensteine der Tablet PCs und Tablet Computer
Eigene Darstellung
SketchCoLab
2
1980
1989
GRIDPad
Theorie und Grundlagen
1990
1991
NestorWriter
1992
Windows für Microsoft Pen Computing
Toshiba Dynapad
Zoomer
den Begriff der Tablet PCs 2002 als Spezifikation ein und
sorgte damit nachhaltig für ein wiederbelebtes Interesse an
diesem Konzept. Die früheren Versuche, die Tastatureingabe
mit einer komplett über Handschrift und Stimme funktionierenden
Bedienung zu ersetzen, wurden aufgeweicht
und auch die mittlerweile fortgeschrittenen Technologien
(Multi- und Singletouch) begünstigen den weiteren Prozess
(BLICKENSTORFER, 2005).
Apple verschaffte schließlich mit der Einführung des
iPads 2010 dem Tablet PC bzw. der neuen Geräteklasse
Tablet Computer den endgültigen Durchbruch und konnte
die entstandene Lücke zwischen Notebooks und PDAs
bzw. Smartphones erfolgreich schließen (DÖRNER, 2011).
1995
Microsoft Pen Computing 2.0
1996
Palm Pilot
1993
Apple Newton
1999
Microsoft Pocket PC
2000
2002
Microsoft Tablet PC
2010
iPad
2010

Abbildung 34 zeigt noch einmal einen Überblick wichtiger
Meilensteine der TabletPCs und Tablet Computer
Entwicklung und Prognose
Mittlerweile gibt es eine Vielzahl von Herstellern und die
ständig steigende Nachfrage sorgt weiter für beachtliches
Wachstum in diesem Bereich. Ein Vergleich der weltweit
verkauften Tablet Computer von Anfang 2010 bis Ende
2011 mit einer Steigerung der Absatzzahlen von über 470
Prozent zeigt dies deutlich (siehe Abbildung 35) (CREA-
LYTICS, 2011).
Aber auch bezogen auf Deutschland etablierte sich der
Markt der Tablet Computer in den letzten Jahren und die
Verkaufszahlen werden laut aktueller Prognosen für das
18
16
14
12
10
8
6
4
2
0
Mio.
Quartal 2 - 2010 Quartal 3 - 2010 Quartal 4 - 2010 Quartal 1 - 2011 Quartal 2 - 2011 Quartal 3 - 2011
3,5 4,4 9,7 7,2 14 16,7
Abbildung 35: Entwicklung der Verkaufszahlen von Tablet Computern
(weltweit) von 2010 bis 2011
Eigene Darstellung nach Quelle: http://www.crealytics.de/blog/wpcontent/uploads/2011/11/Weltweit-Verkaufte-Tablet-PCs1.png
» Abruf am
26.01.2012
Jahr 2012 und darüber hinaus sowohl deutschland- als
auch weltweit weiter steigen (BITKOM, 2011; GARTNER,
2010) (siehe Abbildung 36). In welcher Form sich der
Markt der digitalen Endgeräte durch die explodierenden
Absatzzahlen der Tablet Computer verändert, wird sich
zeigen.
Einige Prognosen gehen davon aus, dass eine Verschiebung
und Substitution innerhalb der einzelnen Geräteklassen
stattfinden wird. So werden z. B. laut einer Studie
von Forrester Research für den amerikanischen Markt,
Netbooks von den Tablet Computern verdrängt werden
und bis 2015 sogar einen Anteil von 23 Prozent aller verkauften
Computer ausmachen. Tablet Computer werden
demnach möglicherweise auch immer mehr die Rolle von
160
140
120
100
80
60
40
20
0
Mio.
2010 2011 2012 2013
19,4 (0,8 in Deutschland) 54,7 (2,1 in Deutschland) 103,4 (2,7 in Deutschland) 154,1
Abbildung 36: Erwartete Entwicklung der Verkaufszahlen von Tablet
Computern (weltweit) in den nächsten Jahren
Eigene Darstellung nach Quelle: http://www.bitkom.org/files/documents/Tablet_Computer_Absatz11_download.jpg
und http://www.gartner.com/it/page.
jsp?id=1452614 » Abruf am 26.01.2012
Tablet PCs und Tablet Computer
SketchCoLab
•••
53

54
•••
Taktiles Interface
Eingabegeräte wie Tastatur bzw.
Computermaus, um Software-
Interfaces überhaupt „berühren“
zu können.
Touchscreen
Eine Form taktiler Interfaces, bei
der die Interaktion durch Erkennung
eines oder mehrerer Berührungspunkte
erfolgt, ausgelöst
durch Finger oder entsprechend
geeignete Geräte (z. B. Stift).
Desktop-PCs einnehmen und diese teilweise auch ersetzen
(SCHMIDT, 2010).
2.3.2. Berührungsempfindliche Bildschirme
Maßgeblich verantwortlich für den Siegeszug der Tablet
Computer ist neben der Mobilität, vor allem die Möglichkeit
der direkten Eingabe und Steuerung durch Berührung
auf dem Monitor. Diese neuartige Form der Mensch-Computer-Interaktion
erlaubt somit die Steuerung mit einem
(Singletouch), zwei (Dualtouch) oder mehreren Fingern
(Multitouch) und entspricht daher dem Anspruch einer möglichst
direkten Manipulation bisher am meisten. Darüber
hinaus erlauben Bildschirme mit Multitouch-Technologie die
zeitgleiche Interaktion an verschiedenen Stellen auf dem
Bildschirm und bieten erweiterte Steuerungsmöglichkeiten
durch verschiedenste Gesten.
Touchscreens sind neben der Maus oder Tastatur der
Kategorie der taktilen Interfaces zuzuordnen, also Eingabegeräte
mit denen die Steuerung von Software-Interfaces
überhaupt erst möglich wird (STAPELKAMP, 2010, S. 224).
Um sich zunächst der Unterschiede gegenüber den
Desktop-Systemen, die mit der Maus gesteuert werden, bewusst
zu werden, sind mehrere Faktoren festzustellen (siehe
auch Tabelle 6). So gibt es bei der Steuerung über Single-,
Dual- und Multitouch-Screens keine Zeigesteuerung und
somit auch keine Hover-Effekte, es sei denn der Monitor
des betreffenden Geräts unterstützt eine Näherungsempfindlichkeit.
Multitouch-Systeme erkennen darüber hinaus
mindestens zwei, in der Regel aber mehrere Berührungspunkte,
während es bei der Steuerung mit der Maus nur
SketchCoLab
2
Theorie und Grundlagen
einen relevanten Interaktionspunkt gibt. Nachteilig bei der
Bedienung mittels berührungsempfindlicher Bildschirme ist
dagegen die geringere Präzision bei der Steuerung und
die Problematik, oft relevante Bildschirminhalte mit der
Hand während der Interaktion zu verdecken (DORAU,
2011, S. 56 f.).
Die Möglichkeit der stiftbasierten Bedienung, die nahezu
alle Touchscreen-Geräte erlauben, relativiert diesen
Nachteil aber zum großen Teil. Auch die haptische
Rückmeldung, die bei einer externen Tastatur oder Maus
gegeben ist, kann derzeit von den gängigen Touchscreen-
Systemen (noch) nicht abgebildet werden.
Darüber hinaus bietet jedoch diese neuartige Form der
Interaktion ein riesiges Potential und zeichnet sich durch
die vielfältigen Einsatzmöglichkeiten in verschiedensten
Anwendungsszenarien aus.
(Multi)Touch-Technologien
Technologisch gesehen, existieren mehrere Ansätze bei
Gestenpotential Touchscreen
Touch-Oberfläche
Zeigersteuerung nein
2 Freiheitsgrade für Fingerbewegung
xy-Positionierung
2 Zustände pro Finger • detektiert
• nicht detektiert
Tabelle 6: Gesten-Potential von Touchscreens
Darstellung nach DORAU (2011, S. 56)

der Herstellung von Multitouch-Geräten, wobei die in Bezug
auf Tablet Computer beiden gängigsten im Folgenden
kurz vorgestellt werden sollen.Der Großteil der derzeit verfügbaren
Tablet Computer verfügt über ein Touchdisplay
mit kapazitiver Oberfläche. Diese Oberfläche besteht aus
einer Schicht, die elektrisch geladen ist und nach Berührung
durch den oder die Finger ihre elektrische Ladung
verändert. Durch diese Veränderung der Ladung entsteht
die Positionsermittlung der aktuellen Interaktion und das
Gerät reagiert entsprechend (siehe auch Abbildung 37).
Vorteil der kapazitiven Bildschirme ist demnach, dass für
die Bedienung kein Druck notwendig ist und somit eine
äußerst stabile und kratzfeste Bauweise möglich ist. Dagegen
ist die stiftbasierte Steuerung bei einer kapazitiven
Oberfläche grundsätzlich nicht möglich, es sei denn, es
handelt sich um einen elektrisch leitfähigen und speziell
genaue Spannungsmenge an
allen Ecken des Touchscreens
Oberfläche
Abbildung 37: Funktionsweise kapazitiver Touchscreens
Eigene Darstellung nach Quelle: http://www.pocketpc.ch/faqworkshops/65128-resistiver-kapazitiver-touchscreen.html
» Abruf am
28.01.2012
gleichmäßiges
elektrisches Feld
den Anforderungen entsprechenden Stift.
Eine weitere Bauart berührungsempfindlicher Bildschirme
stellt die resistive Oberfläche dar. Die Ermittlung der
gedrückten Position erfolgt durch die Veränderung des
elektrischen Widerstands auf der Oberfläche. Diese Oberfläche
besteht aus zwei voneinander getrennten Schichten,
die sich zunächst nicht berühren. Erst durch leichten Druck
werden die beiden Schichten zusammengedrückt und lösen
somit einen elektrischen Impuls aus, der für die Positionsermittlung
sorgt (siehe auch Abbildung 38). Die resistive
Bauweise ermöglicht im Gegensatz zur kapazitiven Technologie
die Bedienung mit jedem Gegenstand, also auch
einem normalen Stift. Dagegen sind resistive Bildschirme
anfälliger für Kratzer und dergleichen, da die Oberfläche
aus elastischem Material bestehen muss (DORAU, 2011,
S. 58 f.). Tabelle 7 zeigt zusammenfassend die jeweiligen
X-Spannung
Abbildung 38: Funktionsweise resistiver Touchscreens
Eigene Darstellung nach Quelle: http://mehrspassdennje.com/wordpress/wpcontent/uploads/2009/08/resistiver_touchscreen.png
» Abruf am 28.01.2012
Y-Spannung
flexible,
hartbeschichtete
Außenmembran
Tablet PCs und Tablet Computer
leitfähige
ITO Schichten
Glasscheibe
isolierte
Abstandhalter
SketchCoLab
•••
Kapazitiver Bildschirm
Die Oberfläche eines kapazitiven
Touchscreens besteht aus einer
elektrisch geladenen Schicht,
die bei Berührung durch den
Finger (oder speziellen Eingabestiften)
die elektrische Ladung
verändert und somit die Position
der Interaktion aufnimmt.
Resistiver Bildschirm
Die Position der Interaktion wird
durch die Veränderung des
elektrischen Widerstands auf
der Oberfläche ermittelt und
kommt durch Zusammendrücken
(elektrischer Impuls) zweier zunächst
voneinander getrennter,
sich nicht berührender Schichten
zustande.
55

56
•••
Abbildung 39: PLATO IV
Quelle: http://blog.guifx.
com/2010/01/27/touchscreensthat-changed-the-world/
» Abruf am
28.01.2012
Abbildung 40: Touch-Tablet
Bill Buxton
Quelle: http://billbuxton.com/
multitouchOverview.html » Abruf am
28.01.2012
Vor- und Nachteile von kapazitiven und resistiven Touchscreens.
Meilensteine und Geschichte der Touchscreens
Die Entwicklung der berührungsempfindlichen Bildschirme
reicht bis in das Jahr 1965 zurück, in dem erstmals E. A.
Johnson eine Technik auf Basis kapazitiver Sensorik zur Entwicklung
von Touchscreens beschreibt. Die gleiche Technik
also, die heute bei den meisten Tablet Computern zum Einsatz
kommt. Der 1972 vorgestellte PLATO IV (siehe Abbildung
39) von IBM mit einer Infrarot-Berührungserkennung
gilt als erster Computer, der direkt über den Bildschirm gesteuert
werden konnte.
Tabelle 7: Vor- und Nachteile kapazitiver und resistiver Touchscreens
Eigene Darstellung
SketchCoLab
Kapazitiver Touchscreen Resistiver Touchscreen
2
Theorie und Grundlagen
Vorteile
• Besser geeignet für Multitouch • Günstige Technologie
• Robuste Bauweise (z. B. kratzfestes Display) • Barrierefreiheit: kann mit beliebigen Gegenstand bedient werden
(z. B. Armprothese)
• Lange Lebensdauer • Präzise Interaktion durch dünne Stifte oder Fingernägel
• Gute optische Transparenz
• Sehr präzise Positionserkennung bei Interaktion
Nachteile
• Weniger präzise, da Eingabe generell mit den Fingern erfolgt • Anfälliger für Kratzer, etc.
• Nicht barrierefrei • Kürzere Lebensdauer
• Stifteingabe nur mit speziellen Stiften möglich (allerdings weniger
präzise, da dickere Spitzen)
• Handballen- bzw. Handschatten-Problem
• Positionserkennung bei Fingeraktion weniger präzise
Über die Jahre folgten weitere Ansätze, wie beispielsweise
ein 1984 von den Bell Laboratories entwickelter
Röhrenmonitor, der mittels Multitouch steuerbar war. 1985
stellte Bill Buxton, ein Pionier im Bereich der Computer-
Mensch-Interaktion, ein Touch-Tablet (siehe Abbildung 40)
vor, dass eine beliebige Anzahl von gleichzeitigen Berührungspunkten
hinsichtlich Position und Druckintensität verarbeiten
konnte.
Weitere wichtige Meilensteine waren zum einen das im
Jahr 1992 erschienene Mobiltelefon „Simon“ von IBM (siehe
Abbildung 41), das als erstes Smartphone überhaupt
gilt und über einen Singletouch-Bildschirm verfügte. Zum
anderen die von der Firma Wacom entwickelten gleichna-

migen Grafiktabletts, die in der Lage waren, sowohl mehrere
Geräte, als auch mehrere Berührungspunkte parallel
zu verarbeiten. Die Steuerung konnte dabei über einen
drucksensitiven Stift und gleichzeitig mit einem der Maus
ähnlichen Eingabegerät (Puck) erfolgen.
Die Touch- bzw. Multitouchtechnologie ermöglichte eine
Vielzahl weiterer interessanter Innovationen, wie beispielsweise
die Entwicklung von Tangible Interfaces, Geräten die
die Identität, Position und Drehung verschiedener physikalischer
Objekte erkennen und zur Steuerung nutzen können.
2007 gelang der Multitouch-Technologie mit dem Erscheinen
des iPhones der Durchbruch. Neuartige Interaktionsformen
wie das Pinching, also dem Vergrößern und
Verkleinern von Objekten mit einer Hand und die umfang-
1972
PLATO IV von IBM:
erster per Bildschirm
steuerbarer Rechner
1970
1965
E.A. Johnson: erstes Konzept
zum Thema Multitouch
Abbildung 43: Historische Meilensteine der Multitouch-Technologie
Eigene Darstellung
1980
1984
Per Multitouch bedienbarer
Röhrenmonitor, Bell Laboratories
1985
Bill Buxton: Entwicklung
eines Multitouch-Tablets
1990
1992
Wacom Grafiktabletts
reichen Nutzungsmöglichkeiten unterstützen den Erfolg.
Im gleichen Jahr erschien auch mit dem Microsoft Surface
(siehe Abbildung 42) ein multitouchfähiger Tisch, der sowohl
mehrere Finger, Hände und Gesten erkennen kann,
als auch Objekte, die auf der Oberfläche des Tisches liegen.
Erfolgreich fortgeführt wurden die Entwicklungen der
Multitouchtechnologie dann ebenfalls im Bereich der Tablet
Computer und maßgeblich durch das iPad von Apple
geprägt (BUXTON, 2011; STAPELKAMP, 2010, S. 254).
Abbildung 43 zeigt einen Überblick über historische Meilensteine
der Multitouch-Technologie.
Stifteingabe
Die Bedeutung der stiftbasierten Eingabe geht einher mit
2000
1992
Simon: erstes Smartphone von
IBM mit Singletouch-Bildschirm
2007
iPhone
2007
Microsoft Surface:
Multitouch-Tisch
2010
iPad
2010
Tablet PCs und Tablet Computer
SketchCoLab
•••
Abbildung 41: IBM Simon
Quelle: http://blog.guifx.
com/2010/01/27/touchscreensthat-changed-the-world/
» Abruf am
28.01.2012
Abbildung 42: Microsoft
Surface
Quelle: http://blog.guifx.
com/2010/01/27/touchscreensthat-changed-the-world/
» Abruf am
28.01.2012
57

58
•••
der Technologie der Touchscreens. Während bereits die
ersten mobilen PDAs, z. B. der Apple Newton und der Palm
Pilot die Eingabe per Stift unterstützen, ist der Stift auch
aktuell ein oft genutztes Interaktionswerkzeug, maßgeblich
gefördert durch die anhaltende Verbreitung der Smartphones
und Tablet Computer. Gründe hierfür sind der hohe
Grad an Präzision, die mit der Verwendung klassischer
Stifte einhergehende haptische Erfahrung, sowie eine im
Gegensatz zur Maus angenehmere Form der Bedienung.
Aber auch losgelöst vom Aspekt der mobilen Geräte, ist
die Stifteingabe eine wichtige Form der Mensch-Maschine-
Interaktion für verschiedenste Anwendungsbereiche. So
wurde mit dem Stifttablett ein vor allem für Grafiker optimiertes
Eingabegerät geschaffen, welches die natürlichen
Merkmale von Zeichenwerkzeugen bei der Arbeit an einem
PC überträgt (DORAU, 2011, S. 70 ff.).
Mögliche Einsatzgebiete sind dabei neben den klassischen
gestalterischen Bereichen, wie Fotoretusche oder
Bildbearbeitung , auch Gebiete der Forschung, Lehre oder
Konstruktion.
2.3.3. Tablet Computer als kollaboratives und
kooperatives Gestaltungstool
Tablet Computer erfahren derzeit vor allem im Konsumentenbereich
vermehrt Verbreitung und werden dort primär
zur Unterhaltung und Informationsbeschaffung genutzt.
Aber auch in Wirtschaft, Industrie, Verwaltung, sowie Bildung
und Forschung ist der Tablet Computer und Tablet PC
längst angekommen. So findet er beispielsweise Verwendung
in Krankenhäusern (elektronische Patientenakte), als
SketchCoLab
2
Theorie und Grundlagen
Lehr- und Lernmedium oder als unterstützendes Präsentationstool
(BRAMBERG, 2011, S. 8).
Die Anwendungsmöglichkeiten sind vielseitig und der
Tablet Computer bzw. Tablet PC erfüllt somit eine bestimmte
Rolle in der Welt der digitalen Geräte. Dabei ist ein Ersatz
der herkömmlichen Desktop-Rechner allerdings nicht zu erwarten,
vielmehr besetzen Tablet Computer eine Nische
bzw. überbrücken eine entstandene Lücke und vereinigen
wichtige Vorteile verschiedener Geräteklassen. Sie sind
aufgrund ihrer Bauart und Größe optimal für den mobilen
Einsatz geeignet, vielseitig in der Anwendung und unterstützen
bzw. kombinieren die Stifteingabe mit der Touchscreentechnologie.
Damit wird dem Nutzer eine intuitive,
natürliche und direkte Interaktionsform ermöglicht (JARRETT
& SU, 2009, S. 7 ff.).
Diese Vorteile machen die neuartige Geräteklasse demnach
für viele Anwendungsgebiete zu einem interessanten
Werkzeug mit neuen und vielfältigen Möglichkeiten, so
auch für den Gestaltungsbereich, z.B. in Form des digitalen
Zeichnens und Entwerfens.
Im Kontext des Prototypen
Zusammenfassend lässt sich eine Vielzahl von Argumenten
finden, warum sich das digitale Zeichnen auf einem Tablet
Computer sowohl für den allgemeinen Einsatz in Bezug auf
den Gestaltungsprozess, als auch konkret für die in diesem
Rahmen vorgestellte interaktive Anwendung SketchCoLab
zur Bewertung und Überarbeitung von Zeichnungen eignet.
Zunächst wird durch die stiftbasierte Eingabe die Übertragung
der analogen und bereits bekannten Zeichenwerkzeuge
in den digitalen Arbeitsraum ermöglicht und somit

das gleiche haptische Gefühl sowie eine möglichst intuitive,
direkte und schnelle Form der Interaktion für den Anwender
erreicht. Auch wenn die Genauigkeit beim Zeichnen meist
nicht so hoch ist wie beim analogen Zeichnen oder den
Stifttabletts, eignen sich Tablet Computer vor allem für den
Bereich des prototypischen und schnellen Skizzierens.
Ein weiterer Punkt ist die Bauweise der Geräte, die sowohl
bezüglich der weitestgehend freien Handhabung, als
auch in puncto Form (z. B. flach, ähnliches Format wie ein
Blatt Papier) einige positive Eigenschaften des Mediums
Papier aufgreift und überträgt.
Überarbeiten
Annotieren
Design
Skizzieren
Zeichnen
Prototyp SketchCoLab
auf einem Tablet Computer
Evaluieren
Bewerten
Prototyping
Implementierung
...
Abbildung 44: Iterativer Prozess im Kontext des Prototypen
Eigene Darstellung
Die Technologien digitaler Geräte eröffnen zudem eine
Reihe zusätzlicher Möglichkeiten, wie die einfache Archivierung,
Vervielfältigung und Suche der generierten Inhalte,
die beim Zeichnen mit Stift und Papier nicht möglich
ist. Auch die Texteingabe kann wahlweise per Stift oder
Tastatur erfolgen und je nach Anforderung angepasst und
variiert werden. Das Internet ermöglicht darüber hinaus die
computergestützte Kollaboration und Kooperation, je nach
Bedarf in synchroner oder asynchroner, sowie räumlich unabhängiger
Form und unterstützt somit das kreative Erarbeiten
von nachhaltigen Gestaltungsansätzen.
Der Aspekt der Iteration, der Designprozesse häufig begleitet
und sich gerade im frühen Stadium, also dem Skizzieren
in schnellen Wiederholungen bestimmter Prozesskreisläufe
(Erstellen – Verfeinern – Verwerfen) zeigt, wird
ebenfalls ermöglicht und gefördert (PLIMMER & APPERLEY,
2002).
Durch die Unterstützung kollaborativer und kooperativer
Techniken innerhalb der Anwendung kann der Prototyp
bzw. Tablet Computer primär in den Phasen der Evaluation
und Bewertung sowie beim Überarbeiten und Zeichnen
durch eine Gruppe, den iterativen Ablauf unterstützen. Abbildung
44 macht dies noch einmal deutlich.
Somit ist es möglich viele Nachteile analogen Skizzierens
zu umgehen und Vorteile in den digitalen Kontext zu
übertragen. Die Möglichkeiten computergestützter Arbeit
können gewinnbringend während des Gestaltungsprozesses
integriert und auf das mobile Gerät der Tablet Computer
übertragen werden.
Tablet PCs und Tablet Computer
SketchCoLab
•••
59

60
•••
Abbildung 45: ASUS EeePad
Transformer TF101 mit andockbarer
Tastatur („hybride“
Bauform)
Quelle: http://media.buzzers.co.za/photo/0/7111/
Asus+EeePad+Transformer.jpg »
Abruf am 25.01.2012
2.3.4. Das ASUS EeePad Transformer TF101
Für den in dieser Arbeit entwickelten interaktiven Prototypen
diente das von der Firma ASUS hergestellte EeePad
Transformer TF101 als Testgerät (siehe Abbildung 45).
Es ist der Kategorie der Tablet Computer in hybrider
Bauart zu zuordnen. Als einer der wenigen auf dem Markt
befindlichen Geräte ist es mit einer andockbaren, auf das
Gerät abgestimmten Tastatur ausgestattet, in die zusätzliche
Anschlüsse (z. B. USB-Port) und ein Touchpad integriert
sind. Die kompakte Integration der Tastatur ermöglicht es,
Betriebssystem Android 3.2
Tabelle 8: Überblick der technischen Daten des ASUS EeePad Transformer TF101
Datenquelle: http://www.asus.de/Eee/Eee_Pad/Eee_Pad_Transformer_TF101/#specifications » Abruf am: 26.01.2012
SketchCoLab
2
Theorie und Grundlagen
Technische Daten
Bildschirm 10,1 Zoll LED Backlight WXGA Display (1280 x 800 Pixel Auflösung), kratzfestes Glas
10 Finger Multitouch Unterstützung
Prozessor-Typ NVIDIA ® Tegra 2
Arbeitsspeicher 1 GB
Interner Speicher 16 GB/32 GB/Unbegrenzter ASUS Webstorage
Verbindungen WLAN 802.11 b/g/n @ 2.4 GHz, Bluetooth V 2.1 + EDR
Kamera 1.2 Megapixel Kamera Vorderseite, 5 Megapixel Kamera Rückseite
Audio Stereo Lautsprecher, SRS Premium Sound, High Quality Mikrofon
Eingaben & Ausgaben / Anschlüsse 1 x Mini HDMI
2 x Audio Jack (Kopfhörer/Mikrofon-In)
1 x Kartenlesegerät: Micro SD
Akku 9,5 Stunden; 24,4 Wh Li-Polymer Akku, 16 Stunden mit Dock
Maße 271 x 176,8 x 12,98 mm
Gewicht 680 g
Mobile Dockingstation Keyboard, Touchpad
2 x USB 2.0
1 x Kartenlesegerät (MMC/SD/SDHC)
1 x 24,4 Wh Akku
die herkömmliche Texteingabe mit der Touch-Bedienung
zu kombinieren. Sie eignet sich insbesondere für einige
im entwickelten Prototypen abgebildeten Features (z. B.
Kommentareingabe). Dies stellt jedoch kein Alleinstellungsmerkmal
dar, da alle Tablet Computer mit einer externen
Tastatur (z. B. mittels Bluetooth) erweitert werden können.
Wie nahezu alle auf dem Markt befindlichen Geräte dieser
Klasse verfügt das EeePad Transformer über einen berührungsempfindlichen
Bildschirm mit kapazitiver Technik
(siehe Ausführungen zum Punkt Berührungsempfindliche
Bildschirme). Bei der Bedienung mit einem Stift wird nicht

ganz die Präzision erreicht, die resistive Bildschirme erlauben.
Das Zeichnen und händische Schreiben ist somit zwar
möglich, jedoch nicht in der Feinheit wie beispielsweise
mit einem Grafiktablett. Für das Zeichnen von Skizzen
oder handschriftlichen Notizen, die bei dem vorgestellten
Prototypen wichtige Funktionen darstellen, ist das EeePad
Transformer aufgrund der Bildschirmgröße von 10,1 Zoll
gut geeignet.
Als mobiles Betriebssystem kommt Android in der Version
3.2 zum Einsatz. Die Prototyp-Umsetzung als Webapplikation
stellt jedoch eine plattformunabhängige browserbasierte
Lösung dar, die auf allen gängigen Tablet Computer
und Tablet PCs funktioniert. Weitere technische Informationen
im Überblick zeigt Tabelle 8.
Tablet PCs und Tablet Computer
SketchCoLab
•••
61

03
PRAKTISCHE UMSETZUNG

3 KONZEPTION UND PRAKTISCHE UMSETZUNG
Im praktischen Teil der Arbeit wird in den nachfolgenden
Kapiteln auf die Konzeption und Umsetzung des Prototyps
eingegangen.
In Kapitel 3.1 erfolgt zunächst die Vorstellung des Grobkonzepts
in Form einer reduzierten Zielgruppenanalyse zur
Unterstützung der nutzerzentrierten Gestaltung und Ermittlung
relevanter Funktionen des Prototyps (Kapitel 3.1.1).
Zudem wird in Kapitel 3.1.2 das grundlegende Prototyp-
Konzept dargestellt, welches einen Überblick der erarbeiteten
Funktionen zur Überarbeitung und Bewertung von
Zeichnungen, sowie zur kollaborativen und kooperativen
Zusammenarbeit aufzeigt.
In Kapitel 3.2 wird auf das entwickelte Feinkonzept
der Anwendung eingegangen. Dazu erfolgt zunächst die
Darstellung der zugrundeliegenden Informationsarchitektur
(Kapitel 3.2.1), welche die Struktur der möglichen Interaktionen
und Informationseinheiten des Prototyps aufzeigt. Die
in Kapitel 3.2.2 vorgestellten Wireframes verdeutlichen
das Funktionslayout von SketchCoLab und stellen prototypisch
die Interaktionen zwischen Anwendung und Nutzern
vor. In Kapitel 3.2.3 erfolgt anschließend die Betrachtung
relevanter Interaktionen auf der Grundlage touch- und stiftbasierter
Interaktionsmechanismen.
In Kapitel 3.3 wird auf Form und Gestaltung von
SketchCoLab eingegangen. Neben typografischen Gesichtspunkten
(Kapitel 3.3.1) wird das zum Einsatz kommende
Farbkonzept (Kapitel 3.3.2) sowie die Gestaltung
der Icons und Symbole im Prototyp (Kapitel 3.3.3) aufgezeigt.
Die in Kapitel 3.3.4 vorgestellten Mockups stellen
die Essenz der Konzeptionsphase dar.
Abschließend erfolgt in Kapitel 3.4 eine kurze Beschreibung
zur technischen Umsetzung des Prototyps sowie ein
Überblick über die realisierten Funktionen.
SketchCoLab
•••
65

66
•••
3.1. Grobkonzept
3.1.1. Zielgruppenanalyse und –ansprache
Zielgruppe
„If you don’t know who you’re talking to, how the heck do
you know what to say?”
(NICK USBORNE zitiert nach THISSEN, 2003, S. 32)
Eine Zielgruppe bestimmt maßgeblich durch ihre Bedürfnisse
bzw. Absichten die Tiefe und Darstellung der Informationen
sowie die Funktionen eines Produktes. Somit stellt sich
bereits während der Planungsphase die Frage, für wen
konkret wird das entsprechende Produkt umgesetzt und gestaltet.
Wenn man die entsprechenden Besonderheiten und
Interessen einer Zielgruppe kennt, ist eine für beide Seiten
gewinnbringende Kommunikation bzw. das Erreichen gemeinsamer
Ziele möglich. Das Erreichen dieser Ziele soll
bzw. kann während der Entwicklung durch Tests zur Evaluation
der Benutzerfreundlichkeit (Usability-Tests) unterstützt
werden. Eine Zielgruppe zeichnet eine Reihe von bestimmten
Merkmalen aus, wie Tabelle 9 zeigt. Je breiter eine
Zielgruppe dabei ist bzw. je mehr Zielgruppen man erreichen
will, desto umfangreicher sind die zu beachtenden
Merkmale (STAPELKAMP, 2010, S. 333 f.).
Genau solch eine breite Zielgruppe soll durch das Konzept
bzw. den Prototyp SketchCoLab erreicht werden. Die
konkrete Definition der Zielgruppe ist daher schwierig. Eine
Annäherung kann durch die Betrachtung der Nutzergrup-
SketchCoLab
3
Konzeption und praktische Umsetzung
pe von mobilen Geräten, insbesondere der Tablet Computer
erfolgen, da der Prototyp primär auf diese Geräteklasse
ausgerichtet ist. Die Nutzer von Tablet Computern sind in
der Mehrheit in einem Alter von 30–59 Jahren, berufstätig
mit mittleren und hohen Einkommen und verfügen über
einen hohen Bildungsstandard. Die Typologie der Tablet
Computer Nutzer besteht zusammenfassend aus „Entscheidern“
bzw. „Early Adoptern“ (frühzeitige Anwender) und
wird erweitert durch Frauen mittleren Alters (30–49 Jahren)
sowie jungen Männern (ab 20 Jahren) mit sehr großem
Interesse an neuen Technologien. Erweitert man die Betrachtung
auf mobile Internetnutzer zeigt sich die erwähnte
Breite der Zielgruppe. Vertreten sind innerhalb dieser Nutzergruppe
von Jugendlichen bis 19 Jahren, „Entscheidern“
(30–59 Jahre) und als Hauptzielgruppe („Heavy User“)
Männer zwischen 20 und 49 Jahren bis hin zu Senioren
(ab 50 Jahren) nahezu alle Altersklassen (IMUK Institut für
Medien und Konsumentenforschung, 2012; TOMORROW
FOCUS MEDIA, 2011).
Sowohl die Heterogenität der Zielgruppe der Nutzer
von mobilen Geräten, als auch der Anwendungszweck
des Prototyps in Form der Überarbeitung und Bewertung
von Zeichnungen erschwert eine engere Eingrenzung der
Zielgruppe. Möchte man dennoch die Zielgruppe weiter
konkretisieren, könnten im Kontext der Anwendung und in
Verbindung mit dem Profil von Tablet Computer Besitzern
vor allem „Entscheider“ und „Heavy User“, aber auch die
jüngeren Altersklassen relevant sein. Gestalter als „Entscheider“
z. B. in Bezug auf die Anwendung zur Unterstützung
des Designprozesses, „Heavy User“ durch ihre Affinität
zu neuen Technologien und jüngere Personen, für die
vor allem die Interaktion und Kommunikation mit anderen

im Vordergrund steht, sind denkbare Nutzergruppen.
Neben der Festlegung der Zielgruppe ist es ebenfalls hilfreich,
die mit dem Projekt angesprochene Benutzergruppe
zu definieren. Benutzergruppen unterteilen sich dabei in
drei verschiedene Kompetenzgrade: Anfänger, Fortgeschrittene
und Experten. Diese Kompetenzgrade charakterisieren
die Erfahrung, die ein Anwender mit einem Medium
und dessen vermittelten Informationen hat. Im Hinblick
auf die Erfahrung mit interaktiven Produkten ist bei der im
Rahmen dieser Arbeit entstandenen Anwendung von der
Berücksichtigung fortgeschrittener Benutzergruppen und
Experten auszugehen.
Fortgeschrittene Nutzer zeichnen sich durch Erfahrungen
mit interaktiven Systemen aus, beherrschen den Umgang
mit diesen Systemen aber noch nicht vollständig. Sie
sind in der Lage vorhandene Kenntnisse mit neuen Erfahrungen
zu verbinden und somit dazuzulernen.
Experten dagegen besitzen einen umfassenden Erfahrungsschatz
im Umgang mit interaktiven Systemen und nutzen
diese intuitiv zur Erreichung eindeutig definierter Ziele.
Experten stellen sich bei der Nutzung wenig Fragen, da
sie aufgrund ihrer Erfahrung nicht darauf angewiesen sind
jede Anwendungssituation zunächst zu analysieren (STA-
PELKAMP, 2010, S. 336 ff.).
Die beiden vorgestellten Benutzergruppen decken sich
dabei mit der Nutzergruppe mobiler Geräte, die den Umgang
mit interaktiven Inhalten gewohnt sind. Relevante Fragen
der beiden Benutzergruppen laut STAPELKAMP sind:
Der fortgeschrittene Nutzer stellt sich u. a. folgende Fragen
bei der Nutzung interaktiver Systeme:
• Worum geht es?
• Was wird mir geboten?
• Was kann ich erfahren?
• Sind die Funktionsweisen neuartig?
• Was kann ich Neues erfahren und erleben?
• Wie kann ich weitere Erfahrungen sammeln?
• Welche Ordnungsformen werden angeboten, vorgegeben
oder sind selbst bestimmbar?
• Wie ist der Inhalt strukturiert?
Der Experte hat kaum Fragen zum Umgang mit dem interaktiven
System, erwartet jedoch einiges:
• Kann das bereits fundierte Wissen erweitert werden?
• Welche Ordnungsformen werden angeboten?
• Gibt es erweiterte Suchfunktionen?
• Wie und womit wird es dem Anwender ermöglicht,
wichtige Aspekte schnell erkennen, klassifizieren
und einordnen zu können?
Insgesamt zeigt sich, dass aufgrund der Heterogenität und
Breite der Zielgruppe hinsichtlich sozio-demographischer
und persönlicher Merkmale eine exakt auf die Zielgruppe
ausgerichtete Konzeption und Gestaltung erschwert wird.
Daher ergibt sich die Erkenntnis, dass die Gestaltung des
interaktiven Prototyps in einem möglichst allgemein gültigen
Kontext und für einen umfangreichen Anwenderkreis
erfolgen muss. Das Ziel ist demnach eine hochwertige und
funktionale Gestaltung, die weitestgehend keine Nutzergruppen
ausschließt.
Grobkonzept
SketchCoLab
•••
67

68
•••
Nutzungskontextanalyse
Wichtiger Bestandteil bei der Entwicklung, Umsetzung und
Evaluation eines Produktes bzw. Prototyps ist die Analyse
des Nutzungskontextes. Durch die Erkenntnisse „welche“
Nutzer „welche“ Ziele und Aufgaben in „welcher“ Umgebung
verfolgen, lassen sich Gestaltungs- und Usabilityanforderungen
für das jeweilige Produkt ableiten. Es wird dabei
zwischen sozialen, organisatorischen, physischen und
technischen Umgebungen unterschieden, deren Definition
SketchCoLab
Zielgruppen-Merkmale
Sozio-demographische Merkmale Persönlichkeitsmerkmale
• Geschlecht • Progressives oder konservatives Weltbild
• Alter • Emotional oder sachlich
• Familienstand • Genügsam, ausdauernd oder ungeduldig
• Sozialer Status, Einkommen • Risikobetont oder vorsichtig
• Bildungsniveau, Beruf • Neugierig
• Freizeitverhalten • Humoreigenschaften
• Kulturkreis
• Moralische Wertesysteme
Psychologische Merkmale Gebrauchsspezifische Merkmale
• Vorlieben und Gewohnheiten • In welchem Bereich wird das Produkt genutzt?
• Motivation • Bevorzugte Wahrnehmungsform (visuell, akustisch)
Tabelle 9: Merkmale einer Zielgruppe
Eigene Darstellung
• Bevorzugte Darstellungsart
Konzeption und praktische Umsetzung
• Bevorzugte Tiefe und Breite der Informationen
maßgeblich den Usabilitygrad bestimmt, den ein Produkt
bieten muss. Ebenfalls wichtig ist die Beschreibung des Produktes
hinsichtlich Zweck, Funktionen und Anwendungsgebiet
(WEBER, 2007, S. 332 ff.).
Auf eine umfangreiche Analyse des Nutzungskontextes
wird allerdings in dieser Arbeit aufgrund der nicht konkret
definierten und auch sehr breiten Zielgruppe, welche mit
dem interaktiven Prototyp erreicht werden soll, verzichtet.
Für eine exakte und anschauliche Darstellung der Ziel-

Eckdaten der Nutzungskontextanalyse
Eigenschaften der Benutzergruppe Eigenschaften der Nutzungsumgebung
Allgemeine Daten Technisches Umfeld
• Jugendliche bis ältere Erwachsene (19–59 Jahre) • Keine Einschränkung in der Motorik
• Männlich und weiblich • Keine Einschränkung in der Hand-Augenkoordination
• Hohes Bildungsniveau • Normale Sehkraft
Vorerfahrung Physikalische Umgebung
• Fundierte bis gute Kenntnisse bei der Steuerung und Handhabung
von mobilen Geräten bzw. der Bedienung von Touchscreens
• Kein ungünstiger Lichteinfall auf die verwendete Geräteklasse
• Fortgeschrittener oder Experte bei der Nutzung interaktiver Systeme • Nahezu unabhängig von der physikalischen Umgebung
Mentale Eigenschaften
• Neutrale bis positive Einstellung zum Produkt
• Spaß und Interesse an Teamarbeit und der Erarbeitung gemeinsamer
Lösungen
• Kommunikations- und Ausdrucksfreudigkeit
• Interesse an neuen Technologien und Konzepten
Fähigkeiten
• Keine Einschränkung in der Motorik
• Keine Einschränkung in der Hand-Augenkoordination
• Normale Sehkraft
Tabelle 10: Eckdaten der Nutzungskontext-Analyse
Eigene Darstellung
• Nutzung „Indoor“ in verschiedensten Räumen (z. B. Arbeitszimmer,
Büro, Wohnzimmer) möglich - prinzipiell auch „Outdoor“ denkbar
• Geringe Geräuschkulisse zur besseren Konzentration
Grobkonzept
SketchCoLab
•••
Nutzungskontextanalyse
Analyse der Ziele, Aufgaben
und Nutzer, die ein Produkt nutzen
(sollen) unter Einbezienung
der äußeren Umstände.
69

70
•••
Scenario-Based-Design
Methode deren zentrales
Element, narrative Erzählungen
über Nutzer und deren
Aktivitäten mit dem jeweiligen
Produkt bzw. der Anwendung
darstellen. Die entwickelten Szenarien
unterstützen dabei den
Gestaltungs- und Entwicklungsprozess
von nutzerfreundlichen
Produkten.
gruppe wird oft die Übertragung der Benutzereigenschaften
aus der Nutzungskontextanalyse in sogenannte „Personas“
genutzt wird, die darüber hinaus einen wichtigen
Bestandteil von Szenarien ausmachen. Das von ALAN
COOPER entwickelte „Personas-Konzept“ stellt eine effektive
Möglichkeit dar, Zielgruppen zu spezifizieren und somit
den Gestaltungsprozess von Benutzerschnittstellen zu
unterstützen. Dabei werden exemplarisch Nutzer der Zielgruppe
mit ihren Zielen, die sie innerhalb der jeweiligen
Anwendung erreichen möchten, dargestellt. Es handelt sich
demnach nicht um reelle Menschen, sondern um virtuelle
Abbilder, die es den an der Entwicklung beteiligten Personen
erleichtern sollen, sich in die entsprechende Nutzergruppe
hineinzuversetzen (THISSEN, 2003, S. 33 ff.).
Aufgrund der insgesamt sehr eingeschränkten Analyse
werden abschließend lediglich einige Eckdaten zum Nutzungskontext
in Tabelle 10 dargestellt, die eine Grundlage
für den Entwurf bzw. die Gestaltung von SketchCoLab
darstellen, jedoch auf Annahmen beruhen. Darüber hinaus
wird an dieser Stelle von einer Definition von „Personas“
bzw. Benutzerprofilen abgesehen, da geplant ist, den interaktiven
Prototyp zu einem späteren Zeitpunkt in einem
realen Versuchsablauf zu testen.
Szenarien
Die gewonnenen Daten einer Nutzungskontextanalyse in
den konkreten Entwurfs- und Gestaltungsprozess zu übertragen
ist oft problembehaftet und schwierig. Je nachdem
wie neuartig ein Produkt bzw. wie viel bereits an Wissen
und Vorgaben vorhanden ist, ist die Schwierigkeit der Übertragung
der Informationen aus der Nutzungskontextanalyse
höher bzw. geringer. Die entstehende Kluft kann durch
SketchCoLab
Konzeption und praktische Umsetzung
verschiedene Ansätze überwunden werden. Ein kreativer
Ansatz ist das von ROSSON und CAROLL entwickelte szenariobasierte
Design („Scenario-Based-Design“) (WEBER,
2007, S. 336).
Im „Scenario-Based-Design“ (SBD) werden die aus der
Nutzungskontextanalayse gewonnenen Daten in kleine
Geschichten übertragen, die beschreiben wie Personen
das interaktive System innerhalb bestimmter Umgebungen
nutzen, um bestimmte Aufgaben zu erledigen. Szenarios
zeichnen sich durch ihre konkrete und zugleich flexible Art
aus, die es ermöglicht u. a. Ideen und Interaktionen vorab
zu prüfen und testen. „Scenario-Based- Design“ ist ein iterativer
Prozess, der den beteiligten Personen (Entwickler
und Gestalter) darüber hinaus erlaubt, sich auf die Nutzerbedürfnisse
zu fokussieren. Abbildung 46 zeigt die drei
Phasen des „Scenario-Based-Designs“.
Zunächst erfolgt in der Analysephase die Entwicklung
eines „Problem Scenarios“, dass aufzeigt, wie der Ablauf
und die Lösung einer Problemstellung ohne die Unterstützung
des entsprechenden Produkts aussieht. In das Problemszenario
fließt darüber hinaus die Analyse sämtlicher
beteiligter Personen („Stakeholder“) mit ein.
In den darauf folgenden Designphasen „Activity Scenarios“,
„Information Scenarios“ und „Interaction Scenarios“
erfolgt dann die konkrete Weiterentwicklung des entwickelten
Szenarios. Der Schritt „Activity Scenarios“ zeigt dabei
die Lösung der im Problemszenario dargestellten Aufgabe
mit Hilfe der entwickelten Anwendung und konzentriert
sich somit auf funktionale Aspekte. Im Anschluss erfolgt die
Ausarbeitung der Aktivitätsszenarien mit Hilfe der „Information
Scenarios“, die festlegen, welche Informationen der
Nutzer benötigt und wie diese durch das interaktive System

dargestellt werden müssen. Im dritten Schritt, den Interaktionsszenarien
(„Interaction Scenarios“) wird der Fokus auf
die Nutzeraktionen und das Feedback innerhalb der Aktionen
gelegt.
Analysis of
stakeholders,
field studies
Metaphors, Information
Technology, HCI Theory,
Guidelines
ANALYSIS
Problem Scenarios
DESIGN
Activity Scenarios
Information Design Scenarios
Interaction Design Scenarios
PROTOTYPE & EVALUATION
In der letzten Phase des „Scenario-Based-Designs“ erfolgt
dann die Evaluation und das „Prototyping“ (ROSSON
& CARROLL, 2002, S. 15 ff.).
Claims about
current practice
Iterative Analysis of
usability claims &
redesign
Summative Evaluation Usability Specifications
Formative Evaluation
Abbildung 46: Ablauf des Scenario Based Development Prozesses
Darstellung nach ROSSON & CAROLL (2002, S.25)
Grobkonzept
SketchCoLab
•••
Szenarien
Narrative kleine Geschichten,
die auf Basis der gewonnenen
Daten der Nutzungskontextanalyse
erstellt werden und dabei
helfen sollen die Ergebnisse
möglichst optimal in das Produkt
einfließen zu lassen.
71

72
•••
Für das Konzept des interaktiven Prototyps werden nachfolgend
zwei denkbare Szenarien aufgezeigt. Da auf die
Entwicklung von „Personas“ und eine umfangreiche Nutzungskontextanalyse
in dieser Arbeit verzichtet wurde, stellen
die beiden Szenarien lediglich eine Grundlage dar, um
exemplarisch Anwendungsmöglichkeiten von SketchCoLab
aufzuzeigen und repräsentieren daher nicht den vollständigen
bzw. normalen Ablauf innerhalb eines „Scenario-
Based-Developments“.
Anwendungszenario 1
Basierend auf der an der Hochschule der Medien entstandenen
Forschungsarbeit zum Thema kollaboratives Entwerfen
auf Multitouch-Geräten ist der Einsatz von SketchCoLab
als Ergänzung denkbar. Im Rahmen des Projekts betreut
von Prof. Ralph Tille und Monika Webers wurde in einer
Studie das gemeinsame Gestalten von Icons zu bestimmten
Begriffen mit Hilfe eines Multitouch-Tisches erforscht. Neben
den kollaborativen und kooperativen Aspekten stand
ebenfalls die Untersuchung von Übereinstimmungen und
Differenzen in der Denk- und Arbeitsweise von Designern
und Nicht-Designern im Vordergrund. Der in dieser Arbeit
entstandene Prototyp eignet sich als weiterführendes Tool
um die in der Studie erarbeiteten Gestaltungsvorschläge
von Symbolen und Icons zu evaluieren und zu überarbeiten.
SketchCoLab vereinfacht die qualitative Auswertung der
Entwürfe, fördert den iterativen Designprozess und hilft somit
bei der Erarbeitung hochwertiger Gestaltungslösungen
durch kollaborative und kooperative Zusammenarbeit. Als
Zielgruppe sind dabei Nicht-Designer zu sehen, die im
Zuge der Partizipation den Gestaltungsprozess entschei-
SketchCoLab
Konzeption und praktische Umsetzung
dend mit beeinflussen.
Anwendungszenario 2
Eine weitere Anwendungsmöglichkeit von SketchCoLab
stellt die Zielgruppe der Designer in den Fokus. Als in den
Workflow von Agenturen eingebettetes Instrument, könnte
der Prototyp bei der Erarbeitung möglichst optimaler Designlösungen
helfen. Mehrere Designer könnten parallel
Entwürfe z. B. von einem Interface erstellen und diese über
SketchCoLab bewerten bzw. überarbeiten. Auch möglich
ist, dass unterschiedliche Bestandteile des Interfaces erstellt
durch verschiedene am Projekt beteiligte Designer
von der gesamten Gruppe bewertet und überarbeitet werden.
Abschließend würde sich im Idealfall eine Lösung herausbilden,
die einen möglichst breiten Konsens und eine
hohe Qualität besitzt. Dabei ist es nicht notwendig, dass
dies gleichzeitig bzw. an einem Ort geschieht. Durch den
Einsatz mobiler Geräte wie einem Tablet Computer wird
dieser Aspekt verstärkt. Dabei eignet sich diese Form der
Groupware vor allem bei kleineren Gestaltungsaufgaben
als Bestandteil eines Gesamtauftrags, die ein extra Meeting
oder eine Konferenz überflüssig machen. Zwischenschritte
im iterativen Designprozess könnten somit unterstützt und
gefördert werden.
Ebenfalls denkbar ist der Einsatz von SketchCoLab als
Schnittstelle zwischen Designern und Auftraggebern. Beispielsweise
könnten mehrere Entwürfe einer Website der
beauftragten Agentur durch den Kunden direkt überarbeitet
und bewertet werden, um somit schnell und einfach die
Bedürfnisse des Auftraggebers zufriedenzustellen.

3.1.2. Grundlegendes Prototypkonzept
Ausgehend von den in dieser Arbeit gewonnenen Erkenntnissen
wird nachfolgend das für den interaktiven Prototyp
erarbeitete Konzept dargestellt. Die in Kapitel 2.2.1 und
Kapitel 2.2.2 bereits aufgezeigten möglichen Funktionen
und Features zur Überarbeitung und Bewertung von Zeichnungen
sind dabei teilweise eingeflossen bzw. wurden erweitert
oder modifiziert.
Das Konzept von SketchCoLab gliedert sich in vier Bereiche,
die neben der geplanten Funktionalität, auch Aspekte
zur Kollaboration und Kooperation sowie die gewählten
Ansätze zur Bewertung und Überarbeitung aufzeigen. Abbildung
47 zeigt das Grobkonzept im Überblick, während
Abbildung 48 das Funktionslayout der Anwendung darstellt.
Überarbeiten
Ein zentraler Aspekt der Anwendung ist das Überarbeiten
von Zeichnungen. Es sind jedoch auch andere visuelle Darstellungen
wie Bilder, Fotos oder Interfaces denkbar. Die
Überarbeitung erfolgt durch Möglichkeiten der Annotation.
Nutzer können eine Zeichnung annotieren und mit Hinweisen,
Markierungen, Texten, Pfeilen durch das Stift- und Text-
Werkzeug versehen. Ebenfalls möglich ist die Erstellung
einer neuen Zeichnung in Bezug auf das Basisbild.
Um die Übersicht während der Zusammenarbeit zu
wahren, ist die gleichzeitige Annotation von mehreren Nutzern
zwar möglich, erfolgt jedoch nicht innerhalb einer gemeinsamen
Arbeitsfläche bzw. an einer für alle gleichzeitig
sichtbaren Zeichnung. Die Überarbeitungen anderer Nutzer
können wahlweise eingeblendet, sowie überarbeitet
und als Basis neuer Annotationsversionen genutzt werden.
So entsteht eine Vielzahl neuer Gestaltungsansätze, die
durch die kollaborative und kooperative Zusammenarbeit
unterstützt werden.
Bewerten
Ein weiterer wichtiger Punkt ist die Bewertung von Zeichnungen.
Durch die Überarbeitung in Form von Annotation
wird bereits eine Möglichkeit der Bewertung berücksichtigt.
Nutzer können durch „handschriftliche“ Worte oder
Symbole (z. B. Smiley) ihre Meinung und Wertung ausdrücken.
Als zusätzliche Bewertungsmöglichkeit sollten im ursprünglichen
Konzept „Tags“ dienen. Diese hätten jeweils
für positive oder negative Aspekte der Zeichnung vergeben
werden können und erlauben somit eine „bewertende
Verschlagwortung“. Im Laufe der Konzeption hat sich
jedoch herausgestellt, dass die Einbindung von „Tags“ die
Übersichtlichkeit der Anwendung verringert und gerade für
nicht geübte Nutzer eine weitere kognitive Belastung darstellt.
Damit wäre dem Anspruch einer möglichst einfachen
und transparenten Bedienung entgegengewirkt worden.
Darüber hinaus würde der zeitliche Aufwand zur Bewertung
von Zeichnungen vergrößert werden, was gerade bei
einer hohen Anzahl zu bewertender Elemente ein störender
Faktor ist.
Weitere Formen der Bewertung sind durch Kommentare
und Textboxen möglich. Textboxen können innerhalb von
SketchCoLab auf der Zeichnung platziert werden und dienen
sowohl als Annotationshinweise, als auch als Bewertungsinstrument.
Durch die Möglichkeit der freien Platzierung
können sich die Informationen auf konkrete Details
innerhalb der Zeichnung beziehen, was die Transparenz
Grobkonzept
SketchCoLab
•••
73

74
•••
SketchCoLab
Technologien
HTML5 / CSS / JavaScript
PHP / MySQL
Datenbasis = bestehende Zeichnungen von Icons, etc.
Datenbasis = bestehende Zeichnungen von Icons, etc.
Auf Details der Zeichnung Auf die gesamte Zeichnung
Überarbeiten
• Freiform-Stift
• Radiergummi
• Textwerkzeug
Sharing
• Server
• Speichern
• Individuell
Abbildung 47: Grobkonzept SketchCoLab
Eigene Darstellung
Kollaboration
und Kooperation
Arbeitsbereich
Awareness
Workflow
• Kommentare
• Chat
• Rückgängig / Wiederholen
• Speichern
• Arbeitsfläche löschen
Konzeption und praktische Umsetzung
Kommunikation
• User-Awareness: durch Namen, durch Ansicht
der verschiedenen Versionen der einzelnen
Nutzer
• Workspace-Awareness: wer hat welche Aktivitäten
gemacht z. B. wer hat welche Kommentare
bzw. Bewertungen abgegeben
Bewerten
• Rating
• Bewertungs-
Kommentar
Interaktion
(Multi)Touch (Finger, Stift), Maus,
Texteingabe (Hardwaretastatur)

für andere Nutzer verbessert und die Veranschaulichung
von Gedankengängen unterstützt. Technisch gesehen werden
die Textinformationen in der Datenbank gespeichert
und beim Aufruf der jeweiligen Annotationsversion wieder
geladen und entsprechend positioniert. Die Textelemente
sind daher nicht fest auf der Zeichnung verankert und können
auch nachträglich verschoben oder gelöscht werden.
Allerdings sind somit die Textinformationen auch nicht auf
Workflow
Skalieren der
Arbeitsfläche (durch
Browser möglich)
Radiergummi
Leinwand leeren
Speichern
Größe der Spitze
Arbeitsschritte rückgängig
machen bzw. wiederholen
Abbildung 48: Funktionslayout SketchCoLab
Eigene Darstellung
Annotation Bewertung
Kommunikation
Freiform-Stift
Textbox
Farbe
Größe der Spitze
SketchCoLab
Datenbasis
Gesamte Zeichnung
der im Bildformat abgespeicherten Zeichnung sichtbar,
sondern nur innerhalb der Anwendung. Diesen Text innerhalb
der abgespeicherten Bilder ebenfalls sichtbar zu machen
wäre eine weitere Funktion der Anwendung. Zusätzlich
bzw. alternativ könnte ein extra Auswertungstool diese
Problematik berücksichtigen und wäre darüber hinaus eine
sinnvolle Ergänzung, um eine einfache Analyse der generierten
Daten zur Verfügung zu stellen.
„Rating“ durch Sternchen
Bewertungskommentare
Textboxen
Freiform-Stift
Chat
Bewertungskommentare
Kollaboration &
Kooperation
Grobkonzept
Individuelle Arbeitsfläche
Kommentare
Sharing
Speichern
Permanent aktualisierte
Datenvorhaltung auf dem
Web-Server
SketchCoLab
•••
75

76
•••
Zentrales Bewertungstool stellt im Prototyp das „Rating“
in Form von Sternen dar. Gründe für diese Form der Bewertung
liegen in der einfachen und schnellen Handhabung
und dem hohen Bekanntheitsgrad. Gerade wenn eine Vielzahl
an Entwürfen vorhanden ist, ist ein möglichst kurzer
Workflow hilfreich. Dabei zeigt die Anzahl der vergebenen
Sterne die Höhe der Bewertung an. Die eingesetzte Skala
wird dabei in fünf Stufen eingeteilt (1 = sehr schlecht, 2 =
schlecht, 3 = mittel, 4 = gut, 5 = sehr gut) und entspricht somit
den gängigen Rating-Systemen wie z. B. bei Amazon.
Die Nutzer können dabei in ganzen Schritten bewerten.
Halbe Schritte wie z. B. eine Durchschnittsbewertung von
„3,5“ werden in der Anzeige der Bewertungsskala berücksichtigt.
In Kombination mit der Bewertung in Form von Sternsymbolen
stellt SketchCoLab darüber hinaus die Möglichkeit
zur Verfügung, durch Kommentare weiterführende Informationen
zur getätigten Bewertung hinzuzufügen. Das
macht es für die beteiligten Nutzer leichter, die Bewertungen
anderer nachzuvollziehen und bietet somit neben der
reinen Bewertungszahl weitere semantische Informationen,
die zur Kommunikation, Auswertung oder Überarbeitung
genutzt werden können.
Ein weiterer Ansatz während der Konzeptionsphase war
die Überlegung, den Nutzern von SketchCoLab ebenfalls
die Möglichkeit der Bewertung und Kommentierung der
erstellten Annotationsversionen (anderer Nutzer) zur Verfügung
zu stellen. Dadurch könnte der iterative Designprozess
weiter verdichtet und die Erarbeitung einer möglichst
optimalen Gestaltungslösung zusätzlich gefördert werden.
Dagegen spricht der möglicherweise ausufernde Arbeitsaufwand
durch evtl. ständig neu generierte Überarbeitun-
SketchCoLab
Konzeption und praktische Umsetzung
gen, die ebenfalls die Übersichtlichkeit stark einschränken
könnten. Daher wurde dieser Ansatz nicht in die Endversion
des Prototyps implementiert.
Kollaboration und Kooperation
Die Zusammenarbeit im Team soll durch mehrere Komponenten
innerhalb der Anwendung unterstützt werden:
Datenbasis
Die Nutzer haben innerhalb von SketchCoLab Zugang
zu bestimmten Projekten, die verschiedene Zeichnungen
enthalten. Die Nutzer- bzw. Teamverwaltung steht dabei
jedoch weniger im Blickpunkt der Anwendung, genauso
wie die Projektverwaltung. Als Datenbasis wird durch die
Anwendung eine Reihe von (austauschbaren) Zeichnungen
zur Verfügung gestellt, die bewertet und überarbeitet
werden können.
Kommunikation
Die Kommunikation unter den Anwendern soll primär durch
das Chat-Werkzeug, aber auch durch die Bewertungskommentare
ermöglicht werden. Audio- oder Videokonferenz
wären zwar denkbare Alternativen, würden jedoch
schnell unübersichtlich werden, wenn eine größere Anzahl
von Nutzern beteiligt ist. Aufgrund des geringeren Implementierungsaufwands
und der dennoch sehr direkten und
schnellen Möglichkeit zu kommunizieren, stellt das Chat-
Werkzeug das zentrale Kommunikationstool innerhalb der
Anwendung dar. Eine Hardwaretastatur, wie sie das Testgerät
zur Verfügung stellt, soll die Kommunikation durch
Texteingabe unterstützen bzw. erleichtern.
Eine weitere Möglichkeit der Kommunikation im Basis-

konzept sah vor, die Bewertungen anderer Nutzer ebenfalls
kommentieren zu können und somit in Form eines reduzierten
Forums einen Informationsaustausch zu fördern. Diese
Funktion wurde technisch zu großen Teilen bereits umgesetzt.
Es zeigte sich jedoch, dass die Übersichtlichkeit der
Anwendung dadurch stark eingeschränkt wurde, da der
zur Verfügung stehende Platz begrenzt ist. Eine zunächst
erarbeitete Lösung bestand darin, die Kommentare bzw.
das Forum in ein extra Popup-Fenster auszulagern, was jedoch
den direkten Bezug zu den Bewertungen erschwert
und ggf. auch den Workflow hemmt. Daher wurde diese
Form der Kommunikation in der Endversion des Prototyps
nicht mehr berücksichtigt, stellt jedoch in einer erweiterten
Version im Rahmen einer zufriedenstellenden Lösung ein
weiteres mögliches Feature dar.
Sharing
Das asynchrone „Teilen“ der überarbeiteten bzw. bewerteten
Bilder wird durch die direkte Speicherung auf dem
Server ermöglicht. Dort können die jeweiligen Projekte
durch die Gruppenteilnehmer bei Bedarf wieder abgerufen
werden. Durch das Feature von SketchCoLab, die relevanten
Daten innerhalb der Anwendung in kurzen Intervallen
zu aktualisieren, wird ein nahezu synchrones „Teilen” der
Datenbasis ermöglicht. Von Nutzern erstellte Annotationen
und Bewertungen werden somit nach Speicherung für andere
ebenfalls gerade aktive Nutzer innerhalb der Anwendung
sichtbar und können eingesehen bzw. überarbeitet
werden.
Ein zusätzliches Feature, um den Austausch zu fördern,
könnte durch die Möglichkeit ergänzt werden, überarbeitete
und bewertete Zeichnungen jeweils als Bild zu spei-
chern und diese beispielsweise per Email mit anderen zu
„teilen“. Dabei enthalten die exportierten Bilder sämtliche
Informationen zu den getätigten Annotationen.
Arbeitsbereich
Innerhalb von SketchCoLab arbeiten die einzelnen Nutzer
jeweils in einem eigenen Arbeitsbereich und nicht wie
bei einer echten zeitgleichen Kollaboration auf einer gemeinsamen
Zeichenfläche. Erste Überlegungen zum Anwendungskonzept
hatten das Ziel, ein Tool zur Echtzeit-
Kollaboration zu realisieren, wurden jedoch unter anderem
aufgrund der Komplexität verworfen. Darüber hinaus birgt
die synchrone Zusammenarbeit innerhalb einer gemeinsamen
Arbeitsfläche die Gefahr zu unübersichtlich bzw.
ineffektiv zu werden, da ein erhöhter Kommunikations- und
Organisationsaufwand anfällt, der möglichst optimal unterstützt
werden muss.
„Awareness“
Für den Bereich der „Awareness“ sind vornehmlich Funktionen
zur „User-Awareness“ und „Workspace-Awareness“
eingeflossen. SketchCoLab zeigt dabei Informationen über
Nutzeraktivitäten, wie z. B. welcher User wann welche
Bewertung und Annotation vorgenommen hat. Die „User-
Awareness“ wird zusätzlich bei der Verwendung des Chat-
Tools unterstützt. Dabei dienen die Informationen vor allem
dazu, die Kommunikation transparent zu gestalten und den
Workflow zu vereinfachen bzw. zu unterstützen. Am Projekt
beteiligte Nutzer können mit Hilfe der „Awareness“
konkret auf bestimmte Aktivitäten anderer Teilnehmer reagieren
bzw. darauf Bezug nehmen.
Grobkonzept
SketchCoLab
•••
77

78
•••
Versionsmanagement
Ein weiteres ursprünglich geplantes Feature ist die „Timeline“,
mit der es den Nutzern ermöglicht werden sollte, die
Historie einer Überarbeitung bzw. Bewertung noch einmal
nachvollziehen zu können. SketchCoLab sollte dazu einen
Versionsvergleich anbieten, mit dem verschiedene gespeicherte
Versionen einer überarbeiteten und bewerteten
Zeichnung miteinander verglichen werden können.
Workflow
Neben den bisher vorgestellten Funktionen sind einige weitere
für den Arbeitsablauf wichtige Features im Prototyp
implementiert. In die Endversion von SketchCoLab sind das
„Rückgängigmachen“ und „Wiederholen“ von Arbeitsschritten,
die Möglichkeit die Leinwand per Klick bzw.
„Tap“ zu leeren, sowie die Speichern-Funktionalität eingeflossen.Weitere
geplante Features zur Verbesserung des
Workflows, wie das nachträgliche Bewegen von gezeichneten
Elementen oder eine Zoom-Funktion wurden in Abwägung
von Nutzen und Realisationsdauer nicht berücksichtigt.
Weitere Anmerkungen zur Kollaboration und Kooperation
Die Ansätze der Kollaboration und Kooperation wurden
innerhalb des Konzepts bisher wenig differenziert. Da
sich die beiden Begriffe, wie bereits im theoretischen Teil
der Arbeit aufgezeigt, zwar auf verschiedene Formen der
Zusammenarbeit beziehen, jedoch auch Schnittpunkte besitzen,
ist eine genaue Abgrenzung in der Praxis häufig
schwierig.
Im Prototyp sind beide Varianten der Zusammenarbeit
denkbar bzw. vermischen sich. Somit bietet SketchCoLab
SketchCoLab
Konzeption und praktische Umsetzung
eine gewisse Flexiblität, welche die Zusammenarbeit je
nach Anforderung der beteiligten Nutzer oder des Projekts
unterstützt.
Primärer Aspekt bei einer Kollaboration ist die Bearbeitung
einer oder mehrerer gemeinsamer Aufgaben mit
direktem Fokus auf das Erreichen einer gemeinsamen Mission.
Dabei wird die Zusammenarbeit maßgeblich durch
das wechselseitige Einbringen der Teilnehmer beeinflusst.
Diesen Faktoren wird innerhalb des entwickelten Prototyps
zum Teil Rechnung getragen. Eine gemeinsame Aufgabe
könnte es beispielsweise sein, aus einem Set bestehender
Symbole bzw. Icons für einen bestimmten Begriff die geeignetste
Variante als ein gemeinsames Ziel herauszufiltern
bzw. zu erarbeiten. Durch die Möglichkeit mittels Chat
miteinander zu kommunizieren bzw. durch die Einsicht erstellter
Annotationen anderer Nutzer, kann demnach eine
wechselseitige Inspiration und Beeinflussung stattfinden.
Jeder Nutzer hat somit die gleiche Aufgabe und darüber
hinaus das gleiche Ziel.
Zusätzlich wird aber auch die kooperative Zusammenarbeit
durch Arbeitsteilung unterstützt. So ist ein mögliches
Anwendungsszenario, dass eine Gruppe von Nutzern ein
bestimmtes Set an Entwürfen oder Zeichnungen bearbeitet,
während eine weitere Gruppe ein anderes Set des gleichen
Projektes überarbeitet und bewertet. Verschiedene
Nutzer bzw. Gruppen tragen somit durch die Aufteilung
von Aufgaben zum einem Ziel bei. Eine Kooperation zeichnet
sich darüber hinaus durch einen geringeren Grad der
Zusammenarbeit und einen erhöhten Anteil individueller
Arbeit aus. Ist demnach eine kooperative Zusammenarbeit
innerhalb der Projektgruppe relevant, so kann das bei der
Anwendung von SketchCoLab durch die Nutzer beeinflusst

werden und z.B. auf die Kommunikation per Chat verzichtet
werden. Auch kann die Intensität der Kommunikation
zwischen den Nutzern differieren, sodass Anwender die
wenig oder gar nicht mit anderen Teilnehmern kommunizieren
eher kooperativ als kollaborativ etwas zum Ergebnis
beitragen.
Innerhalb des Prototyps ist sowohl die asynchrone, als
auch im gewissen Umfang die synchrone Zusammenarbeit
möglich. Sind Teilnehmer zeitgleich in der Anwendung
und kommunizieren hinsichtlich der gemeinsamen Aufgabenstellung,
wird der Aspekt der Kollaboration verstärkt.
Bei einer asynchronen Zusammenarbeit können dagegen
die Gruppenmitglieder ihr eigenes Arbeitstempo bzw. den
Grad der Beeinflussung durch andere Nutzer bestimmen.
Hinweis: In Kapitel 3.3.4 (Mockups) erfolgt die Darstellung
der Visualisierung von SketchCoLab bzw. die Erläuterung
der im Prototyp abgebildeten Funktionen. Screenshots der
finalen Applikation werden aufgrund der Fertigstellung und
Weiterverarbeitung der schriftlichen Arbeit vor dem Abgabetermin
daher auf der beiliegenden CD-ROM zur Verfügung
gestellt und können dort eingesehen werden.
Grobkonzept
SketchCoLab
•••
79

80
•••
3.2. Feinkonzept
Vornehmlicher Aspekt innerhalb des Feinkonzepts stellt die
Betrachtung der Funktionalität der Anwendung in Form des
Interface- und Interaktionsdesigns dar. Während beim Interfacedesign
auf Basis einer formalen Gestaltung der Dialog
zwischen Mensch und Maschine im Vordergrund steht,
betrachtet der Bereich Interaktionsdesign die Funktionsvorgänge
im Detail. Interfacedesign kommuniziert demnach
„was“ und „wie“ etwas funktioniert, Interaktionsdesign dagegen
vermittelt „auf welchem Weg“ die Funktion stattfin-
SketchCoLab
Tiefe Struktur
Breite Struktur
Abbildung 49: Hierarchien einer Informationsarchitektur
Darstellung nach ARNDT (2006, S. 143)
Konzeption und praktische Umsetzung
det. Die Funktionalität einer Anwendung ist demnach kein
reiner Selbstzweck, sondern unterstützt die Absicht eines
Produktes bzw. die Vermittlung der Inhalte (STAPELKAMP,
2010, S. 392 und S. 466 ff.).
3.2.1. Informationsarchitektur
Die Informationsarchitektur zeigt die Struktur der relevanten
Informationen und Funktionen einer Anwendung. Wichtiger
Aspekt dabei ist die Hierarchie, die sich durch Tiefe

(Ebenen) und Breite (Sektionen) der Struktur ergibt. Eine
Struktur, die viele Sektionen auf einer Ebene einsetzt, benötigt
demnach weniger Ebenen. Bei einer tiefen Hierarchie
dagegen wird die Anzahl der Sektionen auf einer Ebene reduziert
und somit die Menge an Ebenen erhöht (siehe auch
Lineare Verknüpfung
Hyperlink-Verknüpfung
Hierarchische Verknüpfung (mit Hyperlinks) Einzelbild-Struktur
Abbildung 50: Navigationsstrukturen
Darstellung nach STAPELKAMP (2007, S. 187 ff.)
Abbildung 49). Tiefe Strukturen erfordern unter Umständen
einen längeren Weg bis der Nutzer sein Ziel erreicht, sind
dafür jedoch übersichtlicher, da sie jeweils eine überschaubare
Anzahl an Möglichkeiten anbieten. Breite Strukturen
verkürzen dagegen den Weg, können aber abhängig von
Netzwerkartige Verknüpfung
Feinkonzept
SketchCoLab
•••
81

82
•••
Informationsarchitektur
Stellt die Hierarchie der Informations-
und Funktionsstruktur einer
Anwendung oder Website dar,
die durch die Tiefe (Ebenen) und
Breite (Sektionen) der Struktur
entsteht.
der Anzahl der gleichzeitig auf einer Ebene dargestellten
Sektionen unübersichtlich sein. Tendenziell lässt sich sagen,
dass breite Strukturen dem Anwender eher entgegen kommen.
Wobei die optimale Anzahl der Sektionen auf einer
Ebene vor allem von den Inhalten und deren qualitativen
Benennung abhängt (ARNDT, 2006, S. 140 ff.).
Aus der Informationsarchitektur ergibt sich die Navigationsstruktur
einer Anwendung. Sie unterstützt die Darstellung
der Inhalte und Möglichkeiten und dient zu Orientierungszwecken.
Wissenschaftliche Untersuchungen haben
ergeben, dass Menschen sich maximal sieben Elemente
z. B. Sektionen innerhalb einer Struktur merken können.
Es ist demnach sinnvoll die Anzahl von Navigationselementen
auf einer Ebene möglichst gering zu halten, aber
auch unnötig komplexe Strukturen zu vermeiden.
Folgende Navigationsstrukturen werden unterschieden (siehe
auch Abbildung 50):
• Lineare Verknüpfung: Die einfachste Form der Navigationsstruktur,
bei der die miteinander verbundenen
Inhalte sequentiell aufeinander aufbauen (z. B.
bei Anmelde- oder Bestellprozessen).
• Hyperlink-Verknüpfung: Die Hyperlink-Verknüpfung
stellte eine Erweiterung der linearen Verknüpfung
dar, bei der durch Hyperlinks dem Nutzer die
Möglichkeit gegeben wird, die Reihenfolge selbst zu
bestimmen.
• Hierarchische Verknüpfung: Die Inhalte werden bei
einer hierarchischen Verknüpfung horizontal (Breite
des Themas) und vertikal (Tiefe des Themas) gegliedert.
Damit werden in der Breite allgemeine und in
SketchCoLab
Konzeption und praktische Umsetzung
der Tiefe detaillierte Informationen dargestellt.
• Netzwerkartige Verknüpfung: Die Netzstruktur
kommt ohne eine Verbindungsstruktur aus. Sie ähnelt
der hierarchischen Struktur, jedoch können voneinander
entfernte Inhalte nicht direkt über Hyperlinks
aufgerufen werden, sondern nur über Umwege.
• Einzelbild-Struktur: Die Verknüpfungen in einer
Einzelbild-Struktur sind so aufgebaut, dass es nur benachbarte
Inhalte gibt und keine unterschiedlichen
Hierarchie-Ebenen (z. B bei Bildergalerien).
(STAPELKAMP, 2007, S. 184 ff.).
Verschiedene Navigationsformen unterstützen die praktische
Nutzung der Navigationsstruktur mit ihren Inhalten
und Funktionen. Welche Form am geeignetsten ist, hängt
im Wesentlichen von der Produktabsicht, dem zu vermittelnden
Inhalt ab und dem eingesetzten Medium ab.
Mögliche Navigationsformen sind:
• Direkte Manipulation
• Hierarchische Navigationssysteme
• Sitemap
• Imagemap
• Anker-Navigation
• Suche
• Alphabetische Index-Navigation
• Guided Tour
• Geleitete bzw. manipulierte Navigation
• Eigenwillige Navigationsformen

Aufgrund der Relevanz für diese Arbeit soll lediglich auf
die ersten beiden Formen kurz eingegangen werden. Die
direkte Manipulation stellt dabei die unmittelbarste Navigationsmöglichkeit
dar, da dem Nutzer der Eindruck vermittelt
wird, direkt in das Geschehen eingreifen zu können.
Ein Beispiel ist das Greifen und Verschieben von Objekten
(Drag & Drop). Wichtig bei direkten Manipulationen ist
das eine sofortige Wechselwirkung zwischen Nutzer-Interaktion
und System stattfindet.
Hierarchische Navigationssysteme gliedern Inhalte bezüglich
ihrer Bedeutung oder ihres Themas und können
durch verschiedene Menüarten (z. B. horizontales oder
vertikales Menü, Pulldown-Menü, generische Navigation,
etc.) unterstützt werden (STAPELKAMP, 2007, S. 190 ff.).
Bezogen auf den Prototyp
Bei der Konzeption von SketchCoLab wurde von einer breiten
Struktur der Hierarchie ausgegangen, um den Weg zu
den jeweiligen Funktionen und Informationen möglichst
kurz zu gestalten (siehe auch Abbildung 49). Primär eingesetzte
Navigationsformen stellen die direkte Manipulation,
die durch die Touchscreen-Technologie entsprechend unterstützt
wird, sowie verschiedene Formen des hierarchischen
Navigationssystems dar.
3.2.2. Wireframes (Funktionslayout)
Wireframes oder auch Funktionslayout genannt, dienen
zur Darstellung der Funktionalität und sämtlicher relevanter
Funktionselemente einer Anwendung oder eines Produkts.
Sie beschreiben die einzelnen Funktionselemente in ihren
Eigenschaften sowie ihrer Positionierung und bilden somit
die Grundlage für den anschließenden Gestaltungsprozess
ohne bereits gestalterische Details darzustellen.
Konkrete Fragen die durch das Funktionslayout beantwortet
werden sollten sind laut SAFFER beispielsweise:
• Welche Bedienelemente können wie verändert werden?
• Was passiert wenn der Nutzer mit diesen Elementen
interagiert?
• Wo sind diese Elemente innerhalb der Anwendung
platziert?
• Welche Abhängigkeiten und Zustände der Bedienelemente
gibt es?
• Welche technischen oder physikalischen Grenzen
bzw. Einschränkungen gilt es zu beachten?
• Welche sensorischen Gegebenheiten sind zu beachten
(z. B. die Sensitivität oder Genauigkeit der
Sensoren)?
Wireframes eignen sich für jede Art von interaktiver Anwendung,
unabhängig wie komplex diese ist und bieten
darüber hinaus einige Vorteile. So lassen sich damit schnell
Ergebnisse erzielen, die darüber hinaus eine gute Diskussionsgrundlage
für alle am Gestaltungsprozess beteiligten
Personen darstellen. Bei der Erstellung ist darauf zu achten,
verschiedene Anwendergruppen und deren Kompetenzgrad
(Anfänger, Fortgeschrittene, Experten) zu berücksichtigen.
Darüber hinaus beschreibt STAPELKAMP drei Funktionskategorien,
die neben den Kompetenzgraden in die
Entwicklung von Wireframes einfließen sollten:
Feinkonzept
SketchCoLab
•••
83

84
•••
Wireframe
Mit Wireframes wird die Funktionalität
einer Anwendung, eines
Produkts oder einer Website
dargestellt, ohne dabei bereits
gestalterische Details festzulegen.
Sie dienen häufig auch als
Diskussionsgrundlage zwischen
den beteiligten Personen (Nutzer,
Gestalter, Entwickler).
• Primärfunktion: Funktionen, die den Hauptnutzen
des Produktes oder Anwendung ausmachen
• Sekundärfunktion: Funktionen, die den Hauptnutzen
des Produktes erweitern
• Tertiärfunktion: Funktionen, die nicht unbedingt
notwendig sind, da sie nicht relevant für den Hauptnutzen
der Anwendung sind
Für die praktische Umsetzung von Funktionslayouts für
Touchscreen-Systeme ist es darüber hinaus hilfreich, diese
„pixelgenau“ zu realisieren. Diese Vorgehensweise reduziert
die Überladung des Bildschirms und hilft den Platzbedarf
von Touchelementen im Vorfeld richtig einzuschätzen
(SAFFER, 2009, S. 102; STAPELKAMP, 2010, S. 162 f.).
Wireframes des interaktiven Prototyps
Anhand der nachfolgend dargestellten Wireframes wird
ein erster Überblick über das Konzept des interaktiven Prototyps
dargestellt und beschrieben. Die vorgestellten Wireframes
sind dabei zum grundlegenden Verständnis gedacht
und repräsentieren nicht immer das finale Ergebnis,
wie es letztlich in die Mockups bzw. in den Prototyp selbst
eingeflossen ist. So wurden eine Reihe von Funktionen die
zum Teil in den Wireframes dargestellt sind, in der Endversion
von SketchCoLab nicht berücksichtigt oder modifiziert.
Die Wireframes zeigen daher neben dem eigentlichen
Konzept ebenfalls einen Überblick über während der
Entwurfsphase angedachte und teilweise wieder verworfene
Ansätze. Diese Ansätze demonstrieren den iterativen
Charakter während der Konzeptphase und bieten darüber
hinaus mögliche Ansätze für eine Weiterentwicklung des
Prototyps. Die dargestellten Wireframes werden größten-
SketchCoLab
Konzeption und praktische Umsetzung
teils durch direkt in den Grobentwürfen enthaltene Hinweise
unterstützt und geben einen Überblick über relevante
und geplante Interaktionen.
Als Teil des Gestaltungslayouts einer Anwendung, die
in die Wireframes und Mockups fließt, wird zunächst kurz
auf Aspekte des Formats und Rasters des Prototyps eingegangen.
Format
Als Grundlage zur Aufteilung und Strukturierung einer Fläche
dient das Format einer interaktiven Anwendung. Das
Format wiederum ist meist abhängig vom verwendeten
Medium und bestimmt maßgeblich die charakterlichen Eigenschaften
eines Interface- und Screendesigns. Aber auch
die eingesetzte Software (z. B. Browser) kann das Format
beeinflussen, da sie oft nicht den kompletten Platz eines
Mediums zur Verfügung stellt. Bei den meisten mobilen
Geräten ist die Besonderheit gegeben, dass sowohl die
Betrachtung im Quer-, als auch im Hochformat möglich ist.
Somit wird in der Queransicht am ehesten das natürliche
Blickfeld des Menschen unterstützt, während im Hochformat
die Dynamik gefördert wird. Im vorgestellten Prototyp
wird allerdings ausschließlich auf das Querformat gesetzt,
da eine für beide Formate optimierte Gestaltung den Umfang
dieser Arbeit sprengen würde (STAPELKAMP, 2010,
S. 256 ff.).
Das zur Verfügung stehende Testgerät arbeitet mit einer
Auflösung von 1280 x 800 Pixel. Die Realisation als Web-
Applikation erfordert den Einsatz eines Browsers, weshalb
die genannte Auflösung zur Darstellung der Anwendung
nicht voll zur Verfügung steht. Als einer der möglichen
einsetzbaren Browser wurde in dieser Arbeit der Android

Dolphin Browser verwendet, der innerhalb seines Darstellungsbereichs
im Vollbildmodus die gewünschte Auflösung
darstellt. Zusätzlich wurde bei der Umsetzung des Prototyps
die Höhe der Anwendung auf 700 Pixel reduziert,
um in einem gewissen Rahmen auch niedrigere Auflösungen
zu berücksichtigen. Es wird darauf hingewiesen, dass
diese Werte nur als exemplarische Daten zu sehen sind,
da der vorhandene Platz sowohl vom verwendeten Gerät,
als auch vom eingesetzten Browser abhängig ist. In den
Wireframes wurde vom komplett zur Verfügung stehenden
Platz ausgegangen, da prinzipiell die Ausführung der Anwendung
im Vollbildmodus denkbar ist (z. B. auf dem iPad
oder generell in einem Browser mit Vollbildfunktion).
Raster
Zur Unterstützung einer möglichst optimalen Aufteilung der
Abbildung 51: Basisraster als Gestaltungsrichtlinie
Eigene Darstellung
Fläche erfolgte der Einsatz eines Rasters. Das eingesetzte
Raster diente dabei als Richtlinie und wurde unter anderem
aufgrund der teilweise flexiblen Anpassung der Breite der
Webapplikation nicht durchgängig übertragen.
Raster verschaffen dem Designer beim Gestaltungsprozess
einen Überblick und helfen ihm bei der Umsetzung eines
durchgängigen und homogenen Interface- und Screendesigns.
SketchCoLab basiert auf einem flexiblen 32 x 32
Pixel Raster, dass bis zu einem 8er Raster herunter gebrochen
werden kann (siehe auch Abbildung 51), wobei dies
der Bildschirmauflösung von mobilen Geräten und Computern
entgegen kommt, da diese immer durch acht teilbar ist
(STAPELKAMP, 2010, S. 262 ff.).
Feinkonzept
SketchCoLab
•••
Raster
Gestaltungsraster sind ein
Ordnungssystem in der visuellen
Kommunikation, mit deren Hilfe
die Organisation und Aufteilung
von grafischen Elementen
erleichtert wird.
85

86
•••
Wireframe #1 - Grundaufbau
Abbildung 52: Wireframe #1 - Grundaufbau
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

Wireframe #2 - Werkzeugoptionen
Abbildung 53: Wireframe #2 - Werkzeugoptionen
Eigene Darstellung
Feinkonzept
SketchCoLab
•••
87

88
•••
Wireframe #3 - Projektauswahl
Abbildung 54: Wireframe #3 - Projektauswahl
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

Wireframe #4 - Wahl der Zeichnung
Abbildung 55: Wireframe #4 - Wahl der Zeichnung
Eigene Darstellung
Feinkonzept
SketchCoLab
•••
89

90
•••
Wireframe #5 - Werkzeuge: Freiform-Stift
Abbildung 56: Wireframe #5 - Werkzeuge: Freiform-Stift
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

Wireframe #6 - Werkzeuge: Textwerkzeug
Abbildung 57: Wireframe #6 - Werkzeuge: Textwerkzeug
Eigene Darstellung
Feinkonzept
SketchCoLab
•••
91

92
•••
Wireframe #7 - Werkzeuge: Radiergummi
Abbildung 58: Wireframe #7 - Werkzeuge: Radiergummi
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

Wireframe #8 - Werkzeuge: Textmarker
Abbildung 59: Wireframe #8 - Werkzeuge: Textmarker
Eigene Darstellung
Feinkonzept
SketchCoLab
•••
93

94
•••
Wireframe #9 - Workflow: Elemente skalieren
und rotieren
Abbildung 60: Wireframe #9 - Workflow: Elemente skalieren und rotieren
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

Wireframe #10 - Workflow: Elemente (nachträglich)
verschieben
Abbildung 61: Wireframe #10 - Elemente (nachträglich) verschieben
Eigene Darstellung
Feinkonzept
SketchCoLab
•••
95

96
•••
Wireframe #11 - Workflow: Arbeitsfläche vergrößern
und verschieben
Abbildung 62: Wireframe #11 - Workflow: Arbeitsfläche vergrößern und verschieben
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

Wireframe #12 - Aktivitätspanel: Bewertungen
einsehen und neue Bewertung vergeben
Abbildung 63: Wireframe #12 - Aktivitätspanel: Bewertungen einsehen und neue Bewertung vergeben
Eigene Darstellung
Feinkonzept
SketchCoLab
•••
97

98
•••
Wireframe #13 - Aktivitätspanel: Bestehende
„Tags“ einsehen und neue „Tags“ vergeben
Abbildung 64: Wireframe #13 - Aktivitätspanel: Bestehende „Tags“ einsehen und neue „Tags“ vergeben
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

Wireframe #14 - Aktivitätspanel: Useraktivitäten
einsehen
Abbildung 65: Wireframe #14 - Aktivitätspanel: Useraktivitäten einsehen
Eigene Darstellung
Feinkonzept
SketchCoLab
•••
99

100
•••
Wireframe #15 - Ansichtspanel: Bestehende Annotationsversionen
einsehen und bearbeiten
Abbildung 66: Wireframe #15 - Ansichtspanel: Bestehende Annotationsversionen einsehen und bearbeiten
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

Wireframe #16 - Eine Zeichnung bewerten und
kommentieren
Abbildung 67: Wireframe #16 - Zeichnung bewerten und kommentieren
Eigene Darstellung
Feinkonzept
SketchCoLab
•••
101

102
•••
Wireframe #17 - „Tags“ zu einer Zeichnung
vergeben
Abbildung 68: Wireframe #17 - „Tags“ zu einer Zeichnung vergeben
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

3.2.3. Interaktionen
Grundlagen der direkten Interaktion
Die direkte Manipulation von Interfaces gilt als natürlichste
Form der Interaktion. Die Möglichkeit mit Objekten unmittelbar
zu interagieren kommt der Vorgehensweise in der
realen Welt sehr nahe, obwohl die meisten Interfaces keine
räumliche Interaktion unterstützen. Die Steuerung per
Maus zählt zwar ebenfalls zu den direkten Eingabemethoden,
doch kommen Touch- bzw. Multitouchscreens dem
Anspruch einer möglichst direkten Manipulation durch den
Anwender noch ein wenig näher. Das dahinter stehende
Prinzip nennt sich „Verankerung“ und orientiert sich an
Gesten, die sich von natürlichen Bewegungsabläufen ableiten.
Bei der Bedienung eines Touchscreens erfolgt eine
feste Verbindung zwischen dem Finger (oder mehreren Fingern)
und dem manipulierten Objekt, die dafür sorgt, dass
das Objekt den Bewegungen des Fingers folgt, solange
diese Verbindung besteht. Das Prinzip der „Verankerung“
ist vor allem bei den sogenannten „Ziehgesten“ (z. B. Drag
& Drop, Scrollen) ersichtlich, bei dem Objekte von einer
Stelle des Interfaces an eine andere Stelle gezogen werden
Drag & Drop Rotieren Verkleinern Vergrößern
Abbildung 69: Beispiele verankernder Gesten auf Touchscreens
Eigene Darstellung
und somit dem Greifen von Objekten in der realen Welt
nachempfunden ist.
Eine weitere Form der Interaktion die auf dem Prinzip
der „Verankerung“ aufbaut, ist die „Pinch-Geste“. Durch
eine öffnende und schließende Spreizbewegung von Zeigefinger
und Daumen können so Objekte vergrößert und
verkleinert werden. Ähnlich funktioniert das Rotieren, bei
dem Objekte mit Hilfe des Daumens und des Zeigefingers
um deren Mittelpunkt gedreht werden. Insgesamt handelt
es sich bei diesen Gesten, um objektorientierte Gesten die
immer an ein Objekt oder eine Objektklasse gebunden
sind (DORAU, 2011, S. 110 ff.). Abbildung 69 zeigt Beispiele
von verankernden Gesten auf Touchscreens.
Text- und Zeicheneingabe
Im interaktiven Prototyp spielt die Eingabe von Text eine
wichtige Rolle, weshalb darauf auch kurz eingegangen
wird. Allgemein ist bei der Planung der Interaktionen auf
mobilen Geräten zu beachten, dass Nutzer unterschiedliche
Fähigkeiten und Präferenzen bei der Eingabe von Text
einbringen. Demnach ist es grundsätzlich zu empfehlen,
dem Anwender wenn möglich und sinnvoll mehrere Opti-
Feinkonzept
SketchCoLab
•••
103

104
•••
onen bereitzustellen. Wichtig ist es, Eingabemethoden zur
Verfügung zu stellen, die dem Nutzer bereits bekannt sind.
Ebenfalls muss der Kontext der Nutzung betrachtet werden,
z. B. unter welchen physikalischen Umständen erfolgt die
Texteingabe und inwieweit haben diese Einfluss auf die
Nutzeraktionen. Die Berücksichtigung persönlicher Eigenschaften
der jeweiligen Nutzergruppe stellt einen weiteren
wichtigen Aspekt dar. Junge Leute sind beispielsweise geübter
bei der Texteingabe als ältere Personen. Unterstützende
Funktionen, die eine effiziente Eingabe von Text (z. B.
Autovervollständigung, Wortvorschläge) ermöglichen, sollten
darüber hinaus zur Verfügung gestellt werden.
Bei der entwickelten Anwendung bzw. beim verwendeten
Testgerät sind grundsätzlich zwei Möglichkeiten der
Texteingabe mit ihren Variationen denkbar und werden unterstützt.
Tastatur
Die Verwendung einer Tastatur bietet sich immer dann an,
wenn dem Nutzer einfach, leicht und idealerweise ohne
Erklärung der Handhabung die Möglichkeit der textlichen
und numerischen Eingabe zur Verfügung gestellt werden
soll. Dabei kann es sich sowohl um eine physikalische
als auch eine virtuelle Tastatur handeln. Das Konzept der
Hardware-Tastaturen stellt durch seine allgegenwärtige
Präsenz eine erwartungskonforme Texteingabe dar, welches
ebenfalls auf Bildschirme (Touchscreens) übertragen
wurde. Obwohl eine Reihe anderer Eingabetechnologien
existieren, sind Tastaturen die geläufigste Form der Texteingabe
und stellen demnach eine Schlüsselkomponente interaktiver
Geräte dar.
Virtuelle Tastaturen auf Touchscreens können aufgrund
SketchCoLab
Konzeption und praktische Umsetzung
des geringeren zur Verfügung stehenden Platzes nicht die
gesamte Breite der Funktionalität physischer Tastaturen abbilden.
Sie sollten jedoch die grundlegenden Prinzipien bereitstellen,
damit Anwender ohne kognitive Belastung in der
Lage sind Informationen über das Gerät einzugeben. Bei
virtuellen Tastaturen stehen eine Reihe von verschiedenen
Konzepten zur Verfügung, die es dem Nutzer erlauben, die
Texteingabe nach seinen persönlichen Bedürfnissen auszuwählen
und deren Ziel es ist, die Texteingabe zu optimieren
bzw. zu beschleunigen (HOOBER & BERKMAN, 2011,
S. 284 ff.).
Das verwendete Testgerät ASUS EeePad Transformer
TF101 bietet neben einer andockbaren Hardware-Tastatur,
die Texteingabe durch das vom Android-Betriebssystem
zur Verfügung gestellte virtuelle Keyboard an, welches je
nach Geschmack in Form von Apps hinsichtlich des Eingabekonzepts
angepasst werden kann. Generell ist es bei
der Geräteklasse der Tablet Computer möglich diese mit
einer physischen Tastatur zu verbinden, wodurch auch ein
Stück Mobilität verloren geht. Allerdings erlaubt die Eingabe
durch eine Hardware-Tastatur eine komfortable Texteingabe,
die sich vor allem bei längeren Texten bezahlt macht
und demnach beim interaktiven Prototyp als empfohlene
Eingabeform vorgeschlagen wird.
Stifteingabe
Die Texteingabe per Stift (Stylus) stellt eine weitere Möglichkeit
dar und bietet Nutzern, die weniger geübt im Umgang
mit der Tastatur sind, eine Alternative. Sie eignet sich als
einfache, natürliche und ohne viel Übung nutzbare Eingabeform.
Ein Eingabestift kann dabei als Alternative zur
direkten Touch-Interaktion durch den Finger dienen. Zum

Beispiel wenn es regnet, der Nutzer Handschuhe trägt
oder wenn ein gewisser Präzessionsgrad notwendig ist
bzw. nur eine Hand zur Verfügung steht. Darüber hinaus
ermöglicht der Einsatz eines Stylus den natürlichen Ablauf
beim Schreiben von Text, wie man ihn mit Papier und Stift
kennt. Schrifterkennungsalgorithmen können diesen Prozess
unterstützen, sodass die vom Nutzer auf das Display
geschriebenen Worte und Zeichen direkt durch das System
umgewandelt und erkannt werden (HOOBER & BERK-
MAN, 2011, S. 291 ff.).
Im interaktiven Prototyp stellt die Stifteingabe vor allem
bezüglich der Annotation eine intuitive Möglichkeit
der Interaktion dar. Annotationen können neben Formen,
Zeichnungen, etc. auch Texte bzw. Wörter sein. Dabei ist
zu bemerken, dass die Stifteingabe von Text innerhalb der
Anwendung eine reduzierte Form der Texteingabe darstellt,
da keine Schrifterkennung und Umwandlung des
Texts durch das System stattfindet. Bei der Verwendung von
SketchCoLab wird generell die Nutzung eines Stylus vor
allem in Bezug auf die Annotation durch Text und Zeichnungen
in Form „digitaler Tinte“ empfohlen, der zusätzlich
Einfacher Tap
(normaler Klick)
1 2 3 4 5
Double-Tap
(Doppelklick)
Abbildung 70: Touch-Interaktionen im Prototyp
Eigene Darstellung
Bewegen und
Verschieben
Scrollen nach links
und rechts (Swipe)
auch als Alternative zur direkten Interaktion durch den Finger
genutzt werden kann.
Relevante Touch- / Multitouchinteraktionen
Die im Prototyp verwendeten Interaktionen bezogen auf
die Nutzung von SketchCoLab mit einem mobilen Endgerät
zeigt die Abbildung 70.
• 1: Tap (alternative Mausgeste: Klick)
Diese Form der Interaktionsmöglichkeit stellt den
Hauptbestandteil dar und betrifft primär Interaktionselemente
wie Buttons und Menüs.
In SketchCoLab: Buttons, Werkzeuge, Menüs (Slider,
Accordion)
• 2: Double-Tap (alternative Mausgeste: Doppelklick)
In SketchCoLab: Löschen von Textelementen, die auf
der Leinwand platziert wurden.
• 3: Touchmove, Bewegen und Verschieben (alternative
Mausgeste: Drag & Drop)
Scrollen (Swipe nach
oben und unten)
Feinkonzept
SketchCoLab
•••
105

106
•••
SketchCoLab
In SketchCoLab: Bewegen der erstellten Textboxen
auf der Leinwand, Zeichnen auf der Leinwand.
• 4: Swipe nach links und rechts (horizontales Scrollen)
(alternative Mausgeste: Klicken der Pfeilelemente)
In SketchCoLab: Bilderslider bei Wahl der Zeichnung
und im Bewertungsfenster.
• 5: Swipe nach oben und unten (vertikales Scrollen)
In SketchCoLab: Einträge im Chat, bei Einzelbewertungen
und Projektwahl, wenn die Anzahl der Daten
den verfügbaren Anzeigeplatz überschreitet.
Konzeption und praktische Umsetzung

3.3. Gestaltungskonzept
Screendesign beschreibt primär die Form bzw. visuelle
Ästhetik eines Produkts oder einer Anwendung, unterstützt
bestenfalls aber auch die Darstellung der funktionalen
Aspekte. So ist die Grenze zwischen Screendesign und
Interfacedesign nicht immer eindeutig. Denn eine interaktive
Anwendung, die zwar eine optimale Bedienbarkeit,
jedoch über keine ansprechende Gestaltung verfügt, ist genauso
wenig zielführend, wie eine ansprechend gestaltete
Lösung, welche die Verdeutlichung der Funktionen vernachlässigt.
Es ist daher wichtig, dass ein möglichst optimales
Zusammenspiel von Form (Screendesign) und Funktion
(Interfacedesign) erfolgt und die Absicht eines Produktes
durch das Screendesign unterstützt wird. Elemente des
Screendesigns sind:
• Layout: Gliederung des Interfaces in Aktions-, Informations-
und Inhaltsbereiche
• Inhalte: Unterstützung der Gestaltung von Informationen,
damit sie vom Anwender als Inhalte verarbeitet
und aufgenommen werden (meist in Kombination
mit Interaktivät)
Versalhöhe
Abbildung 71: Grundbegriffe der Typografie
Eigene Darstellung
Punze
Serife
• Orientierung: Bereitstellen von Orientierungshilfen
für den Nutzer (z. B. durch Menüs)
• Anreize, Motivation: Für den Anwender Reize schaffen,
damit dieser sich mit dem Produkt beschäftigen
möchte und daran Freude hat
• Auswahl- und Interaktionsmöglichkeiten: Unterstützung
der Auswahl- und Interaktionsmöglichkeiten
durch das Screendesign
(STAPELKAMP, 2007, S. 314 ff.)
Nachfolgend sollen einige Aspekte dieser Elemente in Bezug
auf den in dieser Arbeit entwickelten Prototyp genauer
dargestellt werden.
3.3.1. Typografie
Darstellungsmedien, die über einen selbstleuchtenden Bildschirm
verfügen, stellen eine große Herausforderung an
die typografische Gestaltung dar. Das Lesen von Text auf
dieser Art von Geräten kann für den Nutzer mitunter sehr
anstrengend sein. Gründe hierfür sind neben der geringen
Oberlänge
x-Höhe
Unterlänge
Gestaltungskonzept
SketchCoLab
•••
107

108
•••
Auflösung (72 oder 96 Punkte pro Zoll) der Bildschirme,
auch die für das Auge ermüdenden Bildwiederholungsraten
(z. B. bei Röhrenmonitoren).
Dazu kommt, dass Kontraste und Farben auf einem
selbstleuchtenden Medium intensiver dargestellt werden,
als dies zum Beispiel bei Printprodukten der Fall ist. Zu starke
oder geringe Kontraste können demnach den Betrachter
bei der Aufnahme der dargestellten Informationen stören
bzw. diese erschweren. Daher müssen bei der typografischen
Gestaltung einige Vorgaben beachtet werden, um
ein möglichst optimales Ergebnis zu erzielen.
Diese Vorgaben sind dabei in Abhängigkeit des verwendeten
Darstellungsmediums zu sehen. Ein wichtiger Parameter
stellt hierbei die Entfernung des Betrachters auf das
jeweils genutzte Display dar. Bei mobilen Geräten wird
dieser Abstand auf ca. 30 cm definiert.
Neben dem Betrachtungsabstand sind aber auch technische
Eigenschaften des Geräts wie Farbtiefe oder Auflösung
zu beachten, genauso wie zielgruppen- und themenspezifische
Aspekte. Generell sind aufgrund der geringeren Auflösung
der Geräte, Serifenschriften in kleineren Punktgrößen
weniger zur Darstellung auf selbstleuchtenden Medien
geeignet. Eigens für den Bildschirm entwickelte Screenfonts
bzw. Pixelschriften erlauben dagegen eine optimierte Textdarstellung.
Die Ansprüche an eine gute Typografie werden im Bereich
der Mobilgeräte noch einmal aufgrund der geringeren
Bildschirmgröße bzw. durch den stark begrenzten Platz
erhöht. Bei einem Betrachtungsabstand von 30 cm wird
als Richtwert eine Schriftgröße von 8 – 11 Punkt empfohlen.
Die dynamische Anpassung der Schriftgröße bei unterschiedlich
großen Displays der Mobilgeräte macht eine
SketchCoLab
Konzeption und praktische Umsetzung
allgemein gültige Regel allerdings kaum möglich (STAPEL-
KAMP, 2007, S. 92 ff.).
Dennoch können laut HOOBER & BERKMAN einige
Richtlinien bei der Auswahl der geeigneten Schriftart für
mobile Geräte helfen, die hier auszugsweise genannt werden
sollen (Abbildung 71 zeigt zur Unterstützung einige
typografische Fachbegriffe).
Folgende Eigenschaften muss eine geeignete Schrift für mobile
Geräte besitzen:
• Die X-Höhe (Höhe der Kleinbuchstaben) sollte
zwischen 65% und 80% der Versalhöhe (Höhe der
Großbuchstaben) betragen
• Kräftige Punzen (ausgesparte Innenflächen bei Buchstaben);
eckige Formen sind für kleine Punzen am
geeignetsten
• Unbetonte Formen; gerade, gleichbreite Linien
• Keine übermäßigen Unterlängen; nicht größer als
15 – 20% der Versalhöhe um einen zu großen Zeilenabstand
zu vermeiden
• Keine Oberlängen oberhalb der Versalhöhe (wichtig
vor allem bei nichtenglischen Sprachen)
Eine gute Schrift für Mobilgeräte verfügt darüber hinaus
über weitere Eigenschaften:
• Platzsparend in der Darstellung
• Keine gestauchte Darstellung bzw. Optik der Schrift
• Optimiertes Kerning (Unterschneidung) der Buchstaben
– Die Abstände der Buchstaben sollten ausgeglichen
sein (nicht zu weit und nicht zu eng)

• Gleiche oder ähnliche Breite für alle Schriftdicken
und Schriftschnitte
• Echte Kursiv-Schnitte verwenden (keine softwarege-
Abbildung 72: Im Prototyp eingesetzte Schriftart Roboto
Eigene Darstellung
nerierte Schrägstellung der Buchstaben)
• Schrift sollte Teil einer Schriftfamilie sein; serifenbetonte
und serifenlose Schriften bzw. Schriftschnitte
Gestaltungskonzept
SketchCoLab
•••
109

110
•••
Unbunt-Farbe: Blau-Grau
Hintergrund, Interfacebestandteile
RGB
R: 30 G: 35 B: 45
CMYK
C: 80 M: 71 Y: 56 K:66
Bunt-Farbe: Gelb-Grün
Interaktionselemente, wichtige
Informationseinheiten
RGB
R: 227 G: 227 B: 0
CMYK
C: 15 M: 0 Y: 100 K: 0
Weiß und Schwarz
Textfarbe (Hell-Dunkel-Kontrast)
SketchCoLab
können kombiniert werden (z. B. für Titel- und
Inhaltstext)
(HOOBER & BERKMAN, 2011, S. 502 ff.)
Typografie im interaktiven Prototyp
Durch die Umsetzung als Web-Applikation ist die Auswahl
an möglichen Schriftarten grundsätzlich als begrenzt zu
betrachten, da sie maßgeblich abhängig ist von den zur
Verfügung gestellten Schriften des jeweiligen Betriebssystems.
Da das Ziel bei internetbasierten Applikationen bzw.
Websites ist, möglichst eine plattformunabhängig einheitliche
Darstellung zu gewähren, reduzieren sich die Möglichkeiten
noch einmal. Dies hat zur Folge, dass eine Schriftart
zu wählen ist, die möglichst auf verschiedenen Plattformen
standardmäßig zur Verfügung gestellt wird. Mit Hilfe sogenannter
„Webfonts“ kann diese Restriktion allerdings
umgangen werden. „Webfonts“ erlauben die Einbindung
alternativer Schriftarten, ohne dass diese auf dem System
des Nutzers installiert sein müssen. Dabei wird die Schrift
direkt durch den eigenen oder einen externen Web-Server
zur Verfügung gestellt. Google bietet z. B. eine große Anzahl
von „Webfonts“ zur Einbindung auf Websites an.
Ausgehend von den dargestellten Aspekten und Anforderungen
an die Typografie auf mobilen Endgeräten wurde
für den Einsatz innerhalb des Prototyps die Schriftart
„Roboto“ (Abbildung 72) gewählt, die auch als „Webfont“
zur Verfügung steht. Sie bietet mehrere Schriftschnitte, ist
speziell für die Verwendung auf mobilen Endgeräten optimiert
worden und kommt als Standardschrift des neuen
Android-Betriebssystems (ab 4.0) zum Einsatz. Der Font
„Roboto“ ermöglicht eine hohe Informationsdichte und eig-
Konzeption und praktische Umsetzung
net sich zudem auch für die Darstellung auf hochauflösenden
Displays, die auf mobilen Geräten immer mehr zum
Standard werden.
Desweiteren wurde die Schriftart auch hinsichtlich der
Lesbarkeit von längeren Texten optimiert, da diese oft bei
serifenlosen Schriften leidet. Großflächige Punzen und eine
ausreichende Höhe der Kleinbuchstaben sind weitere Eigenschaften,
die die Schrift für den Einsatz im interaktiven
Prototyp prädestinieren.
Im Prototyp wird als kleinste Schriftgröße 9 Punkt (12
Pixel) und als maximale Größe 20 Punkt (26 Pixel) verwendet,
was sich mit der von STAPELKAMP empfohlenen
Schriftgrößen bei mobilen Geräten deckt (mind. 8 bis 11
Punkt). Dabei wurde darauf geachtet, dass eine möglichst
optimale Lesbarkeit bei gleichzeitig bestmöglicher Nutzung
des zur Verfügung stehenden Anzeigeplatzes erreicht wird.
3.3.2. Farben
Für die Erarbeitung eines geeigneten Farbkonzepts gilt es
zunächst zu beachten, dass Farben bei Menschen Emotionen
auslösen, die sich durch persönliche oder kulturelle
Eigenschaften jedoch unterscheiden können. Farbe stellt
daher ein äußerst wichtiges Gestaltungswerkzeug dar,
für das es aufgrund des subjektiven Farbempfindens von
Menschen allerdings schwierig ist allgemein gültige Regeln
aufzustellen. Farbe erfüllt eine Vielzahl von Funktionen.
Sie kann „schmücken“, „signalisieren“, „gliedern“, „kommunizieren“,
etc. Je nach Umgebung, Darstellungsmedium
oder persönlichen Voraussetzungen können Farben eine
unterschiedliche Wirkung erzielen und somit verschiedene

Gefühle, Eigenschaften oder Begriffe beim Betrachter hervorrufen.
Nach EVA HELLER sind dabei sechs verschiedene
Farbwirkungen zu unterscheiden:
• Psychologische Wirkung
• Symbolische Wirkung
• Kulturelle Wirkung
• Politische Wirkung
• Traditionelle Wirkung
• Kreative Wirkung
Für eine möglichst optimale Gestaltung eines Produkts oder
einer Anwendung ist es wichtig, sich über verschiedene
Aufgaben der Farbgestaltung im Klaren zu sein. Beispielsweise
stellt sich die Frage, welche Zielgruppe angesprochen
werden soll oder inwieweit die technischen Gegebenheiten
(Gestaltung für den Bildschirm oder für den Druck)
Einfluss nehmen. Darüber hinaus ist es für den Gestalter
wichtig, Aspekte zur Eindeutigkeit, Lesbarkeit, Orientierung,
sowie zu Farbharmonien bzw. Farbkontrasten oder
zum Inhaltsbezug zu definieren (BÖHRINGER, BÜHLER &
SCHLAICH, 2005, S. 36 ff.; STAPELKAMP, 2007, S. 32).
Abbildung 73: Bunt-Unbunt-Kontrast in SketchCoLab
Eigene Darstellung
Farbkonzept des interaktiven Prototyps
Die Farbgestaltung des Interfaces in SketchCoLab basiert
auf der Kombination eines Bunt-Unbunt-Kontrasts mit einem
Qualitätskontrast, sowie eines Hell-Dunkel-Kontrasts. Dabei
werden kräftige bzw. satte Farben mit entfärbten Farbtönen
kombiniert (Bunt-Unbunt). Diese Form des Kontrasts eignet
sich dabei besonders für den Bereich des Screen- und Interfacedesigns.
Der unbunte Bestandteil dieser Kontrastart
wird meist durch Grautöne realisiert. Im konkreten Fall von
SketchCoLab wird dieser durch ein Blau-Grau dargestellt,
welches durch einen kräftigen Grünton mit einem hohen
Gelbanteil zur Akzentuierung von wichtigen Interaktionselementen
und Informationen unterstützt wird.
Beim Qualitätskontrast wird der Kontrast durch Tonwertabstufungen
der entsprechenden Farbe erreicht. Mit Hilfe
dieser Abstufungen wurden Informationseinheiten und
Funktionen in verschiedene Bereiche visuell gegliedert,
ohne das Auge des Betrachters mit zu vielen unterschiedlichen
Farben zu überfordern. Ein weiterer im Interface des
Prototyp eingesetzter Farbkontrast ist der Hell-Dunkel-Kontrast
als ergonomischer Faktor, der vornehmlich den Text
vom Hintergrund differenziert und somit die Lesbarkeit erhöht
(STAPELKAMP, 2007, S. 66 ff.).
Zielgruppenspezifische Anforderungen an die Farbgestaltung
sind aufgrund der letztlich breiten und im Rahmen
dieser Arbeit sehr allgemein definierten Zielgruppe nicht
eingeflossen.
Beispiele aus SketchCoLab
Die nachfolgenden Abbildungen zeigen beispielhaft die
soeben beschriebenen Kontraste im Rahmen der Farbgestaltung
des Prototyps. Den größten Bestandteil dabei
Gestaltungskonzept
SketchCoLab
•••
Bunt-Unbunt-Kontrast
Hell-Dunkel-Kontrast
Qualitätskontrast
111

112
•••
macht die Verwendung des Qualitäts-Kontrasts (Abbildung
74) aus, der primär innerhalb der Anwendungsoberfläche
eingesetzt wurde. Der Einsatz von Hell-Dunkel- und Bunt-
Unbunt-Kontrasten (Abbildung 75 und Abbildung 73) hilft
dabei die wichtigen Elemente hervorzuheben, sowie die
Lesbarkeit zu unterstützen.
3.3.3. Icons und Symbole
Der Zweck von Icons innerhalb eines Interfaces ist die Förderung
der Kommunikation und die Darstellung der Auswahlmöglichkeiten.
Vorteil von gut gestalteten Icons ist,
dass Nutzer in der Lage sind die dahinterliegende Funktion
schnell und auch ohne Sprachkenntnis oder Lesefähigkeit
zu erkennen. Darüber hinaus erlauben sie die abstrahierte
und visualisierte Darstellung des Informationsgehalts eines
Abbildung 74: Qualitätskontrast in SketchCoLab
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung
Objekts, Themas oder Funktion auf kompaktem Raum.
Demnach ist der Anspruch an die Gestaltung von Icons
hoch, da sie auf eine konkrete bzw. verständliche Bedeutung
und somit auf das Wesentliche reduziert sein müssen.
Die Visualisierung und Anordnung von Icons ist dabei als
ein Bestandteil innerhalb des Screendesigns anzusehen.
Dabei sollte zunächst geklärt werden, ob der Einsatz von
Icons innerhalb einer Anwendung überhaupt sinnvoll und
notwendig ist. Grundlegende Regeln bei der Gestaltung
von Icons sind neben der Darstellung einer eindeutigen
Aussage, auch die Erarbeitung eines gemeinsamen Stils
bei mehreren Icons und ggf. die Berücksichtigung barrierefreier
Gestaltung. In der Praxis gelingt das aufgrund der
Komplexität der darzustellenden Funktionen, Themen oder
Objekte jedoch kaum, weshalb meist die Unterstützung
durch Text (Untertitel) erfolgt. Das macht den Einsatz von
Icons im Sinne ihres eigentlichen Zwecks zwar überflüssig,
Abbildung 75: Hell-Dunkelkontrast in SketchCoLab
Eigene Darstellung

stellt jedoch ein visuelles Stilmittel bei der Gestaltung von
Interfaces dar. Da Icons darüber hinaus eine Vielzahl von
Aufgaben erfüllen sollten wird klar, dass die Ansprüche an
die Gestaltung von Icons insgesamt sehr hoch sind (STA-
PELKAMP, 2007, S. 158 ff.). Es folgt ein Überblick von
Richtlinien und Vorschlägen zur Gestaltung von Icons:
• Zielsetzung
Ermittlung der Absicht eines Produktes
Analyse der Zielgruppe mit ihren Vorkenntnissen
und Erfahrungen
Freiform-Stift Text-Werkzeug Radierer Strichstärke/
Farbe
Leinwand
leeren
Bewertungsstern
Speichern Arbeitsschritt
rückgängig
Abbildung 76: Icons SketchCoLab in der Grundversion
Eigene Darstellung
Arbeitsschritt
wiederholen
• Kontext
Analyse des Kontexts, in dem die Icons eingesetzt
werden
Beziehung des Anwenders zum Produkt ermitteln
• Funktional
Ermittlung der funktionalen Bedeutung der zu gestaltenden
Icons
• Konkret / Abstrakt
Klären, welche Form der Darstellung sich am besten
für das Produkt eignet
• Gruppierung
Gruppieren von thematisch und funktional zusammengehörenden
Icons zur Verbesserung der Übersicht
• Gemeinsamkeiten
Zusammengehörige Icons müssen zur Unterstützung
eines einheitlichen Gestaltungsstils über Gemeinsam-
Freiform-Stift Text-Werkzeug Radierer Strichstärke/
Farbe
Leinwand
leeren
Speichern Arbeitsschritt
rückgängig
Abbildung 77: Icons SketchCoLab in der gestalteten Version
Eigene Darstellung
Gestaltungskonzept
Arbeitsschritt
wiederholen
SketchCoLab
•••
113

114
•••
keiten verfügen
• Anzahl
Keine zu hohe Anzahl von Icons verwenden (Richtwert:
max. sieben Stück innerhalb einer Struktur)
• Kultur / Internationalisierung
Beachtung von kulturellen Besonderheiten, die evtl.
eine unterschiedliche Interpretation der Icons hervorrufen
kann
• Überprüfung
Usability-Tests zur Überprüfung des Verständnisses
der eingesetzten Icons
SketchCoLab
(STAPELKAMP 2007, S. 174 ff.)
Icons und Symbole innerhalb des Prototyps
Die in SketchCoLab eingesetzten Icons (siehe Abbildung
76 und Abbildung 77) wurden bewusst abstrakt gehalten,
da dies den grundlegenden Eigenschaften von Icons entspricht
und die Übertragung von Zusammenhängen durch
abstrakte Symbole eher gefördert wird. Detaillierte Icons
haben dagegen oft das Problem der schlechten Erkennbarkeit
bzw. dass sie vom eigentlichen Inhalt zu sehr ablenken
können (STAPELKAMP, 2007, S. 177 ff.). Bei der Gestaltung
der Icons wurde darüber hinaus im Hinblick auf die
Symbolik auf bereits etablierte Metaphern zurückgegriffen.
Als Beispiel sei das gängige Symbol einer Diskette für die
Speichern-Funktionalität genannt, das sich im digitalen
Kontext durchgesetzt hat.
Die Farbgestaltung der Icons basiert auf einem Qualitätskontrast
um die Symbole im Interface zu integrieren,
ohne den Nutzer unnötig durch deren Darstellung abzulenken.
Aktivierte Icons in der Werkzeugpalette werden mit
Konzeption und praktische Umsetzung
Hilfe des Hell-Dunkel-Kontrasts bzw. Bunt-Unbunt-Kontrasts
dargestellt um den Anwender über den aktuellen Interaktionszustand
zu informieren (siehe auch Abbildung 78).
Weitere relevante Symbole innerhalb von SketchCoLab
sind die Sterne zur Darstellung und Abgabe von Bewertungen.
Dabei wurde das Stern-Symbol als Metapher gewählt,
da es bei den meisten Nutzern bereits zur Darstellung z. B.
von Produktbewertungen (Amazon) bekannt ist. Bei der
Farbgebung wurde ebenfalls auf ein häufig verbreitetes
Farbschema zurückgegriffen, dass die Bewertungshöhe
und zugleich den Interaktionszustand visualisiert (siehe Abbildung
79).
Bewertungssterne im aktiven (Gelb) und inaktiven (Grau) Zustand
Abbildung 79: Symbolik zur Darstellung von Bewertungen
Eigene Darstellung
Werkzeug
inaktiv
Werkzeug aktiv Werkzeug
mit Optionen
inaktiv
Abbildung 78: Beispiele aktive und inaktive Werkzeugicons
Eigene Darstellung
Werkzeug mit
Optionen aktiv

3.3.4. Mockups
Die bisher aufgezeigten Aspekte aus dem Fein- und Gestaltungskonzept
fließen abschließend in die nachfolgenden
Mockups (Modell, Attrappe, Nachbildung) ein und vermitteln
einen ersten Eindruck über das „Look & Feel“ des interaktiven
Prototyps. Im Gegensatz zu den bereits vorgestellten
Wireframes besitzen Mockups generell einen höheren
Detailgrad, der sich in der Visualisierung der Farbgebung,
Typografie und Interaktionselemente widerspiegelt, aber
nicht zwangsläufig die endgültige Gestaltung darstellen
muss. Die Vorteile von Mockups sind in der einfachen Erstellung
und Modifikation zu sehen, sowie der Möglichkeit
bei potentiellen Nutzern ein verbessertes Verständnis für
das Produkt oder die Anwendung zu erreichen.
Die hier vorgestellten Mockups stellen das Gestaltungskonzept
zu einem bestimmten Zeitpunkt dar und sind damit
nicht hunderprozentig deckungsgleich mit der endgültigen
Version. Die gestalterischen Unterschiede sind jedoch nur
marginal und betreffen darüber hinaus auch nicht das
grundlegende Interaktions- und Designkonzept.
Gestaltungskonzept
SketchCoLab
•••
Mockups
Mockups bauen auf Wireframes
bzw. deren Struktur auf. Ein
Mockup zeigt das „Look & Feel“
einer Anwendung oder einer
Website und stellt somit ein
erstes vorläufiges Design dar. Im
Gegensatz zu den Wireframes
besitzen Mockups einen hohen
Detailgrad was z. B. Farben,
Typografie, etc. angeht.
115

116
•••
Mockup #1 - Splashscreen
Nach dem Aufruf der Web-Applikation wird zum Einstieg
in die Anwendung ein Informationsscreen geladen, der
kurz eingeblendet wird. Dieser Screen kann bei erhöhtem
Datenaufkommen auch als Informationsseite über den Ladestatus
fungieren. Im Prototyp ist diese Funktion allerdings
nicht notwendig und deshalb in dieser Form auch nicht integriert.
Abbildung 80: Mockup #1 - Splashscreen
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

Mockup #2 - Login
Anwender müssen sich zunächst mit gültigen Anmeldedaten
einloggen um SketchCoLab nutzen zu können. Da der Prototyp
als Web-Applikation über das Internet weitestgehend
frei zugänglich ist, ist diese Sicherheitsmaßnahme notwendig.
Eine weitere mögliche Funktion des Login-Bereichs ist
die Zuordnung des eingeloggten Nutzers zu bestimmten
definierten Projekten. Damit könnte die Anwendung den
Abbildung 81: Mockup #2 - Login-Fenster
Eigene Darstellung
Mitgliedern einer Projektgruppe lediglich die Daten zur
Verfügung stellen, für die sie eine Berechtigung besitzen.
Gestaltungskonzept
SketchCoLab
•••
117

118
•••
» 1: Werkzeuge zur Annotation
» 2: Werkzeuge für den Workflow
» 3: Projekt und Zeichnung wählen
» 4: Leinwand zum Annotieren
und Zeichnen
» 5: Ansicht der verfügbaren
Annotationen zu einer
Zeichnung
» 6: Aktivitätspanel mit Anzeige
der Gesamt- und
Einzelbewertungen, sowie
Chat-Werkzeug
Mockup #3 - Grundansicht der Web-Applikation
Nachdem der Login-Vorgang erfolgreich abgeschlossen
wurde, wird SketchCoLab in seiner Grundansicht geladen.
Dem Nutzer steht damit bereits ein Großteil der Funktionalität
direkt zur Verfügung. Dabei werden auf der linken
Seite die für das Annotieren und Zeichnen, sowie für den
Workflow relevanten Funktionen dargestellt, während auf
der rechten Seite die Anzeige der Aktivitäten erfolgt. Die
1 3
2
Abbildung 82: Mockup #3 - Oberfläche von SketchCoLab
Eigene Darstellung
SketchCoLab
4
5
Konzeption und praktische Umsetzung
Leinwand als zentraler Bestandteil der Anwendung erhält
konsequenterweise innerhalb von SketchCoLab im Verhältnis
zu den anderen Informations- und Interaktionselementen
den größten Raum. Über die oberhalb und unterhalb der
Leinwand ein- und ausklappbaren Bereiche („Zeichnung
wählen“ und „Ansicht“) werden weitere Funktionen bei Bedarf
und platzsparend zur Verfügung gestellt.
6

Mockup #4 - Aktivitätspanel: Gesamtübersicht
Auf der rechten Seite der Anwendung erfolgt die Darstellung
der Aktivitäten zu einer Zeichnung. Die drei verfügbaren
Bereiche sind dabei „Gesamtbewertung“, „Einzelbewertungen“
und das Chat-Werkzeug. Die jeweiligen
Funktionen werden über ein ein- und ausklappbares „Akkordeon-Menü“
gesteuert, das zur Unterstützung der Übersichtlichkeit
jeweils nur einen aktiven bzw. geöffneten Be-
Abbildung 83: Mockup #4 - Aktivitätspanel
Eigene Darstellung
reich erlaubt. Damit wird zusätzlich sichergestellt, dass für
die Anzeige der Informationen der größtmöglich zur Verfügung
stehende Platz genutzt werden kann, was gerade
bei der Verwendung von SketchCoLab mit mobilen Geräten
einen wichtigen Aspekt darstellt.
1
2
3
Gestaltungskonzept
SketchCoLab
•••
» 1: Anzeige zur
Gesamtbewertung der
gewählten Zeichnung
» 2: Alle zu einer gewählten
Zeichnung vorhandenen
Bewertungen inkl.
Bewertungskommentare
» 3: Chat-Werkzeug mit Anzeige
der Textnachrichten der
einzelnen Nutzer
119

120
•••
Mockup #5 - Aktivitätspanel: Gesamtbewertung
Zu jeder gewählten bzw. in die Leinwand geladenen Zeichnung
wird im Aktivitätspanel die durchschnittliche Gesamtbewertung,
sowie die entsprechende Anzahl aller bisher
abgegebenen Bewertungen der jeweiligen Zeichnung angezeigt.
Sofern der Nutzer die Zeichnung noch nicht bewertet
hat, zeigt SketchCoLab ebenfalls einen Button an,
der nach Aktivierung den Nutzer zum Bewertungsfenster
Abbildung 84: Mockup #5 - Aktivitätspanel Bereich Gesamtbewertung
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung
führt (siehe Mockup #12 und Mockup #13).

Mockup #6 - Aktivitätspanel: Einzelne Bewertungen
Alle bisher abgegebenen Bewertungen, sowie die dazugehörigen
Bewertungskommentare werden dem Nutzer ebenfalls
im Aktivitätspanel zur Verfügung gestellt. Überschreitet
die Anzahl der Bewertungen den verfügbaren Platz, so
kann der Anwender die Einträge durchscrollen. Die jeweils
zuletzt getätigte Bewertung wird dabei an erster Stelle
Abbildung 85: Mockup #6 - Aktivitätspanel Bereich Einzelbewertungen / Bewertungskommentare
Eigene Darstellung
dargestellt. Die Darstellung der einzelnen Bewertung unterstützt
die Awareness und dient als Kommunikations- und
Diskussionsgrundlage.
Gestaltungskonzept
SketchCoLab
•••
121

122
•••
Mockup #7 - Chat-Werkzeug
Das Chat-Werkzeug stellt das zentrale Kommunikationswerkzeug
innerhalb von SketchCoLab dar. Während durch
Annotationen, Textboxen und Bewertungskommentare
zwar ebenfalls zumindest in geringer Ausprägung Kommunikation
stattfindet bzw. stattfinden kann, bietet der Chat
eine sehr direkte Möglichkeit sich auszutauschen und dies
auf synchronem Weg. Im Prototyp ist die Chat-Funktion
Abbildung 86: Mockup #7 - Chat-Werkzeug
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung
sehr rudimentär gehalten und ermöglicht die generelle
Kommunikation, ohne dass diese entsprechend kanalisiert
wird. In einer Weiterentwicklung von SketchCoLab wäre
es demnach sinnvoll die Funktionalität weiter auszubauen.
Denkbar wären entsprechende Chat-Räume, die sich
auf ein Projekt, eine Teilnehmergruppe oder speziell auf
eine Zeichnung beziehen. Die Bedienung erfolgt durch die
Texteingabe im dafür vorgesehenen Eingabefeld.

Mockup #8 - Textwerkzeug
Als ein weiteres Werkzeug zur Annotation stellt SketchCoLab
die Möglichkeit zur Verfügung, Zeichnungen mit Texthinweisen
zu versehen. Der Nutzer kann nach dem Aktivieren des
Werkzeugs per Tastatur den gewünschten Text schreiben
und ihn anschließend auf der Zeichenfläche frei positionieren.
Somit ist der Bezug zu bestimmten Details innerhalb
der Zeichnung sichergestellt und bleibt für andere Nutzer
Abbildung 87: Mockup #8 - Textwerkzeug
Eigene Darstellung
beim Betrachten der jeweiligen Annotation nachvollziehbar.
Bereits erstellte, jedoch nicht mehr benötigte Textboxen
können nachträglich (durch Double-Tap oder Doppelklick)
wieder entfernt werden. Die zu einer Annotation zugehörigen
Textinformationen mit samt ihren Positionskoordinaten
(auf der Leinwand) werden in der Datenbank gespeichert
und stehen beim Laden der Annotationsversion wieder zur
Verfügung.
Gestaltungskonzept
SketchCoLab
•••
123

124
•••
Mockup #9 - Strichstärke und Strichfarbe
Um unterschiedliche Anforderungen während des Annotierens
zu berücksichtigen, hat der Nutzer die Möglichkeit
zwischen jeweils drei verschiedenen Strichstärken und
Strichfarben zu wählen und diese miteinander zu kombinieren.
So können beispielsweise wichtige Markierungen und
Informationen in der Farbe Rot dargestellt oder für filigrane
Annotationen die kleinste Strichstärke gewählt werden. Die
Abbildung 88: Mockup #9 - Werkzeugoptionen: Strichstärke und Strichfarbe
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung
von SketchCoLab zur Verfügung gestellten Optionen stellen
dabei nur eine sehr reduzierte Auswahl dar. Denkbar sind
weitere Werkzeugoptionen wie eine größere Farbauswahl
oder verschiedene Pinselstricharten.

Mockup #10 - Auswahl Projekt und Zeichnung
Die innerhalb von SketchCoLab zur Verfügung stehenden
Projekte bzw. die zu einem Projekt zugehörigen Zeichnungen
können über das obere „Slider-Menü“ aufgerufen werden.
Durch diese platzsparende Form der Interaktion kann
der Nutzer bei Bedarf auf diese Funktion zurückgreifen,
ohne dass diese permanent präsent ist und ggf. zur Unübersichtlichkeit
oder Ablenkung beiträgt. Nach der Wahl
Abbildung 89: Mockup #10 - Projektauswahl und Wahl der Zeichnung
Eigene Darstellung
eines für den Nutzer zur Verfügung stehenden Projekts werden
die darin enthaltenen Zeichnungen mit zusätzlichen
Informationen, wie der derzeitigen Durchschnittsbewertung
angezeigt und können ausgewählt werden. Sind eine größere
Anzahl von Zeichnungen zu einem Projekt vorhanden,
können diese mit der „Swipe-Geste“ (nach links oder rechts
auf dem Touchscreen wischen) durchgeblättert werden.
Gestaltungskonzept
SketchCoLab
•••
125

126
•••
Mockup #11 - Ansicht von Annotationen
Von Nutzern überarbeitete und gespeicherte Annotationsversionen
zu einer bestimmten Zeichnung können über das
untere „Slider-Menü“ aufgerufen und eingesehen werden.
Dabei erhält der Anwender Informationen über den Urheber
und das Erstellungsdatum der Annotation und hat darüber
hinaus die Möglichkeit, eine beliebige zur Verfügung
stehende Annotationsversion zu überarbeiten und als neue
Abbildung 90: Mockup #11 - Ansicht von Annotationsversionen
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung
Version abzuspeichern. Eine „Kopie“ der Originalzeichnung
kann zudem jederzeit vom Nutzer aufgerufen, bearbeitet
und als weitere Annotation gespeichert werden. Eine
zusätzliche Funktion ist das Vergrößern der Vorschaubilder
ohne die entsprechende Annotation auf die Leinwand laden
zu müssen.

Mockup #12 - Bewertung von Zeichnungen
Das Popup-Fenster zur Bewertung wird über den Bewertungsbutton
im Aktivitätspanel (siehe Mockup #5) aufgerufen.
Dabei erkennt SketchCoLab, ob ein Nutzer bereits eine
Zeichnung bewertet hat und bietet diese Funktion je nach
Status an. In einer zu Beginn der Gestaltungsphase entstandenen
Variante der Bewertungsfunktion erhält der Nutzer
ausschließlich die Möglichkeit, die gerade gewählte Zeich-
Abbildung 91: Mockup #12 - Bewertungs-Fenster (reduzierte Variante)
Eigene Darstellung
nung mit Hilfe von Sternen zu bewerten bzw. diese Bewertung
zu kommentieren. Per „Tap“ bzw. Klick kann die
Anzahl der Sterne und somit die Höhe der Bewertung gewählt
werden. Gekoppelt mit dem „Rating“ der Zeichnung
ist die Abgabe eines Bewertungskommentars. Durch das
Bestätigen der Aktion über den „Bewerten-Button“ fließt die
Bewertung in die Datenbank ein und wird für alle Nutzer
sichtbar.
Gestaltungskonzept
SketchCoLab
•••
127

128
•••
Mockup #13 - Bewertungsfenster (Erweitert)
Die erweiterte und in den Protoyp eingeflossene Version
des Bewertungsfensters stellt neben der Funktion der Bewertung
und des Kommentierens ebenfalls die Möglichkeit
zur Verfügung, weitere noch nicht vom Nutzer bewertete
Zeichnungen einzusehen und diese ebenfalls innerhalb des
Popup-Fensters direkt zu bewerten. Dadurch soll der Nutzer
während des Bewertungsprozesses motiviert werden,
Abbildung 92: Mockup #13 - Bewertungs-Fenster (erweiterte Variante)
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung
sich mit weiteren dem Projekt zugehörigen Zeichnungen
zu beschäftigen. Bewertete Bilder werden nach dem Speichern
aus der Anzeige innerhalb des Bewertungsfensters
entfernt, sodass dem Anwender eine ständig aktualisierte
Ansicht der noch nicht von ihm bewerteten Zeichnungen
zur Verfügung steht.

Mockup #14 - Kommentare einsehen
Um den Anwendern neben dem Chat-Werkzeug eine weitere
Form der Kommunikation an die Hand zu geben, war
wie bereits im Kapitel zum grundlegenden Prototyp-Konzept
beschrieben, die Möglichkeit Bewertungen zu kommentieren
vorgesehen. Dabei hätten Nutzer vorhandene
Kommentare zu einer Bewertung einsehen bzw. schreiben
können. Die Anzeige der Kommentare wäre dabei auf-
Abbildung 93: Mockup #14 - Kommentar-Fenster
Eigene Darstellung
grund der Übersichtlichkeit in ein eigenes Popup-Fenster
verlagert worden, in dem Nutzer ggf. alle vorhandenen
Kommentare durchscrollen können. Gründe, auf diese
Funktionalität zu verzichten, wurden bereits im Prototyp-
Konzept beschrieben.
Gestaltungskonzept
SketchCoLab
•••
129

130
•••
Mockup #15 - Kommentare abgeben
Kommentare zu verfassen ist innerhalb des Konzepts ebenfalls
in Form eines Popup-Fensters vorgesehen gewesen.
Die Nutzer hätten nach Eingabe des gewünschten Texts
diesen gespeichert und somit für alle Nutzer sichtbar gemacht.
Abbildung 94: Mockup #15 - Popup-Fenster zur Kommentarabgabe
Eigene Darstellung
SketchCoLab
Konzeption und praktische Umsetzung

3.4. Der Prototyp
Technische Rahmenbedingungen
Der in dieser Arbeit entstandene interaktive Prototyp ist als
funktionsfähige Version unter:
http://sketchcolab.thomas-soyter.de
abrufbar. Daneben sind alle relevanten Dateien der Anwendung
auf der beiliegenden CD vorhanden, die jedoch
ohne einen geeigneten installierten Webserver mit Datenbankanbindung
nicht direkt vom Datenträger lauffähig ist.
Der Prototyp wurde mit HTML5, JavaScript und CSS als
Formatierungssprache umgesetzt. Die Datenspeicherung
und der Datenzugriff der innerhalb der Anwendung von
den Nutzern erstellten dynamischen Daten erfolgt durch
den Einsatz von PHP und des Datenbanksystems MySQL.
Bei SketchCoLab handelt es sich um eine mobile Website,
die als Web-App konzipiert wurde. Die Gestaltung des
Interfaces orientiert sich an der Auflösung des Testgeräts
Technische Fakten
Eingesetzte Technologien Unterstützte Browser
• HTML5 (speziell Canvas-Objekt) • Apple Safari
• JavaScript / AJAX • Google Chrome
• PHP • Mozilla Firefox
• MySQL • Android Standardbrowser
Tabelle 11: Technische Daten zum entwickelten Prototyp
Eigene Darstellung
• Javascript Frameworks (jQuery und jQuery Mobile) • Android Dolphin Browser
mit einer Bildschirmauflösung von 1280 x 800 Pixel im
Querformat (Hochformat wird nicht unterstützt), passt sich
jedoch bezüglich der Breite dynamisch in einem gewissen
Rahmen anderen Bildschirmauflösungen an. Es wird
empfohlen vor allem auf mobilen Endgeräten den Prototyp
möglichst im Vollbildmodus des verwendeten Browsers
einzusetzen, um den maximalen zur Verfügung stehenden
Platz auszunutzen. Der Aspekt des „Responsive Designs“,
also der dynamischen Berücksichtigung der jeweiligen gerätespezifischen
Eigenschaften wie Bildschirmauflösung,
Betrachtungswinkel (Hoch- oder Querformat), etc. wurde
im Rahmen der Umsetzung nicht realisiert, wäre jedoch als
Weiterführung und Optimierung des Projekts denkbar.
Durch den Einsatz von HTML und JavaScript ist die
Nutzung von SketchCoLab als Web-Applikation mit mobiler
Geräteunterstützung plattformunabhängig und erfolgt
jeweils durch einen geeigneten Browser. Primäre Einsatzgeräte
sind Desktop-Rechner, Notebooks, Netbooks und
speziell für den mobilen Bereich Tablet Computer. Für die
Nutzung auf Smartphones ist der Prototyp nicht ausgelegt,
Der Prototyp
SketchCoLab
•••
131

132
•••
da die stark reduzierte Anzeigefläche vor allem die Zeichnen-Funktionen
zu sehr einschränken würde.
Auf ein umfangreiches „Cross-Browser-Testing“ (Optimierung
der Darstellung für alle relevanten Browser) wurde
verzichtet, ist aber im Hinblick auf „Responsive Design“
und Barrierefreiheit, ein Aspekt der bei einer Realisation
über einen Prototyp hinaus, berücksichtigt werden sollte.
Folgende Browser (in ihrer jeweils neuesten Version)
wurden getestet und können zur Darstellung empfohlen
werden:
Desktop (Windows)
• Google Chrome
• Apple Safari
• Mozilla Firefox
Tablet Computer (Android)
• Android Standardbrowser
• Dolphin
Eingesetzte Frameworks
Zur Erleichterung der Entwicklung wurde auf JavaScript-
Frameworks in Form von jQuery Mobile („touch-optimiertes“
Framework zur Abbildung von Interaktionen auf Tablet
Computern und Smarthphones) sowie jQuery als Basis-
Framework zurückgegriffen. Frameworks bieten einen Rahmen,
mit deren Hilfe eine Anwendung erstellt werden kann
und die dem Programmierer wichtige Funktionen standardmäßig
zur Verfügung stellt. Neben den eigentlichen Frameworks
wurden bei der Umsetzung des Prototyps ebenfalls
Erweiterungen (Plugins) eingesetzt, die das jeweilige
Framework um zusätzlich benötigte Funktionen ergänzen.
SketchCoLab
Konzeption und praktische Umsetzung
Weblinks:
http://jquerymobile.com/
http://jquery.com/
Die Entscheidung auf HTML5 und Javascript als Technologie
zu setzen hat zwei Gründe. Zunächst ist HTML5 eine
zukunftsträchtige und für Entwickler leicht zugängliche
Technik mit Potential, die in den nächsten Jahren in Kombination
mit JavaScript weiter an Bedeutung gewinnen wird.
Die derzeitigen Möglichkeiten von HTML5 auszuloten stellt
daher einen interessanten Aspekt dar. Dabei ist vor allem
das in HTML5 eingeführte „Canvas-Objekt“ zu nennen, mit
dem es möglich ist auf einer definierten Leinwand (englisch:
Canvas) zu zeichnen bzw. grafische Objekte darzustellen -
ein Hauptbestandteil von SketchCoLab. Weiterer Faktor für
die Wahl sind die bereits angesprochenen vorhandenen
Frameworks wie jQuery und jQuery Mobile, welche die
Entwicklung mobiler Applikation erleichtern und unterstützen.
AJAX
Als Besonderheit ist die Realisation des Prototyps in der
Form zu erwähnen, dass die komplette Web-Applikation
ohne sichtbares Neuladen der Inhalte (keine Seitenwechsel)
auskommt und somit dem Nutzer zusätzlich das Gefühl
vermittelt, eine Web-Anwendung und weniger eine Website
zu bedienen. Technische Basis ist dabei der Einsatz von
AJAX (Asynchronous JavaScript and XML) in Verbindung
mit PHP um einen asynchronen Datenaustausch zwischen
Web-Client und Server zu ermöglichen und den Inhalt einer
HTML-Seite zu verändern, während diese im Browser
dargestellt wird.

Überblick
Tabelle 11 und Tabelle 12 zeigen abschließend einen Überblick
über die technischen Spezifikationen, sowie die im
Prototyp abgebildeten Funktionen.
SketchCoLab Features
Annotation
Werkzeuge Workflow
• Freiform-Stift • Leinwand leeren
• Radierer • Rückgängig machen von Arbeitsschritten
• Textwerkzeug (Textboxen) • Wiederholen von Arbeitsschritten
• Wahl der Strichstärke (drei verschiedene Größen) • Speichern
• Wahl der Strichfarbe (Freiform-Stift, drei verschiedene Farben) • Möglichkeit, bestehende Annotationen zu überarbeiten
Bewertung
Werkzeuge Workflow
• Rating durch Sterne • Speichern
• Bewertungskommentare
• Freiform-Stift
• Textwerkzeug
Kollaboration, Kooperation und Kommunikation
• Chat-Werkzeug (synchron) • Ständig aktualisierte Ansicht der abgegebenen Bewertungen
• Bewertungskommentare • Informationen zur Awareness (wer hat wann was bewertet bzw. wer
hat wann welche Annotation erstellt)
• Ständig aktualisierte Ansicht der zur Verfügung stehenden
Annotationen
Tabelle 12: : Überblick der Funktionen in SketchCoLab
Eigene Darstellung
Hinweis: Wie bereits erwähnt, können Screenshots der
finalen Version auf der beiliegenden CD-ROM betrachtet
werden. Ebenfalls ist die Nutzung und Einsicht direkt online
(http://sketchcolab.thomas-soyter.de) möglich.
• Datenvorhaltung auf Webserver zur räumlich und zeitlich
unabhängigen Bereitstellung der Anwendung und Daten
Der Prototyp
SketchCoLab
•••
133

4 SCHLUSSBEMERKUNG
Ziel war es, im Rahmen dieser Abschlussarbeit einen interaktiven
Prototyp zu entwickeln, der den iterativen Gestaltungsprozess
bei der Überarbeitung und Bewertung von
grafischen Entwürfen unterstützt. Im Fokus der Entwicklung
und Konzeption stand die Realisation einer Anwendung,
die primär den Schwerpunkt auf mobile Geräte, speziell
auf die Geräteklasse der Tablet Computer legt. Dabei
wurden zunächst verschiedene Möglichkeiten der Zusammenarbeit
in Form von Kollaboration und Kooperation
untersucht sowie deren Unterschiede, Gemeinsamkeiten
und Vor- und Nachteile herausgearbeitet. Zusätzlich erfolgte
die Betrachtung von Anforderungen, Chancen und
Schwierigkeiten, die bei der Verwendung computergestützter
Anwendungen im Hinblick auf die Gruppenarbeit im
virtuellen Raum entstehen. Mit Hilfe eines Benchmarkings
verschiedener relevanter Applikationen und Ansätze wurden
für den Prototyp denkbare Funktionen erarbeitet, die
teilweise eingeflossen sind. Zusätzlich wurde die Geräteklasse
der Tablet Computer genauer betrachtet und deren
Möglichkeiten den Gestaltungsprozess zu fördern und zu
erleichtern, analysiert. Die Herausarbeitung der Unterschiede
des Zeichnens im analogen, sowie im digitalen Kontext
waren weitere wichtige Aspekte.
Abschließend betrachtet zeigt sich, dass Kollaboration
und Kooperation als Formen der Zusammenarbeit jeweils
Vor- und Nachteile bieten und die Grenzen oft fließend
sind. Dies bestätigt auch die häufig wenig differenzierte
Betrachtungsweise der Begriffe im Alltag. Bei der Entwicklung
von SketchCoLab wurden beide Möglichkeiten, gemeinsam
Lösungen zu erarbeiten aufgegriffen, um somit
eine möglichst flexible Nutzung der Anwendung zu bieten.
Die Frage, ob Tablet Computer ein hilfreiches Instrument
im Gestaltungsprozess sind, kann nach intensiver Beschäftigung
mit der Thematik positiv beantwortet werden. Gründe
dafür sind sowohl der Mobilitätsaspekt, als auch die immer
weiter fortschreitenden technischen Verbesserungen. Dazu
kommt, dass durch die direkte Form der Interaktion über
den Touchscreen das Nutzungserlebnis für den Anwender
noch ein Stück intuitiver wird. Die Übertragung bekannter
und etablierter analoger Arbeitstechniken in Form der stiftbasierten
Eingabe ist dabei ein weiterer wichtiger Vorteil,
der gerade im gestalterischen Bereich besonders wiegt. Es
ist anzunehmen, dass die Bedeutung der Tablet Computer
in den nächsten Jahren weiter zunehmen wird und diese
Geräteform eine Vielzahl neuer bzw. bestehender Anwendungsgebiete
erschließt.
Im Hinblick auf die technischen Herausforderungen hat
sich während der Entwicklung gezeigt, dass HTML5 in Verbindung
mit Javascript eine adäquate Lösung zur Realisation
einer Web-Applikation mit den erarbeiteten Anforderungen
darstellt. Insbesondere das in HTML5 eingeführte
Canvas-Objekt ist dabei hervorzuheben, mit dem Entwickler
und Anwender eine interessante Erweiterung des Webstandards
an die Hand bekommen, die eine Vielzahl neuer
Anwendungsmöglichkeiten bietet. Gerade im Bereich der
Spieleprogrammierung, aber auch bezüglich Gestaltungstools
kann daher noch einiges erwartet werden, wie bereits
einige Beispiele im Internet demonstrieren.
Schlussbemerkung
SketchCoLab
•••
135

5 LITERATURVERZEICHNIS
AASL. (1996). From Cooperation to Collaboration. American Association of School Librarians (AASL). Retrieved January
10, 2012, from http://www.ala.org/aasl/sites/ala.org.aasl/files/content/conferencesandevents/confarchive/CoopTo-
Collab.pdf
ARNDT, H. (2006). Integrierte Informationsarchitektur: Die Erfolgreiche Konzeption Professioneller Websites. Berlin [u.a.]:
Springer.
BITKOM. (2011). Tablet Computer erobern den Massenmarkt. BITKOM. Retrieved January 12, 2012, from http://www.
bitkom.org/files/documents/BITKOM_Presseinfo_Markt_fuer_Tablets_und_PCs_14_12_2011.pdf
BLICKENSTORFER, C. (2005). A Brief History of Tablet PCs. WebProNews - Breaking News in Tech, Search, Social, & Business.
Retrieved January 22, 2012, from http://www.webpronews.com/a-brief-history-of-tablet-pcs-2005-12
BÖHRINGER, J., BÜHLER, P., & SCHLAICH, P. (2005). Kompendium der Mediengestaltung für Digital- und Printmedien (3.,
vollst. überarb. u. erw. Aufl.). Berlin [u.a.]: Springer.
BORGHOFF, U. M., & SCHLICHTER, J. H. (2000). Computer-Supported Cooperative Work. Berlin [u.a.]: Springer.
BRAMBERG, N. (Ed.). (2011). Tablet-PCs: Anhaltender Boom vorausgesagt. Beau Bassin: FastBook Publishing.
BUXTON, B. (2011). Multi-Touch Systems That I Have Known and Loved. Bill Buxton Home Page. Retrieved January 26,
2012, from http://billbuxton.com/multitouchOverview.html
BUXTON, W. (2007). Sketching User Experiences - Getting the Design Right and the Right Design. Amsterdam [u.a.]: Elsevier
[u.a.].
CLIFTON, P., MAZALEK, A., SANFORD, J., RÉBOLA, C., LEE, S., & POWELL, N. (2011). SketchTop: Design Collaboration
on a Multi-Touch Tabletop. In Proceedings of the Fifth International Conference on Tangible, Embedded, and Embodied Interaction,
TEI ’11 (pp. 333–336). New York: ACM Press.
Literaturverzeichnis
SketchCoLab
•••
137

138
•••
CRAFT, B., & CAIRNS, P. (2009). Sketching sketching: Outlines of a Collaborative Design Method. In Proceedings of the
23rd British HCI Group Annual Conference on People and Computers: Celebrating People and Technology, BCS-HCI ’09
(pp. 65–72). Swinton: British Computer Society.
CREALYTICS. (2011). Statistik: Verkaufte Tablets weltweit (Q2 2010 - Q3 2011). Erfolgsbasiertes Suchmaschinenmarketing
(SEM) - crealytics GmbH. Retrieved January 26, 2012, from http://www.crealytics.de/blog/2011/11/22/statistikverkaufte-tablets-weltweit-2010-201-ameyer/
DORAU, R. (2011). Emotionales Interaktionsdesign. Berlin [u.a.]: Springer.
DÖRNER, S. (2011). Geschichte des Tablets: Wie Xerox das iPad erfand - Handelsblatt. Handelsblatt.com - Nachrichten
aus Wirtschaft, Finanzen, Politik, Unternehmen und Märkten. Retrieved January 26, 2012, from http://www.handelsblatt.
com/technologie/it-tk/mobile-welt/geschichte-des-tablets-wie-xerox-das-ipad-erfand/3849944.html?slp=false&p=1&a=fals
e#image
DOURISH, P., & BELLOTTI, V. (1992). Awareness and Coordination in Shared Workspaces. In Proceedings of the 1992
ACM Conference on Computer-Supported Cooperative Work, CSCW ’92 (pp. 107–114). New York: ACM Press.
DUDEN. (1990). Duden 05. Das Fremdwörterbuch (5., neu bearb. und erw. Aufl.). Mannheim [u.a.]: Dudenverlag.
DUDEN. (2000). Duden 01. Die deutsche Rechtschreibung (22., völlig neu bearb. u. erw. Aufl.). Mannheim: Bibliographisches
Institut & F.A. Brockhaus AG.
DUDEN. (2012). Duden | ko- | Bedeutung, Rechtschreibung, Herkunft. Duden online. Retrieved January 17, 2012, from
http://www.duden.de/rechtschreibung/ko_
ELLIS, C. A., GIBBS, S. J., & REIN, G. (1991). Groupware: Some Issues and Experiences. Communications of the ACM,
34(1), 39–58.
FROHNER, H. (2010). Social Tagging: Grundlagen, Anwendungen, Auswirkungen auf Wissensorganisation und soziale
Strukturen der User (1. Aufl.). Boizenburg: Verlag Werner Hülsbusch.
SketchCoLab
Literaturverzeichnis

GAVER, W., MORAN, T., MACLEAN, A., LÖVSTRAND, L., DOURISH, P., CARTER, K., & BUXTON, W. (1992). Realizing
a Video Environment: EuroPARC’s RAVE System. In Proceedings of the SIGCHI Conference on Human Factors in Computing
Systems, CHI ’92 (pp. 27–35). New York: ACM Press.
GEYER, F., JETTER, H.-C., PFEIL, U., & REITERER, H. (2010). Collaborative Sketching with Distributed Displays and Multimodal
Interfaces. In ACM International Conference on Interactive Tabletops and Surfaces, ITS ’10 (pp. 259–260). New York:
ACM Press.
GREENBERG, S. (1991). Computer-Supported Cooperative Work and Groupware. San Diego: Academic Press Inc.
GREENBERG, S., GUTWIN, C., & COCKBURN, A. (1996). Awareness Through Fisheye Views in Relaxed-WYSIWIS Groupware.
In Proceedings of the Conference on Graphics Interface ’96 (pp. 28–38). Toronto: Canadian Information Processing
Society.
GROSS, T., & KOCH, M. (2007). Computer-Supported Cooperative Work. München [u.a.]: Oldenbourg.
GRUDIN, J. (1994). CSCW: History and Focus. Computer, 27(5), 19-26.
GUTWIN, C., & GREENBERG, S. (1995). Support for Group Awareness in Real Time Desktop Conferences. In Proceedings
of the Second New Zealand Computer Science Research Students’ Conference, University of Waikato, Hamilton, New Zealand.
GUTWIN, C., & GREENBERG, S. (1996). Workspace Awareness for Groupware. Conference Companion on Human Factors
in Computing Systems, CHI ’96 (pp. 208–209). New York: ACM Press.
GUTWIN, C., STARK, G., & GREENBERG, S. (1995). Support for Workspace Awareness in Educational Groupware. The
First International Conference on Computer Support for Collaborative Learning, CSCL ’95 (pp. 147–156). Hillsdale: L. Erlbaum
Associates Inc.
HASENKAMP, U. (1994). CSCW - Computer Supported Cooperative Work - Informationssysteme für dezentralisierte Unternehmensstrukturen
(1. Aufl.). Bonn [u.a.]: Addison-Wesley.
Literaturverzeichnis
SketchCoLab
•••
139

140
•••
HEBECKER, R., & EBBERT, C. (2010). Creation and Validation of Symbols with Purposeful Games and Online Survey. In
Proceedings of the 1st DESIRE Network Conference on Creativity and Innovation in Design, DESIRE ’10 (pp. 112–120).
Lancaster, UK.
HOOBER, S., & BERKMAN, E. (2011). Designing Mobile Interfaces (1. Aufl.). Sebastopol: O’Reilly Media.
HORNSTEIN, M., FISCHLER, A., PERTEK, M., & KOLLER, M. (2008). E-Collaboration - Mehrwerte durch moderne Kommunikationsmittel
schaffen. Retrieved January 29, 2012, from http://www.namics.com/fileadmin/user_upload/pdf/Wissen/2008/Fachartikel/E-Collaboration.pdf
IMUK Institut für Medien und Konsumentenforschung. (2012). Aktuelle Ergebnisse aus der Typologie der Wünsche 2012.
Retrieved from January 26, 2012, http://www.imuk.de/branchenanalysen/ikt.html
JARRETT, R., & SU, P. (2009). Building Tablet PC Applications. Sebastopol: O’Reilly Media.
JOHANSEN, R. (1988). Groupware - Computer Support for Business Teams (2. Aufl.). New York [u.a.]: The Free Press [u.a.].
JOHANSEN, R. (1991). Teams for Tomorrow. Proceedings IEEE Hawai Intl. Conf. on System Sciences (pp. 520-534). Los
Alamitos: IEEE Computer Society Press.
KEPPLER, S. (2010). Eine kurze Geschichte des Tablet PC. 3sat.online. Retrieved January 26, 2012, from http://www.3sat.
de/page/?source=/neues/sendungen/magazin/149559/index.html
KVAN, T. (2000). Collaborative Design: What is it? Automation in Construction, 9(4), 409-415.
LANDAY, J. A., & MYERS, B. A. (2001). Sketching Interfaces: Toward More Human Interface Design. Computer, 34(3),
56–64.
LANGENSCHEIDT-LONGMAN. (2001). Longman Dictionary of Contemporary English (3. Ausgabe 1995, erweitert 2001.).
München: Longman Group Ltd.
MARQUARDT, M., & VOIGT, C. (2009). Wörterbuch Latein: Für Philosophie und Theologie (1. Aufl.). Darmstadt: Wissen-
SketchCoLab
Literaturverzeichnis

schaftliche Buchgesellschaft.
MCLEAN, P. (2011). The Inside Track on Apple’s Tablet: A History of Tablet Computing. AppleInsider | Apple news and rumors
since 1997. Retrieved January 26, 2012, from http://www.appleinsider.com/articles/10/01/15/the_inside_track_
on_apples_tablet_a_history_of_tablet_computing.html&page=1
MÜLLER-PROVE, M. (2008). Modell und Anwendungsperspektive des Social Tagging. In B. Gaiser, T. Hampel, & S. Panke
(Eds.), Good Tags - Bad Tags: Social Tagging in der Wissensorganisation (pp. 15-22). Münster: Waxmann Verlag.
O.V. (2010). Gartner Says Worldwide Media Tablet Sales on Pace to Reach 19.5 Million Units in 2010. Technology Research
| Gartner Inc. Retrieved January 26, 2012, from http://www.gartner.com/it/page.jsp?id=1452614
PLIMMER, B., & APPERLEY, M. (2002). Computer-Aided Sketching to Capture Preliminary Design. In Proceedings of the Third
Australasian Conference on User Interfaces - Volume 7, AUIC ’02 (pp. 9–12). Darlinghurst: Australian Computer Society Inc.
PLIMMER, B., CHANG, S. H.-H., DOSHI, M., LAYCOCK, L., & SENEVIRATNE, N. (2010). iAnnotate: Exploring Multi-User
Ink Annotation in Web Browsers. In Proceedings of the Eleventh Australasian Conference on User Interface - Volume 106,
AUIC ’10 (pp. 52–60). Darlinghurst: Australian Computer Society, Inc.
PLIMMER, B., GRUNDY, J., HOSKING, J., & PRIEST, R. (2006). Inking in the IDE: Experiences with Pen-based Design and
Annotation. In Proceedings of the Visual Languages and Human-Centric Computing (pp. 111–115). Washington: IEEE Computer
Society.
PONS. (2012). Tablet: Englisch » Deutsch: PONS.eu. Wörterbuch, Deutsche Rechtschreibung und Textübersetzung von
PONS. Retrieved January 26, 2012, from http://de.pons.eu/dict/search/results/?q=tablet&l=deen&ie=%E2%98%A0
RIEDEWALD, S. (2003). Annotieren von grafischen Darstellungen auf dem Bildschirm (Dissertation). Freiburg: Albert-Ludwigs-Universität.
ROSCHELLE, J., & TEASLEY, S. (1995). The Construction of Shared Knowledge in Collaborative Problem Solving. In C. E.
O’Malley (Ed.), Computer Supported Collaborative Learning (pp. 69-97). Heidelberg: Springer.
ROSSON, M. B., & CARROLL, J. M. (2002). Usability Engineering: Scenario-Based Development of Human-Computer Inter-
Literaturverzeichnis
SketchCoLab
•••
141

142
•••
action. London: Academic Press Inc.
RUSSELL, B., TORRALBA, A., MURPHY, K., & FREEMAN, W. (2008). LabelMe: A Database and Web-Based Tool for Image
Annotation. International Journal of Computer Vision, 77(1), 157-173.
RUTENBECK, J., & RUTENBECK, J. B. (2006). Tech Terms: What Every Telecommunications and Digital Media Person
Should Know. Burlington: Focal Press.
SAFFER, D. (2009). Designing gestural interfaces (1. Aufl.). Beijing [u.a.]: O’Reilly.
SCHMIDT, F. (2010). Studie: Tablet-PCs verdrängen Netbooks. PCGH: Computer, IT-Technik und Spiele - PC Games Hardware
Online. Retrieved January 26, 2012, from http://www.pcgameshardware.de/aid,754988/Studie-Tablet-PCs-verdraengen-Netbooks/Notebook-Netbook/News/
SCHRAGE, M. (1990). Shared minds. New York: Random House.
SCHULZE, C. (2010). Tablet PC vs. Tablet Computer wo ist der Unterschied? Mehr als nur ein iPad Blog - News, Tests und
Apps im Tablet Guide. Retrieved January 25, 2012, from http://www.tablet-guide.de/tablet/tablet-pc-oder-tablet-computer
SMITH, G. (2007). Tagging: People-Powered Metadata for the Social Web. Amsterdam: Addison-Wesley Longman.
STAPELKAMP, T. (2007). Screen- und Interfacedesign. Berlin [u.a.]: Springer.
STAPELKAMP, T. (2010). Interaction- und Interfacedesign. Berlin [u.a.]: Springer.
STOLLER-SCHAI, D. (2009). E-Collaboration: Die Gestaltung internetgestützter kollaborativer Handlungsfelder. Gestaltungsgrundlagen
und praktische Beispiele für eigene Projekte. Südwestdeutscher Verlag für Hochschulschriften.
TEUFEL, S., SAUTER, C., MÜHLHERR, T., & BAUKNECHT, K. (1995). Computerunterstützung für die Gruppenarbeit. Bonn
[u.a.]: Addison-Wesley.
THISSEN, F. (2003). Kompendium Screen-Design - Effektiv informieren und kommunizieren mit Multimedia (3., überarb. und
SketchCoLab
Literaturverzeichnis

erw. Aufl.). Berlin [u.a.]: Springer.
TOMORROW FOCUS MEDIA (Ed.). (2011). Mobile Effects Mai 2011. Retrieved January 25, 2012, from http://www.
tomorrow-focus-media.de/uploads/tx_mjstudien/Mobile_Effects_29042011_01.pdf
TSCHANZ, A., SCHEIDEGGER, N., RÜEGSEGGER, P., & SIEBER, P. (2003). E-Collaboration: Internet-ABC für KMU. Retrieved
January 25, 2012, from http://www.kmu.admin.ch/publikationen/00613/
TVERSKY, B. (1999). What does Drawing Reveal About Thinking? In J. S. Gero & B. Tversky (Eds.), Visual and Spatial Reasoning
in Design (pp. 93-101). Presented at the Key Centre of Design Computing and Cognition, Sydney.
VIOLINO, B. (2007). Synchronous vs. Asynchronous Collaboration. AIIM - Your Information Management and Collaboration
Resource. Retrieved January 28, 2012, from http://www.aiim.org/Resources/Archive/Magazine/2007-Jan-Feb/32715
VON AHN, L., & DABBISH, L. (2004). Labeling images with a computer game. In Proceedings of the SIGCHI conference
on Human factors in computing systems, CHI ’04 (pp. 319–326). New York, NY, USA: ACM.
WEBER, W. (2007). Kompendium Informationsdesign (1. Aufl.). Berlin [u.a.]: Springer.
WEIBEL, N., SIGNER, B., NORRIE, M. C., HOFSTETTER, H., JETTER, H.-C., & REITERER, H. (2011). PaperSketch: A Paper-
Digital Collaborative Remote Sketching Tool. In Proceedings of the 16th international Conference on intelligent User Interfaces,
IUI ’11 (pp. 155–164). New York: ACM Press.
WISSENMEDIA. (2012). Kon ... | wissen.de. Allgemeinbildung, Lexikon, Wörterbücher & amp; Reiseführer - wissen.de. Retrieved
January 17, 2012, from http://www.wissen.de/wde/generator/wissen/ressorts/bildung/index,page=1167848.
html
Literaturverzeichnis
SketchCoLab
•••
143

6 ANHANG
Die im Anhang befindlichen Abbildungen vermitteln einen groben Überblick über den Projektverlauf bzw. stellen wichtige
Meilensteine während der Konzeptions- und Gestaltungsphase dar. Neben grundlegenden Gedanken zur Eingrenzung und
Konkretisierung des Themas, sind dort ebenfalls den Gestaltungsprozess betreffende Scribbles zur Icon- und Interfacegestaltung
zu finden.
Anhang
SketchCoLab
•••
145

146
•••
KOLLABORATIVES ZEICHNEN
BRAINSTORMING MÖGLICHE ANSÄTZE UND PROBLEMSTELLUNGEN
SketchCoLab
Kollaboratives Zeichnen
zentral oder dezentral
Anhang
(Kollaboratives) Bewerten
von Zeichnungen
Übearbeiten der
entsprechenden Zeichnungen
Bachelorarbeit - Thomas Soyter IDB 7
Testen der erarbeiteten
Lösung
1 2 3
Wie bringt man Evaluation und Überarbeitung
zusammen? Ist das ein iterativer Prozess?
Welche Art der Evaluation? Wird die Zeichnung
an sich bewertet (wenn man Begriff weiss) oder
wird Übereinstimmung der Bildaussage gesucht?
1
2
Evaluation von bereits
vorhandenen Skizzen &
Zeichnungen
+
(kollaborative)
Überarbeitung
bestehender Skizzen &
Zeichnungen
Fragen und Ziele
Ist die Evaluation auf Arbeitsgruppen beschränkt
oder wird sie allgemein zugänglich behandelt
oder beides?
Spielt bei der Evaluation der Kontext eine Rolle? Z.
B. wenn Arbeitsgruppe Symbole zu einem Thema
gezeichnet hat und diese dann bewertet?
T
In wieweit darf eine Beeinflussung stattfinden? Bei
Evaluation an sich wohl eher nicht, aber bei der
Überarbeitung evtl. schon?
Welche Art von Zeichnungen? Sind alle Arten
händischer Zeichnungen möglich oder sollte man
sich auf eine Art, z.B. Icons beschränken?

KOLLABORATIVES ZEICHNEN
BRAINSTORMING MÖGLICHE ANSÄTZE UND PROBLEMSTELLUNGEN
Mögliche Themen bzw. Themenkombinationen
1
1
1
1
Evaluation von bereits
vorhandenen Skizzen
& Zeichnungen
Evaluation von bereits
vorhandenen Skizzen
& Zeichnungen
Kollaboratives Zeichnen
mittels TabletPCs
Kollaboratives Zeichnen
mittels TabletPCs
2
+
2
+
2
+
(Kollaborative) Überarbeitung
bestehender
Skizzen & Zeichnungen
Evaluation von bereits
vorhandenen Skizzen
& Zeichnungen
Evaluation von bereits
vorhandenen Skizzen
& Zeichnungen
Welche Kombination macht am meisten Sinn bzw.
ist auch vom Workload zu schaffen?
3
+
(Kollaborative) Überarbeitung
bestehender
Skizzen & Zeichnungen
Fragen und Ziele
Ist es besser sich auf einen Bereich in der Tiefe zu
konzentrieren, statt mehrere Themen weniger tief
zu betrachten?
Bachelorarbeit - Thomas Soyter IDB 7
Kann bei einer Kombination der Bereiche evtl.
eines tiefer als das oder die anderen betrachten?
Anhang
SketchCoLab
•••
147

148
•••
KOLLABORATIVES ZEICHNEN
SketchCoLab
BRAINSTORMING MÖGLICHE ANSÄTZE UND PROBLEMSTELLUNGEN
Hybridlösungen wie
PhoneGap oder Appcelerator
Java / C, C++
Javascript / HTML5 /
CSS3 / PHP
HTML5 / CSS3 /
JavaScript / PHP
native App
Frameworks wie jQuery Mobile
Welche Form der Umsetzung macht am meisten
Sinn bzw. bietet die gewünschte Funktionalität?
Ist eine HTML5 / CSS3 - Lösung besser da Lernkurve
weniger steil als AS3 oder AIR-Code?
Anhang
HTML / CSS /
JavaScript / PHP
plattformunabhängige Webapp
Möglichkeiten
der Umsetzung
mobile Website
AIR
Flex / Flashbuilder
Flash (AS3)
Technische Aspekte und
Fragen im Allgemeinen
und Speziellen
kapazitiver
Bildschirm
Fragen und Ziele
Ist ein sinnvolles Zeichnen auf TabletPCs überhaupt
möglich? Oder nur das Scribbeln - reicht das?
Sind die technische Einschränkungen eines kapazitiven
Bildschirms ein Problem bzw. umgehbar oder
soweit nicht entscheidend?
Datenaustausch und
Datentransfer
Handballen bei der Stifteingabe
evtl. problematisch
Stifteingabe in Bezug auf
Zeichnen eher grob
keine Druckempfindlichkeit
Bachelorarbeit - Thomas Soyter IDB 7
über WLAN und Internet
Datenbank auf Server im Internet
zur dezentralen Speicherung
Bluetooth
Datenbank auf zentralem Rechner
innerhalb eines Raumes
Welche Form des Datenaustausches ist sinnvoll
bzw. am praktikabelsten?
Ist der Einsatz eines Stiftes beim Zeichnen überhaupt
sinnvoll (bei kapazitiven Screens)?

KOLLABORATIVES ZEICHNEN
2
BRAINSTORMING MÖGLICHE ANSÄTZE UND PROBLEMSTELLUNGEN
(kollaborative)
Überarbeitung
bestehender Skizzen &
Zeichnungen
+
gestalterische
Aspekte
technische
Aspekte
konzeptionelle
Aspekte
- Fokus auf TabletPC wg. des Zeichnens sinnvoll
- Überarbeitungsaspekt intereressant bzw. speziell
- Kollaborationsaspekt wieder mehr im Vordergrund
Interfacedesign
Icondesign
Interaktionsdesign
Website, Webapp oder App?
Nativ oder
plattformunabhängig (App)?
technische Umsetzung:
Flash, HTML5 / CSS3, etc.?
Ansätze für Überarbeitung von
grafischem Material?
Interaktionskonzept:
Multitouch, Mausbasiert, etc.?
Evaluation / Testen
der fertigen Anwendung?
- Fokussierung nur auf die Überarbeitung etwas einengend
- thematisch für sich allein nicht so spannend
- echte Kollaboration mittels TabletPCs überhaupt möglich?
Bachelorarbeit - Thomas Soyter IDB 7
Anhang
Fragen und Ziele
Welche Möglichkeiten der Überarbeitung sind
sinnvoll bzw. förderlich?
Wie kann die Überarbeitung kollaborativ erfolgen?
Muss sie dass oder sind mehrere Wege
möglich?
Sollte ein Testing der entwickelten Lösung mit
einbezogen werden?
Wie kann beim Interaktionskonzept das Device
TabletPC möglichst optimal berücksichtigt werden?
Welche technischen Aspekten gilt es zu beachten
bzw. sind sinnvoll?
Gibt die reine Überarbeitung von Skizzen & Zeichnungen
genügend her oder ist eine Verbindung mit
dem Evaluationsaspekt besser?
SketchCoLab
•••
149

150
•••
SKETCHCOLAB
GRUNDLEGENDES ANWENDUNGSKONZEPT V. 1
SketchCoLab
Datenbasis in Form von bereits vorhandenen Zeichnungen (z.B. Scribbles von Icons, Wireframes von Prototypen, etc.)
- Allgemein zugänglicher Bestand an Bildern
- Allgemeine Nutzer und Gruppen mit jeweiligen Nutzern
- Sets um Projekte bzw. Zeichnungen für bestimmte Gruppen zu organisieren
- Login für Nutzer die in Gruppen organisiert sind
Zeichnen
- einfache Zeichnenwerkzeuge
- Speichern der Ergebnisse (Originalbilder, überarbeitete und bewertete Bilder)
- Laden der Ergebnisse
Technologien
HTML5 (Canvas)
jQuery Mobile für Interaktionen
CSS für Design
Websockets (oder Alternative) für Server-Client-Kommunikation (Multiuser)
PHP / MySQL / XML für Datensicherung und Benutzerfeedback
Anhang
Überarbeiten
- Annotationen / Überarbeitung
- durch einfache Zeichnenwerkzeuge
- evtl. Timeline / Verlauf um Prozess nachzuverfolgen
- mehrere Ebenen (weniger destruktiv)
Kollaboration / Kooperation
- Mehrere Nutzer
- überarbeiten / bewerten
- eine oder mehrere Zeichnungen
- synchron oder asynchron
- um gleiche / unterschiedliche Ziele zu verfolgen
- Chat als synchrones Kommunikationswerkzeug
- evtl. Audio / Video
- einzelne und / oder gemeinsame Arbeitsfläche
Datenhandling der Ergebnisse
Technische Basis
iterativer Prozess
- Touchinteraktion (Single und Multitouch)
- evtl. Gesten
- Texteingabe per Tastatur (hardwareseitig, Touchtastatur?)
- Stiftbasiert
Bachelorarbeit - Thomas Soyter IDB 7
- Taggen (allgemein und bestimmte Bereiche)
- Annotieren als Bewertungsform
- evtl. spielbasierte Bewertungsansätze
- Rating?
Interaktionen
Bewerten
Allgemein
- wie läuft die Kooperation und Kollaboration ab, damit
es möglichst optimal läuft?
- synchron oder asynchron bzw. gemischt?
- sind gemeinsame oder auch unterschiedliche Ziele und
Aufgaben zu erreichen (Kollaboration und Kooperation)
bzw. kann es auch gemischt sein?
- wann ist gegenseitige Beeinflussung sinnvoll / gewollt?

KOLLABORATIVES ZEICHNEN
FRAGEN
Konzept allgemein
Wie bringt man Evaluation und Überarbeitung
zusammen? Ist das ein iterativer Prozess?
Welche Art der Evaluation? Wird die Zeichnung
an sich bewertet (wenn man Begriff weiss) oder
wird Übereinstimmung der Bildaussage gesucht?
Ist die Evaluation auf Arbeitsgruppen beschränkt
oder wird sie allgemein zugänglich behandelt
oder beides? (viele TN = viele Daten)
Spielt bei der Evaluation der Kontext eine Rolle? Z.
B. wenn Arbeitsgruppe Symbole zu einem Thema
gezeichnet hat und diese dann bewertet?
In wieweit darf eine Beeinflussung stattfinden? Bei
Evaluation an sich wohl eher nicht, aber bei der
Überarbeitung evtl. schon?
Bachelorarbeit - Thomas Soyter IDB 7
KOLLABORATIVES ZEICHNEN
FRAGEN
Konzept allgemein
Welche Art von Zeichnungen? Sind alle Arten
händischer Zeichnungen möglich oder sollte man
sich auf eine Art, z.B. Icons beschränken?
Welche Ansätze der Evaluation sinnvoll?
(Spielerische sind verbreitet) - Ist eine Kombination
mehrerer versch. Ansätze sinnvoll / möglich?
Kombination von Zeichnen, Überarbeiten und
Evaluation in einer Anwendung machbar?
(kompletter Workflow) oder besser nur Teilbereiche?
Muss bzw. sollte die Evaluation kollaborativ
stattfinden (wahrscheinlich ja)? Wie sieht es bei
der Überarbeitung aus?
Evaluation des Prototypen - Teil der BA oder
ausgelagert oder überhaupt?
Anhang
Bachelorarbeit - Thomas Soyter IDB 7
SketchCoLab
•••
151

152
•••
Veränderungen
Präsenz
Aktivitäten
mit Kommentaren
mit Tags
SketchCoLab
Multitouch
Stifteingabe
Texteingabe
HTML5
XML
JavaScript ( jQuery
Mobile)
CSS
PHP / MySQL
WebSockets
Chat
Kommentare
Videokonferenz
Audiokonferenz
User-Awareness
Workspace -
Awareness
Doppelt verlinkte
Diskussion
Vergleichen
synchrone
Bearbeitung
asynchrone Bearbeitung
Export als Bild
Server
Email
Funktionskonzept
Inform.architektur
GUI
Interaktion
Technologien
Kommunikation
Timeline / Historie
Awareness
gemeinsame
To-Do-Listen
Versions -
Management
gemeinsamer
Arbeitsbereich
individueller
Arbeitsbereich
Sharing
Interaktionsdesign
Anhang
Interfacedesign
Technische Aspekte
Kollaboration und
Kooperation
Umsetzung
SketchCoLab
Überarbeiten von
Zeichnungen
Workflow
Bewerten von
Zeichnungen
Annotation
Speichern
Zoomen
Rückgängig und
Wiederherstellen
geschlossene
Bereiche
Verschieben
Ebenen
Tagging
Annotation
Kommentare
Rating
Werkzeuge
Bereiche
Arbeitsfläche
Einzelne Elemente
Bereiche
spielbasiertes
Tagging
normales Tagging
emotionale Symbole
Text
Bereiche
Symbole
Bereich
Dateien
Marker
Radiergummi
Pfeile
Textbox
Freiform-Stift
neue Zeichnung
Gesamte Zeichnung
Details der Zeichnung
Gesamte Zeichnung
Details der Zeichnung
Gesamte Zeichnung
Details der Zeichnung
Gesten
Emotionen
Sterne
Gesamte Zeichnung
Details der Zeichnung
Bilder
Sprache
Videos
Strichstärke
Farben
gegenseitige
Verlinkung
gegenseitige
Verlinkung

Veränderungen
Präsenz
Aktivitäten
mit Kommentaren
mit Tags
HTML5
XML
JavaScript ( jQuery
Mobile)
CSS
PHP / MySQL
WebSockets
Chat
Kommentare
Videokonferenz
Audiokonferenz
User-Awareness
Workspace -
Awareness
Doppelt verlinkte
Diskussion
Vergleichen
synchrone
Bearbeitung
asynchrone Bearbeitung
Export als Bild
Server
Email
Funktionskonzept
Inform.architektur
GUI
Typgrafie
Farben
Technologien
Kommunikation
Timeline / Historie
Awareness
gemeinsame
To-Do-Listen
Versions -
Management
gemeinsamer
Arbeitsbereich
individueller
Arbeitsbereich
Sharing
Interaktionsdesign
Interfacedesign
Gestaltung
Technische Aspekte
Kollaboration und
Kooperation
Umsetzung
SketchCoLab
Überarbeiten von
Zeichnungen
Workflow
Bewerten von
Zeichnungen
Annotation
Speichern
Zoomen
Rückgängig und
Wiederherstellen
geschlossene
Bereiche
Verschieben
Ebenen
Tagging
Annotation
Kommentare
Rating
Werkzeuge
Bereiche
Arbeitsfläche
Einzelne Elemente
Bereiche
spielbasiertes
Tagging
normales Tagging
emotionale Symbole
Text
Bereiche
Symbole
Bereich
Anhang
Marker
Radiergummi
Pfeile
Textbox
Freiform-Stift
neue Zeichnung
Gesamte Zeichnung
Details der Zeichnung
Gesamte Zeichnung
Details der Zeichnung
Gesamte Zeichnung
Details der Zeichnung
Gesten
Emotionen
Sterne
Gesamte Zeichnung
Details der Zeichnung
Strichstärke
Farben
gegenseitige
Verlinkung
gegenseitige
Verlinkung
SketchCoLab
•••
153

154
•••
SketchCoLab
Anhang

Anhang
SketchCoLab
•••
155

156
•••
SketchCoLab
Anhang

Anhang
SketchCoLab
•••
157

158
•••
SketchCoLab
Anhang

Anhang
SketchCoLab
•••
159

160
•••
SketchCoLab
Anhang

Anhang
SketchCoLab
•••
161

162
•••
SketchCoLab
Anhang

Anhang
SketchCoLab
•••
163