der hess

Sowie in der objektorientierten Programmierung gibt es auch im Interaktionsdesign für immer wieder auftretende Prozesse sogenannte Design Patterns. Diese Patterns beschreiben für bestimmte Prozesse eine oder mehrere passende Musterlösungen. Diese Musterlösungen können bei komplexeren Interaktionsprozessen miteinander kombiniert werden. Auf welie.com gibt es eine sehr gute Übersicht der Usability Design Patterns für den Bereich Web, Desktop-Anwendungen usw. Schaut mal rein, wenn ihr die Usability eurer Seite verbessern oder ein Usability Problem lösen wollt. Bei Problemen mit Fachbegriffen im Interaktionsdesign hilft euch die Interaktiondesign Enzyklopädie von Interaction-Design.org weiter. Damit aber nicht genug mit der Informationsflut, denn weitere Infos zum Thema Mensch-Maschinen Kommunikation gibt es noch in einem speziellen HCI-Mag der ACM-Crew 😉

Eine Art von Usabililty ist auch im non-interactiven Grafikbereich vorhanden. Kennt ihr es, wenn ihr ein Buch lest und auf eine Skizze verwiesen wird, die zwei Seiten vorher war. Oder wenn man auf seinen Bildschirm sehr viele aneinander gereihte Wörter lesen muss. Was ich aber viel schlimmer finde, sind schlecht aufbereitete Grafiken, die einem einen komplexen Sachverhalt erklären sollen. In unserer heutigen Fülle an Daten reichen einfach die bewährten Graphenmodelle zur Repräsentierung nicht mehr aus. Genau um diese Problematik kümmert sich der immer mehr aufblühende Informationsdesign Bereich. Denn gerade die Hauptaufgabe eines Informationsdesigner ist es komplizierte Sachverhalte in einem einfachen visuellen Kontext zu repräsentieren. In dieser Sache kann ich euch die Seite infosthetics.com sehr empfehlen. Manche experimentalen Visualisierungstechniken im Informationsdesign erinnern mich doch sehr an einige Experimente aus der Processing Szene. Hm, da gibt es doch bestimmt einen Zusammenhang...

-- UPDATE 14.04.2007 --
Ich hab einen schönen Bericht zum Thema Schönheit der Datenvisualisierung gefunden mit ein paar sehr interessanten Links.

-- UPDATE 24.01.2008 --
Die Seite UI-patterns.com liefert eine nette Übersicht über User Interface Design Patterns und bietet darüber hinaus noch mehr Infos (ein Wiki usw.) zum Thema User Interface an.

-- UPDATE 12.9.2008 --
Die Uni Basel hat ein Portal mit dem Namen interaction-patterns.org veröffentlicht. Sieht auf den ersten Blick ganz nett aus. Hoffe es entwickelt sich noch weiter!

Lange Zeit konnte man bei Flash nur auf die Interaktionsmöglichkeiten mit der Maus und der Tastatur zugreifen. Jetzt wo Flash bzw. ActionScript immer erwachsener wird, kommen ganz neue Interaktionsmöglichkeiten dazu, die dem Flashentwickler in Hinsicht auf das Interaction Design ganz neue Möglichkeiten bieten.

So kann man z.B. über ActionScript einige Sensoren (für Bewegung, Wärme usw.) ansprechen und auf deren gelieferten Werte reagieren. Makingthings.com und arduino.cc bieten diese Sensoren Baukästen mit dazugehörigen Treibern/APIs an. Beide Anwender benutzen das gleiche Hardwareprinzip. Es gibt eine Hauptplatine - ähnlich einem Motherboard - auf der dann die diversen Sensoren drauf gesteckt werden können. Die Daten werden dann von der Hauptplatine per USB an den Rechner geliefert. Durch die mitgelieferten APIs und Treiber können die Daten relativ einfach abgefangen und verarbeitet werden. Damit der Einstieg dann weiterhin so einfach wie möglich ist, bietet makingthings.com einen sehr guten Tutorialbereich an, in dem sicher fast all eure anfänglichen Fragen beantwortet werden können.

Desweitern hat es Thibault Timbert von bytearray.org geschafft Motion Capture Daten in Flash einzulesen und diese im 3D Raum sinnvoll zu visualisieren. Von dem Ergebnis war ich super überrascht, da ich bisher dachte, das wäre nur mit teuren 3D-Animationsprogrammen (wie z.B. Maya, Softimage usw.) möglich. Ich bin mal gespannt welche neuen Anwendungsgebiete sich daraus ergeben.

Für die bisher vorgestellten Möglichkeiten muss man jedoch ein bissl tiefer in die Tasche greifen und da man das nicht von jedem verlangen kann, kommen wir jetzt zu etwas einfachern und schon bekannten Interaktionstechniken der Spielekonsolen. Flash Spiele können seit jüngster Zeit mit den bekannten Kontroller der Playstation und der Wii-Konsole gesteuert werden. Joa Ebert entwickelte erfolgreich eine Kommunikation zwischen Flash und dem Wii-Controller mit Hilfe eines Socket Servers. In seinem Blog könnt ihr mehr über sein Vorgehen lesen. Auch Thibault Timbert war in dieser Richtung aktiv und entwickelte in ActionScript 3 eine Kommunikation zwischen einem analogen Gamecontroller und der Flash Technologie. Mit welchen Mitteln er diese Kommunikation erfolgreich entwickelte, könnt ihr auch in diese Fall wieder in seinem Blog nachlesen.

Zum Ende dieses Blogeintrages möchte ich euch noch auf die bildbasierte Interaktion per Webcam aufmerksam machen. In meinem Blog habe ich über dieses Thema schon einige Einträge verfasst. Deshalb hier nur 2 Verweise auf die wichtigsten Blogeinträgen:
Grundsätzliches zu Webcam Games und die kleine Linksammlung zur Webcam Interaktion.

-- UPDATE 21.03.2007 --
Die Seite wiiflash.org widmet sich ganz dem Thema des Wii Controllers in Kombination mit der Flash Technologie

-- UPDATE 16.02.2008 --
Für die Entwicklung von hardware- bzw. sensorenbasierten Interaktion hat der O Reilly Verlag ein interessantes Buch mit dem Titel Making Things Talk: Practical Methods for Connecting Physical Objects herausgebracht. Ich denke das könnte für angehende Interface und Interaction Designer ein sehr interessantes Buch sein...

-- UPDATE 31.03.2008 --
Bin letztens auf die Homepage von Phidgets gestossen. Phidgets bietet Lösungen für USB Sensing und Controlling an, die kompatibel mit ActionScript 3 sind. So kann man jetzt dank Phidget mit RFID-Sensoren arbeiten. ein Blick auf deren Homepage lohnt sich daher auf jeden Fall.

Vorab eine Einführung in die Flash Game Programmierung wäre hier allein aus Platzgründen falsch platziert, deswegen gibt es eine kleine Übersicht, die den Anfänger und den Fortgeschritten Flash Game Developer unter euch helfen soll, seine technischen und umsetzungslastigen Probleme zu lösen. Die genauso wichtige Konzeption (Storyentwicklung, Dramaturgie usw.) von Flash Games lasse ich hier erstmal wegen Mangel an guten Quellen aussen vor. Jetzt aber los...

Ein sehr gutes Tile based Tutorial und perfekt für den Einstieg in die Flash Game Programmierung gibt es von Tonypa. Das Tutorial beschäftigt sich mit dem Aufbau einer Map, Kollisionserkennung, Isometrie und vieles mehr. Wer es dann noch weiter treiben möchte, kommt bei dem Vektoren Tutorial von Tonypa voll auf seine Kosten. Für speziellere Einzelprobleme gibt es auf Flashkit.com massig Games Tutorials, jedoch ist die Seite bissl lahm und unüübersichtlich gestaltet. Die Masse an Tutorials macht das aber wieder gut.

Flash Game Programmierung ist mittlerweile sogar so beliebt, dass es schon extra Entwickler-Portale dafür gibt. Ich kann euch die Portale OutsideOfSociety und das Portal gotoandplay.it bestens empfehlen. Beide Portale bieten Tutorials, Artikel (zum Beispiel zum Thema Game Design-Patterns) und Spielereviews an. gotoandplay.it widmet sich dagegen noch dem Thema Multiuser Spiele und bietet sogar einen MultiUser Game Server für Flash Spiele an(!). Im Forum von kirupa.com kann man mit anderen Flash Game Entwicklern diskutieren und Probleme lösen.

Da man das Rad auch in der Flash Game Programmierung nicht immer neu erfinden muss, haben sich einige sehr ehrgeizige Game Developer zusammengetan und einige Tools entwickelt. Für die ActionScript 3 Flash Game Entwicklung geht die Physik Engine von Flashfisix.com und die 3D-Engine von PaperVision3D ins Rennen. Beide Tools lassen es ordentlich rocken und leuten eine neue Ära im Flash Spiele Bereich ein. Für ActionScript 2 Flash Games entwickelte Andre Michelle (einer DER Flash Game Entwickler) ein Gamepackage, welches die Gameentwicklung bei den Spieletechniken Tilemap, mode7 und Raycasting massiv unterstützen soll. Jedoch finde ich das Gamepackage nicht mehr zum Download, vielleicht werdet ihr besser fündig.

Wenn die oben genannten Links euch nicht weiterhelfen oder ihr nicht mit ActionScript programmieren wollt, dann schaut mal hier rein www.gamedev.net.

--- UPDATE --- 3.2.2007

Eine sehr gute Linkliste zur Flash Game Programmierung gibt es auf FLAshot und zum Thema Formbasierte Kollision gibt es im GSKinner Blog einen sehr guten Eintrag.

--- UPDATE --- 13.4.2007
Leider ist ja ein Spiel ohne schöne Grafik ein bissl langweilig. Auf der Flashforum Seite gibt zwei sehr nützliche Forumthreads, die euch bei diesen Problem helfen können. Thread 1 beinhaltet einige gute Links, wie man Tile und Sprite Grafiken selbst erstellen kann. Thread 2 verweist dagegen auf einige sehr umfangreiche Sprite und Tile Grafik Bibliotheken. Also nur hin wenn man grafikfaul ist 😉

-- UPDATE 3.06.2007 --
AS3 Data Structures For Game Developers is a package containing common data structures useful for game programming and application development. The project was started because Michael Baczynski wanted a unified library which he could reuse in his games.

-- UPDATE 24.06.2007 --
APE (Actionscript Physics Engine) ist eine kostenlose AS3 open source 2D Physik Engine für Flash und Flex. Programmiert hat das Ganze Alec Cove. Auf seiner Seite gibt es sogar eine Portierung seiner Engine auf Java

-- UPDATE 18.08.2007 --
Auf dem Flash Game Development Blog H1DD3N.R350URC3 bin ich auf zwei interessante Projekte gestossen. Ein Wiki für Flash Game Development und ein ActionScript 3 Framework mit dem Namen hexagon für Game Developer. Schaut mal rein!

Nach jetzt fast 4 Jahren Studium haben ich endlich meinen Schwerpunkt gefunden. Das Thema Interaktion bereitet mir so grosse Freuden, das ich mich weiter darin vertiefen möchte. Auf der Suche nach mehr Informationen zum Bereich Interaction Development bin ich auf 2 interessante Studiengänge gestossen. Interface Design an der FH Potsdam und den Masterstudiengang Interaktive Mediensysteme an der FH Augsburg. Den Studiengang Interface Design gibt es in einer Bachelor of Arts und in einer Master of Arts Version. In den beiden Versionen Bachelor und Master beschäftigen sich die Potsdammer mit Interaktion am Computer, mit haptischen Gegenstände und mit gestenbasierenden (Kamera)Systemen. Bei den Augsburger kann man sich in den Bereichen Animation, Mobile Experience und Game Development spezialisieren. Beide Studiengänge hören sich für meine spätere Masterstudiengangwahl sehr interessant an.

Da aber ein Studium allein nicht immer das Wahre ist, habe ich eine kleine Literaturliste zusammengestellt. Leider habe ich noch kein Buch davon gelesen, aber die Bücher machen mir einen sehr guten ersten Eindruck:

Designing for Interaction: Creating Smart Applications and Clever Devices

The Humane Interface. New Directions for Designing Interactive Systems

Designing Interactions mit Beispiel CD-Rom und dazugehörige Website

The Laws of Simplicity (Simplicity: Design, Technology, Business, Life) und dazugehörige Website sowie der MIT Blog dazu

Web Usability von Jakob Nielson und Hoa Loranger

--- UPDATE --- 3.2.2007
Habe einen netten östereichischen Blog zum Thema Interaction Design gefunden.

--- UPDATE --- 12.2.2007
Durch ein Tip von meinem Studienkollegen bin ich auf den eCulture Blog der eCultureFactory (unterstützt vom Fraunhofer Institut)aufmerksam geworden. Dort gibt es einige interessante Einträge zum Thema Interface Design.

--- UPDATE --- 15.3.2007
Bin neulich auf zwei schöne Interface Design Beispiele gestossen, die ich keinem vorenthalten möchte. Einmal die hand-gestenbasierte Interaktion mit Photoshop von der Hochschule für Gestaltung Schwäbisch Gmünd. Evtl. ist es die Next Generation of Bildbearbeitung. Und den schon sehr bekannten BumpTop (neue mausgestenbasierte Interaktion) von Anand Agarawala und Ravin Balakrishnan.

--- UPDATE --- 3.5.2007
Neuer Bachelor Studiengang für Interaktionsgestaltung an der Hochschule für Gestaltung Schwäbisch Gmünd eingeführt. Klingt interessant!

--- UPDATE --- 15.12.2007
Jens Franke hat in seinem Blogeintrag Weihnachtsbuchtipps eine noch umfangreichere Literaturliste zum Thema Interaction Design zusammengestellt. Wer will sollte dort mal vorbei schauen.

Allgemein:
Ein äusserst interessantes Interview mit Tim O Reilly über Web 2.0 und die Integration von Informatik in unserer täglichen Umwelt (Stichwort: Ambient Intelligence)
Spiegel Tim O Reilly Interview Teil 1
Spiegel Tim O Reilly Interview Teil 1

Spiegel Interview mit Jaron Lanier über verschobene Realitätswahrnehmumg durch digitale (soziale) Netze. Die Heise News- meldung dazu.

Und zu guter Letzt die Videogallery des Adobe Showdown Events Adobe Max 2006

Videoproduktion:
Das richtige Auswählen von Videoclips ist in der Regel ein sehr zeitaufwändiger Prozess in der Filmproduktion. Diesen Videobrowsing Prozess zu opitmieren versuchen Anat Axelrod, Yaron Caspi, Alon Gamliel und Yasuyuki Matsushita in ihrem Paper zu erklären.

Bisher musste in der Post Produktion für Rotoscoping Aufgaben sehr oft manuell selbst hand angelegt werden. Jue Wang, Pravin Bhat, R. Alex Colburn, Maneesh Agrawala und Michael F. Cohen haben ein automatisiertes Rotoscoping Verfahren entwickelt, welches sehr gute Ergebnisse liefert. Vielleicht gehört das manuelle Rotoscoping bald der Vergangenheit an.
Demovideo (Quicktime Stream)
ACM Artikel
Eine Auflistung aktueller Special FX Entwicklungen von der Washingtoner Uni

Streaming:
Eine dreiteilige Artikelserie beschäftigt sich mit dem Erfolg von Flash Video im Netz, der neue Standard (?!) für Internetvideo.
Teil 1, Teil 2 und Teil 3

Ein weitereren interessanten Artikel gibt es zum Thema Digital Rights Management (DRM) und warum es auch in Zukunft scheitern wird.
The big DRM mistake

--- UPDATE --- 18.12.2006
Wirtschafts Woche Artikel: Total vernetzt: Internet von übermorgen

--- UPDATE --- 22.3.2006
Der Timelabs Blog liefert desöfteren ganz interessante Einträge zum Thema die Zukunft der Medien (unter ökonomischer Sicht)

Nach einer Woche rumtüffteln mit meiner Webcam, habe ich es endlich geschafft, dass man mittels Webcam durch ein Menü navigieren kann. Die Grundlage der Personenextrahierung aus dem Webcambild stammt von dem Webcam Motion Detection Tutorial von Guy Watson, welches ich auf meine Bedürfnisse umgeschrieben habe. Das heisst der User erstellt ein Webcam Snapshot (er darf sich dabei nicht im Webcam-Bildbereich befinden) von seiner Umgebung. Somit erhalte ich alle Bildinformationen von seinem Hintergrund, die ich dann von dem jeweiligen aktuellen Bild (Frame) subtrahiere. Dieser Vorgang bewirkt, dass alle Pixel, die sich nicht verändern haben ein Ergebnis von Null zurückliefern (einen schwarzen Pixel). Alles was schwarz ist ist somit unaktiv, jedoch wenn ein Bereich zu z.B. 80% aus nicht schwarzen Pixel besteht, kann man davon ausgehen, dass dieser Bereich aktiv ist und eine Aktion kann ausgeführt werden.
Dieses Verfahren mittels Referenzbilderzeugung und Subtraktion funktioniert bisher ganz gut, jedoch stösst es bei Beleuchtungsänderung und bei Bildänderung durch die Automatik der Webcam an seine Grenzen. Bei solch einer Situation hilft nur noch die Erstellung eines neues Referenzbildes (Bei meinem Experiment durch den restart-Button möglich).

Probiert es mal selbst aus:

Source Code dieses Experiments

-- UPDATE 17.06.2007 --
Die CamButton Klasse wurde in Sachen Anwenderfreundlichkeit und erweiterte Funktionalität überarbeitet, so dass ihr diese Klasse sehr einfach für eure eigenen Experimente einsetzen könnt. Den Download gibt es unter Interactive Webcam Package mit ausführlicher Doku und Beispielcode zum leichteren Einstieg.

Ich hab die Links doch wieder gefunden und noch einige Beispiele mehr. Juhuu 🙂

Buttons drücken
Befreie das Bild

mehr zu der Thematik findet man noch in 2 Threads. Thread 1 und Thread 2 aus dem Flashforum

Desweiteren versorgt Intel die OpenSource Gemeinde mit einer kostenlosen C++ Bibliothek im Bereich Bildverarbeitung mit dem Namen Open CV. Die Bibliothek soll unter anderem Gesichts- und Gestenerkennungen beherrschen und noch einiges mehr. Für die C++ Programmierer auf jeden Fall mal ein Klick wert!

Auch das MIT ist in diesem Bereich akiv. Ziel ist die Erstellung komfortabler Werkzeuge für die Entwicklung interaktive Grafikanwendungen basiert auf visuellen Kamerasignalen.

-- UPDATE 15.11.2006 --
GSkinners Camera Interations

-- UPDATE 19.12.2006 --
Auch meine vorherige Hochschule (FH Wiesbaden) ist in diesem Bereich mittlerweile aktiv geworden. Einige interessante Projekte (AR-Arcanoid, AR-Soccer) unter der Leitung von Prof. Schwanecke. Auf seiner Seite gibt es unter dem Fach Computergrafik Vertiefung noch mehr Infos zum Thema VideoMotionDetection in Kombination mit 3D Umgebungen!

-- UPDATE 12.02.2007 --
Das Projekt EyesWeb Project der Universität Genua beschäftigt sich mit bildbasierter Interaktion und stellt Interessierten in diesem Bereich ein kostenloses Framework zu Verfügung. Desweiteren bietet die Uni Siegen einen Masterstudiengang Bildinformatik an, damit man in diesem Bereich dann ein wirklich wahrer Master wird 😉

-- UPDATE 11.03.2007 --
BodyPong, ein nettes Webcamspiel, das man zu zweit spielen kann. Entstanden mit der Flash Technologie und dem hier bereits erwähnten EyesWeb-Framework

-- UPDATE 17.04.2007 --
Mit Flashfilterlab.com lassen sich ganz ohne Programmierkenntnisse Webcaminteraktion realisieren. Die GUI-Oberfläche von Flashfilterlab ähnelt sehr stark dem Prinzipien von MaxMSP/Jitter. Auf der Inertnetseite kann man das Ganze auch mal testen! Bin überrascht von der Perfomance im Browser.

Jeder hat sie schon mal gesehen. Die neuen kamerabasierten Computerspielen, wo sich Menschen komisch vor den Fernseher bewegen. Die Spiele benötigen keinen Fremdkörper (Controller) mehr zum Steuern, es wird nur noch eine Kamera benötigt und den eigenen Körper zum Steuern. Das Ersetzen des Controllers durch den eigenen Körper erhöht das Gamefeeling merklich und entwickelt sich sogar langsam zu gesellschaftsfähigen Computerspielen (z.B. auf Partys). Solche Spiele sind seit einigen Monaten nicht mehr nur auf Spielkonsolen beschränkt, der neuste Trend sind Webcam Spielchen direkt im Internet. Grant Skinner dreht in dieser Richtung total ab. Seine Fluid Dynamics sehen einfach nur flashig aus. Besonders interessant für Interaktive Medieninstallationen. Bei seinem DrumKit wird der User zum Drummer, bei Fluid Game muss der User leuchtende Strahlen in einen Container lenken. Überhaupt checkt mal seine Gallery Incomplete aus und lasst euch von seinen Webcam Experimenten berauschen. Aber auch andere sind in diesem Bereich sehr aktiv, so habe ich z.B. vor einiger Zeit ein Webcam Mini Piano gefunden, doch leider hab ich den Link zu den Jungs verloren. ARGGHH.

Begeistert von den Möglichkeiten dachte ich mir, hm, sowas wäre doch auch eine nette Navigation für eine Website a la Minority Report. Scheissendreck, so einfach ist das nämlich nicht. Man muss erstmal wissen, wie man die Person und die Bewegung aus dem Bild herausfiltert. In dieser Richtung gibt das Webcam Motion Detection Tutorial von Guy Watson ein sehr gute Einführung. Doch leider reicht die Qualität der Erkennung noch nicht aus um ähnliche Spiele wie von Grant Skinner zu produzieren (es werden nicht wirklich gute Formen erzeugt um eine ordentliche Kollisionserkennung durchführen zu können). Ich denke eine Kombination von Erosionen und Dilatationen (aus dem Bereich Image Processing) könnten evtl. noch bessere Formen erzeugen und so den Menschen aus dem Bild herausextrahieren. Aber sicher bin ich mir da nicht. Das sind aber nicht die einzigsten Probleme, die es zu beachten gibt. Ein wirklich gutes Funktionieren dieser Webcam Spielchen hängt unter anderem massgeblich von der Qualität der Webcam und den Lichtverhältnissen im Raum des Users ab (Grant Skinner hat bei seinen Beispielen immer einen einfarbigen Hintergrund, das erleichtert die Extrahierung des Users merklich). Im Web habe ich bisher leider noch nichts wirklich brauchbares zu diesen Problematiken gefunden und Grant Skinner hält sich auch sehr bedeckt in seinem Blog, wie er bei der Objekterkennung vorgegangen ist. Für Hinweise bin ich euch immer sehr dankbar.