Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

LiquiData

LiquiData ist eine Multitouch-Tisch Anwendung, die es Nutzern ermöglicht ihr im Smartphone gespeichertes Bewegungsprofil zu visualisieren und öffentliche Plätze mit Fotos und Kommentaren zu versehen. Die nutzergenerierten Inhalte dienen als Empfehlungssystem, das auch von Usern exploriert werden kann, die kein Smartphone besitzen. Potenzielle Einsatzorte des Tisches können hochfrequentierte Räume sein, an denen Menschen aus unterschiedlichen Regionen aufeinander treffen. In Hotellobbys kann es z.B. dazu dienen, Hotelgästen ein exploratives Empfehlungssystem für die Umgebung zu bieten.

Das Projekt entstand im Rahmen des Kurses »Graspable Maps / 2.135 Advanced Media« im Sommersemester 2011 unter Leitung von Till Nagel.

Während der Projektfindungszeit ereignete sich eine ausgedehnte Diskussion über die Speicherung und Nutzung von Aufenthaltspositionen von Smartphone-Nutzern, ausgelöst durch die Veröffentlichung von Peter Warden und Alasdair Allan. Warden und Allan hatten im iPhone eine Datei gefunden, die das Bewegungsprofil des Nutzers trackt und auf unbestimmte Zeit speichert. Gerade in Deutschland entfachte das wieder einmal eine Diskussion über Privatsphäre und Selbstbestimmung. Anstatt neue Negativszenarios zu generieren, versuchten wir, die gesammelten Informationen für den Nutzer in einer brauchbaren Weise positiv aufzubereiten. So entstand ein Bewertungs- und Empfehlungssystem, das dem Nutzer hilft, gerade in neuen Städten mehr Orientierung zu erlangen und seine mentale Karte mit einer realen Karte abzugleichen.

Funktions Demo

Passwort: „map“ , Ein detailliertes Video mit Storyboard kommt in kürze.

liquidata-3.jpgliquidata-3.jpg
liquidata-4.jpgliquidata-4.jpg
liquidata-5.jpgliquidata-5.jpg
liquidata-6.jpgliquidata-6.jpg
liquidata-7.jpgliquidata-7.jpg

http://www.liquidata.org

Relevanz

In erster Linie ist LiquiData ein Forschungsprojekt. Zum Einen werden neue Interaktionsmöglichkeiten erprobt, wie z.B. das Smartphone als Eingabemedium für Bilder und Texte zu nutzen, sowie die Navigation durch physikalische Interaktion mit dem Smartphone. Zum Anderen stellt das Projekt unseren aktuellen Umgang mit angesammelten Daten und deren Veröffentlichung in Frage. LiquiData spielt mit dem Paradox im Umgang unserer Privatsphäre auf der einen und dem Gebrauch von social-media/web 2.0 auf der anderen Seite. Menschen nutzen die neuen Technologien und Service, verstehen die technischen Möglichkeiten dahinter aber häufig nicht, handeln blauäugig, lassen sich von der Funktionalität blenden und vergessen ihren Wunsch nach dem Schutz der Privatsphäre.

Szenario

storyboard.pngstoryboard.png

Trotz dieser kritischen Auseinandersetzung mit dem Thema, könnte das Projekt auch in einen realen und nützlichen Kontext gesetzt werden. So könnte der Tisch z.B. im Bereich Navigation/Tourismus, beispielsweise in Hotellobbys Anwendung finden.

Besucher einer neuen Stadt ziehen gerne zu Fuß umher und verschaffen sich gerne eine groben Überblick über die Stadt oder unternehmen eine Stadrundfahrt. Bei der Rückkehr in Ihr Hotel nutzen Sie den MT-Table mit der LiquiData Applikation, der (z.B.) in der Hotellobby steht. Nach dem »Ausschütten« Ihrer Daten auf dem Tisch, sehen sie, wo sie sich bereits aufgehalten haben und gegebenenfalls auch wie viele andere Hotelgäste ebenfalls an den gleichen Orten waren und diese mit Texten oder Bildern angereichert haben. Auch Nutzer ohne Smartphone haben die Möglichkeit anhand der persönlichen Eindrücke die auf den Tisch geladen wurden sich über die Umgebung zu informieren.

Modern-hotel-lobby-lounge-lighting-Ideas.jpgModern-hotel-lobby-lounge-lighting-Ideas.jpg

(Beispiel eines Einsatzortes - Hotellobby)

Konzeptentwicklung

Foto 17.05.2011 20 13 24.jpgFoto 17.05.2011 20 13 24.jpg

Nachdem die Grundidee fest stand, fingen wir mit der Ausarbeitung des Konzeptes an. In agiler Arbeitsweise, arbeiteten wir fast parallel an Konzeption, Gestaltung und Programmierung. Hierfür teilten wir uns später in Arbeitsgruppen auf. Das relativ große Team forderte jedoch zu Beginn ein gemeinsames Arbeiten am Grobkonzept, um eine einheitliche Sprache untereinander zu entwickeln und um Missverständnisse zu vermeiden. Um die unterschiedlichen Vorstellungen aufzudecken, schrieb jedes Teammitglied einen kurzen Elevator-Pitch, der das Projekt in kurzer Form erklärt.

Zwei der enstandenen Elevator Pitches:

Daten der consolidate.db, iPhone Bilder und Facebook Kontakte können auf einer geografischen Karte ausgeleert werden (Analogie - Flüssigkeit). Diese dienen als Kommunkikationsgrundlage überall dort, wo Menschen aus verschiedenen Regionen aufeinandertreffen (Hotel/Hostel, Messen etc).

In dem Saftprojekt geht um die Sichtbarmachung der versteckt auf dem Smartphone gespeicherten Bewegungs und Datenprofile. Profile sind durch Flüssigkeiten repräsentiert die durch eine Kippgeste aus dem Smartphone geschüttet werden. Ziel ist es kartographisch seine Bewegung im realen sowie virtuellen Raum revue passieren zu lassen und dadurch in Interaktion mit anderen zu kommen.

In regelmäßigen Meetings arbeiteten wir anhand von unterschiedlichen Methoden grobe Konzepte aus. Da wir sehr viel Wert auf prototypische Umsetzbarkeit legten, recherchierten wir zu einzelnen Ideen stets die technischen Möglichkeiten und unsere Fähigkeiten. So fingen wir schon sehr früh an, mit der consolidated.db Datei zu experimentieren, um ein Gefühl dafür zu bekommen. In der frühen Anfangsphase ging es zusammenfassend um technische Möglichkeiten, visuelle Metaphern und Datenquellen.

Datenquellen

Ausgehend von der consolidated.db, überlegten wir zusätzliche persönliche Daten, um das System zu erweitern. Auch hier experimentierten wir früh, welche Daten schon allein aus dem Smartphone entnommen werden können.

Die auf dem Smartphone gespeicherten Fotos, besitzen Metainformationen, die zusätzlich zur Zeit auch Geoinformationen bieten. Aufgrund der zahlreich vorhandenen personalisierten Daten im Netz, kamen wir früh auf die Idee, soziale Netzwerke in das Konzept mit aufzunehmen. API's bieten hierfür Schnittstellen um die Daten zu aggregieren. Facebook und Google+ schien uns, um in Kontakt zu treten über unsere Multitouch Anwendung, sehr geeignet. Bekanntheit und Nutzung deren die die Multitouch Anwendung nutzen würden, schätzten wir sehr hoch ein. Auch über Daten von Twitter, Foursquare, Flickr, Picasso dachten wir für ein mögliches einsetzen nach. Die Möglichkeiten schienen fast unbegrenzt. Durch unsere stark von Iterationen geprägte Arbeitsweise, entschlossen wir uns letztendlich die Daten auf Geoinformationen, Fotos und Kommentare zu beschränken.

Prototyping

Um auch visuell voran zu kommen, nutzten wir die Methoden des Paper-Prototypings. Unsere Anwendung basiert auf einen Multitouch Tisch, der das kollaborative Nutzen der Anwendung ermöglicht. Uns schien es ideal, ein postergroßes Papier als Grundlage unseres Low-Fidelity Prototypen zu nutzen. Im Team besprachen wir visuelle Metaphern, Funktionen und Interaktionen durch Ausprobieren und Zeichnen. Um das Gefühl der Interaktion zu simulieren legten wir ein iPhone auf das Papier. Verschiedene Use-Cases zeichneten wir direkt auf das Papier. Die sogenannten Spots, an denen Restaurants, Clubs, Bars, etc. liegen, legten wir farbige Ringe.

Foto 11.05.2011 13 34 21.jpgFoto 11.05.2011 13 34 21.jpg

Erste visuelle Ideen entstanden auf einem großen Blatt Papier. Mit Eddings skizzierten wir Interfaceelemente. Auch die Flüssigkeit als Metapher um Geodaten zu visualisieren entstand in der frühen Anfangsphase. Als Smartphone nutzten wir kleine Papiere auf denen wir das Interface skizzieren konnten.

P1020283.JPGP1020283.JPG

Interaktionen wurden im Sinne von '[Gamestorming](http://en.wikipedia.org/wiki/Gamestorming „Gamestorming“)' durchgespielt.

P1020284.JPGP1020284.JPG

P1020286.JPGP1020286.JPG

P1020287.JPGP1020287.JPG

Natürliche Gesten sollten das System intuitiver gestalten. So könnte das Smartphone gekippt werden um die Flüssigkeit auszuschütten.

P1020643.JPGP1020643.JPG

Nachdem die ersten visuellen Grundideen feststanden, fingen wir an einzelne Interaktionen prototypisch umzusetzen. So enstanden erfahrbare Prototypen um einzelne Elemente wie den Snapper zu testen.

Programmierung der Flüssigkeit

P1020760.JPGP1020760.JPG

Auch das Verhalten und Aussehen der Flüssigkeit entstand parallel zu anderen Einzelteile.

Bei der Suche nach einer Möglichkeit, Flüssigkeit zu simulieren, stießen wir schnell auf diverse Techniken, die alle auf der Grundlage eines Partikelsystems funktionierten. Der Entschluss, die Geokoordinaten in ein Partikelsystem zu überführen, war damit getroffen. Wir bedienten uns dafür der ToxicLibs, die umfangreiche Methoden zur Simulierung von Partikeln zur Verfügung stellt. Jeder vom Geo-Tracking stammenden Koordinate ist ein Partikel zugeordnet und wird durch verschiedene Einflüsse aus der Interaktion mit der Karte (Pinchen, Zoomen) animiert. Auch der Effekt des Auslaufens nach Auflage eines neuen Handys wurde mit dem Partikelsystem programmiert. Nun suchten wir nach einem Weg, die Partikel zu einer Form zusammen zu fassen, die einer Flüssigkeit ähnlich kommt. Unser erster Versuch wurde mit der Searchgeometry Library unternommen - mit mäßigem Erfolg. Zwar konnten wir mit dieser Library eine Flüssigkeit simulieren, jedoch war die Performance sehr schlecht. Ein weiterer Nachteil war, dass die Library nicht OpenSource ist und wir die gezeichnete Flüssigkeit nicht in eine Textur überführen konnten. Dies war nötig, um die Flüssigkeit als Maske für die Map zu benutzen. Daraufhin begannen wir die Recherche nach geeigneten Shakern. Prinzipiell ist das Darstellen von in sich verschmelzenden Kreisen in der Computergrafik nichts Neues. Das Stichwort ist „Metaball“. Ein Metaball ist das Ergebnis eines Algorithmus, der eine dehnbare Oberfläche erzeugt, die die Form einer Kugel oder eine Menge von ineinander gehenden Kugeln erzeugt. Der Algorithmus wurde in den frühen 1980ern von Jim Blinn entwickelt. http://de.wikipedia.org/wiki/Metaball. Es gibt diverse Anwendungen dieses Algorithmus in Java - wirklich performant läuft jedoch die Berechnung nur auf der GPU - sprich mit Shadern. Da wir keinen Shader finden konnten, der mehr als 10 Metaballs gleichzeitig berechnet, gingen wir analog vor. Im ersten Schritt zeichneten wir die Partikel als normale Quadrate auf eine Textur. Danach zeichneten wir diese Textur weich und überlagerten sie mit sich selbst. Dies führten wir mehrere Male durch, bis wir eine stark weichgezeichnete Textur erhielten, bei der sich nahegelegene Partikel überlagerten. Auf diese Textur wendeten wir einen Grenzwert an, um eine zusammenhängenden Form zu erhalten. Damit war die Darstellung der Flüssigkeit vollendet. Leider mussten wir bei einem Test auf dem Surface feststellen, dass die vorhandene ATI Grafikkarte stark veraltet war und einen nicht zu lösenden Shaderbug in den Treibern aufwies. Aus diesem Grund mussten wir wieder zurückgehen auf eine etwas langsamere Berechnung der Flüssigkeitsform durch eine Isofläche wie bei der Searchgeometry Library. Isoflächen sind Flächen, die im Raum benachbarte Punkte gleicher Merkmale oder Werte einer bestimmten Größe wie zum Beispiel Temperatur oder Dichte miteinander verbinden. Die Bedeutung von Isoflächen liegt in der computergraphischen Visualisierung von Skalarfeldern bzw. Gittern. Der Algorithmus hinter den Isoflächen ist der des Marching Cubes http://de.wikipedia.org/wiki/Marching_Cubes.

P1020745.JPGP1020745.JPG

Nach und nach wurden alle Einzelteile verheiratet und im Gesamten getestet.

Interface Elemente

elements.pngelements.png

Smartphone Das Smartphone ist das zentrale Steuerelement. Es dient der Navigation und ist das Speichermedium für die Aufenthaltsorte, die automatisch bei vielen Herstellern im Gerät gespeichert werden. Geogetaggte Fotos, die mit dem Phone gemacht wurden, können mit einer Wischbewegung zu den entsprechenden Orten auf den Tisch gezogen werden.

Snapper Der Snapper ist das Verbindungselement zwischen Smartphone und Multitouch-Tisch. Er zeichnet Verbindungslinien vom Phone zu den verfügbaren Orten. Durch die Rotation und Bewegung des Mobilgerätes können andere Punkte ausgewählt werden. Über die radiale Navigation rund um das Smartphone kann die Auswahl an Verbindungslinien eingeschränkt werden.

Orte Die einzelne Orte repräsentieren frei zugängliche Plätze, von der Eckkneipe über den Stadtpark bis zum Rathaus, die im Aufenthaltsradius des Nutzers lagen. Die Darstellung erfolgt als dreigliedriges Element, eingeteilt in Bewertungen, Kommentare und Fotos, die vom Nutzer erkundet werden können. Die Größe jedes einzelnen Bereiches ist abhängig von der Menge an hinterlegten Informationen.

Kreisnavigation Wenn ein einzelnes Element ausgewählt wurde, kann der Nutzer die hinterlegten Informationen, wie z.B. Fotos, über die Kreisnavigation ansehen.

Tisch Zentraler Speicher für die hinterlegen Inhalte ist der Surface-Multitouch-Table. Alle von Nutzern hinterlegen Informationen werden hier gespeichert und können von nachfolgenden Nutzern erkundet werden. Die abgebildete Karte ist von einer semitransparenten Fläche überlagert, die durch die Aufenthaltsorte des Nutzers freigelegt werden. Die dabei verwendete Metapher der Flüssigkeit fungiert wie eine Maske, welche den Fokus auf die ausgewählten Orte legt und gleichzeitig durch die organische Anmutung einen gewissen Aufforderungscharakter mit sich bringt. Die Form der Flüssigkeit ist abhängig von den Aufenthaltsorten des Nutzers.

Anwendungsbeispiel

liquidata_example1.jpgliquidata_example1.jpg

Auf dem Multitouch-Tables (MT) wird eine Stadtkarte angezeigt. Nach der Aktivierung der LiquiData App auf dem Smartphone legt der User dieses auf den Tisch. Die auf dem Smartphone gesammelten Aufenthaltsinformationen »fließen« wie eine Flüssigkeit auf der Karte aus. Gebiete, die bisher nicht besucht wurden bleiben von einem dunklen Schleier bedeckt. Dort, wo der Nutzer sich bereits aufgehalten hat, bleibt die Flüssigkeit liegen und gibt den Blick auf die Karte frei.

liquidata_example2.jpgliquidata_example2.jpg

Mit Hilfe des Smartphones kann der Nutzer nun einzelne Orte erkunden. Der ausgewählte Ort wird mit einer geschwungenen Line zum Smartphone verbunden. Durch verschieben und rotieren des Smartphones können andere Ort ausgewählt werden. Die radiale Navigation um das Smartphone ermöglicht es die Auswahl alternativer Orte einzuschränken. Steht kein Smartphone zur Verfügung kann der Nutzer nur bereits von anderen Nutzern »freigelegte« Orte erkunden.

liquidata_example3_640.jpgliquidata_example3_640.jpg

Bei einem ausgewählten Ort können die hinterlegten Informationen von anderen Nutzern (z.B. Bilder) angesehen werden oder eigene Kommentare geschrieben bzw. Bilder hinterlegt werden.

Technik

iphone_consolidate.jpgiphone_consolidate.jpg

Der Prototyp wurde auf Basis des Surface I von Microsoft. Zur Umsetzung wurde die open source Umgebung Processing verwendet. Für das Aussehen und Verhalten der Flüssigkeit sorgen die Libraries GLGraphics und toxiclibs. Die Multitouch Gesten funktionieren dank der TUIO Library. Für die Kartenfunktionen und -darstellung kam die Unfolding Library von Till Nagel und TileMill zum Einsatz. Die Implementierung von TileMill für Processing findet sich auf den Seiten von Till Nagel oder als kurzes Quick-Tutorial hier.

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Dr. Till Nagel

Entstehungszeitraum

Sommersemester 2011