Thomas Soyter | Bachelorarbeit Hochschule der Medien

SketchCoLab - Ein interaktiver Prototyp zum kollaborativen und kooperativen Überarbeiten und Bewerten von Zeichnungen auf mobilen Endgeräten

  • Home
  • About
  • Vorbereitung
  • Konzeption
  • Gestaltung
  • Umsetzung

And the winner is…

Wie in einem früheren Blogeintrag Die liebe Technik – HTML5 vs. Flash schon erwähnt, stellt sich bei der Umsetzung des Prototypen die Frage mit welcher Technologie das geschehen kann und soll. Zur näheren Auswahl stehen HTML5 mit jQuery Mobile und ggf. PHP / MySQL, sowie Flash (als AIR-Anwendung).

Nach einer ausgiebigen Recherche zu den Vor- und Nachteilen der jeweiligen Technologien war ich leider immer noch nicht weiter was die Entscheidung bezüglich einer Umsetzungsmethode angeht. Im Prinzip ist das zum jetzigen Zeitpunkt auch noch nicht brisant, aber irgendwann muss man sich entscheiden und das habe ich auch nun.

And the winner is... HTML5 (Bildquelle: http://lloydhumphreys.com/blog/?p=1098)

Meiner Meinung nach eignen sich für den später entstehenden Prototypen beide Möglichkeiten. Flash kann sicherlich noch ein wenig mehr, aber ich bin der Überzeugung, dass man mit HTML5 (Canvas) ebenfalls die notwendigen Funktionen der geplanten Anwendung umsetzen kann.

Da die Einstiegshürde bei HTML5 niedriger ist und mit jQuery Mobile ein Framework zur Verfügung steht, mit dem man schnell und einfach Interaktionen auf touchbasierten mobilen Geräten abbilden kann, ist die Wahl auf HTML5 gefallen. Darüberhinaus ist das Gestalten über CSS ebenfalls ein vorteilhafter Aspekt, den ich mit in meine Entscheidung habe fließen lassen.

Posted in Vorbereitung | Tagged Flash, HTML5, jQuery Mobile | 2 Responses

Gib dem Kind einen Namen… und ein Logo

Zur “Entspannung” zwischen all dem Lesen, Konzeptionieren und den (hoffentlich) tiefgründigen Gedanken habe ich mir einen Arbeitstitel für den später entstehenden Prototypen überlegt.

SketchCoLab lautet dieser und weil wir ja Designer sind, gab es auch gleich einen Logoentwurf hinterher. Nichts weltbewegendes, aber irgendwie arbeitet es sich besser, wenn das ganze Projekt auch einen Namen hat.

Logoentwurf SketchCoLab

Und weil die gedruckte Bachelorarbeit später auch nach was aussehen soll, hier der Versuch einer anständigen Titelseite.

Entwurf zur Titelseite der Bachelorarbeit SketchCoLab

Posted in Vorbereitung | Tagged Arbeitstitel, Logo, Logoentwurf, SketchCoLab, Titelseite | Leave a response

Ein erstes Anwendungskonzept

Um mich parallel zum theoretischen Teil auch meinem interaktiven Prototypen langsam zu nähern, entwickelte ich für den ersten groben Überblick ein Konzept zum Aufbau der geplanten Anwendung.

Das geht zwar noch nicht besonders in die Tiefe, erlaubt aber einen ersten Eindruck darüber, welche Bestandteile innerhalb der Anwendung vorhanden und wie diese miteinander verbunden sind. Darüber hinaus hat es für mich persönlich nochmal ein wenig Klarheit gebracht, wohin die Reise nun eigentlich hingehen soll. So wurde mir nochmals bewusst, welche Kernelemente in der Konzeptionsphase besonders viel Aufmerksamkeit benötigen.

Ein erstes grobes Anwendungskonzept für den Überblick

Da wäre zum einen der Punkt Überarbeiten von Zeichnungen und zum anderen der Punkt Bewerten von Zeichnungen. Für beide Bereiche habe ich mir schon erste grobe Gedanken darüber gemacht, welche Funktionalitäten sinnvoll wären bzw. sein könnten.

Überarbeiten
Das Überarbeiten soll mittels Annotationen stattfinden, was im Prinzip nichts anderes bedeutet, dass man zu bereits bestehenden Zeichnungen, Anmerkungen (Text und Scribbles) hinzufügen kann, ähnlich wie man das ja bereits bei der Dokumentenbearbeitung kennt. Das ganze soll dann über möglichst intuitiv nutzbare Interaktionselemente, wie z.B. Pinsel, etc. ermöglicht werden.  Im Prinzip ein sehr, sehr abgespecktes Malprogramm.

Inwieweit man diesen Überarbeitungs- oder Annotationstools neue Aspekte abgewinnen kann wird sich zeigen. Aber zumindest auf den Ebenen des Interaktions- und Interfacedesign gilt es möglichst anwenderfreundliche und intuitive Ansätze zu finden.

Bewerten
Das Bewerten ist da schon ein wenig schwieriger. Da bin ich mit meinen Überlegungen noch nicht ganz am Ende. Möglich sind spielerische Ansätze, um Zeichnungen möglichst optimal zu evaluieren bzw. zu bewerten. Das Ganze soll dann natürlich mehr als ein “schnödes” Rating mit den allseits beliebten Sternchen werden. Wobei diese Art der Bewertung nicht zwangsläufig außen vor gelassen werden muss.

Ebenfalls geplant ist eine Bewertung mittels Tags und auch das Annotieren scheint mir als Bewertungsform sinnvoll zu sein.

Über allen schwebt die Kollaboration und Kooperation
Nun sind die ersten Ideen bezüglich, was das Überarbeiten und Bewerten von Zeichnungen angeht, nichts wirklich neues, aber zumindest bewährte Methoden. Was die ganze Anwendung dann schon ein wenig spannender macht, ist der Aspekt der Kollaboration und Kooperation während des Prozesses der Bewertung und Überarbeitung.

Dabei gilt es zum Einen herauszuarbeiten, wann kollaboratives und wann kooperatives Arbeiten sinnvoll ist und wie das innerhalb der Anwendung möglichst optimal realisiert werden kann. Ebenfalls ein wichtiger Aspekt ist die Frage, wann beispielsweise eine zeitgleiche (synchrone) Kollaboration angestrebt werden sollte und wann eine zeitversetzte (asynchrone).

Der Aspekt der Iteration
Optimalerweise soll dann in dem späteren Prototypen das kollaborative und kooperative Überarbeiten und Bewerten von Zeichnungen auch ein iterativer Prozess werden, um somit zu möglichst guten Ergebnissen zu kommen. Ideal wäre dann wahrscheinlich auch, dass die Möglichkeit besteht, aus den gewonnenen Erkenntnissen die Zeichnung mittels der Anwendung neu zu erstellen und somit den iterativen Prozess noch weiter zu fördern.

Da die Überarbeitung der Bilder ja bereits mit zwar nur rudimentären Tools möglich ist (mehr braucht es auch nicht), können diese dann auch für das Erstellen einer neuen Zeichnung genutzt werden. Ob das aber dann wieder ein wenig zu viel bezüglich des Workloads ist, muss man prüfen.

Posted in Vorbereitung | Tagged Anwendungskonzept, Bewerten von Zeichnungen, iterativer Prozess, Kollaboration, Kooperation, Überarbeiten von Zeichnungen | Leave a response

Die Gliederung

Nun, nachdem die Bachelor-Arbeit seit dieser Woche offiziell gestartet ist, kümmerte ich mich um die Weiterentwicklung und Konkretisierung meiner Gliederung zu meiner Thesis auf Grundlage des erstellten Exposes.

Einige theoretische Bereiche, die ich als mögliche Bestandteile meiner Thesis erarbeitet habe gilt es nun in Angriff zu nehmen und auszuformulieren. Wobei man davon ausgehen muss, dass das Inhaltsverzeichnis als ein sich stetig änderndes Arbeitspaket anzusehen ist. Während ich mir bei einigen Punkten noch nicht sicher bin, ob bzw. in welcher Art und Weise sie in die Arbeit einfließen sollen, können andere Aspekte wohl als gesetzt angesehen werden.

Das gilt vor allem für die theoretischen Grundlagen über Kollaboration und Kooperation im Allgemeinen, als auch in Bezug auf computergestützte Systeme. Daneben möchte ich auch einen kleinen Überblick speziell über TabletPCs geben, da dies in meinem interaktiven Prototyp das mobile Endgerät der Wahl sein soll und sich für kollaborative und kooperative Aktivitäten bezüglich Überarbeiten und Bewerten von Zeichnungen eignen sollte.

Inhaltsverzeichnis (derzeitiger Stand)

1 Einführung

2 Theorie und Grundlagen

2.1 Kollaboration und Kooperation

2.1.1 Definitionen und Grundlagen
2.1.2 E-Kollaboration und E-Kooperation

2.2 (Computergestütztes) kollaboratives und kooperatives Design

2.2.1 Grundlagen
2.2.2 Ansätze zum Überarbeiten (und Erstellen) von Zeichnungen
2.2.3 Ansätze zum Bewerten von Zeichnungen

2.3 TabletPCs

2.3.1 Definition, Geschichte und Entwicklung
2.3.2 Berührungsempfindliche Bildschirme
2.3.3 TabletPC als kollaboratives und kooperatives Designtool
2.3.4 Das ASUS EeePad Transformer

3 Praktische Umsetzung

3.1 Grundlegendes Prototypkonzept

3.2 Zielgruppenanalyse und -ansprache

3.2.1 Zielgruppendefinition
3.2.2 Nutzungskontextanalyse
3.2.3 Personas und Szenarien

3.3 Interaktionsdesign

3.3.1 Grundlagen touch- und stiftbasierter Interaktionen
3.3.2 Texteingabe bei mobilen Endgeräten
3.3.3 Überblick relevanter Interaktionen

3.4 Interfacedesign

3.4.1 Funktionskonzept
3.4.2 Informationsarchitektur
3.4.3 Wireframes
3.4.4 Flowcharts

3.5 Form und Gestaltung

3.5.1 Typografie
3.5.2 Farben
3.5.3 GUI Elemente

3.6 Der Prototyp

4 Fazit und Ausblick

Hier nochmal der derzeitige Stand meiner Gliederung als PDF-Download inklusive Anmerkungen und bisher ungeklärten Fragen.

Posted in Konzeption | Tagged Gliederung, Inhaltsverzeichnis | Leave a response

Die liebe Technik – HTML5 vs. Flash

Auch wenn es im Moment nicht der wichtigste Punkt ist, da die technische Umsetzung bzw. die Verwendung einer entsprechenden Technologie bei mir zumindest nur Mittel zum Zweck sein soll, liegt mir die Entscheidung bereits schwer im Magen.

Varianten zur Umsetzung einer mobilen App sind neben der bereits ausscheidenden Möglichkeit einer nativen App in Java / C++, ebenfalls die Realisation als plattformübergreifende Webapp. Dabei ergeben sich zwei mögliche Technologien für die Umsetzung einer Webapp. Zum einem das in aller Munde befindliche und zukunftsträchtige HTML5 in Verbindung mit Javascript, zum anderen das über viele Jahre etablierte Flash in Form einer AIR-Anwendung.

HTML5 vs. Flash (Bildquelle: http://vitamintalent.com/vitabites/the-showdown-continues-html-vs-flash)

Ich denke mit beiden Varianten, sowohl mit Flash, als auch mit HTML5 ist die Möglichkeit einer zufriedenstellenden Umsetzung des geplanten Prototypen möglich. Stellt sich nur die Frage, welche der beiden Lösungen sich wohl eher eignen würde. Generell kommt mir aufgrund meiner Erfahrung im Umgang mit HTML, Javascript und Frameworks wie jQuery, die HTML5-Geschichte eher entgegen, als der für mich oft mühsame objektorientierte Actionscript 3.0-Ansatz. Darüber hinaus interessieren mich die Möglichkeiten die HTML5 bietet bzw. auch der Aspekt, dass die neueste HTML-Spezifikation in Zukunft wohl eine wichtige Rollen spielen wird – zumindest bin ich davon überzeugt.

Da ich mir aber das Ganze wohlüberlegt haben will, war ich auf der Suche nach Informationen die die beiden Ansätze ein wenig vergleichen und habe mir dazu eine kleine Übersicht bzw. Bewertung erstellt. Diese sollte mir ein wenig bei der Entscheidung helfen.

Eine kleine Übersicht zum Vergleich von HTML5 und Flash aus meiner persönlichen Sicht

Und dazu noch einige Quellen, die ich bezüglich des Vergleichs gefunden habe:

Vergleich bezüglich der Zeichnen-Funktionen von HTML5 und Flash
http://www.williammalone.com/articles/flash-vs-html5-canvas-drawing/

Eine kleine Slideshow, die Flex und HTML5 gegenüberstellt
http://www.slideshare.net/wuzziwug/flex-vs-html5-for-rias-presentation

Artikel zum Vergleich von HTML5 und Flash nach bestimmten Schlagworten wie Rendering, Funktionsmöglichkeiten, etc.
http://www.codecurry.com/2009/10/tag-team-death-match-flash-actionscript.html

Und noch ein Artikel der die beiden Technologien miteinander vergleicht
http://www.flashvalley.com/fv_articles/Flash_vs_HTML5/index.php

Auch noch interessant: ein PDF das sich dem Thema HTML5 an nimmt (allerdings vom Jahr 2010)
http://computerworld.com.edgesuite.net/insider/infoworld_html5_deepdive.pdf

Letztlich tendiere ich immer noch mehr zu HTML5, da mir die Hürden da etwas weniger hoch erscheinen und das Arbeiten mit einem Framework wie jQuery Mobile sicherlich sehr viel Spass macht bzw vorteilhaft ist. Wobei das natürlich immer schwer abzusehen ist. Mit Flash kann man sich sicher sein, dass man für  jegliche Problemstellungen auch Lösungen findet, während das bei HTML5 eher nicht gewährleistet ist. Bedeutet also in Bezug auf Funktionalität schlägt Flash HTML5 wohl noch um Längen. Auch der Aspekt der Kompatibilität spricht erstmal für Flash, da im Flash- bzw. AIR-Player die Inhalte immer gleich wiedergegeben werden, während man bei HTML5 von dem jeweilig verwendeten Browsern abhängig ist. Wobei gerade bei den mobilen Geräten die Browser bereits einen großen Funktionsumfang von HTML5 abbilden können. Dafür ist dann HTML5 plattformunabhängig – schwierig, schwierig.

Die endgültige Entscheidung ist noch nicht gefallen, zumal die Umsetzung nun nicht der erste Punkt meiner Bachelorarbeit sein wird, aber ich werde mich demnächst wohl entscheiden müssen. Schließlich muss man sich, egal wie die Entscheidung ausfällt auch noch in das jeweilige Thema einarbeiten. Vorsichtshalber habe ich bereits Bücher über beide Technologien vorliegen bzw. bestellt. Sicher ist sicher.

Posted in Vorbereitung | Tagged AS3, Flash, HTML5, jQuery, jQuery Mobile, plattformübergreifend, Vergleich, Webapp | 1 Response

Gedanken zum Thema und Fragen über Fragen

Nachdem ich mich parallel in das Thema eingelesen bzw. versucht habe mögliche Aufgabenstellungen und Themengebiete für die Bachelorthesis herauszuarbeiten, habe ich alles was mich in dieser Phase beschäftigt, ein wenig strukturiert und visualisiert.

Herausgekommen sind unter anderem Zusammenfassungen bezüglich der drei möglichen Themenschwerpunkte, die sich vor allem in dem geplanten interaktiven Prototypen wiederfinden könnten:

1. kollaborative Evaluation und Bewertung von Zeichnungen

Überblick Themengebiet kollaborative Evaluation und Bewertung von Zeichnungen

2. kollaborative Überarbeitung von Zeichnungen

Überblick Themengebiet kollaborative Überarbeitung von Zeichnungen

3. kollaboratives Zeichnen an sich

Überblick Themengebiet kollaboratives Zeichnen an sich

Darüber hinaus habe ich nach Gesprächen mit Herrn Prof. Tille, aber auch nach eigenem Überlegen für mich festgehalten bzw. herausgefiltert, welche Themenschwerpunkte sich nun in der interaktiven Anwendung wiederfinden sollen.

Herausgekommen ist dabei, dass die Evaluation und Bewertung in Kollaboration, sowie die Möglichkeit der kollaborativen Überarbeitung von Zeichnungen die interessanteste Variante darstellt.

Da meine Bachelorthesis auch die von Herrn Tille empfohlene und zusammen mit Frau Monika Webers umgesetzte Forschungsarbeit zum Thema “Partizipatives Design und kollaboratives Skizzieren – Ansätze und Methoden zum gemeinsamen Entwerfen” entstanden an der HdM in Stuttgart, weiterführen möchte, erschien uns diese Kombination am vielversprechendsten. Zumal innerhalb der genannten Forschungsarbeit bereits das kollaborative Zeichnen an sich Bestandteil war, sich aber auch zeigte, dass vor allem die Evaluation und Bewertung von Zeichnungen ein weiterer interessanter Aspekt sein könnte.

Übersicht Kombination Überarbeitung und Evaluation von Zeichnungen als zentraler Bestandteil

Nachdem diese grundsätzliche Entscheidung getroffen war (eigentlich auch schon zum Teil davor), wagte ich auch mal einen Blick auf die technischen Umsetzungsmöglichkeiten bzw. Probleme, die es evtl. geben könnte. Da das Ergebnis ein interaktiver Prototyp für mobile Geräte, speziell TabletPCs werden soll, machte ich mir einige Gedanken dazu und verschaffte mir einen Überblick über mögliche Technologien und technische Fallstricke.

Hier eine kleine Übersicht bezüglich der Technischen Aspekte:

Übersicht zu technischen Umsetzungsmöglichkeiten und Problemen

Posted in Vorbereitung | Tagged kollaboratives Bewerten, kollaboratives Zeichnen, technische Aspekte, Themengebiete | Leave a response

Der Einstieg

Nun ist es also soweit – in den kommenden Monaten soll das zarte Pflänzchen meiner Bachelorarbeit gedeihen. Das Thema ist nun gewählt und weitestgehend konkretisiert, das Expose geschrieben und so langsam wird es ernst.

In der vergangenen Zeit habe ich mich im Rahmen der Themenfindung bereits versucht dem allgemeinen Thema Kollaboration und im speziellen dem Bereich des kollaborativen Zeichnens und des kollaborativen Evaluierens bzw. Bewertens von Scribbles und Zeichnungen zu nähern und mir einen Überblick zu verschaffen. Mittlerweile füllen nun so einige Papers meinen Ordner, die mit jeder Menge Textmarkierungen und Notizen geschmückt wurden (und da schließt sich der Kreis schon ein wenig bezogen auf das voraussichtliche Thema meiner Bachelorarbeit).

Quelle: KfW-Bildarchiv

So langsam bin ich nun in der Thematik drinnen, wobei es immer sehr schwierig ist, sich auch Grenzen bei der Recherche zu setzen. Oft kommt man von einem interessanten Aspekt oder Thema zum Nächsten. Ich habe viele Arbeiten und Gedanken zum Thema kollaboratives Zeichnen gelesen, aber auch einige sehr interessante Ansätze bezüglich Annotation und Tagging von Zeichnungen, als Bestandteil möglicher Evaluations- und Bewertungsformen. Darüber hinaus ebenfalls ein wenig eingelesen habe ich mich in das Thema TabletPCs, vor allem hinsichtlich der Vorteile dieses mobilen Gerätes im Bereich der Design-Kollaboration.

Während ich mich also mit der Thematik beschäftigt bzw. fleißig gelesen habe, kristallisierten sich einige wichtige und prägnante Begriffe heraus, die bezüglich meiner Thesis Relevanz haben könnten bzw. wohl auch werden.

Hier die Liste:

  • Kollaboration
    (was ist das, was zeichnet Kollaboration aus, etc.)
  • Kollaboration im Gegensatz zur Kooperation und weiterer ähnlicher Begriffe
  • Design-Kollaboration
    (warum ist gerade im Designbereich Kollaboration ein wichtiger Aspekt)
  • synchrone und asynchrone Kollaboration

noch ein paar weitere englische Begriffe:

  • Sketch Recognition
    (gemeint ist das Erkennen von Zeichnungen bzw. Formen  innerhalb digitaler Anwendungen)
  • Collaborative tagging bzw. social tagging / Folksonomy
    (das gemeinsame Taggen von Bildern, Zeichnungen, usw. als Bewertungs- /Evaluationsmöglichkeit)
  • eCollaboration
  • Sketch annotation (systems)
    (Bilder, Zeichnungen, etc. mit digitalen Notizen, Scribbles, usw. zu erweitern)

Posted in Vorbereitung | Tagged collaborative sketching, Design-Kollaboration, eCollaboration, image annotations, image labeling, Kollaboration, kollaborative Evaluation, kollaboratives Bewerten, kollaboratives Zeichnen, Kooperation, Literatur, Sketch annotation systems, Sketch Recognition, social tagging, TabletPC | Leave a response

Previous

Über diesen Blog

Auf diesem Blog werde ich den Fortschritt, Inspirationsquellen und sonstige Informationen zum theoretischen und praktischen Anteil meiner Bachelorthesis zum Thema kollaborative und kooperative Überabeitung und Evaluation bzw. Bewertung von Zeichnungen auf Basis mobiler Endgeräte (Tablet Computer) dokumentieren.

Kategorien

  • Gestaltung
  • Konzeption
  • Umsetzung
  • Vorbereitung

Archiv

  • Juli 2012 (2)
  • Juni 2012 (1)
  • März 2012 (1)
  • Februar 2012 (6)
  • Januar 2012 (5)
  • Dezember 2011 (2)

Kommentare

  • Prototyp-Konzept V 1.0 bei Vorbereitung zum Prototyp-Konzept
  • admin bei And the winner is…
  • Julian bei And the winner is…
  • And the winner is… bei Die liebe Technik – HTML5 vs. Flash

Blogroll

  • Agile Design Prozesse – BA Julian Henschel
  • Clever Seat – BA Martin Ecker
  • Fitness App – BA Fehime Cabuk
  • Grafische Tabellen – BA Hannes Fritz
  • HdM Stuttgart
  • Mobile Traveling – BA Vassilios Katsaros
  • Szenarien veranschaulichen – BA Claudia Steinau
  • The Kinect Society – BA Jens A. Walz
  • Thomas Soyter – Der Informationsdesigner | Web- / Internetagentur und Büro für Gestaltung

Copyright © 2019 | Thomas Soyter, Infodesigner

Powered by WordPress, Hybrid, and Life Collage.