ucanvas: Interaktive Anzeigeflächen auf heterogenen Oberflächen Tobias Bagg und Yves Grau Projekt-INF-Tagung Stuttgart 07.11.2013
Agenda Einleitung Verwandte Arbeiten ucanvas Architektur Applikationen Food Ninja Mind-Mapper Benutzerstudie Fazit & Ausblick 2
Einleitung Motivation allgegenwärtige Displays eingeschränkte Interaktionsmöglichkeit nahezu jeder besitzt ein Smartphone ucanvas (Ubiquitous Canvas) Android Applikation Interaktionsmöglichkeit mit jedem Display (mit Internetverbindung) einfache, schnelle und intuitive Bedienung 3
Kalibrierung 4
Verwandte Arbeiten bereits unterschiedliche Ansätze vorhanden um Anzeigeflächen interaktiv zu nutzen erste Versuche von Bolt (1980) per Sprache und Geste[2] Ballagas et al. nutzen Kameras von Smartphones um einen Cursor zu bewegen[1] http://jeroenarendsen.nl/pics/put-that-there-original-sma.jpg Quellen: 1) R. Ballagas, M. Rohs, and J. G. Sheridan. Sweep and point and shoot: phonecam-based interactions for large public displays. In CHI 05 extended abstracts on Human factors in computing systems, pages 1200 1203. ACM, 2005 2) R. A. Bolt. Put-that-there: Voice and gesture at the graphics interface. In Proceedings of the 7th annual conference on Computer graphics and interactive techniques, SIGGRAPH 80, pages 262 270, New York, NY, USA, 1980. ACM. 5
ucanvas Architektur Bestandteile Benutzer Client (Smartphone) ucanvas Server Bildschirme (Browser) 6
ucanvas Architektur: Interaktionsclient Benutzer Clients Android App Beschleunigungs- und Magnetfeldsensor schickt UDP-Pakete an Server Struktur von Anwendung abhängig enthaltene Informationen: Sensorwerte (Cursorposition), kodierte Aktionen, zusätzliche Daten wie z.b Text Filtern der Sensordaten per Tiefpassfilter vermindert Zittern des Cursors 7
ucanvas Architektur: Server 3 Dienste UDP-Server vermittelt Pakete der Smartphones an alle Bildschirme eines Canvas Websockets Bildschirme werden per Websocket gesteuert HTTP-Server abhängig von Anwendung: Speichern des Zustand jedes Canvas 8
ucanvas Architektur: Darstellung Bildschirme (Browser) Darstellung der Applikation kommunizieren per Websocket mit ucanvas-server führen Befehle mit Hilfe einer Javascript Library aus http://www.cmbsysteme.de/images/product_images/big_images/464_2_public_display_1.jpg 9
Beispiel-Applikationen Mind-Mapper Food Ninja 10
Applikationen: Food Ninja Menü Food Ninja Spiel Food Ninja 11
Applikationen: Food Ninja LimeJS (limejs.com) Game framework 12
Applikationen: Food Ninja 13
Applikationen: Mind-Mapper 14
Applikationen: Mind-Mapper jsplumb (jsplumbtoolkit.com) Befehle der Nutzer werden auf diese Library gemappt 15
Applikationen: Mind-Mapper 16
Benutzerstudie Teilnehmer 10 Probanden (männlich) Durchschnittsalter 25 Jahre mit akademischem Hintergrund Ablauf Einweisung Kalibrierung + Test Aufgaben zu den Applikationen lösen Bewertung 17
Benutzerstudie Fragebögen Questionnaire for User Interaction Satisfaction (QUIS) System Usability Scale (SUS) 75,75 semistrukturiertes Interview 18
Benutzerstudie 19
Fazit & Ausblick einfaches, schnelles und intuitives System freie Bewegung vor Bildschirmen ermöglichen Android Applikation durch mobile Web-Applikation ersetzen Note bei der Konferenz CHI2014 eingereicht 20