– Page 1

Conception et évaluation d’ IHM :

Introduction

Anne-Marie Déry pinna@essi.fr

– Page 2

Quelques définitions

CHM Communication Homme MachineEtude 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

– Page 3

Problématique actuelle

Prendre en compte les avancées technologiquesnouveaux supports matérielsarrivée du net (masse de données + réseaux)nouveaux moyens d'interactionsmultimé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 complexevoiture vs électroménagertéléphone : nouvelle gamme

– Page 4

Utilisabilité des interfaces

Facile à apprendre et à utiliserRetour d'information rassurant, informatif et immédiat

La conception doit répondre aux besoins, connaissances etCaractéristiques des utilisateurs

Objectif avoué : fiabilité, efficacité, productivité

3 aspects étudiés à travers le moduleconception, évaluation, prototypage

– Page 5

Cycle de vie des IHMs

– Page 6

IHM sur supports mobiles

Complexification de la conception ergonomique et logicielle

– Page 7

IHM sur supports mobiles

Complexification de la conception ergonomique et

logicielle

– Page 8

IHM sur supports mobiles

Complexification de la conception ergonomique et logicielle

– Page 9

IHM : Ordinateur, ubiquité et mobilité

Ubiquité(environnementéquipé)

Mobilité(utilisateuréquipé)

– Page 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é

– Page 11

Analyse des besoins

Conception

Conception logicielle

Codage

Tests Unitaires

Tests d’intégration

Tests UtilisateursEvaluation ergonomique

Boîtes à outils

Mécanismes généraux

Modèle d’architecture logicielle

Espace de conception

Propriétés ergonomiques

Dimensions de l ’espace problème

– Page 12

Dimensions de l ’espace problème

Selon trois axes

Techniques d’interaction

Collaboration

Contexte

– Page 13

Dimensions de l ’espace problème

Selon trois axes

Techniques d’interaction

Collaboration

Contexte

– Page 14

Système interactif sensible au contexte

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

– Page 15

Système interactif sensible au contexte

– Page 16

Applicatifs envisagés

Localisation de l’utilisateur

Identification et localisation de dispositifs d’interaction

– Page 17

Projets IHM

- Aller voir les Simulateurs de plongée :- Qualité du prototype- http://www.polytech.unice.fr/~pinna//MODULEIHM/IHM2004/BO2004.html

- 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 : https://vitrine.polytech.unice.fr

– Page 18

Existantbar « 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 tactilehttp://www.logiciel-restaurant.org

/texts/logiciel-de-caisse-tactile

Table tactile à usage militaire

Société TouchTable

navigation poussée, très chères,

domaines de pointes, ou gouvernement.

http://www.touchtable.com

– Page 19

Dimensions de l ’espace problème

Selon trois axes

Techniques d’interaction

Collaboration

Contexte

– Page 20

Mobilité : nouveau découpage spatio-temporel

Déplacement dans l’espace

Variation dans le temps : synchronisme/ asynchronisme

local distant

asyn

chro

ne

syn

chro

ne

– Page 21

Mobilité : nouveau découpage spatial

Etude selon les lieux d’interaction et non la distance

CONFINElieu de l’interaction

délimité

VAGABONDlieu de l’interaction

n’importe oùENSEMBLE DISPERSE

IDENTIQUE(local)

DIFFERENT(distant)

– Page 22

Plate-forme Magic

Camera + Micro

Casque + Ecouteurs

Capteur d’orientation

Stylos

Tablette + Extenseur de port

Réseau sans fils

– Page 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)

– Page 24

MAGIC : vue d’ensemble

• Sur la tablette :– Communication

(forum, mail, etc.)

– Coordination (carte)

– Production (outils d’édition)

• A travers le casque:– Combinaison du

physique avec l’informatique grâce à la passerelle

– Page 25

• 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

Terrain augmenté

– Page 26

Menu

Formules

Liste

Gestion du piège

Gestion des cubes

HistoriqueCarte

TROC : Interface de la tablette tactile

– Page 27

Temps de jeu

Objet ciblé

Description de l’objet ciblé

Formules actives

Autre objet visible

Niveau d’énergie magique

Œil magiqueMessages

Interface dans le casque

– Page 28

Projet IHM

Allez voir Easy Visit

Sur la vtrine

– Page 29

Dimensions de l ’espace problème

Selon trois axes

Techniques d’interaction

Collaboration

Contexte

– Page 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ésentationnellangue pseudo-naturelle, manipulation directe, ...

Système sensoriel

Système cognitif

– Page 31

Interface « Baby face »

Technique d ’interaction en sortie

Son spatialisé : T = <haut-parleur, LN>

SoundbeamNeckset

RDV à 15h

– Page 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.)

– Page 33

Interface « Baby face » : multimodalité Technique = <d, s> Go to the middle

of the message

T = <caméra-doigt, gestes> T = <micro, pseudo LN>

T = <ordinateur, gestes> T = <stylet, manipulation directe>

– Page 34

Interface « Baby face » : multimodalité

Magicien d ’oz

Compère Sujet observé

– Page 35

Interface « Baby face » : multimodalité

Usage des modalités par les sujets

Toutes commandes / Toutes sessions

Vocale

Tactile

Gestuelle

Embodied

– Page 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é

– Page 37

Optimisation de l’utilisation de la Wiimote pour des présentations en salle

Eric NouriCédric PeinMaximilien PerrinYannick Reynard 2007/2008

– Page 38

Audience

Etat actuel Nos objectifs

Audience

– Page 39

– Page 40

– Page 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 ».

– Page 42

– Page 43

Les participants– 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

– Page 44

– Page 45

– Page 46

Scénario n°1 :– 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 ?

– Page 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

– Page 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.

– Page 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é

– Page 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)

– Page 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”

– Page 52

Les enjeux de la mutation

De nouveaux problèmes à résoudre– prendre en compte le contexte dans l'interaction

– Page 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

– Page 54

Reconnaissance de situation

Exécution de la réaction

Capture du

contexte

IdentificationDes solutions

candidates

Selection d’unesolutioncandidate

Détection de

changement decontexte

Identification du

changement decontexte

Exécution du

prologue

Execution de la

reaction

Execution de

L’épilogue

Calcul d’une réaction

Cadre de référence : phase “exécution”

– Page 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

– Page 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)

– Page 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)

– Page 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

– Page 59

Mise en commun des études

Confronter les 3 prototypes

Réaliser un prototype plus finalisé

Faire évaluer le prototype

Conclure

– Page 60

Reconception

Maquettage papier

Evaluation

Mise en situation

– Page 61

Utilisation ergonomique

d’un autoradio

Mise en situation & évaluation

ESSI 3 Année 2004/2005

Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon

Best Of 2005

– Page 62

I - Notre solution II - Evaluation de notre interface II - Démonstration

Notre objectif initial

Simplifier l’ensemble des commandes

Faciliter leur accès

Améliorer la sécurité d’utilisation

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

1 - Emplacement 2 - Utilisation

– Page 63

I - Notre solution II - Evaluation de notre interface II - Démonstration

L’emplacement de l’affichage

Projection sur le pare-briseTemps de détournement du regard diminué

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

1 - Emplacement 2 - Utilisation

– Page 64

I - Notre solution II - Evaluation de notre interface II - Démonstration

L’emplacement de l’affichage

Technologie Head Up Display (tête-haute) Temps de détournement du regard diminué

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

1 - Emplacement 2 - Utilisation

– Page 65

Notre solution II - I - Evaluation de notre interface II - Démonstration

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

L’emplacement des commandes

Regroupement sur le volant Accès direct

Zone tactile (pad) + 4 boutons

1 - Emplacement 2 - Utilisation

– Page 66

I - Notre solution II - Evaluation de notre interface II - Démonstration

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

Utilisation des boutons

2 catégories de boutonsComportements 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

1 - Emplacement 2 - Utilisation

– Page 67

I - Notre solution II - Evaluation de notre interface II - Démonstration

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

Utilisation du pad

Liste de mouvements reconnus Comportements différents selon le mouvement

1 - Emplacement 2 - Utilisation

– Page 68

I - Notre solution II - Evaluation de notre interface II - Démonstration

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

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

1 - Emplacement 2 - Utilisation

– Page 69

I - Notre solution II - Evaluation de notre interface II - Démonstration

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

1 - Notre prototype 2 - Déroulement de l’évaluation 3 - 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 clavierSouris d’ordinateur portable

– Page 70

I - Notre solution II - Evaluation de notre interface II - Démonstration

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

1 - Notre prototype 2 - Déroulement de l’évaluation 3 - RésultatsSe rapprocher d’une utilisation réelle

– Page 71

I - Notre solution II - Evaluation de notre interface II - Démonstration

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

1 - Notre prototype 2 - Déroulement de l’évaluation 3 - Résultats

Utilisation du prototype

BoutonsTouches du clavier Q,E, I et M

Zone tactileMouvements de la souris sans clicPossibilité de sortir de ce mode

– Page 72

I - Notre solution II - Evaluation de notre interface II - Démonstration

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

1 - Notre prototype 2 - Déroulement de l’évaluation 3 - Résultats

Fonctionnalités implémentées

Ecoute d’un CDLecture, navigation entre les morceaux, stopModes « répétition » et « aléatoire »

Ecoute de la radioNavigation entre les préréglages

Fonctions relatives au sonModification du volume

– Page 73

I - Notre solution II - Evaluation de notre interface III - Démonstration

ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005

1 - Notre prototype 2 - Déroulement de l’évaluation 3 - Résultats

4 évaluateurs étudiants

Mise en situationTemps d’adaptation aux commandes

Scénario d’évaluationRéactions différentesCommandes « amusantes »

– Page 74

Reconception

Maquettage papier

Evaluation

Mise en situation

– Page 75

Présentation du sujet

Analyse des mosaïques de télévision (CanalSat ou Free) peu intuitivesmal conçues

Objectif : construire un système de navigation plus intuitif.

Public visé : Adolescents & adultes

– Page 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

– Page 77

Scénarios de l’existant

Pré-tests des scénarios

– Évaluation du temps nécessaire à la passation– Amélioration des scénarios

– Page 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

– Page 79

Modèles de tâches

– Page 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

• …

– Page 81

Proposition d’amélioration

Réalisation d’un maquette de bas niveau– Conçue en fonction des besoins des utilisateurs

– Page 82

– Page 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

– Page 84

Scénarios de la maquette

Modèle de tache de l’existant

Modèle de tache de la maquette de bas niveau

– Page 85

Reconception

Maquettage papier

Evaluation

Mise en situation

– Page 86

Baladeur MP3 pour enfants

Questionnaire ciblé et adapté

Alexandre Aureli – Frédéric Laurendeau – Nicolas Rondelé – Christophe Schreiber

BestOf 2005

Encadreur: Alain Giboin

(sujet proposé par Teresa Colombi)

– Page 87

Problématique

Problèmes–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

– Page 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

– Page 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é)

– Page 90

Démarche préalable (4/5)

– Page 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

– Page 92

Prototype (2/4)

– Evolution du prototype

• Première version

• Version finale

• Travail sur les coques amovibles(Clémentine Némo and co)

– Page 93

Reconception

Maquettage papier

Evaluation

Mise en situation

– Page 94

Gestaction 3D

Mise en situation : un vraiprototype

– Page 95

AVANCEES TECHNIQUES

- Construction des gants

– Page 96

AVANCEES TECHNIQUES

Webcam

- Traitement des images

-Détection des diodes

-Problèmes et limites

– Page 97

Mise en place de l’évaluation

– Page 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……

– Page 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 MOBILEEXPLOITANT DES TECHNIQUES DE REALITE AUGMENTEE

– Et à tous les étudiants qui ont fournis d’aussi bons projets .....