Im Rahmen unseres Interaction Design Studiums besuchen wir das Modul Interaction in Physical Environments. In diesem Modul geht es um non-visuelle Interaktion im öffentlichen Raum. Jede Gruppe erhielt einen vorgegebenen Ort und Vibrationsboxen, die das akkustische und taktile Feedback auslösen. Unser Team besteht aus den drei Studenten Christoph Brandin, Michael Fretz und Dondup Shelkar. Als Ort unseres Projektes wählten wir die Tramhaltestelle.
Massenmedien dominieren seit Jahren den Informationsmarkt. Doch Social Softwaresysteme beginnen immer mehr an Wichtigkeit zu gewinnen. In folgendem Text werde ich Massenmedien und Social Software genauer analysieren. Ich werde von beiden Bereichen die Vorteile wie auch die Gefahren genauer aufzeigen. Die beiden Bereiche werden miteinander verglichen und die Unterschiede mit Vor- und Nachteilen aufgezeigt. Wie unterscheiden sich Massenmedien von Social Softwaresystemen und wohin bewegen wir uns in unserer Zukunft? Wo können wir als Interaction-Designer mitgestalten und was für neue Türen öffnen sich da für uns?
Zur Abwechslung mal kein Projekt von mir sondern ein Anlass welcher ich hiermit gerne unterstützen möchte.
Vom 26 Juni bis 27 Juni 2009 findet in Zürich eine Schweizer Flash User Konferenz statt.
Flash at the Lake.
Neben diversen lokalen Speakers sind auch internationale Vertreter anwesend.
Während zwei Tagen zeigt uns die Elite ihres Gebietes was mit Flash möglich ist und geben gute Inputs für zukünftige Projekte. Auch Workshops und eine Party dürfen an einem solchen Anlass nicht fehlen.
Ich würde mich freuen wenn möglichst viele von euch kommen werden.
Tickets und weitere Informationen gibt es auf www.fatl.ch
PS: Wenn es nicht gerade aus Kübeln giesst sollten die Badehosen nicht vergessen werden, denn die Location befindet sich direkt am schönen Zürichsee
complex - die moderne Art, Informationen und Events vom Computer zu visualisieren. Tauchen auch Sie ein, in eine neue Welt voller Farben…
Fabian Kuhn und Michael Fretz entwickelten eine Art Ambilight mit Echtzeitfeedback von Ereignissen welche gerade auf dem Computer des Anwenders passieren. Ob Skypenachrichten, Musik oder Emails, wenn irgendwas passiert wird dies Farblich dargestellt. Erster Laserprototyp
Nach den ersten Versuchen mit Karton und Papier haben wir eine Version in Plexiglas gelasert. Mit dem Epilog Laserschneider konnten wir ohne grossen Aufwand die gewünschte Form aus einer Illustrator Datei ausschneiden. Anschliessend haben wir den ausgeschnittenen Umriss noch in die gewünschte Form gebogen. Nun war es uns möglich, mit diesem ersten Modell des Laptophalters konkretere Versuche zu unternehmen. So konnten wir offene Fragen und Probleme klären, zum Beispiel, wie lange der Halter sein sollte, um die gewünschte Lichtmischung zu erzielen oder wie die Leuchten platziert sein müssen, damit diese einen möglichst schönen und farblich gut durchmischten Hintergrund erzeugen.
Unter Berücksichtigung dieser Erkenntnisse erstellten wir nochmals einen Kartonprototyp, welcher eine schönere und leichtere Form hatte.
Schwarzer Laserprototyp
Tags darauf kauften wir im PerPlex Shop schwarzes Plexiglas in der von uns bevorzugten Dicke. Der nun finale Grundriss wurde wiederum ausgelasert und anschliessend in die gewünschte Form gebogen. Mit dem neuen Objekt aus schwarzen Plexiglas sind wir sehr zufrieden. Die Form funktioniert sowohl als eigenständiges Objekt wie auch als Halter für ein Notebook.
Programmierung Teil 1
Nachdem der Laptopständer fertig war, mussten wir uns an die Programmierung machen. Zuerst entschieden wir uns, die Software Growl, welche für Apple verfügbar ist, zu verwenden. Diese fängt verschiedene Events des Computers ab und zeigt diese als Meldung auf dem Bildschirm an. Da Growl keine API zur Verfügung stellt, entschieden wir uns, alle Growl Meldungen an eine e-mail Adresse zu senden und diese anschliessend regelmässig zu überprüfen. Wir verwendeten dazu ein Java Programm, welches Philipp Läubli für uns programmierte. Das Programm prüfte alle 10 Sekunden, ob ein neues Email in der Mailbox vorhanden war. War dies der Fall, so sendeten wir den Inhalt des Mails an ein Processing Programm, mit welchem wir den Inhalt des jeweiligen Mails auslesen konnten und dem Inhalt entsprechend verschiedene Stadien an das Arduino sendeten. Wir stellten jedoch fest, dass dieses Vorgehen eine Verzögerung erzeugte und waren deshalb nicht zufrieden. Kurz vor Feierabend kam die Idee auf, nicht über Growl zu arbeiten, sondern die einzelnen Programme direkt anzusprechen.
Über das Skype Python API konnten wir schnell und einfach die Events von Skype abfangen. Vom Python Programm war es dann ein Leichtes, eine Verbindung zu Arduino herzustellen. Nun konnten wir die Skypenachrichten direkt nach dem absenden visuell darstellen.
Programmierung Teil 2
Nach der Entscheidung, die einzelnen Programme mit Python direkt anzusprechen, schauten wir verschiedene APIs diverser Programmhersteller genauer an. So kamen zu den Programmen, welche Events auslösen, noch Last.FM und E-mail dazu. Bei Last.FM entschieden wir uns, den Wechsel zwischen verschiedenen Musiktracks zu visualisieren. Ausserdem überprüften wir in der Mailbox, ob ein neues Mail eingetroffen war. War dies der Fall, so sendeten wir ein Signal an das Arduino.
Der Hintergrund
Dieses Projekt hat in Zusammenarbeit mit der Nimbus-Group in Stuttgart stattgefunden. Dort befindet sich auch das Nimbus Mock-Up, ein Simulationsbereich, auf welchem auf über 1500m2 die Produkte von Nimbus präsentiert werden. In Zusammenarbeit mit GIRA wurde für das Mock-Up ein Gebäudesteuerungssystem installiert, über welches primär das Licht der gesamten Ausstellungsfläche geregelt werden kann. Diese Steuerung wird mittels eines Touchscreens bedient, welchem unser Interesse galt. Das Ziel
Das Ziel des Projekts war die Entwicklung eines Navigationskonzepts und die Gestaltung eines entsprechenden GUI‘s für den Touchscreen. Damit sollte vor allem sämtliches Licht im ganzen Mock-Up gesteuert werden können. Das heisst, vom ganzen Stockwerk über einzelne Räume bis hin zu einzelnen Leuchten sollte die Lichtstimmung detailliert regelbar sein. Optional war auch die Steuerung weiterer Komponenten wie Audioquellen, Jalousien etc. denkbar. Das GUI sollte zudem an das CorporateDesign von Nimbus angepasst werden und sich gut ins Mock-Up einfügen. Und zu guter letzt gilt es auch noch zu erwähnen, dass die beste Arbeit prämiert wurde: für jeden Gewinner gab es eine Nimbus Leuchte “Line Z”. Projekt
Das Projekt LichtOn baut auf eine simple Bedienung, auf die Einfachheit des An/Aus eines Lichtschalters. Der Fokus unserer Arbeit liegt in der Schlichtheit und Usability des Programms. So zeigt sich beispielsweise der Startscreen auch gern schlicht, mit nichts weiter als einigen wählbaren Voreinstellungen in Form von simplen Buttons, welche mit einem einzigen Klick das ganze Mock-Up auf die gewünschte Helligkeit einstellen.
Die Hauptnavigation befindet sich diskret am unteren Bildschirmrand. Das Konzept sieht ausserdem als wichtigen Punkt vor, dass bei jedem Schritt nur die Interaktionselemente sichtbar sind, welche gerade benutzt werden können oder sonst von Bedeutung sind, indem sie beispielsweise auf etwas hinweisen. So werden die Elemente im Bild auf ein Minimum reduziert und die Übersichtlichkeit und Bedienbarkeit auf ein Maximum angehoben.
Grafisch ist unser Design den von der Firma Nimbus vermittelten sinnlichen Erfahrungen angepasst. Die verschiedenen Elemente sind in ihrer milchglasig/metallischen Erscheinung der Konnotation der beiden meist genutzten Materialien von Nimbus angepasst.
Im Modul: Digitaler Modulbau 3 lernten wir die Grundlagen des XML Handlings. Dazu haben wir das Vorlesungsverzeichnis der Zürcher Hochschule der Künste neu visualisiert. Die Unterschiedlichen XML Dateien werden dynamisch vom Server der ZHdK in das Projekt geladen.
Vorlesungsverzeichnis nachdem das Departement XML geladen ist.
Übersicht der Module welche in einer Vertiefung angeboten werden. Durch dir Pfeile kann durch die Module durchgeblättert werden.
Anzeige eines Moduls.
Zur Programmierung:
Die Dokumentklasse fungiert als Viewer und Controller. Alle Elemente werden hier plaziert. Je nach dem was geklickt wird, entscheidet die Dokumentklasse welches XML geladen werden soll.
Die XML Loaderklasse kann jedes beliebige XML laden. Sind die Daten geladen wird ein Dispatch Event ausgeschossen. Über get Methoden werden Name und Daten zurück geliefert.
Auszug aus der XML Loaderklasse
Die XML Manager Klasse bekommt die Daten aus der XML Loaderklasse. Die erhaltenen Daten werden in einen Array gespeichert und anschliessend wird ein Dispatch Event ausgeschossen.
Im Modul User Centered Design haben wir uns mit einer Applikation befasst, welche auf einem Touchscreen installiert ist.
Konzept und Idee:
Ein Touchscreen für ex libris Filialen zur Vor-Ort-Bestellung von Produkten aus dem Internet: www.exlibris.ch
Fokus haben wir bei unserem Prototyp auf die Sparte Musik gelegt - natürlich wäre es auch denkbar das Touchscreen um andere Produktkategorien wie Bücher, Videospiele, usw. … zu erweitern.
Während des ganzen Entwicklungsprozesses haben wir regelmässig Testbenutzer in das Projekt einbezogen.
Zu Beginn haben wir einen Paper-Prototyp entwickelt.
Den Paperprototyp haben wir mit verschiedenen Testbenutzer getestet. Das Feedback haben wir ausgewertet und anschliessend einen Prototyp in PHP und XHTML entwickelt.
Prototyp Test
Prototyp Test
Printscreen der Touchscreen Applikation
Im Hintergrund unserer Applikation verwendeten wir das PHP Last.FM API von matto1990.com. Mit Hilfe dieser Applikation konnten wir die Daten von Last.FM abfragen und für unsere Anwendung aufbereiten. Mit Script Aculos
(http://script.aculo.us) verwendeten wir das Javascript Framework welches Hauptsächlich für das Anzeigen der Daten und die Animationen eingesetzt wurde. Auch mit Javascript haben wir eine Tastatur entwickelt, welche auf dem Touchpanel eingesetzt wurde. Da wir eine Art Template verwendet haben konnten in unserer Entwicklungsphase mehrere Designs gleichzeitig auf der Applikation verwenden und diese mit einem JumpMenu einfach
umschalten.
URL zur Demo: http://ucd.michaelfretz.com
zweimal.ch ist eine Onlineplattform, auf welcher Mutilineare Stories gelesen und geschrieben werden können
Auf dieser Webseite können einerseits verschiedene Multilineare Stories gelesen werden. Dies Funktioniert so: Man wählt zuerst eine Geschichte aus und liest deren ersten Textblock. Sodann kann man zwischen mehreren verschiedenen Antworten wählen, welche zu unterschiedlichen weiteren Textblöcken führen. So kann man die Handlung der Geschichte, welche man gerade am lesen ist, selbst beeinflussen. Und auch wenn man dieselbe Geschichte nochmals von Anfang zu lesen beginnt, kann durch nur eine einzige anderst gewählte Antwort die Handlung völlig von der vorhergehenden abweichen.
Des weitere kann man eine bereits bestehende Geschichte beliebig erweitern.
Dies geht so: kommt man an einen Punkt, an welchem die Geschichte nicht mehr weitergeht oder möchte man bei einem Textblock eine weitere Antwort einfügen, wechselt man durch klick auf “Editiermodus” in den Editiermodus. Sodann kann man eine weitere Auswahlmöglichkeit hinzufügen, das heisst, man schreibt als erstes eine neue Frage. Danach kann man per DropDown entweder einen neuen Textblock erstellen oder einen bereits bestehenden verwenden.
Erstellt man einen neuen Textblock sollte man einen Titel und anschliessend den eigenen Text eingeben. Ist dies geschehen, können wiederum neue Auswahlmöglichkeiten hinzugefügt werden, und man beginnt von vorne.
Zudem kann zu jedem Textblock ein Bild raufgeladen werden.
Die Webseite ist im Rahmen des Moduls Storytelling an der ZHdK enstanden. Die Gruppenmitglieder waren: Mario von Rickenbach, Michael Fretz, Tobias Koller, Gabriel Süess, Dondup Shelkar und Phillipe Meier.
URL: www.zweimal.ch
Zusammen mit Nino Cometti und Philippe Meier habe ich am Ende des zweiten Semesters einen MP3 Player gestaltet. Der ganze Player soll aus einem elastischen Display bestehen, Lyrics anzeigen und einfach zu bedienen sein.
Projekt von Michael Fretz und Gabriel Süss im Modul «ReDesigning Standards».
Die umfangreiche Analyse des bestehenden Webauftritts von CeDe.ch, die Umfragen und die Gespräche mit verschiedenen Personen haben uns dazu bewegt, eine grafische Neugestaltung der Webseite von CeDe.ch zu erstellen. Das Angebot wurde aufgeräumt, weniger relevante Informationen weggelassen, die Anordnung verbessert und aufs Wesentliche reduziert. Neue Funktionen wurden keine hinzugefügt, lediglich die schon vorhandenen Informationen und Funktionen neu organisiert. Mit diesen Anpassungen sollte eine Verbesserung des Handlings des Webshops von CeDe.ch erreicht werden.
Ansichtmodus
