ucanvas: Interaktive Anzeigeflächen auf heterogenen Oberflächen

Transkript

1 ucanvas: Interaktive Anzeigeflächen auf heterogenen Oberflächen Tobias Bagg und Yves Grau Projekt-INF-Tagung Stuttgart

2 Agenda Einleitung Verwandte Arbeiten ucanvas Architektur Applikationen Food Ninja Mind-Mapper Benutzerstudie Fazit & Ausblick 2

3 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

4 Kalibrierung 4

5 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] 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 ACM, ) 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 , New York, NY, USA, ACM. 5

6 ucanvas Architektur Bestandteile Benutzer Client (Smartphone) ucanvas Server Bildschirme (Browser) 6

7 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

8 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

9 ucanvas Architektur: Darstellung Bildschirme (Browser) Darstellung der Applikation kommunizieren per Websocket mit ucanvas-server führen Befehle mit Hilfe einer Javascript Library aus 9

10 Beispiel-Applikationen Mind-Mapper Food Ninja 10

11 Applikationen: Food Ninja Menü Food Ninja Spiel Food Ninja 11

12 Applikationen: Food Ninja LimeJS (limejs.com) Game framework 12

13 Applikationen: Food Ninja 13

14 Applikationen: Mind-Mapper 14

15 Applikationen: Mind-Mapper jsplumb (jsplumbtoolkit.com) Befehle der Nutzer werden auf diese Library gemappt 15

16 Applikationen: Mind-Mapper 16

17 Benutzerstudie Teilnehmer 10 Probanden (männlich) Durchschnittsalter 25 Jahre mit akademischem Hintergrund Ablauf Einweisung Kalibrierung + Test Aufgaben zu den Applikationen lösen Bewertung 17

18 Benutzerstudie Fragebögen Questionnaire for User Interaction Satisfaction (QUIS) System Usability Scale (SUS) 75,75 semistrukturiertes Interview 18

19 Benutzerstudie 19

20 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