Interaction Dynamics

Aufgabe

Das Projekt hat das Ziel durch experimentelle Interaktionsmodelle auf dem Gebiet der assoziativen Mensch-Maschiene-Verständigung zu Forschen. Experimentiert wird in einer simulierten Systemumgebung, in der Repräsentanten unterschiedlicher digitaler Daten, durch zuweisung von Verhaltensmuster und Interaktion geordnet werden können. Die Aufgabe ist es nun vier verschiedene Wortpaare in Interaktionsmodelle Umzusetzen.

  • gross - klein
  • viel - wenig
  • innen - aussen
  • sichtbar - unsichtbar

Als Repräsentanten der Digitalen Daten können grafische Primitive wie Punkt, Kreis, Quadrat verwendet werden. Die Abgabe sollen vier Applikationen mit der Abmessung 500px x 500px mit einem Kurzen Beschrieb der Interaktionsmodelle sein.

Erste schritte

Nachdem ich eine Grobe Idee davon hatte, was die Aufgabe beinhaltet und einige Beispiele von möglichen Endresultaten gesehen hatte, stellte sich die Frage, wie die Applikationen umgesetzt resp. welche Technologie dazu verwendet werden sollte. Oft ist die zu wählende Technologie schon im Vorfeld klar, da sie durch die Vorgaben des Endprodukts bestimmt wird. Bei mir gab es aber verschiedene Möglichkeiten, da das Endresultat kleine Standaloneapplikationen sein sollten, die sich nicht zwingend in eine Umgebung einfügen müssen. Da ich mich bereits ein wenig mit Processing auseinandergesetzt habe und gerne etwas neues lernen wollte, entschied ich mich für JavaScript als Programmiersprache. Die grafischen Elemente, sowie die Animationen sind Bestandteil der JS-Library Raphaeljs.

Dies war aber leichter gesagt als getan. JS in Kombination mit jQuery und der besagten Grafischen Library stellten sich als harte Knacknuss zum erlernen von JS heraus. Da ich bereits geringe Vorkenntnisse in der Programmierung von Processing habe, war mein Denken schon ziemlich auf die Konzepte dieser Sprache festgefahren. Da die grundsätzlichen Abläufe in JS aber anderst funktionieren, war es für mich zu Beginn sehr schwer umzudenken. Der Grösste Unterschied besteht darin, dass Processing stark prozedural ausgeführt wird und meist JS nur durch Kommunikation verschiedener Objekte ausgelöst durch Events abläuft. Auch Syntaktisch gibt es einige grössere Unterschiede, die ich zu erst festmachen und verstehen musste. Durch Lesen verschiedener Einführungen in die Programmiersprache sowie der grossen Hilfe meines ‘Privatlehrers’ bin ich mittlerweile aber auch im Stande mich in umfangreicheren Dokumentationen schlau zu machen.

Vorgehen

Als erstes machte ich mich an die Konzeption der einzelnen Applikationen. Wie lassen sich vorgegebenen Wortpaare in Interaktionsmodelle umsetzen, sodass grafische Elements aufgrund ihrer Eigenschaften geordnet werden können? Was für Interaktionsmodelle gibt es überhaupt? Welche Arten von Interaktion machen Sinn, welche wirken gesucht und unnatürlich? Es stellten sich bereits einige Fragen. Da die Interaktion mit einem Computer viel Bewegungen, verschiedene Zustände und meistens einen Mauszeiger beinhaltet ist es fast unmöglich Ideen im Kopf zu entwickeln. Auch ein Stift und ein Blatt Papier reicht schnell nicht mehr aus um die Vorgänge verständlich aufzuzeigen. Oft müssen Erklärungen aushelfen, wo die Zeichnung allein nicht mehr ausreicht. Als weiteres Hilfsmittel, das auch gleich zur Nächsten Stufe - dem visuellen look and feel - führt habe ich Adobe Fireworks kennengelernt. Dies ist ein Grafikprogramm, das gleichzeitig dabei hilft verschiedene Zustände von Elementen darzustellen. Auch Sonst ist es für einen gestalterischen Prozess sehr hilfreich, da sehr einfach Versions von Layouts/Seiten erstellt werden könne, auf die man immer wieder zurückgreifen kann.

Während dem entwerfen von Ideen ist mir immer wieder aufgefallen, wie sehr wir von bereits bestehenden Konzepten beeinflusst werden. Nicht nur die Beispiele, die ich im Vorfeld gesehen habe, haben meine Denkweise gelenkt, sondern auch der Tägliche Umgang mit interaktiven Medien hat beträchtliche Spuren hinterlassen. Natürlich ist die Interaktion zwischen einer Maus und einem Bildschirm beschränkt, jedoch habe ich bewusst versucht eigene Möglichkeiten zu finden Elemente zu Gruppieren oder auszuzeichnen. Für die Umsetzung habe ich gesamthaft 2 Wochen aufgewendet. Am Schluss hat es mir aber nur für 3 Applikationen gereicht. Ich werde im Folgenden versuchen anhand einer einzelnen Applikation mein Vorgehen festzuhalten und zu kommentieren.

Das  Beispiel ‘innen - aussen’

Ideenentwicklung

Wie kann man anhand des Wortpaares ‘innen-aussen’ Elemente ordnen? Sollen die Elemente eine Eigenschaft aufweisen, die auf das Wortpaar schliessen lassen sodass sie anschliessend auf Grund dieser Eigenschaft geordnet werden können? Oder sollen die Elemente auf eine bestimmte Interaktionsweise ausgezeichnet werden können? Mein erster Ansatz war es, Elemente, die sich innerhalb eines anderen Elements befinden auf eine Art auszuzeichnen, sodass sich sich von den restlichen unterscheiden. Ein anderer Ansatz war es, Elemente per drag and drop in andere abzulegen, und sie anschliessend dem Elternelement anzugleichen um die Zugehörigkeit zu verdeutlichen. Beide Varianten haben mich aber nicht vollständig überzeugt, da sie sozusagen schon in jedem Dateibrowser vorzufinden sind. Einen interessanten Ansatz habe ich gefunden die Elemente zusätzlich zu unterscheiden, die sich nicht nur in einem, sondern in mehreren Elementen befinden. Es lassen sich somit Schnittmengen von übergeordneten Objekten darstellen. Es sollen Kreise aufgezogen werden können, die bereits bestehende Repräsentanten einfassen und auszeichnen resp. in ihren eigenschaften verändern.Befinden sich Repräsentanten innerhalb von Schnittmengen von Kreisen, so werden diese, je nach Anzahl der Kreise, zusätzlich ausgezeichnet. Als grober Ansatz hat mir dieses Konzept gereicht.

Look and Feel

Bei der Ausarbeitung des Visuellen Stils, war es mir zu Beginn wichtig, ein einheitliches Konzept durchzuziehen. Bestimmte Eigenschaften sollen jeweils für bestimmte Zustände und Auszeichnungen stehen. Ich habe aber schnell feststellen müssen, dass dies nicht immer ganz einfach ist. Nicht alle Modelle weisen die gleichen Zustände auf oder benötigen die gleiche Art von Auszeichnungen. Entschieden habe ich mich für Kreise als einheitliches Grafisches Formen für die Repräsentanten der Daten. Diese sollten nicht deckend sein, damit auch bei Überlagerungen von mehreren Elementen immer alle erkennbar sind. Zusätzlich kann man eine Veränderung der Transparenz auch gut als Auszeichnung bei ‘mouseover’- oder ‘click’-events verwenden. Zu beginn wollte ich Schwarz als einzige Farbe für die Elemente behalten, jedoch habe ich bemerkt, dass ein Unterschied in der Deckkraft nicht ausreicht um bestimmte Elemente visuell auszuzeichnen. Also habe ich als zusätzliche Farbe Gelb genommen.

Da jede Applikation etwas eigenständiges darstellen soll habe ich für jede eine andere Hintergrundfarbe gewählt. Einige Ideen haben zusätzlich Linien als grafische Hilfsmittel benötigt. Diese habe ich ebenfalls Schwarz gehalten, um ihnen keine zu grosse Wichtigkeit zu geben. Die Ursprüngliche Idee war es ein Startbild zu machen, das eine kurze Beschreibung der Applikation, sowie einen Start-Button beinhaltet. Die Umsetzung am Schluss ist aber etwas anders erfolgt. Dies war kein visueller Entscheid, sondern noch fehlendes technisches Know-how.

Für das Beispiel ‘innen-aussen’ habe ich nun kleine schwarze Kreise verwendet als Repräsentanten der Daten. Die aufgezogenen Kreise sollten zunächst aus einer feinen schwarzen Aussenlinie bestehen. Während der Programmierung habe ich aber bemerkt, dass sich ein Ausgefüllter Kreis besser eignet um Elemente einzufassen. Ich habe mich für ein beinahe transparentes Weiss entschieden, das bei der Überlagerung von mehreren Kreisen wie ein Schleier wirkt. Die Elemente, die sich innerhalb der Kreise befinden färben sich Gelb und werden mit zunehmender Anzahl kreise, in denen sich sich befinden deckender.

Programmierung

Der erste Schritt bei der Programmieren findet in der Regel nicht am Computer sondern auf dem Blatt statt. Das Ziel ist es in der Aufgabe oder dem Ablauf des Programms kleine einzelne Aufgaben zu erkennen. Was für Aufgaben müssen erledigt werden, was für Objekte müssen erstellt werden und wie sollte die Kommunikation unter den einzelnen Objekten erfolgen? Umso besser die Aufteilung einzelne Aufgaben ist, desto einfacher ist anschliessend die Umsetzung. Schnell merkt man aber, dass es unmöglich ist bereits im Vorfeld alle auftauchenden Probleme zu erkennen. Deswegen ist es auch nicht sinnvoll das ganze Programm zu erst auf Papier zu schreiben. Im Idealfall hat man einzelne Bausteine, die für sich alleine Funktionieren und anschliessend nur zusammengefügt werden müssen. Dies ist nur möglich wenn alle Objekte ihre Aufgaben selber erledigen und nicht zu stark von anderen abhängig sind. Wie Legosteine sollten die einzelnen Teilstücke möglichst modular bleiben. Sie sollten mit wenig Aufwand auseinander genommen und je nach dem mit anderen Stücken kombiniert werden können. Klingt leicht, ist es aber nicht (…NOCH nicht hoffe ich)!

Da JavaScript Objektorientierte Programmierung erlaubt kann man Objekte, die als solches erkannt werden auch im Programm selber als solches umgesetzt werden. Objektorientierte Programmierung ist (soviel ich bis jetzt über verschiedene Arten zu programmieren weiss) diejenige, die dem alltäglichen, menschlichen denken am nächsten kommt. Es werden Objekte erstellt, die ihre Eigenschaften besitzen und ihre Aufgaben erledigen. In der Analyse von meinem Programm bin ich zum Schluss gekommen, dass drei verschiedene Arten von Objekten brauchen werden. Die Repräsentanten der Daten, die Kreise, die aufgezogen werden können, sowie ein Objekt, dass den Austausch resp. die Kommunikation zwischen diesen Objekten erledigt.

Auf den Punkt gebracht brauchte ich die Klassen: Dot, Circle und Mediator. (Die Bennenung von Variablen, und Funktionen - hier noch einfach - stellte sich immer wieder als eine Herausforderung heraus. Einerseits sollten die Namen nicht zu lange sein andererseits sollten sie aber ihre Aufgabe/Bedeutung für das Programm möglichst gut beschreiben. So kann auch grosse Erklärung jemand anderes den Sinn verstehen ).

Als erstes habe ich eine Klasse erstellt, die einen beliebig positionierten Kreis auf der Oberfläche zeichnet, der per Drag and Drop bewegt werden kann. Die Zweite Klasse macht es möglich einen Kreis aufzuziehen.

Die Mediator Klasse sollte nun die Kommunikation regeln. Gelöst habe ich das Problem so, dass für jeden neuen Kreis getestet wird, ob sich darin Elemente befinden. Wenn ja sollten diese eine andere Färbung bekommen. Wird ein Element bewegt resp. losgelassen wird ebenfalls getestet, in wie vielen Kreisen sich dieses befindet. Zum Schluss habe ich dem Mediatorobjekt eine Funktion zugefügt, die auf Doppelklick die bestehenden Elemente am unteren Bildrand in einem Raster anordnet. Angeordnet werden sie in aufsteigender Reihenfolge nach Anzahl Kreise in denen sie sich befinden.

Was zusammengefasst einfach klingen mag, hat mich einige Stunden schweisstreibende Anstrengung gekostet. Aber es hat sich gelohnt. Das Endprodukt ist eine Startseite, von der man die drei Applikationen starten kann.

Fazit

Die Hauptsache, die ich bei dieser Aufgabe gelernt habe ist ein grundlegendes Verständnis von JavaScript. Aber auch der Ablauf der Erstellung einer Applikation inklusive visuellem Design ist mir bewusster geworden. Es macht Sinn die Aufgaben “Konzept”, “Design” und “Code” klar zu trennen und nicht zu versuchen sie zu kombinieren. Natürlich ist auch dies ein iterativer Prozess, bei dem nach der Umsetzung gewisse Grafische Gedanken nochmals überarbeitet werden können, aber es hilft enorm beim Design nicht an den Code zu denken et vice versa.


Ein anderer Punkt, der mir während der Arbeit bewusst worden ist, ist die Konzeption einer Interaktion im allgemeinen. Es gibt viel mehr zu beachten, als man im Vorfeld annimmt. Mouseover, MouseClicked, MouseOut - that’s it…von wegen! Was und wie und weshalb geschehen Animationen? Was wird wo, wie und wann platziert? Welche Farbe hat was? Und wie hat es diese Farbe, wenn das andere so oder anders gefärbt ist? Wieso ist dieser Kreis grösser als der andere? Wieso sieht das ganze eher langweilig aus resp. was macht es attraktiver? Und sowieso, weshalb lassen mich einfache Kreise Vermutungen über Ihr Verhalten anstellen ohne sie zu”kennen”? Ein kleiner Auszug von Frage, die ich mir in den letzten zwei Wochen gestellt habe. Auch wenn man wahrscheinlich Übung in deren Beantwortung bekommt, müssen sie bei jedem Problem von einer neuen Seite angegangen werden.