SlideShare une entreprise Scribd logo
Conception et Evaluation d’ IHM
INTRODUCTION AU MODULE
Anne-Marie Déry - pinna@polytech.unice.fr
http://atelierihm.unice.fr/enseignements/conception-et-evaluation-des-ihm/presentation-et-planning/
– Page 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
– Page 3
Système Interactif
Fonctionnalités
Éléments d’IHM
Buts
Tâches
…
E/S tactile tangible
haptique gestuelle
– Page 4
Les devices et les lieux publics
 Des supports variés avec des capacités d’interaction et
de visualisation différentes :
bornes – tables – vitrines – murs interactifs
Taille des écrans – multi touch ou non – utilisateur experts ou non
Taches à effectuer différentes - Environnement bruyant – sombre …
Intro conception2017
Intro conception2017
Intro conception2017
Intro conception2017
– Page 9
Les devices experts
Usages différents et très ciblés
Utilisateurs experts
– efficacité –
sécurité - mobilité
ispositif futuriste
"Immersed Senses
http://zomards.free.fr/spip.php?article444
M E M E S U S A G E S
M EM ES
S E R VIC E S
Des supports mobiles
N O U VE A U X
U S A G ES
N O U VE A U X
S E R VIC E S
Devices mobiles et objets
connectés
Intro conception2017
– Page 14
Objets connectés : gadgets ?
Multitude d’objets : combinaison des usages ?
https://www.youtube.com/watch?v=zL-oMbgXZqE
https://www.youtube.com/watch?v=dodJu6uLcjU
– Page 16
Utilisateurs, usages, besoins
 Connecté partout : complexification
de la conception ergonomique et
logicielle
Continuité de service
– Page 17
Problématique
Prendre en compte les avancées technologiques
nouveaux supports matériels : tables, murs, bornes, casques…
masse de données sur net et intranet : visualisation de masse de données
(big data) : dashboards d’analyse
nouveaux moyens d'interactions : beacon, bague, bracelets, lunettes, casques,...
multimédia : son, images, réalité augmentée…
Prendre en compte la diversité des utilisateurs : des novices aux experts, des plus
jeunes aux plus vieux…
Prendre en compte les nouveaux métiers de l’informatique : offre de services
(continuité, contextes..), objets connectés (eSanté, bâtiments intelligents…)
Assurer le succès de l’utilisation des « logiciels » et éviter les applications kleenex
Les IHM au cœur de l’usage : facilité d'utilisation même si le service offert est
complexe voiture vs électroménager, offre de services adaptés (frigidaire intelligent)
– Page 18
https://www.datanami.com/2012/05/03/snapshots_from_the_edge_of_big_visualization/
– Page 20
Les enjeux de la mutation
 De nouveaux problèmes à résoudre
 Prendre en compte le contexte dans l'interaction
 Perception/modélisation/adaptation
 Prendre en compte la mobilité
 Prendre en compte la continuité de service et la diversité des
devices utilisés .
 Des solutions à des problèmes anciens à revoir
 les techniques d'interaction : windows, icons, menus, pointing
 Caméras, doigts, gestes : quand ? Pourquoi ?
 Des problèmes classiques prennent une importance particulière
 concevoir pour plusieurs plates-formes
 assurer la sécurité et la confidentialité
– Page 21
Les enjeux de la mutation
CONSTAT :
Beaucoup de concurrence et réelle exigence des utilisateurs
Ingénierie au cas par cas insuffisante
Technicité accrue
Exigences utilisateurs croissante
 Coûts de développement et de maintenance
 Cohérence ergonomique entre versions
Objectifs non avoué
Augmenter la fiabilité, efficacité, productivité et
générer des besoins
– Page 22
Comment y répondre ?
 Faciliter l’adaptation des IHM : Module Adaptation des IHM
à l’environnement
 Comprendre les techniques d’interaction : Module
Techniques d’interactions et multi-modalités
 Savoir développer : exemples continuité de services (avec
prise en compte du contexte et de la collaboration)
ET
VERIFIER L’UTILISABILITE de L’Interface
– Page 23
Utilisabilité des interfaces
ISO 9241-11
– Efficiency
Un e UI est efficace : si elle répond aux besoins des utilisateurs, est
utilisable : l’utilisateur peut réaliser la tâche.
– Effectiveness
Une UI est effective si elle réduit les erreurs, augmente la performance,
diminue le temps d’apprentissage…
– Satisfaction
Une UI est satisfaisante si les utilisateurs apprécient son utilisation,
ne génère pas de stress…
Différent de l’UX ISO 9241-210 : person's perceptions and responses
that result from the use or anticipated use of aproduct, system or
service.”
– Page 24
Utilisabilité des interfaces : Comment
Critères à mettre en œuvre :
1. Répondre aux besoins des utilisateurs (Efficiency)
2. Faciliter l’apprentissage et l’usage (effectiveness)
3. Informer : donner des retours d'information rassurants, utiles et immédiats
(satisfaction)
Quand ?
1. A la conception des IHM
La conception doit répondre aux besoins, connaissances et caractéristiques
des utilisateurs cibles.
2. Grâce à l’évaluation de l’IHM
L’évaluation doit permettre de vérifier la bonne adéquation entre ce qui est
fourni et les attentes des utilisateurs
3. Maquetter et prototyper
Le maquettage doit être un support aux étapes 1. et 2. (rôle différent du maquettage basse et haute
fidélité)
Le prototypage fonctionnel doit valider les solutions technologiques visées
– Page 25
Utilisabilité des interfaces
3 aspects étudiés à travers le module
Cycle de vie
des IHM
conception
évaluation
Prototypage fonctionnel
– Page 26
Analysedesbesoins
Conception
Conceptionlogicielle
Codage
TestsUnitaires
Testsd’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
Utilisateurs - Ergonomes – Visual Designers -
Développeurs
– Page 27
Des nouveaux métiers !
Designer d’interactions
http://www.onisep.fr/Ressources/Univers-Metier/Metiers/designer-d-interaction
Designer UX / Designer UI
http://www.cidj.com/article-metier/designer-ux-ui
Web Designer
http://www.onisep.fr/Ressources/Univers-Metier/Metiers/webdesigner
Designer Web Mobile
http://www.metiers.internet.gouv.fr/metier/designer-web-mobile
Développeur mobile
http://www.onisep.fr/Ressources/Univers-Metier/Metiers/developpeur-developpeuse-d-applications-mobiles
E T A P E S D E L’E VA L U A T I O N E R G O N O M I Q U E :
C O N C E P T I O N
E VA LU A T I O N
P R O T O T Y P A G E
E T A P E S LO G IC I E L L E S :
M O D E LE S D ’A R C H I T E C T U R E
B O IT E S À O U T ILS
T E S T S U N IT A IR E S
Etapes du cycle de vie
S T O R IE S
P E R S O N A S
E N G E S T IO N D E P R O J E T IN N O VA T I O N
C ’E S T U N P E U D IF F É R E N T IC I
O N P A R LE D E S C É N A R IO E T O N D É T A ILL E LE S
P E R S O N A S
ATTENTION vous avez déjà vu
– Page 30
Conception : Modélisation de l’utilisateur
 Objectifs
 Identifier le(s) type(s) d’utilisateurs en présence
 Identifier les besoins des utilisateurs
 Identifier leurs compétences et leurs habitudes
 Comment faire ?
 Technique des questionnaires
 Technique des entretiens
 Tri
 Focus Group
– Page 31
Conception : Formaliser
 Modélisation des utilisateurs
 Technique des Personas
 Modélisation des besoins utilisateurs
 Description des taches HTA, UAN, CTT
– Page 32
Créativité
 Stimuler la créativité
 Pour susciter les besoins
 Pour innover
 Pour se projeter dans l’avenir
 Comment ? Le Design Thinking !
 Méthode inspirée des
Designers
BRAINSTORMING
Intelligence créative
Intelligence émotionnelle
http://www.lescahiersdelinnovation.com/2016/02/qu-est-ce-que-le-design-thinking/
– Page 33
Maquettage
 Maquette basse fidélité
 Minimum de design pour se concentrer sur la navigation et les
taches
 Maquettage papier
à vos papiers et à vos ciseaux
Balsamiq ou Axure
http://korben.info/18-outils-gratuits-mockups.html
https://proto.io/
 Fonctionnalités simulées
 Technique du magicien d’Oz
 Implémentation d’un scénario
– Page 34
Evaluation
 Evaluation coopérative
 Évaluation centrée utilisateurs
 Evaluation heuristique
 Evaluation par analyse
 Grille Xerox
– Page 35
Prototypage
Un premier prototype fonctionnel qui conforte sur le
visuel et sur les fonctionnalités
Mise en place d’un Visual Design
 Charte graphique
 Graphisme / animation
Mise en place des principales fonctionnalités
 Fonctionnalités
 Architecture Logicielle
– Page 36
Dimensionner le problème
Axes d’étude possibles
Techniques d’interaction
Collaboration
Contexte
– Page 37
Dimensions de l ’espace problème
prise en compte du Contexte
Techniques d’interaction
Collaboration
Contexte
– Page 38
Une définition du terme contexte
 3 axes pour mesurer un changement de contexte
 L’utilisateur (novice, avancé, handicapé, ...)
 Le device (smart phone, grand écran, vocal, tactile…)
 L’environnement (luminosité, bruit, ….)
 En situation de mobilité le plus souvent
 Découverte de l’environnement physique – reconnaissance de
capteurs
 Adaptation de l’application au nouveau contexte par rapport au
besoin de l’utilisateur
 Quelle situation ? Avec qui ? Avec quoi ? Où ?
– Page 39
Système interactif sensible au contexte
 Contexte : ensemble de propriétés, de phénomènes
physiques qui peuvent être captés
 Système interactif sensible au contexte
 En fonction du lieu (GPS /beacons)
 En fonction de la luminosité (capteur)
 En fonction des devices en présence (bluetooth..)
 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
– Page 40
Identification des dispositifs d’interaction
Le dispositif du dépanneur
reconnait le matériel
Le dépanneur peut accéder à la fiche
technique et à la disponibilté
des pièces….
– Page 41
+ Prise en compte de la localisation
Profiter d’un dispositif de sortie
plus adapté
Situer sur un plan et
fournir des informations
– Page 42
Dimensions de l’espace problème
Gestion du collaboratif
 Selon trois axes
Techniques d’interaction
Collaboration
Contexte
– Page 43
Une définition du terme collaboration
 Une application collaborative :
application qui permet d’atteindre un but à plusieurs
Plusieurs utilisateurs travaillent ensemble pour réaliser
une ou plusieurs taches.
Les murs, les tables sont des supports collaboratifs.
Services offerts autour des réseaux sociaux
Les jeux, …
Utilisateurs ou groupe d’utilisateurs ? Quand ? Comment
?
– Page 44
Collaboration et mobilité : découpage spatio-temporel
 Déplacement dans l’espace
 Variation dans le temps : synchronisme/ asynchronisme
local distant
asynchronesynchrone
– Page 45
Mobilité : nouveau découpage spatial
 Etude selon les lieux d’interaction et non la distance
CONFINE : lieu de l’interaction délimité
VAGABOND : lieu de l’interaction n’importe où
Localisée : Les participants sont ensemble
Non localisée : Les participant sont dispersés
– Page 46
Dispositifs dédiés à la collaboration
– Page 47
Dimensions de l ’espace problème
Prise en compte et mise en place de techniques d’interaction
Techniques d’interaction
Collaboration
Contexte
– Page 48
Une définition du terme technique
d’interaction
 Une technique d’interaction
Une technique qui permet de récupérer les données via
un dispositif d’entrée auprès d’un utilisateur pour les
transmettre à une application et de fournir des résultats
à un utilisateur via un dispositif de sortie
Quel type de dispositif ? Pour quel utilisateur ? Pour quel
usage ?
– Page 49
Problématique vis-à-vis de l’IHM
 De très nombreuses techniques d ’interaction
 Laquelle choisir ? Quand l’utiliser ? Comment l’intégrer ?
 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, ...
Quid de la voix, les doigts, les mouvements….
 Système représentationnel
langue pseudo-naturelle, manipulation directe, ...
Système sensoriel
Système cognitif
– Page 50
Interactions : en sortie ou en entrée
 Technique d ’interaction en
sortie
Son spatialisé : T = <haut-parleur,
LN>
Soundbeam
Neckset
RDV à 15h
Technique d ’interaction en sortie
– Page 51
Problèmes de 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 52
Expérience 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 53
Interface « Baby face »
Technique du magicien d’Oz
 Magicien d ’oz
Compère Sujet observé
– Page 54
Interface « Baby face » : analyse des résultats
 Usage des modalités par les sujets
 Toutes commandes / Toutes sessions
Vocale
Tactile
Gestuelle
Embodied
– Page 55
Interface « Baby face » conclusion ?
 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é
Mini-Projets CEIHM
E TU D E E T D É VE LO P P E M E N T D ’U N S Y S TÈ M E
P O U R LA S IG N A LIS A T I O N E T LA
VIS U A LI S A T IO N D ’IN C ID E N T S .
– Page 57
Des exemples d’événements
– Page 58
Un événement c’est quoi ?
Un incident :
un événement temporel (ex. quand il a eu lieu, possiblement avec une durée, etc.)
associé à une information spatiale (ex. géolocalisation, adresse postale, lieu
remarquable, etc.).
Incident mobile (ex. un chien errant) et/ou signalé dans un contexte de mobilité (ex.
signalement d’un nid de poule aperçu pendant un déplacement en bus).
De la même façon, l’incident peut être signalé au moment où il se produit (signalement
synchrone) ou plus tard (asynchrone) selon la convenance de l’utilisateur.
Pour recenser des informations (non attendues, rares et/ou insolites), fournir une entrée pour
demande de réparation, informer sur l’état de l’environnement, etc
– Page 59
Signalisation : contextes
– Page 60
Visualisation : contextes
http://www.makery.info/2016/06/28/manipuler-la-big-data-au-doigt-et-a-table-avec-tangible-display/
https://www.technical-furniture.com/fr/produits/salles-de-controle-postes-de-commande/technologie-mur-de-image
https://www.beumergroup.com/fr/produits/systemes-de-traitement-de-bagages/suite-logicielle-pour-
– Page 61
Tâches communes aux différents contextes
Signalement d’incident
a) identification de l’incident par un individu ;
b) description de l’incident ;
c) partage de l’information avec d’autres individus.
Visualisation d’incident
d) suivi de l’évolution d’un incident en particulier ;
e) visualisation (voire monitoring) de tous les incidents intéressants
(recherche par zone géographique, type, etc.)
f) juger de la pertinence d’un incident signalé par une autre personne.
– Page 62
Exemple de travaux : incidents urbains
– Page 63
Signalisation en mobilité
– Page 64
Signalisation a posteriori et ou Visualisation
SIGNALISATION
Vs VISUALISATION
– Page 65
Ce que vous devez faire…
Constituer un groupe de 4
Choisir entre Signalisation ou Visualisation
Choisir un contexte : vous pouvez en proposer
Contrainte : il faut un groupe Signalisation et un groupe Visualisation minimum pour
un contexte
M É THO D O LO G I E
E T E X E M P LE S
Approfondissement
Intro conception2017
– Page 68
Analyse de l’existant
Comment les utilisateurs procèdent ? Avec quoi ?
– Page 69
Etape 1 : Analyse de l’existant
 Examiner le(s) système(s) interactif(s)
existant(s)
Dispositif
Fonctionnalités
Éléments d’IHM
Interaction
Système Interactif
Utilisateur
Buts
Tâches
…
– Page 70
Etape 2 : Entretiens avec les utilisateurs
Qui interviewer ? (Quels « utilisateurs » ?)
Pourquoi interviewer ?
Où et Quand interviewer ?
Comment interviewer ?
1) Préparer l’interview
2) Mener l’interview
3) Analyser l’interview
– Page 71
Etape 3 : Modélisation de l’utilisateur
 Préciser les catégories d’utilisateurs de vos IHM
 Méthode des personas (Cooper)
 Décrire des personnes-types et leurs caractéristiques
 Associer des scénarios à ces personnes-types
 Elaborer des questions à poser à vos utilisateurs lors
d’un entretien (guide d’entretien)
– Page 72
Etape 4 : Modèles de tâches
Les modèles de tâches sont des descriptions logiques
des activités à réaliser pour atteindre les objectifs
des utilisateurs
Utiles pour concevoir, analyser et évaluer les applications
logicielles interactives
Les modèles de tâches décrivent comment les activités
peuvent être réalisées pour atteindre les objectifs des
utilisateurs lors de l’interaction avec l’application
considérée.
– Page 73
Etape 4 : Analyse et Modélisation de la tâche –
Élaborer le modèle de tâches
à l’aide d’un formalisme type HTA (Hierarchical Task
Analysis)
ou UAN (User Action Notation)
ou CTT
– Page 74
Etape 5 : EVALUATION COOPÉRATIVE
Méthode conçue
pour des informaticiens (= « concepteurs ne possédant
pas de connaissances spécialisées en ergonomie » )
par des psychologues spécialistes des IHM (Monk,
Wright, Haber et Davenport,1993)
– Page 75
EVALUATION COOPÉRATIVE
 Étape 1/ Préparer l'évaluation
 Étape 2/ Réaliser l'évaluation
 Étape 3/ Analyser les résultats de l'évaluation
 Étape 4/ Tirer les conséquences de l'évaluation
 Étape 5/ Rédiger le compte rendu de l'évaluation
– Page 76
ÉVALUATION HEURISTIQUE
PROTOCOLE
Préparation des évaluateurs
Mise à disposition de scénarios de tâche
Préparation du jeu d’heuristiques
Évaluations individuelles
Après avoir réalisé les scénarios de tâche
inspection de l’IHM en regard des heuristiques
Confrontation des résultats
Analyse
– Page 77
ÉVALUATION HEURISTIQUE
Inspection (cheminement (walkthrough)) informelle de
l’IHM
A partir d’une liste de principes heuristics
inspecter l’interface afin d’identifier des problèmes
potentiels d’utilisabilité
 Auteur :
 Jacob Nielsen
– Page 78
Heuristiques initiales
Dialogue simple et naturel
Parler le langage des utilisateurs
Ne pas surcharger la mémoire des utilisateurs
Cohérence
Feedback
Sorties clairement indiquées
Raccourcis
Messages d’erreur appropriés
Prévenir les erreurs
Aide et documentation
E X E M P L E S
Illustration
– Page 80
Exemple de maquettage Balsamiq
– Page 81
Exemple de Persona
 Identité Catherine
 Données démographiques Femme de 35 ans, BAC+3 (Diplôme d’Etat de Psychomotricien)
 Activités professionnelles Psychomotricienne
Evalue les capacités des accueillis.
Conçoit et réalise des ateliers en accord avec les profils des accueillis
 Activités domestiques et de loisirs Aime les sorties (cinéma, théâtre, …) et pratique le yoga.
Peut concevoir certains ateliers chez elle.
 Buts et Tâches Création d’ateliers adaptés aux accueillis grâce à l’utilisation d’objets ou de photos personnalisées.
Animation des ateliers préparés
Suivi des accueillis
 Connaissance et expérience des technologies Simple utilisatrice.
 Usage des technologies Utilisation basique de son smartphone, consulte internet, réseaux sociaux et envoie des
emails sur une tablette.
 Attitudes à l’égard des technologies Elle a une légère réticence à utiliser une nouvelle technologie, mais elle est vite à
l’aise une fois qu’elle s’est lancée, du moment que la technologie reste simple.
 Communication Aime le contact humain. Très a l’écoute, entre facilement en contact avec les autres et montre
beaucoup de sympathie, de patience et pédagogie avec les accueillis.
 Citation “Passer moins de temps a organiser les ateliers, c’est passer plus de temps avec les accueillis.”
 Buts de vie “Comprendre et aider les gens qui souffrent”
 Buts d'expérience “Être plus efficace dans mon travail”
“Ne plus perdre de temps à organiser les photos utilisées pendant les ateliers”.
– Page 82
Exemple de Persona
Identité Jacques
Données démographiques Homme de 70 ans
Activités professionnelles Retraité, ancien professeur(e) de
collège et de lycée en sciences naturelles, BAC+5
Activités domestiques et de loisirs Il aime flâner dans son jardin
et y sème encore quelques fleurs.
Buts et Tâches Il doit s'entraîner à créer et garder des automatismes
pour les gestes de la vie quotidienne
Connaissance et expérience des technologies Très faible
Usage des technologies Forcé d’avoir un téléphone mobile, il n’utilise
que le fixe.
Attitudes à l’égard des technologies Peut comprendre les
bénéfices de ceux-ci, sans pour autant comprendre leur fonctionnement.
Curieux, mais découragé en ayant le sentiment que le fossé est trop
grand.
Communication Très à l’aise avec tout le monde. Peut être autoritaire.
Citation “Il faut profiter de la vie”
Buts de vie “Profiter de la vie”
Buts d’expérience “Garder un lien social”
“S’amuser en participant à des activités”
“Conserver au maximum son indépendance”
Buts cibles “Joindre l’utile à l’agréable”
– Page 83
Exemple de scénario
Ajout d’un accueilli
Utilisateur : Persona Catherine, animatrice au centre d’accueil de
jour.
Scénario
Catherine: “J’ai un nouvel arrivant, aujourd’hui. Je viens de finir son
bilan psychomoteur et Jacques est sur le point de partir. J’en profite
pour commencer la création de sa fiche en prenant une photo avant
qu’il s’en aille. Je le raccompagne à l’accueil, puis je finalise la fiche
avec quelques renseignements administratifs sur ce nouvel accueilli
et son accompagnant et surtout mes notes à propos du bilan.”
Dispositif visé
Application sur tablette.
– Page 84
Exemple de scénario projeté
Scénario
Création d’activité
Catherine: “Jacques s’ennuie un peu dans les ateliers autour de la salle de bain. Les
activités actuelles sont un peu trop faciles pour lui. En discutant avec Patrick j’ai pensé
à une nouvelle activité: nettoyer ses lunettes. Patrick m’a dit que Jacques faisait ça
dans la salle de bain, avec le savon ordinaire, puis qu’il les séchait avec un petit tissu
spécial.
Je crée la nouvelle activité que j’appelle “Nettoyer ses lunettes”.
Comme pièce, je sélectionne la salle de bain (que j’ai déjà créée lors de l’activité
“lavage de mains”). Comme objet, je sélectionne le savon et la serviette (que j’ai déjà
aussi), puis j’ajoute les lunettes et le petit chiffon. Comme action, j’ajoute “mouiller les
lunettes”, j’utilise “se savonner les mains” que j’ai déjà, j’ajoute “nettoyer les lunettes”,
puis j’utilise “se sécher les mains”, et enfin j’ajoute “sécher les lunettes.”
Dispositif
Application sur tablette.
– Page 85
Arbre de tâches HTA
– Page 86
– Page 87
Miroir intelligent
Scénario projeté 1 : Françoise se coiffe
C’est le matin, Françoise est habillée, n’a pas encore pris son petit déjeuner. En arrivant dans la
cuisine, Christian qui était en train de préparer leur repas se rend compte que son épouse a
oublié de se coiffer. Il suspend alors son activité et explique à sa femme qu’elle doit se coiffer.
Il accompagne Françoise dans la salle de bain. Il la place devant le miroir. La liste des activités
proposées s’affiche et il sélectionne “se coiffer”. Un court extrait de “L’Indien” de Barbara
résonne dans la salle de bain (morceau choisi par Christian à l’initialisation de l’application pour
cette activité).
Sur le miroir s’affiche alors à gauche les étapes à réaliser, illustrées par des photos. La première
est mise en valeur. Une consigne vocale indique à Françoise ce qu’elle doit faire à chaque
étape. Le système détecte bien que Françoise en train de réaliser les mouvements attendus et
les étapes se succèdent sans souci.
Une fois la dernière étape terminée, un “Bravo !” est adressé à Françoise, le système informe
Christian via un système de notification que l’activité a été réalisé avec succès.
– Page 88
Miroir intelligent
Heuristique
Commentaires
par rapport
aux
heuristiques
Ecran
concerné
Elément
de
l'écran
Souci repéré
Sévérité
(1 = mineur
à 3 = grave)
Fréquence
1 = rare
4 =
permanent
Bloquant
oui/non
Recommandations
Visibilité du
statut du
système
Correspondan
ce
système
et monde réel
ce point sera
crucial et
dépendra
énormément des
photos ou
pictogrammes
utilisés dans les
séquences lors de
la réalisation des
activités.
Contrôle et
liberté de
l’utilisateur
cet aspect est
difficilement
atteignable
du point de vue
des accueillis,
(guidés mais pas
contrôlés)
Consistance et
standards
Prévention
des erreurs
Heuristique
adressée aux
accompagnants
et aux aides-
soignants.
le principe même
de
l’application est
VO S P R E D E C E S S E U R S O N T É TÉ C R E A TIF S
LA C R É A TIV I T É R É A LIS TE / A VA N T
G A RD IS TES ?
La créativité c’est quoi ?
Exemple de dispositif d’entrée :
Utilisation de la Wiimote pour des présentations
en salle
Eric Nouri
Cédric Pein
Maximilien Perrin
Yannick Reynard
2007/2008
– Page 92
POINTS FORTS
 Mise en situation pour le recueil d’information
concernant les gestes
 Magicien d’Oz
 Scénario
 Méthode d’évaluation coopérative
Audience
Etat actuel Nos objectifs
Audience
Intro conception2017
Intro conception2017
 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 ».
Intro conception2017
 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
Intro conception2017
Intro conception2017
 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 ?
 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
 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.
AVANCEES TECHNIQUES
- Construction des gants :
création d’un dispositif d’entrée
POINT FORT
Mise en situation : un vrai
prototype
AVANCEES TECHNIQUES
Webcam
- Traitement des images
-Détection des diodes
-Problèmes et limites
Mise en place de l’évaluation
A L E X A N D R E A U R E L I – F R É D É R I C L A U R E N D E A U – N I C O L A S R O N D E L É
– C H R I S T O P H E S C H R E I B E R
BESTOF 2005
POINT FORT : Questionnaire ciblé et adapté
Mobilité – prise en compte
D’utilisateurs spécifiques
Baladeur MP3 pour enfants
– Page 109
Démarche préalable (3/5)
 Enfants de 3-6 ans
 Quid de la Dextérité et de la Capacité de raisonnement
 Appareil attractif pour un enfant de 6 ans
 Problème : Réalisation d’un questionnaire
 Données visées
 Habitudes d’écoute
 Connaissances technologiques
 Préférences visuelles
 Attente des futurs utilisateurs
– Page 110
Solution pour acquérir les besoins
Démarche
Sondage par l’instituteur
Rédaction des directives
Questionnaire
Ludique (captiver l’attention des
enfants)
Pédagogique (nécessité d’une
finalité pour chaque activité)
– Page 111
Prototype
– Evolution du prototype
• Première version
• Version finale
• Travail sur les coques amovibles
(Clémentine Némo and co)
– Page 112
Objectif initial : Simplifier l’ensemble des commandes, Faciliter leur accès
Et Améliorer la sécurité d’utilisation
POINT FORT : Etude de l’existant
Magicien d’Oz
Prototypage des fonctionalités
Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon
Best Of 2005
Une forte fiabilité
Utilisation ergonomique d’un autoradio
– Page 113
Emplacement de l’affichage
Projection sur le pare-brise
 Temps de détournement
du regard diminué
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
– Page 114
Emplacement des commandes
 Regroupement sur le volant
 Accès direct
Zone tactile (pad) + 4 boutons (nbre d’appui)
ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005
Commandes spécifiques
à la source écoutée
Fonctions avancées
Navigation
Commandes globales
de l’autoradio
Fonctions liées au son
Mode
– Page 115
PROTOTYPE
Se rapprocher d’une utilisation réelle
ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005
Son ?
Extraits de radios
Affichage ?
Ecran d’ordinateur
Commandes ?
Touches du clavier
Souris d’ordinateur
portable
– Page 116
Exercice - Catégorisations : autoradio
 Role et cycle de vie
 Ergonome, Designer, Développeur, Utilisateurs visés
 Axes
 Prise en compte du contexte (lieu, temps, environnement)
 Techniques d’intéractions (en entrée, en sortie, mono /
multiples)
 Collaboration (en mobilité ou non, synchrone / asynchrone)
 Devices visés
 Supports variés fixes ou évolutifs
– Page 117
Ce cours ne serait pas ce qu’il est sans …
 Mes collègues chercheurs en IHM, la richesse de nos
discussions et de leurs sites web
 Mes anciens étudiants, leurs retours instantanés et
leurs mini projets
 Mes contacts industriels avec les collaborations
recherche et les encadrements communs d’étudiants du
parcours
De quoi réfléchir :
http://www.youtube.com/watch?v=vyUXEbe7Fxs

Contenu connexe

Tendances

IHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: PlasticiteIHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: Plasticite
Marius Butuc
 
Présentation ceihma tous
Présentation ceihma tousPrésentation ceihma tous
Présentation ceihma tous
Atelier IHM Polytech Nice Sophia
 
Plasticité2015 intro
Plasticité2015 introPlasticité2015 intro
Plasticité2015 intro
Atelier IHM Polytech Nice Sophia
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
Use Age
 
Plasticité des IHM
Plasticité des IHMPlasticité des IHM
Plasticité des IHM
Anne-Marie Pinna-Dery
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Atelier IHM Polytech Nice Sophia
 
Plasticitérecherche2015 2
Plasticitérecherche2015 2Plasticitérecherche2015 2
Plasticitérecherche2015 2
Atelier IHM Polytech Nice Sophia
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
Atelier IHM Polytech Nice Sophia
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
Atelier IHM Polytech Nice Sophia
 
Idm et ihm
Idm et ihmIdm et ihm
Cours Adaptation des IHM
Cours Adaptation des IHMCours Adaptation des IHM
Cours Adaptation des IHM
Atelier IHM Polytech Nice Sophia
 
Cours 2 conception d'une ihm
Cours 2   conception d'une ihm Cours 2   conception d'une ihm
Cours 2 conception d'une ihm
ludolmn
 
Ihm introduction
Ihm introductionIhm introduction
Ihm introduction
sloumaallagui1
 
Vous avez dit IHM ?
Vous avez dit IHM ?Vous avez dit IHM ?
Vous avez dit IHM ?
ludolmn
 
Cours 3 : pratique de l’ergonomie et mobilité
Cours 3 :  pratique de l’ergonomie et mobilitéCours 3 :  pratique de l’ergonomie et mobilité
Cours 3 : pratique de l’ergonomie et mobilité
ludolmn
 
Plasticité2014 part4vf
Plasticité2014 part4vfPlasticité2014 part4vf
Plasticité2014 part4vf
Atelier IHM Polytech Nice Sophia
 
Cours 1 : introduction a l'ergonomie logicielle
Cours 1 :  introduction a l'ergonomie logicielleCours 1 :  introduction a l'ergonomie logicielle
Cours 1 : introduction a l'ergonomie logicielle
ludolmn
 

Tendances (20)

IHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: PlasticiteIHM et Genie Logiciel: Plasticite
IHM et Genie Logiciel: Plasticite
 
Intro conception2014
Intro conception2014Intro conception2014
Intro conception2014
 
Présentation ceihma tous
Présentation ceihma tousPrésentation ceihma tous
Présentation ceihma tous
 
Plasticité2015 intro
Plasticité2015 introPlasticité2015 intro
Plasticité2015 intro
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
 
Plasticité des IHM
Plasticité des IHMPlasticité des IHM
Plasticité des IHM
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
 
Plasticitérecherche2015 2
Plasticitérecherche2015 2Plasticitérecherche2015 2
Plasticitérecherche2015 2
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Introduction à la plasticité
Introduction à la plasticitéIntroduction à la plasticité
Introduction à la plasticité
 
Idm et ihm
Idm et ihmIdm et ihm
Idm et ihm
 
Cours Adaptation des IHM
Cours Adaptation des IHMCours Adaptation des IHM
Cours Adaptation des IHM
 
Cours 2 conception d'une ihm
Cours 2   conception d'une ihm Cours 2   conception d'une ihm
Cours 2 conception d'une ihm
 
Ihm introduction
Ihm introductionIhm introduction
Ihm introduction
 
Vous avez dit IHM ?
Vous avez dit IHM ?Vous avez dit IHM ?
Vous avez dit IHM ?
 
Cours 3 : pratique de l’ergonomie et mobilité
Cours 3 :  pratique de l’ergonomie et mobilitéCours 3 :  pratique de l’ergonomie et mobilité
Cours 3 : pratique de l’ergonomie et mobilité
 
Inroduction à la plasticité des interfaces
Inroduction à la plasticité des interfacesInroduction à la plasticité des interfaces
Inroduction à la plasticité des interfaces
 
Plasticité2014 part4vf
Plasticité2014 part4vfPlasticité2014 part4vf
Plasticité2014 part4vf
 
Cours 1 : introduction a l'ergonomie logicielle
Cours 1 :  introduction a l'ergonomie logicielleCours 1 :  introduction a l'ergonomie logicielle
Cours 1 : introduction a l'ergonomie logicielle
 

Similaire à Intro conception2017

Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
Loic Nunez
 
Engagez vos utilisateurs
Engagez vos utilisateursEngagez vos utilisateurs
Engagez vos utilisateurs
Simon Bédard
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
Anne-Marie Pinna-Dery
 
1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx
ssusercb2b311
 
Apporter du sens aux données BIM
Apporter du sens aux données BIMApporter du sens aux données BIM
Apporter du sens aux données BIM
Ana Roxin
 
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours IntroductionErgonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
Julien Roland
 
Ou et comment recruter un.e UX designer pour ma startup ? @GEN
Ou et comment recruter un.e UX designer pour ma startup ? @GENOu et comment recruter un.e UX designer pour ma startup ? @GEN
Ou et comment recruter un.e UX designer pour ma startup ? @GEN
FrenchTechCentral
 
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
PMI-Montréal
 
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définitionCours ergonomie des IHM web - Chapitre 2 - Introduction et définition
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition
ElodieDescharmes
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
Laurent Barbat
 
Présentation Intuilab aux Microsoft Techdays 2010
Présentation Intuilab aux Microsoft Techdays 2010Présentation Intuilab aux Microsoft Techdays 2010
Présentation Intuilab aux Microsoft Techdays 2010
IntuiLab
 
Cours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexteCours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexte
ElodieDescharmes
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Guillaume Abel
 
Digital UX Designer.
Digital UX Designer.Digital UX Designer.
Digital UX Designer.
Agence du Numérique (AdN)
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Benoit Drouillat
 
MultiTouch SNCF - REX Steria et I-Breed
MultiTouch SNCF - REX Steria et I-BreedMultiTouch SNCF - REX Steria et I-Breed
MultiTouch SNCF - REX Steria et I-Breed
Steria
 
Afterwork de la recherche : structuration de la recherche sur les usages et l...
Afterwork de la recherche : structuration de la recherche sur les usages et l...Afterwork de la recherche : structuration de la recherche sur les usages et l...
Afterwork de la recherche : structuration de la recherche sur les usages et l...
La French Tech Rennes St Malo
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesign
Versusmind
 
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
Eric Brangier
 

Similaire à Intro conception2017 (20)

Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
 
Engagez vos utilisateurs
Engagez vos utilisateursEngagez vos utilisateurs
Engagez vos utilisateurs
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
 
1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx
 
Apporter du sens aux données BIM
Apporter du sens aux données BIMApporter du sens aux données BIM
Apporter du sens aux données BIM
 
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours IntroductionErgonomie & Expérience Utilisateur (UX) | Cours Introduction
Ergonomie & Expérience Utilisateur (UX) | Cours Introduction
 
Ou et comment recruter un.e UX designer pour ma startup ? @GEN
Ou et comment recruter un.e UX designer pour ma startup ? @GENOu et comment recruter un.e UX designer pour ma startup ? @GEN
Ou et comment recruter un.e UX designer pour ma startup ? @GEN
 
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
 
bb-d_ERGO-UX
bb-d_ERGO-UXbb-d_ERGO-UX
bb-d_ERGO-UX
 
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définitionCours ergonomie des IHM web - Chapitre 2 - Introduction et définition
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
 
Présentation Intuilab aux Microsoft Techdays 2010
Présentation Intuilab aux Microsoft Techdays 2010Présentation Intuilab aux Microsoft Techdays 2010
Présentation Intuilab aux Microsoft Techdays 2010
 
Cours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexteCours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexte
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
 
Digital UX Designer.
Digital UX Designer.Digital UX Designer.
Digital UX Designer.
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
 
MultiTouch SNCF - REX Steria et I-Breed
MultiTouch SNCF - REX Steria et I-BreedMultiTouch SNCF - REX Steria et I-Breed
MultiTouch SNCF - REX Steria et I-Breed
 
Afterwork de la recherche : structuration de la recherche sur les usages et l...
Afterwork de la recherche : structuration de la recherche sur les usages et l...Afterwork de la recherche : structuration de la recherche sur les usages et l...
Afterwork de la recherche : structuration de la recherche sur les usages et l...
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesign
 
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
L’EXPÉRIENCE UTILISATEUR DE L’ASSISTANCE TECHNIQUE : PERSPECTIVES POUR LA CON...
 

Dernier

La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
Editions La Dondaine
 
Chap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdfChap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdf
TimogoTRAORE
 
1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
NadineHG
 
Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.
MahouwetinJacquesGBO
 
apprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdfapprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdf
kamouzou878
 
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptxMARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
Martin M Flynn
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
Txaruka
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
Txaruka
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
Friends of African Village Libraries
 
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certificationMS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
OlivierLumeau1
 
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
mcevapi3
 

Dernier (11)

La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
 
Chap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdfChap1 Généralités sur les réseaux informatiques.pdf
Chap1 Généralités sur les réseaux informatiques.pdf
 
1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
 
Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.
 
apprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdfapprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdf
 
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptxMARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
 
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certificationMS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
 
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
 

Intro conception2017

  • 1. Conception et Evaluation d’ IHM INTRODUCTION AU MODULE Anne-Marie Déry - pinna@polytech.unice.fr http://atelierihm.unice.fr/enseignements/conception-et-evaluation-des-ihm/presentation-et-planning/
  • 2. – Page 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. – Page 3 Système Interactif Fonctionnalités Éléments d’IHM Buts Tâches … E/S tactile tangible haptique gestuelle
  • 4. – Page 4 Les devices et les lieux publics  Des supports variés avec des capacités d’interaction et de visualisation différentes : bornes – tables – vitrines – murs interactifs Taille des écrans – multi touch ou non – utilisateur experts ou non Taches à effectuer différentes - Environnement bruyant – sombre …
  • 9. – Page 9 Les devices experts Usages différents et très ciblés Utilisateurs experts – efficacité – sécurité - mobilité
  • 11. M E M E S U S A G E S M EM ES S E R VIC E S Des supports mobiles
  • 12. N O U VE A U X U S A G ES N O U VE A U X S E R VIC E S Devices mobiles et objets connectés
  • 14. – Page 14 Objets connectés : gadgets ? Multitude d’objets : combinaison des usages ?
  • 16. – Page 16 Utilisateurs, usages, besoins  Connecté partout : complexification de la conception ergonomique et logicielle Continuité de service
  • 17. – Page 17 Problématique Prendre en compte les avancées technologiques nouveaux supports matériels : tables, murs, bornes, casques… masse de données sur net et intranet : visualisation de masse de données (big data) : dashboards d’analyse nouveaux moyens d'interactions : beacon, bague, bracelets, lunettes, casques,... multimédia : son, images, réalité augmentée… Prendre en compte la diversité des utilisateurs : des novices aux experts, des plus jeunes aux plus vieux… Prendre en compte les nouveaux métiers de l’informatique : offre de services (continuité, contextes..), objets connectés (eSanté, bâtiments intelligents…) Assurer le succès de l’utilisation des « logiciels » et éviter les applications kleenex Les IHM au cœur de l’usage : facilité d'utilisation même si le service offert est complexe voiture vs électroménager, offre de services adaptés (frigidaire intelligent)
  • 20. – Page 20 Les enjeux de la mutation  De nouveaux problèmes à résoudre  Prendre en compte le contexte dans l'interaction  Perception/modélisation/adaptation  Prendre en compte la mobilité  Prendre en compte la continuité de service et la diversité des devices utilisés .  Des solutions à des problèmes anciens à revoir  les techniques d'interaction : windows, icons, menus, pointing  Caméras, doigts, gestes : quand ? Pourquoi ?  Des problèmes classiques prennent une importance particulière  concevoir pour plusieurs plates-formes  assurer la sécurité et la confidentialité
  • 21. – Page 21 Les enjeux de la mutation CONSTAT : Beaucoup de concurrence et réelle exigence des utilisateurs Ingénierie au cas par cas insuffisante Technicité accrue Exigences utilisateurs croissante  Coûts de développement et de maintenance  Cohérence ergonomique entre versions Objectifs non avoué Augmenter la fiabilité, efficacité, productivité et générer des besoins
  • 22. – Page 22 Comment y répondre ?  Faciliter l’adaptation des IHM : Module Adaptation des IHM à l’environnement  Comprendre les techniques d’interaction : Module Techniques d’interactions et multi-modalités  Savoir développer : exemples continuité de services (avec prise en compte du contexte et de la collaboration) ET VERIFIER L’UTILISABILITE de L’Interface
  • 23. – Page 23 Utilisabilité des interfaces ISO 9241-11 – Efficiency Un e UI est efficace : si elle répond aux besoins des utilisateurs, est utilisable : l’utilisateur peut réaliser la tâche. – Effectiveness Une UI est effective si elle réduit les erreurs, augmente la performance, diminue le temps d’apprentissage… – Satisfaction Une UI est satisfaisante si les utilisateurs apprécient son utilisation, ne génère pas de stress… Différent de l’UX ISO 9241-210 : person's perceptions and responses that result from the use or anticipated use of aproduct, system or service.”
  • 24. – Page 24 Utilisabilité des interfaces : Comment Critères à mettre en œuvre : 1. Répondre aux besoins des utilisateurs (Efficiency) 2. Faciliter l’apprentissage et l’usage (effectiveness) 3. Informer : donner des retours d'information rassurants, utiles et immédiats (satisfaction) Quand ? 1. A la conception des IHM La conception doit répondre aux besoins, connaissances et caractéristiques des utilisateurs cibles. 2. Grâce à l’évaluation de l’IHM L’évaluation doit permettre de vérifier la bonne adéquation entre ce qui est fourni et les attentes des utilisateurs 3. Maquetter et prototyper Le maquettage doit être un support aux étapes 1. et 2. (rôle différent du maquettage basse et haute fidélité) Le prototypage fonctionnel doit valider les solutions technologiques visées
  • 25. – Page 25 Utilisabilité des interfaces 3 aspects étudiés à travers le module Cycle de vie des IHM conception évaluation Prototypage fonctionnel
  • 26. – Page 26 Analysedesbesoins Conception Conceptionlogicielle Codage TestsUnitaires Testsd’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 Utilisateurs - Ergonomes – Visual Designers - Développeurs
  • 27. – Page 27 Des nouveaux métiers ! Designer d’interactions http://www.onisep.fr/Ressources/Univers-Metier/Metiers/designer-d-interaction Designer UX / Designer UI http://www.cidj.com/article-metier/designer-ux-ui Web Designer http://www.onisep.fr/Ressources/Univers-Metier/Metiers/webdesigner Designer Web Mobile http://www.metiers.internet.gouv.fr/metier/designer-web-mobile Développeur mobile http://www.onisep.fr/Ressources/Univers-Metier/Metiers/developpeur-developpeuse-d-applications-mobiles
  • 28. E T A P E S D E L’E VA L U A T I O N E R G O N O M I Q U E : C O N C E P T I O N E VA LU A T I O N P R O T O T Y P A G E E T A P E S LO G IC I E L L E S : M O D E LE S D ’A R C H I T E C T U R E B O IT E S À O U T ILS T E S T S U N IT A IR E S Etapes du cycle de vie
  • 29. S T O R IE S P E R S O N A S E N G E S T IO N D E P R O J E T IN N O VA T I O N C ’E S T U N P E U D IF F É R E N T IC I O N P A R LE D E S C É N A R IO E T O N D É T A ILL E LE S P E R S O N A S ATTENTION vous avez déjà vu
  • 30. – Page 30 Conception : Modélisation de l’utilisateur  Objectifs  Identifier le(s) type(s) d’utilisateurs en présence  Identifier les besoins des utilisateurs  Identifier leurs compétences et leurs habitudes  Comment faire ?  Technique des questionnaires  Technique des entretiens  Tri  Focus Group
  • 31. – Page 31 Conception : Formaliser  Modélisation des utilisateurs  Technique des Personas  Modélisation des besoins utilisateurs  Description des taches HTA, UAN, CTT
  • 32. – Page 32 Créativité  Stimuler la créativité  Pour susciter les besoins  Pour innover  Pour se projeter dans l’avenir  Comment ? Le Design Thinking !  Méthode inspirée des Designers BRAINSTORMING Intelligence créative Intelligence émotionnelle http://www.lescahiersdelinnovation.com/2016/02/qu-est-ce-que-le-design-thinking/
  • 33. – Page 33 Maquettage  Maquette basse fidélité  Minimum de design pour se concentrer sur la navigation et les taches  Maquettage papier à vos papiers et à vos ciseaux Balsamiq ou Axure http://korben.info/18-outils-gratuits-mockups.html https://proto.io/  Fonctionnalités simulées  Technique du magicien d’Oz  Implémentation d’un scénario
  • 34. – Page 34 Evaluation  Evaluation coopérative  Évaluation centrée utilisateurs  Evaluation heuristique  Evaluation par analyse  Grille Xerox
  • 35. – Page 35 Prototypage Un premier prototype fonctionnel qui conforte sur le visuel et sur les fonctionnalités Mise en place d’un Visual Design  Charte graphique  Graphisme / animation Mise en place des principales fonctionnalités  Fonctionnalités  Architecture Logicielle
  • 36. – Page 36 Dimensionner le problème Axes d’étude possibles Techniques d’interaction Collaboration Contexte
  • 37. – Page 37 Dimensions de l ’espace problème prise en compte du Contexte Techniques d’interaction Collaboration Contexte
  • 38. – Page 38 Une définition du terme contexte  3 axes pour mesurer un changement de contexte  L’utilisateur (novice, avancé, handicapé, ...)  Le device (smart phone, grand écran, vocal, tactile…)  L’environnement (luminosité, bruit, ….)  En situation de mobilité le plus souvent  Découverte de l’environnement physique – reconnaissance de capteurs  Adaptation de l’application au nouveau contexte par rapport au besoin de l’utilisateur  Quelle situation ? Avec qui ? Avec quoi ? Où ?
  • 39. – Page 39 Système interactif sensible au contexte  Contexte : ensemble de propriétés, de phénomènes physiques qui peuvent être captés  Système interactif sensible au contexte  En fonction du lieu (GPS /beacons)  En fonction de la luminosité (capteur)  En fonction des devices en présence (bluetooth..)  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
  • 40. – Page 40 Identification des dispositifs d’interaction Le dispositif du dépanneur reconnait le matériel Le dépanneur peut accéder à la fiche technique et à la disponibilté des pièces….
  • 41. – Page 41 + Prise en compte de la localisation Profiter d’un dispositif de sortie plus adapté Situer sur un plan et fournir des informations
  • 42. – Page 42 Dimensions de l’espace problème Gestion du collaboratif  Selon trois axes Techniques d’interaction Collaboration Contexte
  • 43. – Page 43 Une définition du terme collaboration  Une application collaborative : application qui permet d’atteindre un but à plusieurs Plusieurs utilisateurs travaillent ensemble pour réaliser une ou plusieurs taches. Les murs, les tables sont des supports collaboratifs. Services offerts autour des réseaux sociaux Les jeux, … Utilisateurs ou groupe d’utilisateurs ? Quand ? Comment ?
  • 44. – Page 44 Collaboration et mobilité : découpage spatio-temporel  Déplacement dans l’espace  Variation dans le temps : synchronisme/ asynchronisme local distant asynchronesynchrone
  • 45. – Page 45 Mobilité : nouveau découpage spatial  Etude selon les lieux d’interaction et non la distance CONFINE : lieu de l’interaction délimité VAGABOND : lieu de l’interaction n’importe où Localisée : Les participants sont ensemble Non localisée : Les participant sont dispersés
  • 46. – Page 46 Dispositifs dédiés à la collaboration
  • 47. – Page 47 Dimensions de l ’espace problème Prise en compte et mise en place de techniques d’interaction Techniques d’interaction Collaboration Contexte
  • 48. – Page 48 Une définition du terme technique d’interaction  Une technique d’interaction Une technique qui permet de récupérer les données via un dispositif d’entrée auprès d’un utilisateur pour les transmettre à une application et de fournir des résultats à un utilisateur via un dispositif de sortie Quel type de dispositif ? Pour quel utilisateur ? Pour quel usage ?
  • 49. – Page 49 Problématique vis-à-vis de l’IHM  De très nombreuses techniques d ’interaction  Laquelle choisir ? Quand l’utiliser ? Comment l’intégrer ?  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, ... Quid de la voix, les doigts, les mouvements….  Système représentationnel langue pseudo-naturelle, manipulation directe, ... Système sensoriel Système cognitif
  • 50. – Page 50 Interactions : en sortie ou en entrée  Technique d ’interaction en sortie Son spatialisé : T = <haut-parleur, LN> Soundbeam Neckset RDV à 15h Technique d ’interaction en sortie
  • 51. – Page 51 Problèmes de 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.)
  • 52. – Page 52 Expérience 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>
  • 53. – Page 53 Interface « Baby face » Technique du magicien d’Oz  Magicien d ’oz Compère Sujet observé
  • 54. – Page 54 Interface « Baby face » : analyse des résultats  Usage des modalités par les sujets  Toutes commandes / Toutes sessions Vocale Tactile Gestuelle Embodied
  • 55. – Page 55 Interface « Baby face » conclusion ?  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é
  • 56. Mini-Projets CEIHM E TU D E E T D É VE LO P P E M E N T D ’U N S Y S TÈ M E P O U R LA S IG N A LIS A T I O N E T LA VIS U A LI S A T IO N D ’IN C ID E N T S .
  • 57. – Page 57 Des exemples d’événements
  • 58. – Page 58 Un événement c’est quoi ? Un incident : un événement temporel (ex. quand il a eu lieu, possiblement avec une durée, etc.) associé à une information spatiale (ex. géolocalisation, adresse postale, lieu remarquable, etc.). Incident mobile (ex. un chien errant) et/ou signalé dans un contexte de mobilité (ex. signalement d’un nid de poule aperçu pendant un déplacement en bus). De la même façon, l’incident peut être signalé au moment où il se produit (signalement synchrone) ou plus tard (asynchrone) selon la convenance de l’utilisateur. Pour recenser des informations (non attendues, rares et/ou insolites), fournir une entrée pour demande de réparation, informer sur l’état de l’environnement, etc
  • 60. – Page 60 Visualisation : contextes http://www.makery.info/2016/06/28/manipuler-la-big-data-au-doigt-et-a-table-avec-tangible-display/ https://www.technical-furniture.com/fr/produits/salles-de-controle-postes-de-commande/technologie-mur-de-image https://www.beumergroup.com/fr/produits/systemes-de-traitement-de-bagages/suite-logicielle-pour-
  • 61. – Page 61 Tâches communes aux différents contextes Signalement d’incident a) identification de l’incident par un individu ; b) description de l’incident ; c) partage de l’information avec d’autres individus. Visualisation d’incident d) suivi de l’évolution d’un incident en particulier ; e) visualisation (voire monitoring) de tous les incidents intéressants (recherche par zone géographique, type, etc.) f) juger de la pertinence d’un incident signalé par une autre personne.
  • 62. – Page 62 Exemple de travaux : incidents urbains
  • 64. – Page 64 Signalisation a posteriori et ou Visualisation SIGNALISATION Vs VISUALISATION
  • 65. – Page 65 Ce que vous devez faire… Constituer un groupe de 4 Choisir entre Signalisation ou Visualisation Choisir un contexte : vous pouvez en proposer Contrainte : il faut un groupe Signalisation et un groupe Visualisation minimum pour un contexte
  • 66. M É THO D O LO G I E E T E X E M P LE S Approfondissement
  • 68. – Page 68 Analyse de l’existant Comment les utilisateurs procèdent ? Avec quoi ?
  • 69. – Page 69 Etape 1 : Analyse de l’existant  Examiner le(s) système(s) interactif(s) existant(s) Dispositif Fonctionnalités Éléments d’IHM Interaction Système Interactif Utilisateur Buts Tâches …
  • 70. – Page 70 Etape 2 : Entretiens avec les utilisateurs Qui interviewer ? (Quels « utilisateurs » ?) Pourquoi interviewer ? Où et Quand interviewer ? Comment interviewer ? 1) Préparer l’interview 2) Mener l’interview 3) Analyser l’interview
  • 71. – Page 71 Etape 3 : Modélisation de l’utilisateur  Préciser les catégories d’utilisateurs de vos IHM  Méthode des personas (Cooper)  Décrire des personnes-types et leurs caractéristiques  Associer des scénarios à ces personnes-types  Elaborer des questions à poser à vos utilisateurs lors d’un entretien (guide d’entretien)
  • 72. – Page 72 Etape 4 : Modèles de tâches Les modèles de tâches sont des descriptions logiques des activités à réaliser pour atteindre les objectifs des utilisateurs Utiles pour concevoir, analyser et évaluer les applications logicielles interactives Les modèles de tâches décrivent comment les activités peuvent être réalisées pour atteindre les objectifs des utilisateurs lors de l’interaction avec l’application considérée.
  • 73. – Page 73 Etape 4 : Analyse et Modélisation de la tâche – Élaborer le modèle de tâches à l’aide d’un formalisme type HTA (Hierarchical Task Analysis) ou UAN (User Action Notation) ou CTT
  • 74. – Page 74 Etape 5 : EVALUATION COOPÉRATIVE Méthode conçue pour des informaticiens (= « concepteurs ne possédant pas de connaissances spécialisées en ergonomie » ) par des psychologues spécialistes des IHM (Monk, Wright, Haber et Davenport,1993)
  • 75. – Page 75 EVALUATION COOPÉRATIVE  Étape 1/ Préparer l'évaluation  Étape 2/ Réaliser l'évaluation  Étape 3/ Analyser les résultats de l'évaluation  Étape 4/ Tirer les conséquences de l'évaluation  Étape 5/ Rédiger le compte rendu de l'évaluation
  • 76. – Page 76 ÉVALUATION HEURISTIQUE PROTOCOLE Préparation des évaluateurs Mise à disposition de scénarios de tâche Préparation du jeu d’heuristiques Évaluations individuelles Après avoir réalisé les scénarios de tâche inspection de l’IHM en regard des heuristiques Confrontation des résultats Analyse
  • 77. – Page 77 ÉVALUATION HEURISTIQUE Inspection (cheminement (walkthrough)) informelle de l’IHM A partir d’une liste de principes heuristics inspecter l’interface afin d’identifier des problèmes potentiels d’utilisabilité  Auteur :  Jacob Nielsen
  • 78. – Page 78 Heuristiques initiales Dialogue simple et naturel Parler le langage des utilisateurs Ne pas surcharger la mémoire des utilisateurs Cohérence Feedback Sorties clairement indiquées Raccourcis Messages d’erreur appropriés Prévenir les erreurs Aide et documentation
  • 79. E X E M P L E S Illustration
  • 80. – Page 80 Exemple de maquettage Balsamiq
  • 81. – Page 81 Exemple de Persona  Identité Catherine  Données démographiques Femme de 35 ans, BAC+3 (Diplôme d’Etat de Psychomotricien)  Activités professionnelles Psychomotricienne Evalue les capacités des accueillis. Conçoit et réalise des ateliers en accord avec les profils des accueillis  Activités domestiques et de loisirs Aime les sorties (cinéma, théâtre, …) et pratique le yoga. Peut concevoir certains ateliers chez elle.  Buts et Tâches Création d’ateliers adaptés aux accueillis grâce à l’utilisation d’objets ou de photos personnalisées. Animation des ateliers préparés Suivi des accueillis  Connaissance et expérience des technologies Simple utilisatrice.  Usage des technologies Utilisation basique de son smartphone, consulte internet, réseaux sociaux et envoie des emails sur une tablette.  Attitudes à l’égard des technologies Elle a une légère réticence à utiliser une nouvelle technologie, mais elle est vite à l’aise une fois qu’elle s’est lancée, du moment que la technologie reste simple.  Communication Aime le contact humain. Très a l’écoute, entre facilement en contact avec les autres et montre beaucoup de sympathie, de patience et pédagogie avec les accueillis.  Citation “Passer moins de temps a organiser les ateliers, c’est passer plus de temps avec les accueillis.”  Buts de vie “Comprendre et aider les gens qui souffrent”  Buts d'expérience “Être plus efficace dans mon travail” “Ne plus perdre de temps à organiser les photos utilisées pendant les ateliers”.
  • 82. – Page 82 Exemple de Persona Identité Jacques Données démographiques Homme de 70 ans Activités professionnelles Retraité, ancien professeur(e) de collège et de lycée en sciences naturelles, BAC+5 Activités domestiques et de loisirs Il aime flâner dans son jardin et y sème encore quelques fleurs. Buts et Tâches Il doit s'entraîner à créer et garder des automatismes pour les gestes de la vie quotidienne Connaissance et expérience des technologies Très faible Usage des technologies Forcé d’avoir un téléphone mobile, il n’utilise que le fixe. Attitudes à l’égard des technologies Peut comprendre les bénéfices de ceux-ci, sans pour autant comprendre leur fonctionnement. Curieux, mais découragé en ayant le sentiment que le fossé est trop grand. Communication Très à l’aise avec tout le monde. Peut être autoritaire. Citation “Il faut profiter de la vie” Buts de vie “Profiter de la vie” Buts d’expérience “Garder un lien social” “S’amuser en participant à des activités” “Conserver au maximum son indépendance” Buts cibles “Joindre l’utile à l’agréable”
  • 83. – Page 83 Exemple de scénario Ajout d’un accueilli Utilisateur : Persona Catherine, animatrice au centre d’accueil de jour. Scénario Catherine: “J’ai un nouvel arrivant, aujourd’hui. Je viens de finir son bilan psychomoteur et Jacques est sur le point de partir. J’en profite pour commencer la création de sa fiche en prenant une photo avant qu’il s’en aille. Je le raccompagne à l’accueil, puis je finalise la fiche avec quelques renseignements administratifs sur ce nouvel accueilli et son accompagnant et surtout mes notes à propos du bilan.” Dispositif visé Application sur tablette.
  • 84. – Page 84 Exemple de scénario projeté Scénario Création d’activité Catherine: “Jacques s’ennuie un peu dans les ateliers autour de la salle de bain. Les activités actuelles sont un peu trop faciles pour lui. En discutant avec Patrick j’ai pensé à une nouvelle activité: nettoyer ses lunettes. Patrick m’a dit que Jacques faisait ça dans la salle de bain, avec le savon ordinaire, puis qu’il les séchait avec un petit tissu spécial. Je crée la nouvelle activité que j’appelle “Nettoyer ses lunettes”. Comme pièce, je sélectionne la salle de bain (que j’ai déjà créée lors de l’activité “lavage de mains”). Comme objet, je sélectionne le savon et la serviette (que j’ai déjà aussi), puis j’ajoute les lunettes et le petit chiffon. Comme action, j’ajoute “mouiller les lunettes”, j’utilise “se savonner les mains” que j’ai déjà, j’ajoute “nettoyer les lunettes”, puis j’utilise “se sécher les mains”, et enfin j’ajoute “sécher les lunettes.” Dispositif Application sur tablette.
  • 85. – Page 85 Arbre de tâches HTA
  • 87. – Page 87 Miroir intelligent Scénario projeté 1 : Françoise se coiffe C’est le matin, Françoise est habillée, n’a pas encore pris son petit déjeuner. En arrivant dans la cuisine, Christian qui était en train de préparer leur repas se rend compte que son épouse a oublié de se coiffer. Il suspend alors son activité et explique à sa femme qu’elle doit se coiffer. Il accompagne Françoise dans la salle de bain. Il la place devant le miroir. La liste des activités proposées s’affiche et il sélectionne “se coiffer”. Un court extrait de “L’Indien” de Barbara résonne dans la salle de bain (morceau choisi par Christian à l’initialisation de l’application pour cette activité). Sur le miroir s’affiche alors à gauche les étapes à réaliser, illustrées par des photos. La première est mise en valeur. Une consigne vocale indique à Françoise ce qu’elle doit faire à chaque étape. Le système détecte bien que Françoise en train de réaliser les mouvements attendus et les étapes se succèdent sans souci. Une fois la dernière étape terminée, un “Bravo !” est adressé à Françoise, le système informe Christian via un système de notification que l’activité a été réalisé avec succès.
  • 88. – Page 88 Miroir intelligent
  • 89. Heuristique Commentaires par rapport aux heuristiques Ecran concerné Elément de l'écran Souci repéré Sévérité (1 = mineur à 3 = grave) Fréquence 1 = rare 4 = permanent Bloquant oui/non Recommandations Visibilité du statut du système Correspondan ce système et monde réel ce point sera crucial et dépendra énormément des photos ou pictogrammes utilisés dans les séquences lors de la réalisation des activités. Contrôle et liberté de l’utilisateur cet aspect est difficilement atteignable du point de vue des accueillis, (guidés mais pas contrôlés) Consistance et standards Prévention des erreurs Heuristique adressée aux accompagnants et aux aides- soignants. le principe même de l’application est
  • 90. VO S P R E D E C E S S E U R S O N T É TÉ C R E A TIF S LA C R É A TIV I T É R É A LIS TE / A VA N T G A RD IS TES ? La créativité c’est quoi ?
  • 91. Exemple de dispositif d’entrée : Utilisation de la Wiimote pour des présentations en salle Eric Nouri Cédric Pein Maximilien Perrin Yannick Reynard 2007/2008
  • 92. – Page 92 POINTS FORTS  Mise en situation pour le recueil d’information concernant les gestes  Magicien d’Oz  Scénario  Méthode d’évaluation coopérative
  • 93. Audience Etat actuel Nos objectifs Audience
  • 96.  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 ».
  • 98.  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
  • 101.  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 ?
  • 102.  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
  • 103.  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.
  • 104. AVANCEES TECHNIQUES - Construction des gants : création d’un dispositif d’entrée
  • 105. POINT FORT Mise en situation : un vrai prototype
  • 106. AVANCEES TECHNIQUES Webcam - Traitement des images -Détection des diodes -Problèmes et limites
  • 107. Mise en place de l’évaluation
  • 108. A L E X A N D R E A U R E L I – F R É D É R I C L A U R E N D E A U – N I C O L A S R O N D E L É – C H R I S T O P H E S C H R E I B E R BESTOF 2005 POINT FORT : Questionnaire ciblé et adapté Mobilité – prise en compte D’utilisateurs spécifiques Baladeur MP3 pour enfants
  • 109. – Page 109 Démarche préalable (3/5)  Enfants de 3-6 ans  Quid de la Dextérité et de la Capacité de raisonnement  Appareil attractif pour un enfant de 6 ans  Problème : Réalisation d’un questionnaire  Données visées  Habitudes d’écoute  Connaissances technologiques  Préférences visuelles  Attente des futurs utilisateurs
  • 110. – Page 110 Solution pour acquérir les besoins Démarche Sondage par l’instituteur Rédaction des directives Questionnaire Ludique (captiver l’attention des enfants) Pédagogique (nécessité d’une finalité pour chaque activité)
  • 111. – Page 111 Prototype – Evolution du prototype • Première version • Version finale • Travail sur les coques amovibles (Clémentine Némo and co)
  • 112. – Page 112 Objectif initial : Simplifier l’ensemble des commandes, Faciliter leur accès Et Améliorer la sécurité d’utilisation POINT FORT : Etude de l’existant Magicien d’Oz Prototypage des fonctionalités Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Best Of 2005 Une forte fiabilité Utilisation ergonomique d’un autoradio
  • 113. – Page 113 Emplacement de l’affichage Projection sur le pare-brise  Temps de détournement du regard diminué 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
  • 114. – Page 114 Emplacement des commandes  Regroupement sur le volant  Accès direct Zone tactile (pad) + 4 boutons (nbre d’appui) ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005 Commandes spécifiques à la source écoutée Fonctions avancées Navigation Commandes globales de l’autoradio Fonctions liées au son Mode
  • 115. – Page 115 PROTOTYPE Se rapprocher d’une utilisation réelle ESSI 3 Claire Fiastre – Jean Hodot – Pierre Leca – Pierre Reveillon Année 2004/2005 Son ? Extraits de radios Affichage ? Ecran d’ordinateur Commandes ? Touches du clavier Souris d’ordinateur portable
  • 116. – Page 116 Exercice - Catégorisations : autoradio  Role et cycle de vie  Ergonome, Designer, Développeur, Utilisateurs visés  Axes  Prise en compte du contexte (lieu, temps, environnement)  Techniques d’intéractions (en entrée, en sortie, mono / multiples)  Collaboration (en mobilité ou non, synchrone / asynchrone)  Devices visés  Supports variés fixes ou évolutifs
  • 117. – Page 117 Ce cours ne serait pas ce qu’il est sans …  Mes collègues chercheurs en IHM, la richesse de nos discussions et de leurs sites web  Mes anciens étudiants, leurs retours instantanés et leurs mini projets  Mes contacts industriels avec les collaborations recherche et les encadrements communs d’étudiants du parcours De quoi réfléchir : http://www.youtube.com/watch?v=vyUXEbe7Fxs