The Elements of User Experience
Zudem liefert das Buch eine gute Step-by-Step Anleitung für interaktive Webprodukte, welche Disziplinen (z.B. Interaction Design, Information Architecture, Interface Design usw.) benötigt werden, welche Aufgabe diese verschiedenen Disziplinen haben und wie sie miteinander interagieren müssen.
Hier eine kleine geordnete Zusammenfassung meiner wichtigsten Twittermeldungen:
Mobile:
Flash:
Flex:
Aufgrund meines Umstiegs auf WordPress wird es von mir keine seperaten Newsmeldungen mehr geben. Stattdessen verfolgt am besten meinen Twitter Status, dort werde ich in regelmässigen Abständen interessante Links posten. Damit aber nicht die alten News komplett verloren gehen, poste ich Sie hier noch einmal:
Meine Zeit bei Liip geht langsam dem Ende zu. Gelernt habe ich einiges und konnte auch ein bissl was in Form von Techtalks von meinem Wissen zurück geben.
Vielleicht findet der ein oder andere die Informationen hilfreich auf den Slides...
What I did before Liip
Kleine Vorstellung meiner Person bei Liip und und welche SKills ich für Liip mit einbringe.
Flash Lite (Mobile FLash)
Eine sehr kurze Zusammenfassung über die Geschichte und Entwicklung der mobilen Flash Plattform (Flash Lite Player), sowie ein paar Tipps, die es beim ersten Arbeiten mit Flash Lite zu beachten gilt (z.B. Memory Management).
Ars Electronica Festival 2008
Mein Review zum Ars Electronica Medien(kunst) Festival 2008 in Linz. Was für ein Festival ist es? Welche Motivationen stecken dahinter? Welche interessanten Projekte gabe es?
Der Sommer ist vorbei und die damit verbundenen Grillsessions am Fluss oder See oder andere tolle Sachen, die man draussen so anstellen kann, gehören somit der Vergangenheit an. Dazu kommt dann noch die ach so tolle frühe Dunkelheit und die schöne (Nass)Kälte, die mir persönlich so gut gefällt, dass ich mich meistens gerne abends ins Bett verziehe. Wer sich dabei langeweilt, dem kann ich nur empfehlen zum alten Printmedium Buch zurück zugreifen. Aus diesem Grund ein Blogeintrag die drohende Langeweile und Inaktivität im Winter für neue Inspirationen und Ideenentwicklungen zu nutzen. Die hier aufgelisteten Bücher aus den Disziplinen Generative Grafik, Informationsverarbeitung und Game Development können einem dabei gut unterstützen...
Generative Grafik oder Kunst
Rund um Informationsverarbeitung
(Visualisierung)
(Struktur)
(Informationsverarbeitung)Physical Computing
Game Development
(Architecture)
(Architecture)
(Technik)
(Technik)
(Design)
Vor wenigen Wochen besuchte ich die Ars Electronica in Linz, eins der grössten Medienkunstfestivals in Europa, wo die Symbiose aus Wissenschaft und Kunst Vordergrund steht. Ich bin mit vielen guten Impressionen nach Fribourg zurückgekehrt und werde ein paar für Medieninformatiker interessante Projekte vorstellen. Zudem liegt mein letzter Blogeintrag, wo ich einige interessante Medienprojekte vorgestellt habe relativ lange zurück, so dass sich da auch einige tolle neue Projekte in meiner Linkliste angesammelt haben. Los gehts:
Projects in Interaction
SAMPLINGPLONG
Bei dieser Medieninstallation von Jörg Niehage kann man mit Hand eines projezierten Mauscursors im realen physikalischen Raum Gegenstände ausführen. Sehr nette Idee Mauszeigermetapher raus aus der virtuellen Welt in die physikalische Welt zu holen.
Mehr Infos unter:
Projekthomepage
Video
Sandscape Version 2
Sandscape ist eine haptisches Mensch-Maschine Schnittstelle für ein besseres Verständnis und Design von Landschaften, was mit Hilfe eines Art Sandkasten erreicht wird.
Mehr Infos unter:
Projekthomepage
ACM Artikel
BLUI: Low-cost Localized Blowable User Interfaces
Steuerung eines Mauszeiges per Luft bzw. durch blasen. Eine interessante berührungslose Interaktionsschnittstelle, welche für Menschen mit Behinderungen (z.B. Querschnittslähmung ab Hals) eine alternative Bedienungsmöglichkeit darstellen könnte.
Mehr Infos unter:
cnet Newsmeldung
Paper (PDF)
You Tube Video
Swype (TextInput für Touchscreens)
Der Erfinder Cliff Kushler hat eine neue Eingabemöglichkeit für Touchscreens entwickelt. Man fährt über das Keyboard und das System erkennt aus den dabei getroffenen Buchstaben das richtige Wort.
Mehr Infos unter:
Projekthomepage
Golem Newsmeldung
Informationsquelle
reactable
Sicherlich kennen die Meisten den reactable schon. Meiner Meinung nach ein super Tool für kollaborative elektronische Musik und es hat auf der Ars Electronica einen sehr stabilen Eindruck gemacht.
Mehr Infos unter:
Projekthomepage
You Tube Video
TRACKS Beitrag
Levelhead
Bei Levelhead handelt es sich um ein Augmented-Reality Memory Game. Dieses Game wird mit einen Würfel gesteuert, der an den Seiten mit 2dim Barcodes beklebt ist. Eine Webcam trackt die Bewegung und erstellt den passenden 3D Raum zum jeweiligen BarCode.
Mehr Infos unter:
Projekthomepage
Vimeo Video
interaktives Theater - Tablescape Plus
Tablescape Plus ist ein interaktives Tisch-Video-Theater. Verschiedene Bilder werden auf die winzigen Bildschirmen, die aufrecht auf dem Tisch angebracht sind, projiziert.
Mehr Infos unter:
Projekthomepage
Paper (ACM)
YouTube Video
Phun
Bei Phun handelt es sich um eine kleine feine 2D Physik Engine mit einem sehr netten (Level)Editor
Mehr Infos unter:
Projekthomepage
YouTube Video
Nervous System
Organic and computational designs, which pushes the boundary of computer-based generative Art. The homepage includes some tutorials, too!
Mehr Infos unter:
Projekthomepage
Beispielprojekt
Tutorial
Structure Synth
Structure Synth ist ein Programm für die Erstellung von 3D Strukturen, die sich an ein eingegebenes Regelset vom User bzw. Programmierer orientiert.
Projekthomepage
CityEngine von Procedural
Sehr praktisch für Computer Games und Filmszenen.
Mehr Infos unter:
Firmen Homepage
Videos
Trial Version
Anderes:
Giant video wall
Einfach eine riesige Videowand! Da stellt sich demnächst sicher die Frage, wie sich Motion Design am besten in den urbanen Raum integrieren lässt. Eine Symbiose aus Architektur und (Motion) Graphic Design
Mehr Infos unter:
Informationsquelle
Blogeintrag
YouTube video
Flash Intros bzw. interaktives video
Finde diese beide Beispiele einfach sehr gut gelungen. Super Idee!
de.youtube.com/experiencewii
producten.hema.nl
Weitere interessant Projekte gibts auf dem YouTube Channel iNspIreNewMedia zu sehen. Beispielsweise unter den Playlisten:
Im Rahmen meiner neuen Anstellung als Flash und Interaction Developer beim SWR in Baden-Baden muss ich verschiedene Mobile Anwendung mit Hilfe von Flash erstellen. Da ich leider im mobilen Bereich noch nicht so mega fit bin, musste ich mir erst ein bissl theoretisches Wissen mit Hilfe von Bücherv aneignen. Hier mein kleines Fazit über die gelesene Literatur.
Das intelligente Interface von Jef Raskin
In diesem Buch geht es eher allgemein über die Interaktion zwischen Mensch und Maschine. So werden zum Beispiel von Jef Raskin einige wissenschafltichen Methoden für die Qualitätsmessung von Interaction Designs vorgestellt. Desweiteren werden immer wieder Bedienungsunterschiede zwischen Mac und PC erörtert und miteinander verglichen. Dadurch bekommt man als leser einen sehr guten Einstieg in die Materie des Interaction Design und kann die dabei auftretenden Problematiken sehr gut nachvollziehen. Wer also einen Einstieg ins (wissenschaftliche) Interaction Design sucht ist bei diesem Buch genau richtig.
Don't make me think von Steve Krug
Diese Buch beschäftigt sich hauptsächlich mit dem Thema Web Usability, jedoch lassen sich auch einige Tipps (wie z.B. das Kapitel über das richtige Wording) für andere Bereiche z.B. der GUI-Entwicklung übernehmen. Durch die sehr lockere Schreibweise und die nicht besonders hohe Seitenzahl lässt sich das Buch zudem sehr schön nebenher auf einer längeren Reise durchlesen. Ich kann auch dieses Buch nur empfehlen, die dort vermittelten Informationen bleiben wirklich sehr gut im Kopf kleben und man kann es wegen der einfachen Schreibweise auch an ganz normalen Menschen weitergeben, die sich für das Thema Web Usability ein bissl sensiblisieren wollen.
Nach dem Lesen der etwas allgemeineren Interaction Design Materie bin ich nun zum speziellen Interaction Design für kleine Displays bzw. für mobile Devices gewechselt.
Designing for Small Screens von studio 7.5
Dieses Buch befasst sich ausschliesslich mit dem Thema Screen und Interaction Design für Geräte mit geringer Display Auflösung. Anfangs gibt es eine schöne Einführung in die Entwicklungsgeschichte von Small Screen Devices (Handys, PDAs, GameBoy usw.). Danach folgen grundlegende Themen, wie z.B. die physikalischen Interaktionsmöglichkeiten an mobilen Geräten, empfohlene GUI Elemente für kleine Displays, Designrichtlinien für Text- und Farbgestaltung, und und... Was ich persönlich sehr gute an diesem Buch finde, ist das jedes Kapitel in 3 Abschnitte unterteilt ist. Kapitel A behandelt die Interaction Design Konzepte und Empfehlungen, Kapitel B zeigt die realisierten Konzepte anhand von Produktbeispielen auf und Kapitel C vermittelt dann noch mal einen tieferen (technischen) Hintergrund. Also dieses Buch ist auf jeden Fall Pflicht für jeden Mobile Interaction Designer im Anfangsstadium!
Nach dem ich jetzt viel Interaction Design Krams gelesen hatte, musste sich mein Wissen jetzt unbedingt noch auf der technischen Seite festigen. Hier entschied ich mich für ein Mobile Application Buch mit Fokus auf Flash Lite, da dass Projekt bei meinen Arbeitgeber mit Flash Lite realisiert werden soll.
Flash Applications for Mobile Devices von Richard Leggett
Dieses Buch gab mir einen sehr guten technischen Überblick was mit Flash Lite bis zur Version 2.1 alles möglich ist und worin die Flash Player Unterschiede zur PC Variante liegen. Es deckt sehr viele Bereiche des Mobile Content (Gaming, Informationfsdienste usw.) Development mit Bezug auf Flash auf und gibt zudem immer wieder weitere allgemeine Infomationen zum Mobile Markt. Diese Zusatzinformationen haben mir sehr geholfen den mobilen Bereich besser zu verstehen. Sogar aus technischer Sicht werden dem Leser viele Zusatzinformationen angeboten. So beschreibt der Autor zum Beispiel sehr genau, wie man mit Flash Lite C++ und Python Programme auf dem Handy ausführen kann. Welche Vor- und Nachteile daraus entstehen werden sehr schön erklärt. Also die perfekte technische Einführung für die Entwicklung von Mobilen Anwendung mit Hilfe von Flash Lite. Allerdings vorab, dieses Buch verlangt schon fortgeschrittene ActionScript Kenntnisse vom Leser, sonst wird es kein Spass das Buch zu lesen 😉
Mein Fazit dieser kleinen Recherchephase:
Für das Einarbeiten von Mobilen Anwendungen mit Flash bieten die Bücher Designing for Small Screens und Flash Applications for Mobile Devices genau die richtigen Einstiegshilfen. Die Bücher Das intelligente Interface und Don't make me thing geben einen guten Einstieg ins Interaction Design, sind aber nicht wirklich sehr hilfreich für die Entwicklung mobiler Anwendungen. Daher bei geringer Recherchezeit die anderen 2 Bücher lesen 😉
Es ist endlich geschafft und auch noch rechtzeitig zu Weihnachten 😉 wurde die Version 1.2 meines Interactive Webcam Packages fertig gestellt. Viel hat sich in der Funktionalität zur Version 1.0 eigentlich nicht getan, ausser dass das Interactive Webcam Package nun komplett auf ActionScript 3 portiert wurde.
Aber der damit verbundene erhebliche Perfomancesprung von ActionScript 2 auf ActionScript 3 und die neuen Open-Source Projekte (wie z.B. Papervision 3D) ermöglichen einige neue interessante Anwendungsfelder für das Interactive Webcam Package. Als kleinen Vorgeschmack und für eine bessere Vorstellung wie solch eine Kombination aussehen könnte, habe ich für euch zwei Videos meiner neuen Webcam Experimente mit hochgeladen, die in Kombination mit der Papervision3D Engine entstanden sind.
Der Sourcecode dieser Experimente liegt in dem zip-File des Interactive Webcam Packages bei, so dass jeder damit ein wenig rumspielen kann. An dieser Stelle möchte ich mich noch bei den Entwickler der Papervision3D Engine,John Grden für das XFighter Modell und Jens Franke für seinen Papervision3D Vortrag und seine Utility Klassen bedanken. Ohne diese hilfreichen Tools hätte ich diese zwei kleinen Experimente auf jeden Fall nicht so schnell realisieren können.
Nochmal kurz zum Aufbau und zur Struktur des neuen Interactive Webcam Packages. Da sich bekanntlich die Flash API Struktur von ActionScript 2 auf ActionScript 3 schon gut verändert hat, musste ich auch ein bissl an der Struktur des Interactive Webcam Packages rumschrauben. Da die Klassen aber nicht so mega umfangreich sind, hat sich eigentlich nur das Eventhandling nennenswert verändert. So dass jetzt alle Events mit der bekannten ActionScript 3 addEventListener() Funktion abgefangen und bearbeitet werden müssen. Aber über solch eine Änderung lacht ja ein eingefleischter AS3 Coder ;-). Für alle anderen offenen Punkten soll die beigelegte Dokumentation des Interactive Webcam Packages für Klärung sorgen. Dabei orientiert sich die Dokumentation an der etablierten Flash Hilfe. Aus diesem Grund sind alle möglichen Klassenmethoden und Attribute erklärt und mit Beispielcodes versehen. Sollte es dennoch Fragen oder Probleme geben, scheut euch nicht mich anzuschreiben oder hier zu posten. Ich werde dann mein Bestes geben.
Nun aber genug von mir, wünsch euch allen frohe Weihnachten und viel Spass beim Flashen im neuen Jahr!
Vor ca. über einem halben Jahr habe ich einen Blogeintrag zum Thema Die Zukunft der Medieninformatik?! verfasst. Damals ging es um Web 3.0 (bzw. das Internet der Dinge) und um ziemlich heftige Bildverarbeitungsprojekte. Auch diesmal ist die Bildverarbeitung wieder ein ein wichtiges Thema, denn sie ist auch aus einigen hier vorgestellten
Human-Computer-Interaction Beispielen nicht mehr wegzudenken (siehe Multi-Touch Bildschirme). Somit werde ich jetzt einige interessante Projekte mit einer kurzen Beschreibung vorstellen und am Ende jeder Vorstellung sind dann noch Links zur weiteren Information beigefügt.
Bildbearbeitung
Microsoft Photosynth
Photos werden inhaltlich passend 3dimensional zueinander ausgerichtet und mit Hyperlinks versehen.
Weitere Infos:
Vortrag auf der TED
Projekt Homepage
Using Photographs to Enhance Videos of a Static Scene
Ein Verfahren, welches Z-Parameter aus einem Videobild heraus extrahiert, und noch zusätzlich Fotos in das Video mappen kann um damit grössere Belichtungsspielräume (siehe HDR) im Video, Objekt- und Kamera-Shakesbearbeitung im Bild zu ermöglichen.
Weitere Infos:
Beispiel Video
Projekt Homepage
HDR Video
Das Max Planck Institut hat sich dem Thema HDR verschrieben. Einige interessante Arbeiten zum Thema HDR Video Encoding und HDR Image Processing sind daraus entstanden.
Weitere Infos:
Beispielvideo
HDR Video
Projekt Homepage
Digitales Schärfeziehen
Mit dieser Kamera kann man ein Bild aufnehmen, bei dem sich in der Post Production die Schärfeebene bearbeiten lässt.
Weitere Infos:
Beispielvideo
Projekt Homepage
netter Blogeintrag dazu
Charakter Motion Tracking Verfahren
Das Motion Trackingverfahren kommt ganz ohne die üblichen TrackingSensoren aus. Als erstes muss der Mensch durch einen 3D Scanner, wo ihm dann die Gelenkpartien zugeordnet werden. Danach kann er sich im Raum frei bewegen und die speziell ausgerichteten Kameras berechnen dann die Bewgung, und erstellen daraus die Bewegungsdaten für 3D PRogramme.
Weitere Infos:
Paper
Entwickler Homepage
Seam Carving for Content-Aware Image Resizing
Eine neue kontextbasierte Skalierung von Bildern. Das Verfahren fand eine grosse Aufmerksamkeit in der Bloggerszene. Nun will es Adobe in Photoshop integrieren.
Weitere Infos:
Paper
Beispielvideo
Umsetzung in Flash
Heliodisplay
Bei diesen Display soll es sich um ein Display aus Luft bzw. um eine Luftprojektion handeln. Mit 20.000 Dollar ist man dabei.
Weitere Infos:
Hersteller Seite
Blogeintrag dazu
Blogeintrag dazu
Mensch-Maschine Interaktion:
Multi-Touch Display
Jef Han verursachte mit seinen Mult-Touch Bildschirm einen riesigen Hype. Der Vorteil von MultiTouch Bildschirmen ist das mehrere Berührungspunkte (multi-touch) erkannt werden können, was widerum eine direkte, umfangreiche und gestenbasierte Steuerung am Display ermöglicht.
Weitere Infos:
Jef Han TED Vortrag
Microsoft Surface
Jens Frankes (Flash) MultiTouch
Tim Roths (Flash) MultiTouch
Blog zu MultiTouchs
360° Holographic Display mit 3D Interface
Ein kugelartiges Display, welches sich komplett mit den Händen steuern lässt. Ähnlich eines MultiTouch Displays.
Weitere Infos:
Paper
Entwickler Homepage
Entwickler Homepage
Entwickler Homepage
Universität
Blogeintrag dazu
DataTiles
Rekimotos hat im Jahre 2001 das grafische Interface mit einem physikalischen Interface verbunden. Eine sehr intuitive Interaktion ist daraus entstanden.
Weitere Infos:
Projekt Homepage
Mixed-Reality Painter
Das MIT hat eine Art Mixed-Reality Painter erstellt mit dem man das Gemalte beliebig im Raum positionieren kann.
Weitere Infos:
Projekt Homepage
Mobile Stadtspiele: REXplorer
Mobile Stadtspiele sind eigentlich nichts Neues, aber die RWTH hat mit ihrem REXplorer (Regensburg Tourismusführer) eine vorbildliche Umsetzung abgeliefert. Ihr System basiert auf Gestenerkennung, GPS und Smartphones.
Weitere Infos:
Projekt Homepage
Entwickler Homepage
Fernseh Beitrag
The Arcade Fire
Ein gut umgesetztes interaktives Musikvideo.
Weitere Infos:
Musikvideo
Drop Spin Fade
Mensch-Maschine Kommunikation über eine Art Fadensystem. Weiss gar nicht wie ich das erklären soll, muss man sich einfach mal anschauen.
Weitere Infos:
Projekt Homepage
Adobe Creativity Conducted
Blitz Agency präsentiert eine grosse HD Flash Interactive Leinwand, gesteuert mit Wii Remotes.
Weitere Infos:
Projekt Blogeintrag
Design
Justice - Dance
Das Musikvideo Dance von Justice ist eine hammerharte Motion Graphics und Tracking Arbeit, kombiniert mit einer geile Idee. Ein absolutes must see!
Weitere Infos:
Musikvideo
Creativity Spark From Masters Of Illustration
Eine sehr umfangreiche Gallery von Illustrationen, die die Zeichnungen wunderbar mit dem Realbild kombiniert.
Weitere Infos:
Gallery
Aukustik Hörspiel
Schon mal einen Stereobasierten Haarschnitt erlebt? Dann jetzt mal schnell die Kopfhörer aufziehen und zurücklehnen.
Weitere Infos:
Hörspiel
Ich hoffe die vorgestellten Projekte konnten euch genauso begeistern und inspierien wie mich. Ich bin immer wieder überrascht was für ein abgefahrenes Zeug von noch abgefahreren Leuten produziert wird. Schade das man im normalen Arbeitsalltag davon kaum etwas erfährt. Die absoluten Klassiker wie z.B. MS Surface sind davon mal ausgenommen. Wer sich jetzt noch ein paar Videos von kreativen Hobbybastlern und Studenten anschauen möchte, der kann gerne Stunden auf der Seite hackedgadgets.com verbringen. 😉
-- UPDATE 1.12.2007 --
Auf slashcam.de ist ein schöner Übersichtsartikel zum Thema Ausblick in der Bildtechnik erschienen. Sehr krass was da alles auf der Siggraph 2007 vorgestellt wurde. Eine noch umfangreichere Auflistung gibt es auf trowley.org.
Ich habe schon einmal in einem älteren Blogeintrag die InnoVisions Zeitschrift vom Fraunhofer-Iuk Verbund für Medieninformatiker empfohlen. Nun gibt es wieder mal einen Themenschwerpunkt im Bereich der Digitale Medien in der aktuellen Herbstausgabe. Gerade für angehende oder zukunftsorientierte Medieninformatiker sind die 3 Hauptthemen produzieren & senden (Schwerpunkt interaktives Fernseh), suchen & finden (von Video-, Ton- und Bilddateien), präsentieren & interagieren (mit Displays) eine gute Orientierungshilfe, was momentan State of the Art ist bei den Fraunhofer Jungs. Besonders gut gefallen haben mir die Projekte PointScreen und digitaler Leuchttisch. Das Projekt Rockscreen könnte gutes Potenzial haben für eine neue Spielwiese der Cyperpunks. Bei dem Projekt Rockscreen sollen nämlich grossflächige Plakate in LED-Screens umgebaut werden. Diese LED-Screens erhalten ihre Daten (Grafiken und Animationen) äber einen WLAN oder DSL Anschluss. Den mässte man dann nur noch knacken, und dann kann die Cyberpunkshow im öffentlichen Raum losgehen. 😉
Daräber hinaus gibt es noch das Special Smart Living, das sich hauptsächlich mit einem komfortableren Wohnen mit Hilfe von IT-Technologie beschäftigt. Eigentlich ein schon bissl ausgelutschter Themenbereich, aus diesem Grund wird wohl in dieser Artikelreihe auf die bestehenden Probleme und mögliche Lösungswege näher eingegangen. Alles nicht ganz uninteressant für Medieninformatiker, wenn man das Ganze hinsichtlich mediales vernetztes Zuhause und Web 3.0 (Internet der Dinge) näher betrachtet.
Zusätzlich zur Printausgabe wird von der InnoVisions-Redaktion noch ein Videocast angeboten. Ein Besuch lohnt sich an dieser Stelle auf jeden Fall mal.
