ErgoCrowd L’état de l’art Table des matières 1. Contexte ................................................................................................................. 2 2. Hardware ................................................................................................................ 2 Eye tracking ............................................................................................................... 2 Mouse tracking ........................................................................................................... 3 3. Software (applications testées) ................................................................................. 3 EyeProof .................................................................................................................... 3 Tobii .......................................................................................................................... 3 EyeQuant ................................................................................................................... 4 4. Projets open source pour l’analyse des mouvements de la souris et des eyetrackers ...... 5 Projets – acquisition, analyse ….................................................................................... 5 Librairies / projets - visualisation .................................................................................. 7 5. Conclusion .............................................................................................................. 9 1. Contexte Le projet ErgoCrowd vise à développer une plateforme preuve de concept permettant l’analyse ergonomique des sites web. Pour atteindre ce but le projet envisage à: - proposer des protocoles des tests ergonomiques - enregistrer les mouvements oculaires, les expressions faciles et les mouvements de la souris pour chaque participant au test - analyser les données en se basant sur des règles établies par les ergonomes - générer des rapports d’ergonomie. Le présent document représente une analyse détaillée des différents éléments techniques (capteurs et librairies « open source ») nécessaires. 2. Hardware Eye tracking Devices Accuracy (offset) Spatial Sampling Operating Resolution(noise) rate range API language EyeTribe($100) 0.5°-1°(<1cm at 60cm distance) 0.4°-1°(<1cm at 60cm distance) 0.5°-1° 0.1° 30Hz-60Hz 45-75 cm C++, C#, Java 0.32° >55Hz 45-80 cm C++, C# - 60Hz - C++ (TCP/IP communication) TobiiEyeX($100) Gazepoint GP31 ($500) Il n’y a pas de grandes différences entre les deux premiers capteurs sauf: - eyeTribe plus facile de prendre en main qu’EyeX - les données de sortie EyeTribe -timestamp : string -time : int (millisec) -the user position is fix? (fix: bool) -tracking state (state:int) -gaze data pixels (raw: x:int, y:int) -smoothed gaze pixels (avg: x:int, y:int) -right eye : gaze data (raw: x:int, y:int) smoothed gaze pixels (avg: x:int, y:int) pupil size (psize) pupil coordonates (pcenter: x:int, y:int) -left eye : gaze data (raw: x:int, y:int) smoothed gaze pixels (avg: x:int, y:int) pupil size (psize) pupil coordonates (pcenter: x:int, y:int) 1 Tobii EyeX -timestamp(microseconds) -tracking state -gaze data (x, y) -right eye: position from the eye tracker (x, y, z) position in track box(x, y) gaze point(x, y, z) gaze point(x, y) -left eye: position from the eye tracker (x, y, z) position in track box gaze point(x, y, z) gaze point(x, y) http://www.gazept.com/product/gazepoint-gp3-eye-tracker/ Mouse tracking Les mouvements de la souris sont aussi des informations importantes à prendre en compte pour analyser le comportement des utilisateurs. Mais contrairement aux mouvements oculaires, les données viennent d'un capteur déjà utilisé par tout le monde. Donc l’acquisition de ces données est accessible depuis tous les langages de programmation. 3. Software (applications testées) Ce chapitre présente les applications d’analyse et de visualisation des données disponibles pour les deux premiers eye trackers, ainsi que les résultats des tests effectués. EyeProof Eyeproof est la plateforme d’analyse cloud, mise à disposition par EyeTribe pour pouvoir analyser et visualiser les données capturées avec le tracker. La plateforme est encore en développement et les tests ont été faits sur une version beta. Elle est basée sur deux applications synchronisées: 1. Une application locale (disponible pour Windows and Mac) qui couvre les fonctionnalités suivantes: Calibration de l’eye tracker Enregistrement des mouvements oculaires Enregistrement des mouvements de la souris Enregistrement des captures d’écran Communication avec le cloud 2. Un site web qui couvre les fonctionnalités suivantes : Création de nouvelles études Visualisation des cartes de chaleur (heatmap), scanpath, AOI (area of interest), bee swarm Visualisation des statistiques Export de données dans un format CSV. On suppose que l’analyse concrète des données est faite dans le cloud. Tobii Le concurrent d’EyeTribe, Tobii, a développé aussi deux applications d’analyse et de visualisation : Tobii Analytics Software2 - gratuit, multiplateforme, accessible depuis C++, C++/Qt, .Net, Python, and Matlab, visualisation en temps réel Tobii Studio3 - payant, une solution complète d’analyse et de visualisation Malheureusement aucune de deux libraires ne fonctionnent pas avec les capteurs bons marchés que nous avons à notre disposition (Tobii Rex et EyeX Controller). 2 http://www.tobii.com/eye-tracking-research/global/products/software/tobii-analytics-softwaredevelopment-kit/ 3 http://www.tobii.com/en/eye-tracking-research/global/products/software/tobii-studio-analysissoftware/ EyeQuant C’est une plateforme web que fait des prédictions sur quelles parties vont être vues ou pas par les utilisateurs d’un site web qu’on souhaite tester. Pour faire les prédictions, la plateforme se base sur : un procès d’acquisition des données (eye trakers) une analyse statistique qui va corréler les caractéristiques du design avec le comportement des utilisateurs machine learning pour déterminer les combinaisons optimales de ces caractéristiques Cette plateforme peut être très utile pour tester très vite le design d’un nouveau site où pour améliorer des sites existants. La partie analyse est assez proche de la partie analyse prévue pour ce projet mais l’utilisation est assez différente. 4. Projets open source pour l’analyse des mouvements de la souris et des eyetrackers Projets – acquisition, analyse … Projet OGAMA Description Open source application Dispositif s Langage Eye Tribe Tobii C#.Net Fonctionnalités Mouse tracking Avantage s -modulaire -open source 10 modules: - enregistrement Slide design Recording - analyse Replay AOI Fixation Attention Map Saliency Database Statistic Scanpath FixationDetect or VizFix 4 Inconvénients -slide show présentation -pas très bien documenté Eye Tribe outil de recherche pour visualiser les fixations du regard et d'autres données à partir d'expériences de suivi des yeux Tobii Objective-C (Cocoa) - rejouer une session expérimentale avec des données en temps réel des mouvements oculaires superposées à l'écran - fournir une visualisation globale pour les données pour une période de temps 2 parties : un programme de visualisation et un framework qui permet le développeme Sources : http://www.tobii.com/en/eye-tracking-research/global/AM/application-market-for-tobii-eye-trackers/ http://wiki.cogain.org/index.php/Eye_Trackers https://www.linux.com/learn/tutorials/550880-weekend-project-take-a-tour-of-open-source-eye-tracking-software Lien(s)4 http://www.ogama.net / http://www.sis.uta.fi/ ~csolsp/projects.php http://www.cs.uorego n.edu/research/cmhci/VizFix/ - fournit des installations pour définir les régions d'intérêts et la collecte d'un large éventail de statistiques à partir des données des mouvements oculaires PyGaze Eyetribewebsocket Node-eyetribe PyTribe ensemble de modules Python conçus pour créer des expériences de eye-tracking Tobii Python WebSocket proxy et API JavaScript pour l’EyeTribe Tracker Application web qui prends les données du serveur EyeTribe, et les envoie vers le navigateur via un websocket (socket.io). Les données sont visualisées dans index.html avec heatmap.js Python wrapper pour EyeTribe SDK EyeTribe CoffeeScript JavaScript Node.js Heatmap.js JSON Python PyGazeAnal yser nt des extensions - présenter des stimuli visuels et auditifs - recueillir les réponses via clavier/souris - acquisition -acquisition -visualisation http://www.pygaze.or g/ C’est un projet expérimente, pas 100% fini https://github.com/kzo km/eyetribewebsocket https://github.com/wv be/node-eyetribe https://github.com/esd almaijer/PyTribe https://github.com/esd almaijer/PyGazeAnalys er Librairies / projets - visualisation Projet Heatmap.js scan-pathgraph JHeatChart 5 Description Librairie JS qui affiche un heatmap à partir d’un ensemble de points (x, y, radius, value) application Web qui importe et affiche le scanpath et les « fixation data » provenant des eyetrackers commerciaux Librairie Java simple pour générer des heatmaps Dispositif s Langage JavaScript Fonctionnalités Avantage s Inconvénients - très facile à utiliser, bon feedback PHP Python JavaScript Java Lien(s)5 http://www.patrickwied.at/static/heatmap js/ https://github.com/Sto neBird/scan-pathgraph/tree/master/js - Output heatmaps : .png, .jpg, .gif - Générer des objets Image pour un traitement ultérieur - Afficher l’image générée dans un JPanel Swing. - Couleurs, dimensions, polices etc Sources : http://www.tobii.com/en/eye-tracking-research/global/AM/application-market-for-tobii-eye-trackers/ http://wiki.cogain.org/index.php/Eye_Trackers https://www.linux.com/learn/tutorials/550880-weekend-project-take-a-tour-of-open-source-eye-tracking-software http://www.javaheatm ap.com/ entièrement personnalisa bles - échelles en couleurs linéaires, logarithmiqu es et exponentielle s 5. Conclusion Pour la partie hardware, nous allons utiliser les 2 eyetrackers à disposition (EyeTribe et Tobii EyeX). Pour la partie software, nous pouvons imaginer une architecture comme celle présentée dans la Figure 1. Il s’agit d’une application locale installée sur le PC de chaque utilisateur, qui fait l’acquisition des données provenant de l’eyetracker et de la souris, les captures d’écran et un prétraitement des données. Ensuite, il les envoie à un serveur de données qui communique avec la base des données, l’application d’analyse et l’application de visualisation (site web). Figure 1 – Architecture imaginée Concernant les technologies, il serait envisageable d’utiliser OGAMA pour l’application locale et en partie pour l’application d’analyse, et un ensemble de librairies (JavaScript) pour la visualisation des données dans l’application web (par exemple Heatmap.js).