BACHELORARBEIT // THOMAS SOYTER

Transkript

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

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

3 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 Prüfer: Prof. Ralph Tille, HdM Stuttgart 2. Prüfer: Prof. Dr. Michael Burmester, HdM Stuttgart

4 EIDESSTATTLICHE VERSICHERUNG Name: Soyter / Vorname: Thomas / Matrikel-Nr.: / Studiengang: Informationsdesign Hiermit versichere ich, Thomas Soyter, an Eides statt, dass ich die vorliegende Bachelorarbeit mit dem Titel 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

5 ZUSAMMENFASSUNG Schlagwörter Kollaboratives Zeichnen, kooperatives Zeichnen, Prototyp, Tablet PC, Tablet Computer, Überarbeitung von Zeichnungen, Bewertung von Zeichnungen, 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 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 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. Zusammenfassung

6 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. 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. Keywords Collaborative Sketching, Cooperative Sketching, Prototype, Tablet PC, Tablet Computer, Edit Sketches, Evaluate Sketches, 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

7

8 INHALTSVERZEICHNIS 1 EINFÜHRUNG 1 2 THEORIE UND GRUNDLAGEN Kollaboration und Kooperation Definitionen und Grundlagen E-Kollaboration und E-Kooperation Computergestütztes kollaboratives und kooperatives Gestalten Digitales und analoges Zeichnen Praktische Ansätze zum gemeinsamen Überarbeiten von Zeichnungen Praktische Ansätze zum gemeinsamen Bewerten von Zeichnungen Tablet PCs und Tablet Computer Definitionen, Geschichte und Entwicklung Berührungsempfindliche Bildschirme Tablet Computer als kollaboratives und kooperatives Gestaltungstool Das ASUS EeePad Transformer TF KONZEPTION UND PRAKTISCHE UMSETZUNG Grobkonzept Zielgruppenanalyse und ansprache Grundlegendes Prototypkonzept Feinkonzept Informationsarchitektur Wireframes (Funktionslayout) Interaktionen Gestaltungskonzept Typografie Inhaltsverzeichnis

9 Farben Icons und Symbole Mockups Der Prototyp SCHLUSSBEMERKUNG LITERATURVERZEICHNIS ANHANG 145 Inhaltsverzeichnis

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

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

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

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

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

15

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

17

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

19

20 01 EINFÜHRUNG

21

22 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 interaktiver Prototyp () 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. 1 Einführung

23

24 02 THEORIE UND GRUNDLAGEN

25

26 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 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 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 ein kurzer Einblick in die zugrundeliegende Touchscreen- und Multitouchtechnologie, bevor in Kapitel die Eignung von TabletPCs und Tablet Computern als kollaboratives und kooperatives Designtool erörtert wird. Abschließend wird in Kapitel 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 als interaktiver Prototyp zum kollaborativen und kooperativen Überarbeiten und Bewerten von Zeichnungen auf mobilen Endgeräten. 5

27 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 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 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. 6 2 Theorie und Grundlagen

28 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. 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 Kollaboration und Kooperation

29 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). 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. 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 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 Kein Risiko Geringe 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 Ressourcen werden geteilt Größeres Risiko Höhere Intensität 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 Tabelle 1: Überblick zu den Begriffen Kooperation, Koordination und Kollaboration Darstellung nach AASL (1996) 8 2 Theorie und Grundlagen

30 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) 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 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. 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. Gruppe 1 Kommunikations- und Interaktionswege Teilnehmer 1 Teilnehmer 1 Teilnehmer 2 Teilnehmer 2 Teilaufgabe Teilziel KOLLABORATION Teilnehmer 3... Gruppe X KOOPERATION Gesamtaufgabe Ziel gemeinsame Aufgabe / Ziel Teilnehmer 1 Teilnehmer 3 Teilnehmer 4 Teilnehmer 2 Teilaufgabe Teilziel Teilnehmer 3 Abbildung 1: Unterschied zwischen Kooperation und Kollaboration Eigene Darstellung 9 Kollaboration und Kooperation

31 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. Soziale Veränderungen Flexibilisierung Umstrukturierungen Glasfaser 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 Gruppenarbeit 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 Telefon Multimedia Globalisierung Neue Organisationsformen Mobile Endgeräte Glasfaser PCs / Laptops Allianzen LANs Team Team Team Kollaborative Arbeitsgruppen Groupware Abbildung 2: Einflüsse auf die Entstehung von CSCW und Groupware Darstellung nach JOHANSEN (1991) 10 2 Theorie und Grundlagen

32 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. 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. 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. 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] 11 Kollaboration und Kooperation

33 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 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: Probleme computervermittelter Kommunikation Große Unsicherheit bei Anfängern, die über keine oder wenige Erfahrung im Umgang mit den neuen Medien haben Chancen computervermittelter Kommunikation Kommunikation im virtuellen Raum ist oft persönlicher und ehrlicher 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 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 Tabelle 2: Vor- und Nachteile von E-Kollaboration und E-Kooperation Eigene Darstellung nach STOLLER-SCHAI (2009, S. 73 ff.) 12 2 Theorie und Grundlagen

34 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 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. 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. Organisationswissenschaften Wirtschaftswissenschaften Anthropologie Informatik CSCW Ethnographie Soziologie Groupware / CSCW-Systeme Psychologie Arbeitswissenschaften Wirtschaftsinformatik Abbildung 4: Zusammenhang zwischen CSCW und Groupware Eigene Darstellung 13 Kollaboration und Kooperation

35 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 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 ) geprägt durch die zeitversetzte Zusammenarbeit und Kommunika- zeitgleich / synchron zeitversetzt / asynchron Zeit räumliche Ko-Präsenz Elektronische Meeting-Systeme Face-to-face-Kommunikation Wahlsysteme Präsentationsunterstützung Sitzungsraum Elektronische Meeting-Systeme Gemeinsam genutzte Dateien Elektronische Bulletin Boards Diskussionsdatenbanken Workflow-Systeme Gruppenkalender Geteilte PC-Arbeitsplätze fehlende räumliche Ko-Präsenz Raum Video-Konferenz Gemeinsam genutzte Whiteboords Text-Chat Gemeinsame genutzte Anwendungen Telefongespräch Brief Fax Anrufbeantworter News-Groups Abbildung 5: Raum-Zeit-Matrix in der ursprünglichen Form Darstellung nach JOHANSEN (1988, S.44) 14 2 Theorie und Grundlagen

36 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 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 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. gleich (synchron) verschieden (asynchron), vorhersehbar verschieden (asynchron), nicht vorhersehbar Zeit gleicher Ort Face-to-face-Kommunikation Sitzungsraum Organisation von Schichtarbeit Schwarzes Brett verschiedener Ort, vorhersehbar Raum Video-Konferenz Kooperatives Schreiben via Draft Passing verschiedener Ort, nicht vorhersehbar Mobilfunkkonferenz Asynchrone rechnergestützte Konferenz Vorgangsbearbeitung Abbildung 6: Erweiterte Raum-Zeit-Matrix (GRUDIN) Darstellung nach GRUDIN (1994) 15 Kollaboration und Kooperation

37 Synchrone Kollaboration / Kooperation Zeitgleiche kollaborative und kooperative Zusammenarbeit innerhalb einer Gruppe (z. B. mittels Chat). 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 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 Asynchrone Kollaboration / Kooperation Zeit Zeitversetzte kollaborative und kooperative Zusammenarbeit innerhalb einer Gruppe (z. B. mittels ). asynchron verteilte Hypertext-Systeme elektronische Post-Systeme spez. Datenbanken spez. Planungs-Systeme Workflow Management-Systeme Bulletin Board-Systeme Gruppeneditoren synchron Sitzungs- und Entscheidungsunterstützungs-Systeme Video- bzw. Desktop-Konferenzen benachbart entfernt Raum Abbildung 7: Erweiterte Raum-Zeit-Matrix (TEUFEL) Darstellung nach TEUFEL, SAUTER, MÜHLHERR & BAUKNECHT (1995, S. 25) 16 2 Theorie und Grundlagen

38 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 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 Kollaboration und Kooperation

39 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. ). 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. Kommunikation Systemklasse Video- konferenz- Systeme Kommunikation spez. Datenbanken Bulletin- Board- Systeme gemeinsame Informationsräume Planungssysteme Workflow- Management- Werkzeuge Entscheidungsund Sitzungsunterstützungssysteme verteilte Hypertext- Systeme Gruppen- Editoren Workflow- Management Workgroup- Computing Koordination Kooperation Abbildung 8: 3K-Modell Darstellung nach TEUFEL et al. (1995, S. 27) 18 2 Theorie und Grundlagen

40 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 Anwendungsorientierte 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 Kollaboration und Kooperation

41 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: 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) 20 2 Theorie und Grundlagen

42 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 sowie 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. 21 Kollaboration und Kooperation

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

44 2.2. Computergestütztes kollaboratives und kooperatives Gestalten 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. Verschiedene 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- 23 Computergestütztes kollaboratives und kooperatives Gestalten

45 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 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 24 2 Theorie und Grundlagen

46 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). 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- Analoges Zeichnen / Skizzieren Digitales Zeichnen / Skizzieren Vorteile Schnelles und freies Explorieren Intuitiv und einfach in der Anwendung Günstig und meist frei verfügbar Sehr schnell in der Umsetzung Geringe kognitive Belastung beim Zeichnen an sich Papier als flexibles, robustes und vielseitiges Medium Unbegrenzter Platz zum Zeichnen Einfache Speicherung, Archivierung und Suche Vielfältige Bearbeitungsmöglichkeiten durch viele Werkzeuge Nicht-destruktive Bearbeitung möglich Erweiterter Überblick (z. B. durch Zoomen) 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 Papier als räumlich begrenztes Material Modifikationen schwierig, ohne neu zeichnen zu müssen Kognitive Be- und Überlastung verursacht durch die vielen Möglichkeiten bzw. die digitale Arbeitsumgebung Langsamer (aufgrund der vielen zu treffenden Entscheidungen bei der Nutzung digitaler Zeichnen-Werkzeuge) 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 25 Computergestütztes kollaboratives und kooperatives Gestalten

47 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 () 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 an eine mobile Anwendung zur gemeinsamen Überarbeitung und Bewertung von Zeichnungen aufzuzeigen Theorie und Grundlagen

48 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 bezieht. 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- 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 Computergestütztes kollaboratives und kooperatives Gestalten

49 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: Abruf am 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 , 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 Theorie und Grundlagen

50 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 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 , Facebook oder Twitter geteilt werden. Somit ist eine kollaborative und kooperative Zusammenarbeit möglich, Abbildung 11: iannotate - Annotation innerhalb Websites Quelle: PLIMMER et al. (2010) Abbildung 12: Remarkz Quelle: Screenshot Erstellt am Computergestütztes kollaboratives und kooperatives Gestalten

51 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 Importund Exportfunktion mit anderen Lernenden geteilt werden. 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 oder Facebook unterstützt, wobei die zeitgleiche Überarbeitung durch mehrere Anwender an einem Objekt nicht möglich ist. Abbildung 13: u-annotate Quelle: Abruf am Abbildung 14: PhotoAnnotate Quelle: id ?mt=8» Abruf am Theorie und Grundlagen

52 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 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 Kollaboration 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 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 15: TheCommentor» Quelle: Screenshot Erstellt am Abbildung 16: ConceptShare» Quelle: Abruf am Computergestütztes kollaboratives und kooperatives Gestalten

53 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. 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 17: Twiddla» Quelle: Screenshot Erstellt am Abbildung 18: iannotate PDF Quelle: Abruf am Theorie und Grundlagen

54 Dokumente mit anderen Personen z. B. per . 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» multiuserpad/ Quelle: Multiuser-Sketchpad1-695x469.jpg» Abruf am 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, 33 Computergestütztes kollaboratives und kooperatives Gestalten

55 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 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 Theorie und Grundlagen

56 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 , 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 s 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. 35 Computergestütztes kollaboratives und kooperatives Gestalten

57 Kernfunktionen Erweiterte Features Werkzeuge zur Annotation Freiform-Stift Pfeile Marker Farbe (für Marker und Freiform-Stift) Textboxen Geometrische Formen Sprach- bzw. Tonaufnahmen Bildintegration - Material auf dem eigenen PC - Durch interne Kamera des Gerätes Verschiedene Pinsel Emotionale Symbole (z. B. Smilies, Häkchen, Like-It-Symbol, etc.) Workflow Löschen von Inhalten Arbeitsschritte wiederholen oder rückgängig machen Zoomen innerhalb der Arbeitsfläche Verschieben einzelner Annotationselemente Arbeitsfläche leeren Verwaltung durch Ebenen Historie zur Visualisierung der einzelnen Bearbeitungsschritte 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 36 2 Theorie und Grundlagen

58 Kernfunktionen Erweiterte Features Kollaboration und Kooperation Asynchron Möglichkeit des Sharings durch 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 Unterstützung der Workspace-Awareness durch Darstellung der beteiligten Nutzer Audio- und Videokonferenz 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 37 Computergestütztes kollaboratives und kooperatives Gestalten

59 Tagging Tagging ist die Annotation von Inhalten durch frei definierbare Textinformationen (Schlagworte). Tags erlauben die Identifikation und Kategorisierung der Inhalte nach bestimmten Kriterien 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 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 Theorie und Grundlagen

60 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 s 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 symbolisiert 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 39 Computergestütztes kollaboratives und kooperatives Gestalten

61 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 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» Quelle: Abruf am Theorie und Grundlagen

62 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 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 21: Sketcharoo» Quelle: Screenshot Erstellt am Abbildung 22: LabelMe» Quelle: Screenshot belme&mode=i&folder=static_houses_boston_2005&image=img_3636.jpg» Erstellt am Computergestütztes kollaboratives und kooperatives Gestalten

63 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 Informationsbasis 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» Quelle: Screenshot Erstellt am Theorie und Grundlagen

64 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. 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 24: Rate My Drawings» Quelle: Screenshot Erstellt am Abbildung 25: Flickr» Quelle: Screenshot Erstellt am Computergestütztes kollaboratives und kooperatives Gestalten

65 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 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 44 2 Theorie und Grundlagen

66 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. von Interaktionselementen ermöglicht, die sich direkt bei den Textelementen befinden. 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 Annotation Kommentare Rating Werkzeuge zur Bewertung Textboxen Freiform-Stift Symbole wie Sterne Emotionale Symbole (z. B. Smilies, Häkchen, Like-It-Symbol, etc.) Workflow Vordefinierte Tags Löschen von Tags Editieren von Tags Zuordnung von Tags zu bestimmten Inhalten bzw. Details Löschen von Kommentaren Editieren von Kommentaren Zuordnung von Kommentaren zu bestimmten Inhalten bzw. Details Tags und Kommentare mit entsprechenden Nutzern verknüpfen Tabelle 5: Mögliche Kernfunktionen / Features für das Bewerten von Zeichnungen innerhalb des Prototyps Eigene Darstellung 45 Computergestütztes kollaboratives und kooperatives Gestalten

67

68 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 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 Handschriftund 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 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 Tablet PCs und Tablet Computer

69 Abbildung 26: Beispiel eines Tablet PCs in der Bauform Convertible (Dell Latitude) Quelle: XT3_2.jpg» Abruf am 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). 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 48 2 Theorie und Grundlagen

70 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: Abbildung 27: Das ipad als eines der bekanntesten Slates Quelle: com/2010/01/27/touchscreensthat-changed-the-world/» Abruf am 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 Tablet PCs und Tablet Computer

71 Eigenständiges Gerät Stifteingabe Merkmale Vielseitige Anwendung Form-Faktor Abbildung 28: UMPC mit Touchscreen und integrierten Tastaturelementen Quelle: de/presseservice_material/pressemitteilungen/pics/287356_ jpg» Abruf am Geringes Gewicht Großes Display Flache Bauweise Slate Hybrid Convertible UMPC Hybrid Die hybride Bauweise vereinigt die Vorteile der Formen Convertible und Slate mittels einer zusätzlichen, abnehmbaren Tastatur. Tablet Computer z. B. Pads Tablet PCs z. B. PDAs 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. Touchscreen / Finger Mobile Betriebssysteme wie z. B. Android Stiftbasierte Eingabe Stiftbasierte Eingabe Angepasste Desktop- Betriebssysteme wie z. B. Windows Touchscreen / Finger Hardware wie bei Desktop-Rechnern z. B. Festplatte, Grafikkarte Abbildung 29: Unterschiede und Merkmale von Tablet PCs und Tablet Computern Eigene Darstellung 50 2 Theorie und Grundlagen

72 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) 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 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. Abbildung 30: Dynabook Quelle: content/uploads/2010/02/dyna- Book.png» Abruf am Abbildung 31: GridPad Quelle: com/2010/01/27/touchscreensthat-changed-the-world/» Abruf am: Tablet PCs und Tablet Computer

73 Abbildung 32: Apple Newton Quelle: 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 1989 GRIDPad 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) Microsoft Pen Computing Microsoft Pocket PC 2010 ipad Abbildung 33: PalmPilot Quelle: com/2010/01/27/touchscreensthat-changed-the-world/» Abruf am: 1968 Dynabook 1991 NestorWriter 1996 Palm Pilot 1993 Apple Newton Abbildung 34: Wichtige Meilensteine der Tablet PCs und Tablet Computer Eigene Darstellung 2002 Microsoft Tablet PC 52 2 Theorie und Grundlagen

74 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 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 Quartal Quartal Quartal Quartal Quartal Quartal Mio. 3,5 4,4 9,7 7, ,7 Mio. 19,4 (0,8 in Deutschland) 54,7 (2,1 in Deutschland) 103,4 (2,7 in Deutschland) 154,1 Abbildung 35: Entwicklung der Verkaufszahlen von Tablet Computern (weltweit) von 2010 bis 2011 Eigene Darstellung nach Quelle: Abruf am Abbildung 36: Erwartete Entwicklung der Verkaufszahlen von Tablet Computern (weltweit) in den nächsten Jahren Eigene Darstellung nach Quelle: und jsp?id= » Abruf am Tablet PCs und Tablet Computer

75 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) 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 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 Zeigersteuerung 2 Freiheitsgrade für Fingerbewegung Gestenpotential Touchscreen Touch-Oberfläche nein xy-positionierung 2 Zustände pro Finger detektiert nicht detektiert Tabelle 6: Gesten-Potential von Touchscreens Darstellung nach DORAU (2011, S. 56) 54 2 Theorie und Grundlagen

76 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 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 flexible, hartbeschichtete Außenmembran leitfähige ITO Schichten Glasscheibe 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. gleichmäßiges elektrisches Feld Y-Spannung Oberfläche isolierte Abstandhalter Abbildung 37: Funktionsweise kapazitiver Touchscreens Eigene Darstellung nach Quelle: Abruf am Abbildung 38: Funktionsweise resistiver Touchscreens Eigene Darstellung nach Quelle: Abruf am Tablet PCs und Tablet Computer

77 Abbildung 39: PLATO IV Quelle: com/2010/01/27/touchscreensthat-changed-the-world/» Abruf am 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. Kapazitiver Touchscreen Vorteile Über die Jahre folgten weitere Ansätze, wie beispielsweise ein 1984 von den Bell Laboratories entwickelter Röhrenmonitor, der mittels Multitouch steuerbar war 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- Resistiver Touchscreen Besser geeignet für Multitouch Robuste Bauweise (z. B. kratzfestes Display) Lange Lebensdauer Günstige Technologie Barrierefreiheit: kann mit beliebigen Gegenstand bedient werden (z. B. Armprothese) Präzise Interaktion durch dünne Stifte oder Fingernägel Abbildung 40: Touch-Tablet Bill Buxton Quelle: multitouchoverview.html» Abruf am Gute optische Transparenz Sehr präzise Positionserkennung bei Interaktion Weniger präzise, da Eingabe generell mit den Fingern erfolgt Nicht barrierefrei Stifteingabe nur mit speziellen Stiften möglich (allerdings weniger präzise, da dickere Spitzen) Nachteile Anfälliger für Kratzer, etc. Kürzere Lebensdauer Positionserkennung bei Fingeraktion weniger präzise Handballen- bzw. Handschatten-Problem Tabelle 7: Vor- und Nachteile kapazitiver und resistiver Touchscreens Eigene Darstellung 56 2 Theorie und Grundlagen

78 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 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 umfangreichen 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 1972 PLATO IV von IBM: erster per Bildschirm steuerbarer Rechner 1985 Bill Buxton: Entwicklung eines Multitouch-Tablets 1992 Wacom Grafiktabletts 2007 iphone 2010 ipad Abbildung 41: IBM Simon Quelle: com/2010/01/27/touchscreensthat-changed-the-world/» Abruf am E.A. Johnson: erstes Konzept zum Thema Multitouch Abbildung 43: Historische Meilensteine der Multitouch-Technologie Eigene Darstellung Per Multitouch bedienbarer Röhrenmonitor, Bell Laboratories Simon: erstes Smartphone von IBM mit Singletouch-Bildschirm 2007 Microsoft Surface: Multitouch-Tisch 2010 Abbildung 42: Microsoft Surface Quelle: com/2010/01/27/touchscreensthat-changed-the-world/» Abruf am Tablet PCs und Tablet Computer

79 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 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 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 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 58 2 Theorie und Grundlagen

80 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 auf einem Tablet Computer Evaluieren Bewerten Prototyping Implementierung... 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. Abbildung 44: Iterativer Prozess im Kontext des Prototypen Eigene Darstellung 59 Tablet PCs und Tablet Computer

81 Abbildung 45: ASUS EeePad Transformer TF101 mit andockbarer Tastatur ( hybride Bauform) Quelle: Asus+EeePad+Transformer.jpg» Abruf am 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 Bildschirm Prozessor-Typ NVIDIA Tegra 2 Technische Daten 10,1 Zoll LED Backlight WXGA Display (1280 x 800 Pixel Auflösung), kratzfestes Glas 10 Finger Multitouch Unterstützung 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 Arbeitsspeicher Interner Speicher Verbindungen Kamera Audio Eingaben & Ausgaben / Anschlüsse Akku Maße Gewicht Mobile Dockingstation 1 GB 16 GB/32 GB/Unbegrenzter ASUS Webstorage WLAN GHz, Bluetooth V EDR 1.2 Megapixel Kamera Vorderseite, 5 Megapixel Kamera Rückseite Stereo Lautsprecher, SRS Premium Sound, High Quality Mikrofon 1 x Mini HDMI 2 x Audio Jack (Kopfhörer/Mikrofon-In) 1 x Kartenlesegerät: Micro SD 9,5 Stunden; 24,4 Wh Li-Polymer Akku, 16 Stunden mit Dock 271 x 176,8 x 12,98 mm 680 g Keyboard, Touchpad 2 x USB x Kartenlesegerät (MMC/SD/SDHC) 1 x 24,4 Wh Akku Tabelle 8: Überblick der technischen Daten des ASUS EeePad Transformer TF101 Datenquelle: Abruf am: Theorie und Grundlagen

82 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 Tablet PCs und Tablet Computer

83

84 03 PRAKTISCHE UMSETZUNG

85

86 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 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 vorgestellten Wireframes verdeutlichen das Funktionslayout von und stellen prototypisch die Interaktionen zwischen Anwendung und Nutzern vor. In Kapitel erfolgt anschließend die Betrachtung relevanter Interaktionen auf der Grundlage touch- und stiftbasierter Interaktionsmechanismen. In Kapitel 3.3 wird auf Form und Gestaltung von 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 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. 65

87 3.1. Grobkonzept 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 erreicht werden. Die konkrete Definition der Zielgruppe ist daher schwierig. Eine Annäherung kann durch die Betrachtung der Nutzergruppe 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 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 66 3 Konzeption und praktische Umsetzung

88 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. 67 Grobkonzept

89 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 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- Zielgruppen-Merkmale Sozio-demographische Merkmale Persönlichkeitsmerkmale Geschlecht Alter Familienstand Sozialer Status, Einkommen Bildungsniveau, Beruf Freizeitverhalten Progressives oder konservatives Weltbild Emotional oder sachlich Genügsam, ausdauernd oder ungeduldig Risikobetont oder vorsichtig Neugierig Humoreigenschaften Kulturkreis Moralische Wertesysteme Vorlieben und Gewohnheiten Motivation Psychologische Merkmale Gebrauchsspezifische Merkmale In welchem Bereich wird das Produkt genutzt? Bevorzugte Wahrnehmungsform (visuell, akustisch) Bevorzugte Darstellungsart Bevorzugte Tiefe und Breite der Informationen Tabelle 9: Merkmale einer Zielgruppe Eigene Darstellung 68 Konzeption und praktische Umsetzung

90 Eckdaten der Nutzungskontextanalyse Eigenschaften der Benutzergruppe Allgemeine Daten Jugendliche bis ältere Erwachsene (19 59 Jahre) Männlich und weiblich Hohes Bildungsniveau Vorerfahrung Fundierte bis gute Kenntnisse bei der Steuerung und Handhabung von mobilen Geräten bzw. der Bedienung von Touchscreens Fortgeschrittener oder Experte bei der Nutzung interaktiver Systeme Eigenschaften der Nutzungsumgebung Technisches Umfeld Keine Einschränkung in der Motorik Keine Einschränkung in der Hand-Augenkoordination Normale Sehkraft Physikalische Umgebung Kein ungünstiger Lichteinfall auf die verwendete Geräteklasse Nahezu unabhängig von der physikalischen Umgebung Nutzung Indoor in verschiedensten Räumen (z. B. Arbeitszimmer, Büro, Wohnzimmer) möglich - prinzipiell auch Outdoor denkbar Nutzungskontextanalyse Analyse der Ziele, Aufgaben und Nutzer, die ein Produkt nutzen (sollen) unter Einbezienung der äußeren Umstände. Geringe Geräuschkulisse zur besseren Konzentration 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 69 Grobkonzept

91 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 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 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 70 Konzeption und praktische Umsetzung

92 dargestellt werden müssen. Im dritten Schritt, den Interaktionsszenarien ( Interaction Scenarios ) wird der Fokus auf die Nutzeraktionen und das Feedback innerhalb der Aktionen gelegt. In der letzten Phase des Scenario-Based-Designs erfolgt dann die Evaluation und das Prototyping (ROSSON & CARROLL, 2002, S. 15 ff.). Szenarien Analysis of stakeholders, field studies ANALYSIS Problem Scenarios Claims about current practice 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. DESIGN Activity Scenarios Metaphors, Information Technology, HCI Theory, Guidelines Information Design Scenarios Iterative Analysis of usability claims & redesign Interaction Design Scenarios PROTOTYPE & EVALUATION Summative Evaluation Usability Specifications Formative Evaluation Abbildung 46: Ablauf des Scenario Based Development Prozesses Darstellung nach ROSSON & CAROLL (2002, S.25) 71 Grobkonzept

93 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 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 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. 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 entscheidend mit beeinflussen. Anwendungszenario 2 Eine weitere Anwendungsmöglichkeit von 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 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 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. 72 Konzeption und praktische Umsetzung

94 Grundlegendes Prototypkonzept Ausgehend von den in dieser Arbeit gewonnenen Erkenntnissen wird nachfolgend das für den interaktiven Prototyp erarbeitete Konzept dargestellt. Die in Kapitel und Kapitel 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 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 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 73 Grobkonzept

95 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 Kollaboration und Kooperation Kommunikation Kommentare Chat Bewerten Rating Bewertungs- Kommentar Individuell Arbeitsbereich Awareness 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 Workflow Rückgängig / Wiederholen Speichern Arbeitsfläche löschen Technologien HTML5 / CSS / JavaScript PHP / MySQL Interaktion (Multi)Touch (Finger, Stift), Maus, Texteingabe (Hardwaretastatur) Abbildung 47: Grobkonzept Eigene Darstellung 74 Konzeption und praktische Umsetzung

96 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 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. Datenbasis Gesamte Zeichnung Workflow Annotation Bewertung Kommunikation Kollaboration & Kooperation Skalieren der Arbeitsfläche (durch Browser möglich) Freiform-Stift Rating durch Sternchen Chat Individuelle Arbeitsfläche Radiergummi Farbe Bewertungskommentare Bewertungskommentare Kommentare Größe der Spitze Größe der Spitze Textboxen Sharing Arbeitsschritte rückgängig machen bzw. wiederholen Textbox Freiform-Stift Speichern Leinwand leeren Permanent aktualisierte Datenvorhaltung auf dem Web-Server Speichern Abbildung 48: Funktionslayout Eigene Darstellung 75 Grobkonzept

97 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 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 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 Überarbeitungen, 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 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- 76 Konzeption und praktische Umsetzung

98 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, 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 speichern und diese beispielsweise per mit anderen zu teilen. Dabei enthalten die exportierten Bilder sämtliche Informationen zu den getätigten Annotationen. Arbeitsbereich Innerhalb von 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. 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. 77 Grobkonzept

99 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. 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 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 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 durch die Nutzer beeinflusst 78 Konzeption und praktische Umsetzung

100 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 (Mockups) erfolgt die Darstellung der Visualisierung von 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. 79 Grobkonzept

101 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 stattfindet. 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.) Informationsarchitektur Die Informationsarchitektur zeigt die Struktur der relevanten Informationen und Funktionen einer Anwendung. Wichtiger Aspekt dabei ist die Hierarchie, die sich durch Tiefe Tiefe Struktur Breite Struktur Abbildung 49: Hierarchien einer Informationsarchitektur Darstellung nach ARNDT (2006, S. 143) 80 Konzeption und praktische Umsetzung

102 (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 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 Lineare Verknüpfung Netzwerkartige Verknüpfung Hyperlink-Verknüpfung Hierarchische Verknüpfung (mit Hyperlinks) Einzelbild-Struktur Abbildung 50: Navigationsstrukturen Darstellung nach STAPELKAMP (2007, S. 187 ff.) 81 Feinkonzept

103 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 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 82 Konzeption und praktische Umsetzung

104 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 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 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: 83 Feinkonzept

105 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 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ößtenteils 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 84 Konzeption und praktische Umsetzung

106 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 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. 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.). Raster Gestaltungsraster sind ein Ordnungssystem in der visuellen Kommunikation, mit deren Hilfe die Organisation und Aufteilung von grafischen Elementen erleichtert wird. Abbildung 51: Basisraster als Gestaltungsrichtlinie Eigene Darstellung 85 Feinkonzept

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

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

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

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

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

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

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

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

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

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

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

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

119 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 98 Konzeption und praktische Umsetzung

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

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

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

123 Wireframe #17 - Tags zu einer Zeichnung vergeben Abbildung 68: Wireframe #17 - Tags zu einer Zeichnung vergeben Eigene Darstellung 102 Konzeption und praktische Umsetzung

124 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 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- Drag & Drop Rotieren Verkleinern Vergrößern Abbildung 69: Beispiele verankernder Gesten auf Touchscreens Eigene Darstellung 103 Feinkonzept

125 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 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 104 Konzeption und praktische Umsetzung

126 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 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 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 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 : Buttons, Werkzeuge, Menüs (Slider, Accordion) 2: Double-Tap (alternative Mausgeste: Doppelklick) In : Löschen von Textelementen, die auf der Leinwand platziert wurden. 3: Touchmove, Bewegen und Verschieben (alternative Mausgeste: Drag & Drop) Einfacher Tap (normaler Klick) Double-Tap (Doppelklick) Bewegen und Verschieben Scrollen nach links und rechts (Swipe) Scrollen (Swipe nach oben und unten) Abbildung 70: Touch-Interaktionen im Prototyp Eigene Darstellung 105 Feinkonzept

127 In : 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 : Bilderslider bei Wahl der Zeichnung und im Bewertungsfenster. 5: Swipe nach oben und unten (vertikales Scrollen) In : Einträge im Chat, bei Einzelbewertungen und Projektwahl, wenn die Anzahl der Daten den verfügbaren Anzeigeplatz überschreitet. 106 Konzeption und praktische Umsetzung

128 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) 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 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 Versalhöhe Oberlänge x-höhe Unterlänge Punze Serife Abbildung 71: Grundbegriffe der Typografie Eigene Darstellung 107 Gestaltungskonzept

129 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 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) 108 Konzeption und praktische Umsetzung

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

131 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) 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 eignet 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 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 110 Konzeption und praktische Umsetzung

132 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 Eigene Darstellung Farbkonzept des interaktiven Prototyps Die Farbgestaltung des Interfaces in 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 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 Die nachfolgenden Abbildungen zeigen beispielhaft die soeben beschriebenen Kontraste im Rahmen der Farbgestaltung des Prototyps. Den größten Bestandteil dabei Bunt-Unbunt-Kontrast Hell-Dunkel-Kontrast Qualitätskontrast 111 Gestaltungskonzept

133 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 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 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 74: Qualitätskontrast in Eigene Darstellung Abbildung 75: Hell-Dunkelkontrast in Eigene Darstellung 112 Konzeption und praktische Umsetzung

134 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 Speichern Arbeitsschritt rückgängig Arbeitsschritt wiederholen Freiform-Stift Text-Werkzeug Radierer Strichstärke/ Farbe 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- Bewertungsstern Abbildung 76: Icons in der Grundversion Eigene Darstellung Leinwand leeren Speichern Arbeitsschritt rückgängig Abbildung 77: Icons in der gestalteten Version Eigene Darstellung Arbeitsschritt wiederholen 113 Gestaltungskonzept

135 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 (STAPELKAMP 2007, S. 174 ff.) Icons und Symbole innerhalb des Prototyps Die in 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 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 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 114 Konzeption und praktische Umsetzung

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

137 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 116 Konzeption und praktische Umsetzung

138 Mockup #2 - Login Anwender müssen sich zunächst mit gültigen Anmeldedaten einloggen um 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 Mitgliedern einer Projektgruppe lediglich die Daten zur Verfügung stellen, für die sie eine Berechtigung besitzen. Abbildung 81: Mockup #2 - Login-Fenster Eigene Darstellung 117 Gestaltungskonzept

139 Mockup #3 - Grundansicht der Web-Applikation Nachdem der Login-Vorgang erfolgreich abgeschlossen wurde, wird 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 Leinwand als zentraler Bestandteil der Anwendung erhält konsequenterweise innerhalb von 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» 1: Werkzeuge zur Annotation» 2: Werkzeuge für den Workflow» 3: Projekt und Zeichnung wählen 4» 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 2 5 Abbildung 82: Mockup #3 - Oberfläche von Eigene Darstellung 118 Konzeption und praktische Umsetzung

140 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 Bereich 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 mit mobilen Geräten einen wichtigen Aspekt darstellt. 1» 1: Anzeige zur Gesamtbewertung der gewählten Zeichnung 2» 2: Alle zu einer gewählten Zeichnung vorhandenen Bewertungen inkl. Bewertungskommentare» 3: Chat-Werkzeug mit Anzeige der Textnachrichten der einzelnen Nutzer 3 Abbildung 83: Mockup #4 - Aktivitätspanel Eigene Darstellung 119 Gestaltungskonzept

141 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 ebenfalls einen Button an, der nach Aktivierung den Nutzer zum Bewertungsfenster führt (siehe Mockup #12 und Mockup #13). Abbildung 84: Mockup #5 - Aktivitätspanel Bereich Gesamtbewertung Eigene Darstellung 120 Konzeption und praktische Umsetzung

142 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 dargestellt. Die Darstellung der einzelnen Bewertung unterstützt die Awareness und dient als Kommunikations- und Diskussionsgrundlage. Abbildung 85: Mockup #6 - Aktivitätspanel Bereich Einzelbewertungen / Bewertungskommentare Eigene Darstellung 121 Gestaltungskonzept

143 Mockup #7 - Chat-Werkzeug Das Chat-Werkzeug stellt das zentrale Kommunikationswerkzeug innerhalb von 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 sehr rudimentär gehalten und ermöglicht die generelle Kommunikation, ohne dass diese entsprechend kanalisiert wird. In einer Weiterentwicklung von 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. Abbildung 86: Mockup #7 - Chat-Werkzeug Eigene Darstellung 122 Konzeption und praktische Umsetzung

144 Mockup #8 - Textwerkzeug Als ein weiteres Werkzeug zur Annotation stellt 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 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. Abbildung 87: Mockup #8 - Textwerkzeug Eigene Darstellung 123 Gestaltungskonzept

145 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 von 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. Abbildung 88: Mockup #9 - Werkzeugoptionen: Strichstärke und Strichfarbe Eigene Darstellung 124 Konzeption und praktische Umsetzung

146 Mockup #10 - Auswahl Projekt und Zeichnung Die innerhalb von 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 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. Abbildung 89: Mockup #10 - Projektauswahl und Wahl der Zeichnung Eigene Darstellung 125 Gestaltungskonzept

147 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 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. Abbildung 90: Mockup #11 - Ansicht von Annotationsversionen Eigene Darstellung 126 Konzeption und praktische Umsetzung

148 Mockup #12 - Bewertung von Zeichnungen Das Popup-Fenster zur Bewertung wird über den Bewertungsbutton im Aktivitätspanel (siehe Mockup #5) aufgerufen. Dabei erkennt, 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 Zeichnung 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. Abbildung 91: Mockup #12 - Bewertungs-Fenster (reduzierte Variante) Eigene Darstellung 127 Gestaltungskonzept

149 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, 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. Abbildung 92: Mockup #13 - Bewertungs-Fenster (erweiterte Variante) Eigene Darstellung 128 Konzeption und praktische Umsetzung

150 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 aufgrund 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. Abbildung 93: Mockup #14 - Kommentar-Fenster Eigene Darstellung 129 Gestaltungskonzept

151 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 130 Konzeption und praktische Umsetzung

152 3.4. Der Prototyp Technische Rahmenbedingungen Der in dieser Arbeit entstandene interaktive Prototyp ist als funktionsfähige Version unter: 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 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 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 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, Eingesetzte Technologien Technische Fakten Unterstützte Browser HTML5 (speziell Canvas-Objekt) JavaScript / AJAX PHP MySQL Apple Safari Google Chrome Mozilla Firefox Android Standardbrowser Tabelle 11: Technische Daten zum entwickelten Prototyp Eigene Darstellung Javascript Frameworks (jquery und jquery Mobile) Android Dolphin Browser 131 Der Prototyp

153 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. Weblinks: 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. 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. 132 Konzeption und praktische Umsetzung

154 Überblick Tabelle 11 und Tabelle 12 zeigen abschließend einen Überblick über die technischen Spezifikationen, sowie die im Prototyp abgebildeten Funktionen. 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 ( möglich. Features Annotation Werkzeuge Workflow Freiform-Stift Radierer Textwerkzeug (Textboxen) Wahl der Strichstärke (drei verschiedene Größen) Wahl der Strichfarbe (Freiform-Stift, drei verschiedene Farben) Leinwand leeren Rückgängig machen von Arbeitsschritten Wiederholen von Arbeitsschritten Speichern Möglichkeit, bestehende Annotationen zu überarbeiten Bewertung Werkzeuge Workflow Rating durch Sterne Speichern Bewertungskommentare Freiform-Stift Textwerkzeug Kollaboration, Kooperation und Kommunikation Chat-Werkzeug (synchron) Bewertungskommentare Ständig aktualisierte Ansicht der zur Verfügung stehenden Annotationen Ständig aktualisierte Ansicht der abgegebenen Bewertungen Informationen zur Awareness (wer hat wann was bewertet bzw. wer hat wann welche Annotation erstellt) Datenvorhaltung auf Webserver zur räumlich und zeitlich unabhängigen Bereitstellung der Anwendung und Daten Tabelle 12: Überblick der Funktionen in Eigene Darstellung 133 Der Prototyp

155

156 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 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. 135 Schlussbemerkung

157

158 5 LITERATURVERZEICHNIS AASL. (1996). From Cooperation to Collaboration. American Association of School Librarians (AASL). Retrieved January 10, 2012, from 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 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 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 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 ). New York: ACM Press. 137 Literaturverzeichnis

159 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 ). Swinton: British Computer Society. CREALYTICS. (2011). Statistik: Verkaufte Tablets weltweit (Q Q3 2011). Erfolgsbasiertes Suchmaschinenmarketing (SEM) - crealytics GmbH. Retrieved January 26, 2012, from 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 com/technologie/it-tk/mobile-welt/geschichte-des-tablets-wie-xerox-das-ipad-erfand/ 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 ). 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 ELLIS, C. A., GIBBS, S. J., & REIN, G. (1991). Groupware: Some Issues and Experiences. Communications of the ACM, 34(1), FROHNER, H. (2010). Social Tagging: Grundlagen, Anwendungen, Auswirkungen auf Wissensorganisation und soziale Strukturen der User (1. Aufl.). Boizenburg: Verlag Werner Hülsbusch. 138 Literaturverzeichnis

160 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 ). 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 ). 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 ). 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), 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 ). 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 ). 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. 139 Literaturverzeichnis

161 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 ). 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 IMUK Institut für Medien und Konsumentenforschung. (2012). Aktuelle Ergebnisse aus der Typologie der Wünsche Retrieved from January 26, 2012, 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 ). Los Alamitos: IEEE Computer Society Press. KEPPLER, S. (2010). Eine kurze Geschichte des Tablet PC. 3sat.online. Retrieved January 26, 2012, from de/page/?source=/neues/sendungen/magazin/149559/index.html KVAN, T. (2000). Collaborative Design: What is it? Automation in Construction, 9(4), LANDAY, J. A., & MYERS, B. A. (2001). Sketching Interfaces: Toward More Human Interface Design. Computer, 34(3), 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- 140 Literaturverzeichnis

162 schaftliche Buchgesellschaft. MCLEAN, P. (2011). The Inside Track on Apple s Tablet: A History of Tablet Computing. AppleInsider Apple news and rumors since Retrieved January 26, 2012, from 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 ). Münster: Waxmann Verlag. O.V. (2010). Gartner Says Worldwide Media Tablet Sales on Pace to Reach 19.5 Million Units in Technology Research Gartner Inc. Retrieved January 26, 2012, from 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 ). 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 ). 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 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 ). Heidelberg: Springer. ROSSON, M. B., & CARROLL, J. M. (2002). Usability Engineering: Scenario-Based Development of Human-Computer Inter- 141 Literaturverzeichnis

163 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), 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 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 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 142 Literaturverzeichnis

164 erw. Aufl.). Berlin [u.a.]: Springer. TOMORROW FOCUS MEDIA (Ed.). (2011). Mobile Effects Mai Retrieved January 25, 2012, from tomorrow-focus-media.de/uploads/tx_mjstudien/mobile_effects_ _01.pdf TSCHANZ, A., SCHEIDEGGER, N., RÜEGSEGGER, P., & SIEBER, P. (2003). E-Collaboration: Internet-ABC für KMU. Retrieved January 25, 2012, from TVERSKY, B. (1999). What does Drawing Reveal About Thinking? In J. S. Gero & B. Tversky (Eds.), Visual and Spatial Reasoning in Design (pp ). 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 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 ). 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 ). New York: ACM Press. WISSENMEDIA. (2012). Kon... wissen.de. Allgemeinbildung, Lexikon, Wörterbücher & amp; Reiseführer - wissen.de. Retrieved January 17, 2012, from html 143 Literaturverzeichnis

165

166 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. 145 Anhang

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

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

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

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

171 SKETCHCOLAB GRUNDLEGENDES ANWENDUNGSKONZEPT V. 1 Bachelorarbeit - Thomas Soyter IDB 7 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 Überarbeiten iterativer Prozess Bewerten - einfache Zeichnenwerkzeuge - Annotationen / Überarbeitung - durch einfache Zeichnenwerkzeuge - evtl. Timeline / Verlauf um Prozess nachzuverfolgen - mehrere Ebenen (weniger destruktiv) - Taggen (allgemein und bestimmte Bereiche) - Annotieren als Bewertungsform - evtl. spielbasierte Bewertungsansätze - Rating? 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 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? - Speichern der Ergebnisse (Originalbilder, überarbeitete und bewertete Bilder) - Laden der Ergebnisse Datenhandling 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 - Touchinteraktion (Single und Multitouch) - evtl. Gesten - Texteingabe per Tastatur (hardwareseitig, Touchtastatur?) - Stiftbasiert Technische Basis Interaktionen 150 Anhang

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

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

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

175 154 Anhang

176 155 Anhang

177 156 Anhang

178 157 Anhang

179 158 Anhang

180 159 Anhang

181 160 Anhang

182 161 Anhang

183 162 Anhang

184 163 Anhang

185