Conception et évaluation d’ IHM : Introduction Anne-Marie Déry

Présentation au sujet: "Conception et évaluation d’ IHM : Introduction Anne-Marie Déry"— Transcription de la présentation:

1 Conception et évaluation d’ IHM : Introduction Anne-Marie Déry pinna@essi.fr

2 Quelques définitions CHM Communication Homme Machine
Etude de la conception des systèmes informatiques contrôle aérien, centrale nucléaire : sécurité bureautique : productivité jeux : engagement Des utilisateurs IHM Interface Homme Machine (1970) contact utilisateur système = langage d'entrée + de sortie + gestion de l'interaction Interaction Homme Machine (1980) Discipline englobant la conception, l'évaluation et le développement de systèmes interactifs

3 Problématique actuelle
Prendre en compte les avancées technologiques nouveaux supports matériels arrivée du net (masse de données + réseaux) nouveaux moyens d'interactions multimédia : son, images de plus en plus d'utilisateurs des novices aux experts Succès des interfaces ? facilité d'utilisation même si le service offert est complexe voiture vs électroménager téléphone : nouvelle gamme

4 Utilisabilité des interfaces
Facile à apprendre et à utiliser Retour d'information rassurant, informatif et immédiat La conception doit répondre aux besoins, connaissances et Caractéristiques des utilisateurs Objectif avoué : fiabilité, efficacité, productivité 3 aspects étudiés à travers le module conception, évaluation, prototypage

5 Cycle de vie des IHMs

6 IHM sur supports mobiles
Complexification de la conception ergonomique et logicielle

7 IHM sur supports mobiles
Complexification de la conception ergonomique et logicielle

8 IHM sur supports mobiles
Complexification de la conception ergonomique et logicielle

9 IHM : Ordinateur, ubiquité et mobilité
(utilisateur équipé) Ubiquité (environnement équipé)

10 Les enjeux de la mutation
Ingénierie au cas par cas insuffisante Coûts de développement et de maintenance Cohérence ergonomique entre versions De nouveaux problèmes à résoudre prendre en compte le contexte dans l'interaction Perception/modélisation/adaptation Des solutions à des problèmes anciens à revoir les techniques d'interaction : windows, icons, menus, pointing Des problèmes classiques prennent une importance particulière concevoir pour plusieurs plates-formes assurer la sécurité et la confidentialité

11 Dimensions de l ’espace problème
y s e d e s b e s o i n s Evaluation ergonomique T e s t s U t i l i s a t e u r s Espace de conception Propriétés ergonomiques C o n c e p t i o n T e s t s d ’ i n t é g r a t i o n C o n c e p t i o n l o g i c i e l l e Modèle d’architecture logicielle T e s t s U n i t a i r e s Boîtes à outils Mécanismes généraux C o d a g e

12 Dimensions de l ’espace problème
Selon trois axes Techniques d’interaction Collaboration Contexte

13 Dimensions de l ’espace problème
Selon trois axes Techniques d’interaction Collaboration Contexte

14 Système interactif sensible au contexte
capable d’identifier les circonstances qui entourent l’action utilisateur en vue d’offrir des services contextualisés offre sélective d’information décoration contextuelle pour recherche ultérieure Contexte : ensemble de propriétés de phénomènes physiques qui peuvent être captées

15 Système interactif sensible au contexte

16 Applicatifs envisagés
Localisation de l’utilisateur Identification et localisation de dispositifs d’interaction

17 Projets IHM Aller voir les Simulateurs de plongée :
Qualité du prototype Aller voir Poly’Table Pour l’analyse de l’existant Au niveau matériel Pour le contexte d’usage très particulier Questionnaire Dans la vitrine :

18 Existant bar « Intermission » de l'université de Westminster
Société Escapsim Un million de livres, 6 tables, pour communiquer, jouer et commander. un écran sortant d'une table Caisse enregistreuse tactile /texts/logiciel-de-caisse-tactile Table tactile à usage militaire Société TouchTable navigation poussée, très chères, domaines de pointes, ou gouvernement.

19 Dimensions de l ’espace problème
Selon trois axes Techniques d’interaction Collaboration Contexte

20 Mobilité : nouveau découpage spatio-temporel
Déplacement dans l’espace Variation dans le temps : synchronisme/ asynchronisme asynchrone synchrone local distant

21 Mobilité : nouveau découpage spatial
Etude selon les lieux d’interaction et non la distance IDENTIQUE (local) DIFFERENT (distant) CONFINE lieu de l’interaction délimité VAGABOND lieu de l’interaction n’importe où ENSEMBLE DISPERSE

22 Plate-forme Magic Casque + Ecouteurs Réseau sans fils
Stylos Tablette + Extenseur de port Réseau sans fils Capteur d’orientation Camera + Micro

23 MAGIC : Travail sur le terrain de fouille
Explorer le site (Mobilité) Travailler en groupe sur le site (Collecticiel) S’informer auprès d’experts distants (Collecticiel) Comparer des objets physiques avec des objets d’une base de données (Augmentation) Accéder aux objets enlevés du site (Augmentation)

24 MAGIC : vue d’ensemble Sur la tablette : A travers le casque:
Communication (forum, mail, etc.) Coordination (carte) Production (outils d’édition) A travers le casque: Combinaison du physique avec l’informatique grâce à la passerelle

25 Terrain augmenté Un archéologue travaille Il trouve un objet
La découverte est retirée du site L’objet est sauvegardé dans une base de données Un archéologue approche de où était l’objet La découverte est virtuellement disponible

26 TROC : Interface de la tablette tactile
Menu Formules Liste Gestion des cubes Gestion du piège Historique Carte

27 Interface dans le casque
Temps de jeu Autre objet visible Objet ciblé Niveau d’énergie magique Description de l’objet ciblé Formules actives Messages Œil magique

28 Projet IHM Allez voir Easy Visit Sur la vtrine

29 Dimensions de l ’espace problème
Selon trois axes Techniques d’interaction Collaboration Contexte

30 Mobilité : Interface « Baby face »
De très nombreuses techniques d ’interaction Technique d ’interaction : plusieurs perspectives psychologie cognitive : système sensoriel informatique : technique d’interaction Technique d’interaction : plusieurs niveaux d’abstraction dispositif physique clavier, souris, écran, haut-parleur, ... Système représentationnel langue pseudo-naturelle, manipulation directe, ... Système sensoriel Système cognitif

31 Interface « Baby face » Technique d ’interaction en sortie
Son spatialisé : T = <haut- parleur, LN> RDV à 15h Soundbeam Neckset

32 Interface « Baby face » : multimodalité
Plusieurs techniques ou modalités d ’interaction Apports de la multimodalité Flexibilité/adaptabilité (contexte d ’usage) Robustesse (complémentarité, redondance) Expressivité (complémentarité) Problèmes posés Validation empirique de ces apports Etude de l’usage des modalités (choix, appropriation, etc.)

33 Interface « Baby face » : multimodalité
Go to the middle of the message Technique = <d, s> T = <caméra-doigt, gestes> T = <micro, pseudo LN> T = <ordinateur, gestes> T = <stylet, manipulation directe>

34 Interface « Baby face » : multimodalité
Magicien d ’oz Compère Sujet observé

35 Interface « Baby face » : multimodalité
Usage des modalités par les sujets Toutes commandes / Toutes sessions Vocale Tactile Gestuelle Embodied

36 Interface « Baby face » : multimodalité
Usage des techniques d ’interaction par les sujets Variabilité inter-individuelle importante dans l ’usage (fréquence, préférences variées) Spécialisation Peu de redondance et de complémentarité

37 Optimisation de l’utilisation de la Wiimote pour des présentations en salle
Eric Nouri Cédric Pein Maximilien Perrin Yannick Reynard 2007/2008 37

38 Audience Audience Etat actuel Nos objectifs

39

40

41 Variabilité importante entre les utilisateurs.
Néanmoins, il apparait que : La navigation à travers les diapositives est toujours affectée à la croix multidirectionnelle. Les fonctionnalités nécessitant un pointage sont majoritairement attribuées à « A » et à « B ».

42 42

43 Les participants Le matériel Le lieu Le dispositif
7 étudiants de l’ESSI et de l’université de Nice Le matériel Un vidéoprojecteur et un écran Un document Powerpoint Un ordinateur portable avec Bluetooth Un émetteur infrarouge Une Wiimote Le lieu Salles de cours < à 50 personnes Le participant est à plus de 4 m de l’écran Le dispositif

44

45

46 Scénario n°6 (optionnel):
Après avoir lancé le diaporama, au début de la présentation, vous souhaitez commencer par un écran noir. Puis commencez la présentation (page de titre). Scénario n°2 : Sur un schéma/graphique, dessinez un cercle, puis gommez. Scénario n°3 : Sur du texte, soulignez 2 mots consécutifs, puis gommez. Scénario n°4 : Au cours de la présentation, vous avez oublié d’insister sur un point de la diapositive n°3, vous souhaitez la retrouver en passant par le mode plan (trieuse). Réaffichez-là en plein écran. Scénario n°5 : Avez-vous une idée du temps qu’il vous reste pour votre présentation ? Scénario n°6 (optionnel): Vous souhaitez lancer l’hyperlien qui figure sur votre document Powerpoint, pouvez-vous le faire ?

47 Recueil de données par grille d’observation et questionnaire de satisfaction avec rappel des commandes: Peu d’erreurs (<8%) Problèmes avec l’efficience du mode dessin (58% jugent le contrôle difficile) L’écran noir est une fonctionnalité mineure (pour 72% des utilisateurs) Version satisfaisante pour les utilisateurs (avis favorable pour 80% des questions) Rappel des commandes sans erreurs

48 Gestion à la fois des gestures, du pointage et des boutons.
Les gestures s’activent avec un bouton. Toutes les fonctionnalités peuvent s’effectuer sans gestures.

49 Les enjeux de la mutation
Ingénierie au cas par cas insuffisante Coûts de développement et de maintenance Cohérence ergonomique entre versions Des problèmes classiques prennent une importance particulière concevoir pour plusieurs plates-formes assurer la sécurité et la confidentialité

50 Plasticité des interfaces
Un peu d’histoire … Introduction du terme à Interact’99 Capacité d’une interface à s’adapter à son contexte d’usage dans le respect de son utilisabilité Contexte d’usage Plate-forme Environnement Utilisateur (2001)

51 Cadre de référence : principes
“Spécifier 1 fois -> N Interfaces”  approche par modèles Trois groupes de modèles Domaine Contexte Adaptation Trois instanciations Ontologiques: Métadescriptifs, théorie Archetypes: spécifiques au contexte ciblé, phase “conception” Observés: exécutables, phase “exécution”

52 Les enjeux de la mutation
De nouveaux problèmes à résoudre prendre en compte le contexte dans l'interaction

53 Plasticité des interfaces : une nécessité
Problème ? Exemple SI la batterie du PC faiblit ALORS passer sur PDA SI condition ALORS action Action  Réaction

54 Cadre de référence : phase “exécution” Exécution de la réaction
Identification du Identification Reconnaissance de situation changement de Des solutions Calcul d’une réaction contexte candidates Détection de Selection d’une solution candidate changement de contexte Capture du Exécution du contexte prologue Execution de Execution de la Exécution de la réaction L’épilogue reaction

55 Objectifs du module Etude de marché et/ou réalisation de logiciels à la demande (constructeurs d’applications) Fournir un prototype adapté aux besoins clients Evaluer le coût de réalisation du produit final Mettre l’accent sur l’IHM pour le dialogue Architecture logicielle pour la mise en œuvre réelle de l’application

56 Etude centrée utilisateur
Etude d’une IHM existante : reconception Définir le modèle conceptuel de l’utilisateur Évaluer l’interface existante Dégager le modèle de conception Proposer un prototype (maquettage papier)

57 Etude centrée utilisateur
Conception d’une IHM Définir le modèle conceptuel de l’utilisateur Dégager le modèle de conception Proposer un prototype (maquettage papier)

58 Etude centrée utilisateur
Construction d’une IHM Dégager le modèle de conception Proposer un prototype reposant sur une architecture logicielle pour l’IHM

59 Mise en commun des études
Confronter les 3 prototypes Réaliser un prototype plus finalisé Faire évaluer le prototype Conclure

60 Reconception Maquettage papier Evaluation Mise en situation

61 Utilisation ergonomique Mise en situation & évaluation
d’un autoradio Mise en situation & évaluation Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Best Of 2005 ESSI Année 2004/2005

62 1 - Emplacement 2 - Utilisation
I - Notre solution II - Evaluation de notre interface II - Démonstration 1 - Emplacement Utilisation Notre objectif initial Simplifier l’ensemble des commandes Faciliter leur accès Améliorer la sécurité d’utilisation ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

63 1 - Emplacement 2 - Utilisation
I - Notre solution II - Evaluation de notre interface II - Démonstration 1 - Emplacement Utilisation L’emplacement de l’affichage Projection sur le pare-brise Temps de détournement du regard diminué ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

64 1 - Emplacement 2 - Utilisation
I - Notre solution II - Evaluation de notre interface II - Démonstration 1 - Emplacement Utilisation L’emplacement de l’affichage Technologie Head Up Display (tête-haute) Temps de détournement du regard diminué ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

65 1 - Emplacement 2 - Utilisation
Notre solution II - I - Evaluation de notre interface II - Démonstration 1 - Emplacement Utilisation L’emplacement des commandes Regroupement sur le volant Accès direct Zone tactile (pad) + 4 boutons ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

66 1 - Emplacement 2 - Utilisation
I - Notre solution II - Evaluation de notre interface II - Démonstration 1 - Emplacement Utilisation Utilisation des boutons 2 catégories de boutons Comportements différents de selon le nombre d’appuis Commandes spécifiques à la source écoutée Fonctions avancées Navigation Commandes globales de l’autoradio Fonctions liées au son Mode ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

67 1 - Emplacement 2 - Utilisation
I - Notre solution II - Evaluation de notre interface II - Démonstration 1 - Emplacement Utilisation Utilisation du pad Liste de mouvements reconnus Comportements différents selon le mouvement ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

68 1 - Emplacement 2 - Utilisation
I - Notre solution II - Evaluation de notre interface II - Démonstration 1 - Emplacement Utilisation Utilisation de l’ensemble Une commande = combinaison d’appuis et de mouvements Exemple : Monter le volume Appui sur le bouton de son Mouvement vers le haut ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

69 1 - Notre prototype 2 - Déroulement de l’évaluation 3 - Résultats
I - Notre solution II - Evaluation de notre interface II - Démonstration 1 - Notre prototype Déroulement de l’évaluation Résultats Se rapprocher d’une utilisation réelle Son ? Extraits de radios et morceaux de types différents, CD entier Affichage ? Ecran d’ordinateur Commandes ? Touches du clavier Souris d’ordinateur portable ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

70 1 - Notre prototype 2 - Déroulement de l’évaluation 3 - Résultats
I - Notre solution II - Evaluation de notre interface II - Démonstration 1 - Notre prototype Déroulement de l’évaluation Résultats Se rapprocher d’une utilisation réelle ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

71 1 - Notre prototype 2 - Déroulement de l’évaluation 3 - Résultats
I - Notre solution II - Evaluation de notre interface II - Démonstration 1 - Notre prototype Déroulement de l’évaluation Résultats Utilisation du prototype Boutons Touches du clavier Q,E, I et M Zone tactile Mouvements de la souris sans clic Possibilité de sortir de ce mode ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

72 1 - Notre prototype 2 - Déroulement de l’évaluation 3 - Résultats
I - Notre solution II - Evaluation de notre interface II - Démonstration 1 - Notre prototype Déroulement de l’évaluation Résultats Fonctionnalités implémentées Ecoute d’un CD Lecture, navigation entre les morceaux, stop Modes « répétition » et « aléatoire » Ecoute de la radio Navigation entre les préréglages Fonctions relatives au son Modification du volume ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

73 1 - Notre prototype 2 - Déroulement de l’évaluation 3 - Résultats
I - Notre solution II - Evaluation de notre interface III - Démonstration 1 - Notre prototype Déroulement de l’évaluation Résultats 4 évaluateurs étudiants Mise en situation Temps d’adaptation aux commandes Scénario d’évaluation Réactions différentes Commandes « amusantes » ESSI Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

74 Reconception Maquettage papier Evaluation Mise en situation

75 Présentation du sujet Analyse des mosaïques de télévision (CanalSat ou Free) peu intuitives mal conçues Objectif : construire un système de navigation plus intuitif. Public visé : Adolescents & adultes

76 Scénarios de l’existant
Conception des scénarios Scénarios conçus en fonction des problèmes soulevés par les utilisateurs lors de la passation du questionnaire Conception de 5 scénarios accès à une chaîne par son nom accès à une chaîne par son numéro modification du volume sonore accès à une chaîne par son thème navigation au sein des écrans de la mosaïque

77 Scénarios de l’existant
Pré-tests des scénarios Évaluation du temps nécessaire à la passation Amélioration des scénarios

78 Scénarios de l’existant
Tests des scénarios Enregistrement vidéo et papier des réponses Types d’utilisateurs : experts et novices Nombre de participant : 5 Types de mosaïques : CanalSat et Freebox

79 Modèles de tâches

80 Bilan des scénarios Résultats des tests utilisateurs
Utilisateurs insatisfaits Principales raisons : Mosaïque = chaîne 1 (a changé en janvier : chaîne 8 …) Manque d’information sur les programmes en cours Difficile de distinguer les chaînes payantes des gratuites …

81 Proposition d’amélioration
Réalisation d’un maquette de bas niveau Conçue en fonction des besoins des utilisateurs

82

83 Scénarios de la maquette
Conception de nouveaux scénarios à partir de la maquette de bas niveau En réadaptant les scénarios précédents Mise en place de 6 scénarios Navigation au sein des écrans de la mosaïque Accès à une chaîne par son thème Accès aux films prochainement diffusés Accès à une chaîne par le nom de la chaîne Ajout de chaînes dans la catégorie « mes favoris »  Achat d'une chaîne

84 Scénarios de la maquette
Modèle de tache de la maquette de bas niveau Modèle de tache de l’existant

85 Reconception Maquettage papier Evaluation Mise en situation

86 Baladeur MP3 pour enfants Questionnaire ciblé et adapté
(sujet proposé par Teresa Colombi) Encadreur: Alain Giboin Alexandre Aureli – Frédéric Laurendeau – Nicolas Rondelé – Christophe Schreiber BestOf 2005

87 Problématique Problèmes Restrictions
Lecteurs MP3 classiques non adaptés Communication difficile avec les utilisateurs Restrictions Définition d’une tranche d’âge Chargement du contenu par les parents Nécessité d’utiliser un matériel adéquat

88 Démarche préalable (1/5)
Choix du public visé Évolution rapide des enfants en bas âge Dextérité Capacité de raisonnement Choix de viser les 3-6 ans Facteur limitant des 3 ans Appareil attractif pour un enfant de 6 ans

89 Démarche préalable (3/5)
Réalisation d’un questionnaire Données visées Habitudes d’écoute Connaissances technologiques Préférences visuelles Attente des futurs utilisateurs Démarche Sondage par l’instituteur Rédaction des directives Nécessité d’avoir un questionnaire Ludique (captiver l’attention des enfants) Pédagogique (nécessité d’une finalité pour chaque activité)

90 Démarche préalable (4/5)

91 Démarche préalable (5/5)
Retours du questionnaire Modification de la démarche Mis en œuvre trop lourde Sondage individuel Pas d’influence extérieure Remplissage assisté par l’instituteur Exploitation des résultats Analyse des résultats Dégager les tendances générales Impact sur le prototype Nouvelle apparence (forme, disposition) Ajout de fonctionnalités

92 Prototype (2/4) Evolution du prototype Première version Version finale
Travail sur les coques amovibles (Clémentine Némo and co)

93 Reconception Maquettage papier Evaluation Mise en situation

94 Gestaction 3D Mise en situation : un vrai prototype

95 Rapport d'activité AVANCEES TECHNIQUES - Construction des gants

96 Rapport d'activité AVANCEES TECHNIQUES Webcam Traitement des images
Détection des diodes Problèmes et limites

97 Rapport d'activité Mise en place de l’évaluation

98 2 autres projets à regarder
HelpMeDoc et son rapport Démarche centrée utilisateur (vitrine.polytech.unice.fr) ePhotoBook et sa présentation Démarche et prototype (en ligne) Et beaucoup d’autres……

99 Merci à … Laurence Nigay (IMAG) :
Exposé de synthèse aux Asisses I3 Marie THILLIEZ (Université de Valenciennes) : LES APPLICATIONS DE PROXIMITE Gaëtan Rey, Joëlle Coutaz (IMAG) : LE CONTEXTEUR: UN MODELE COMPUTATIONEL POUR LE CONTEXTE Joelle Coutaz et Gaelle Calvary (IMAG) : Plasticité des interfaces Jullien Bouchet, Laurence Pasqualetti (IMAG) SYSTEMES MIXTES MOBILES ET COLLABORATIFS TROC : UN JEU COLLABORATIF SUR SUPPORT MOBILE EXPLOITANT DES TECHNIQUES DE REALITE AUGMENTEE Et à tous les étudiants qui ont fournis d’aussi bons projets .....