Présentation du projet FEDER européen Ubiloop (novembre 2010 - avril 2013) pour le prix jeune SEE Midi-Pyrénées / CISEC 2012, qui a pour objectif de permettre aux citoyens de déclarer des incidents urbains (tels que des bancs cassés, des nids de frelons ou bien encore des nids de poule) en contexte de mobilité; ici a l'aide d'un smartphone. Vidéo de présentation de l'application mobile disponible sur Vimeo : https://vimeo.com/65881501

1. Bastien Gatellier
Master 2 IHM 2011-2012
M. Marco Winkler, maître de stage
Mme Regina Bernhaupt, tuteur pédagogique
Mémoire de fin d’étudesMémoire de fin d’études
Développement d’un outil en HTML5
pour la déclaration d’incident en
contexte de mobilité

2. 2
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Plan
1.Présentation
● Projet Ubiloop
● Stage
2.Réalisations
3.Évaluation
4.Conclusions

3. 3
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Projet Ubiloop
● Acteurs :
– Équipe Interactive Critical Systems de l’Institut de Recherche en
Informatique de Toulouse
– Société Genigraph, acteur dans la gestion de produit, le
développement logiciel et la gestion de la qualité
– Institut d’Études Politiques de Toulouse
– Communauté urbaine Toulouse Métropole
● Problématique : déclaration d'incidents urbains (lampadaire
cassé, nid de frelons, nid de poule, …) en mobilité

4. 4
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Projet Ubiloop
● Dimensions explorées :
– Utilisabilité : le produit doit être utilisable
– Expérience utilisateur : le produit doit être attractif
● Méthodologie :
– Conception centrée utilisateur[1]
Stage
[1] Norme ISO 9241-210

5. 5
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Stage : objectifs
● Fournir un prototype d’application mobile de déclaration d’incident :
– Supporter son évaluation au travers de tests utilisateurs
– Fournir des outils d’enregistrement de l’activité utilisateur envers une
application mobile
● Réaliser une évaluation du prototype au travers de tests utilisateurs :
– Évaluer l’utilisabilité du prototype d’application mobile de déclaration
d’incident
– Évaluer l’expérience utilisateur de l’application mobile

6. 6
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Stage : contraintes
● Systèmes d’exploitation mobiles
● Technologies : langages de programmation web
HTML5
JavaScript
CSS
Framework
PhoneGap
Framework
jQuery Mobile
ﾲ

7. 7
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Stage : état d’avancement du projet Ubiloop
Interviews
Balsamiq Mockup Adobe Acrobat
→ Études de cas → Maquettes

8. PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
8
Prototype d’application : études de cas
Étude de cas Aspects explorés
Lampadaire cassé
Difficulté de description (car visible
uniquement la nuit)
Saisie d’informations personnelles Sécurité des données, confiance
Banc cassé
Précision de la géolocalisation, implication
sur incident mineur
Nid de frelons Perception du danger
Dépôt sauvage Interruption de la déclaration
Encombrants
Prévention d’incidents, connaissance de
l’administration locale, expériences de
cette administration
Études de cas (retenues pour le projet Ubiloop) et aspects qu’elles explorent

9. PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
9
Outils d’enregistrement de l’activité utilisateur
Objectifs :
● Fournir des outils d’enregistrement des
événements qui surviennent lorsqu’un utilisateur
interagit avec une application mobile
● Exploiter les événements enregistrés à l’aide d’un
logiciel d’analyse d’activité (Actogram Kronos 2)

10. PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
10
Outils d’enregistrement de l’activité utilisateur
● Données enregistrées au format XML[2] :
– Datage de l’événement (exemple : 10:21:40.930)
– Événement (exemple : click)
– Contexte de l’événement (exemple : bouton «Déclarer
un problème »)
Contexte de
l’événement
Événement
Datage de
l’événement
[2] David M. Hilbert, David F. Redmiles, Extracting usability Information from User Interface
Events, ACM Computing Surveys, Vol. 32, No. 4, December 2000, pp. 384–421.

11. 11
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Objectifs
● Évaluer l’utilisabilité
● Évaluer l’expérience utilisateur
… du prototype d’application mobile de déclaration
d’incident

12. 12
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Protocole : préparatifs
● Participants :
– 20 participants entre 21 et 57 ans (moyenne = 33,4 ;
écart-type = 10,64)
– Genre : 11 hommes et 9 femmes
– 1/3 d’utilisateur de l'OS iOS, 2/3 pour l’OS Android
● Matériel utilisé :
– par les participants : Smartphone Android ou iOS
– pour enregistrer l’activité des participants : outils de
logs, caméra-espion, dictaphone, screen recorder
– pour stimuler les participants dans la réalisation des
tâches : posters
Android iOS

13. 13
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Protocole : déroulement (~2 heures)
Découverte de l’application
Questionnaire démographique
Description du service Ubiloop
Discussion sur le prototype
Questionnaire sur le test
Discussion « libre »
Intérieur Extérieur
Utilisation du prototype
Tâches obligatoires
et optionnelles
Entraînement
Manipulation

14. 14
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Analyse préliminaire des données
● Bonne, voire excellente utilisabilité du prototype[3]
– score SUS recueillis entre 67,5 et 97,5 (>52,5 =
acceptable ; >75 = bonne)
● Un prototype qui fournit à l’unanimité une
expérience utilisateur correcte
[3] Aaron Bangor, Philip T. Kortum & James T. Miller (2008) : An Empirical Evaluation of the
System Usability Scale, International Journal of Human-Computer Interaction, 24:6, 574-594

15. 15
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Perspectives
● Court terme :
– Mise en ligne d’une enquête sociologique préparée par
l’Institut d’Études Politiques de Toulouse
● Long terme :
– Élaborer des recommandations quant aux améliorations à
apporter au prototype Ubiloop
– Publication d’articles scientifiques[3]
– Commercialisation de l’application mobile de déclaration
d’incidents Ubiloop
[3] Marco Winckler, Cédric Bach, Bastien Gatellier, Regina Bernhaupt (2012) : Downstream
utility of User eXperience factors along the development process: a case study.

16. 16
PrésentationPrésentation RéalisationsRéalisations ÉvaluationÉvaluation ConclusionsConclusions
Bilan
● Travail collaboratif
● Montée en compétences :
– Langages web
– Frameworks (jQuery Mobile, PhoneGap)
● Mise en place de méthodologies en Interaction
Homme-Machine :
– Prototypage
– Tests utilisateurs

17. Bastien Gatellier
Master 2 IHM 2011-2012
Avez-vous des
questions ?
Merci à la SEE et au CISEC
Merci aux partenaires du
projet Ubiloop