intro conception et évaluation des ihm

104
Conception et Evaluation d’ IHM INTRODUCTION AU MODULE Anne-Marie Déry - [email protected]

Upload: anne-marie-pinna-dery

Post on 15-Apr-2017

941 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Intro conception et évaluation des IHM

Conception et Evaluation d’ IHM

INTRODUCTION AU MODULE

Anne-Marie Déry - [email protected]

Page 2: Intro conception et évaluation des IHM

– 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: Intro conception et évaluation des IHM

– Page 3

IHM et la diversité des supports

Des supports variés avec des capacités d’interaction

Différentes : bornes – tables

– vitrines – murs interactifs

Taille des écrans – multi touch ou non – utilisateur experts ou non Environnement bruyant – sombre …

Page 4: Intro conception et évaluation des IHM
Page 5: Intro conception et évaluation des IHM
Page 6: Intro conception et évaluation des IHM
Page 7: Intro conception et évaluation des IHM
Page 8: Intro conception et évaluation des IHM

– Page 8

IHM et la diversité des supports

Des supports variés avec des capacités d’interaction

Différentes : des supports dédiés

Utilisateurs experts – efficacité sécurité mobilité

Page 9: Intro conception et évaluation des IHM

ispositif futuriste "Immersed Senses

http://zomards.free.fr/spip.php?article444

Page 10: Intro conception et évaluation des IHM

M E M E S U S A G E S

M E M E S S E R V I C E S

IHM et supports mobiles

Page 11: Intro conception et évaluation des IHM

N O U V E A U X U S A G E S

N O U V E A U X S E R V I C E S

IHM et supports mobiles

Page 12: Intro conception et évaluation des IHM
Page 13: Intro conception et évaluation des IHM

– Page 13

Objets connectés : gadgets ?

Page 15: Intro conception et évaluation des IHM

– Page 15

IHM, utilisateurs et usages

Complexification de la conception ergonomique et

logicielle

Continuité de service

Page 16: Intro conception et évaluation des IHM

– Page 16

Page 18: Intro conception et évaluation des IHM

– Page 18

Problématique actuelle

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 19: Intro conception et évaluation des IHM

– Page 19

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 20: Intro conception et évaluation des IHM

– Page 20

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 21: Intro conception et évaluation des IHM

– Page 21

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 22: Intro conception et évaluation des IHM

– Page 22

Utilisabilité des interfaces

Critères à mettre en œuvre : 1. Répondre aux besoins des utilisateurs 2. Faciliter l’apprentissage et l’usage 3. Informer : donner des retours d'information rassurants, utiles et immédiats Des moyens 1. Concevoir les IHM

La conception doit répondre aux besoins, connaissances et caractéristiques des utilisateurs cibles.

2. Evaluer les 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. Le prototypage doit valider des solutions logicielles adaptées

Page 23: Intro conception et évaluation des IHM

– Page 23

Utilisabilité des interfaces

3 aspects étudiés à travers le module conception, évaluation, prototypage

Cycle de vie des IHM

Page 24: Intro conception et évaluation des IHM

– Page 24

A n a l y s e d e s b e s o i n s

C o n c e p t i o n

C o n c e p t i o n l o g i c i e l l e

C o d a g e

T e s t s U n i t a i r e s

T e s t s d ’ i n t é g r a t i o n

T e s t s U t i l i s a t e u r s Evaluation ergonomique

Boîtes à outils

Mécanismes généraux

Modèle d’architecture logicielle

Espace de conception

Propriétés ergonomiques

Rôles et Acteurs Utilisateurs - Ergonomes – Visual Designers -

Développeurs

Page 25: Intro conception et évaluation des IHM

– Page 25

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

Page 26: Intro conception et évaluation des IHM

E T A P E S D E L ’ E V A 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 V A L U A T I O N

P R O T O T Y P A G E

E T A P E S L O G I C I E L L E S :

M O D E L E S D ’ A R C H I T E C T U R E

B O I T E S À O U T I L S

T E S T S U N I T A I R E S

Etapes du cycle de vie

Page 27: Intro conception et évaluation des IHM

S T O R I E S

P E R S O N A S

E N G E S T I O N D E P R O J E T I N N O V A T I O N

C ’ E S T U N P E U D I F F É R E N T I C I

O N P A R L E D E S C É N A R I O E T O N D É T A I L L E L E S P E R S O N A S

ATTENTION vous avez déjà vu

Page 28: Intro conception et évaluation des IHM

– Page 28

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 29: Intro conception et évaluation des IHM

– Page 29

Conception : Formaliser

Modélisation des utilisateurs

Technique des Personas

Modélisation des besoins utilisateurs

Description des taches HTA, UAN, CTT

Page 31: Intro conception et évaluation des IHM

– Page 31

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 32: Intro conception et évaluation des IHM

– Page 32

Evaluation

Evaluation coopérative

Évaluation centrée utilisateurs

Evaluation heuristique

Evaluation par analyse

Grille Xerox

Page 33: Intro conception et évaluation des IHM

– Page 33

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 34: Intro conception et évaluation des IHM

– Page 34

Dimensionner le problème

Trois axes d’étude possibles

Techniques d’interaction

Collaboration

Contexte

Page 35: Intro conception et évaluation des IHM

– Page 35

Dimensions de l ’espace problème prise en compte du Contexte

Techniques d’interaction

Collaboration

Contexte

Page 36: Intro conception et évaluation des IHM

– Page 36

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 37: Intro conception et évaluation des IHM

– Page 37

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 38: Intro conception et évaluation des IHM

– Page 38

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 dsiponibilté des pièces….

Page 39: Intro conception et évaluation des IHM

– Page 39

+ Prise en compte de la localisation

Profiter d’un dispositif de sortie plus adapté

Situer sur un plan et fournir des informations

Page 40: Intro conception et évaluation des IHM

– Page 40

Dimensions de l’espace problème Gestion du collaboratif

Selon trois axes

Techniques d’interaction

Collaboration

Contexte

Page 41: Intro conception et évaluation des IHM

– Page 41

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, …

Quels utilisateurs ? Quand ? Comment ?

Page 42: Intro conception et évaluation des IHM

– Page 42

Collaboration et mobilité : découpage spatio-temporel

Déplacement dans l’espace

Variation dans le temps : synchronisme/ asynchronisme

local distant

asyn

ch

ron

e

syn

ch

ron

e

Page 43: Intro conception et évaluation des IHM

– Page 43

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 44: Intro conception et évaluation des IHM

– Page 44

Dispositif dédié à la collaboration Tables tactiles

Page 45: Intro conception et évaluation des IHM

– Page 45

Dimensions de l ’espace problème Prise en compte et mise en place de techniques d’interaction

Techniques d’interaction

Collaboration

Contexte

Page 46: Intro conception et évaluation des IHM

– Page 46

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 47: Intro conception et évaluation des IHM

– Page 47

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 48: Intro conception et évaluation des IHM

– Page 48

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 49: Intro conception et évaluation des IHM

– Page 49

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 50: Intro conception et évaluation des IHM

– Page 50

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 51: Intro conception et évaluation des IHM

– Page 51

Interface « Baby face » Technique du magicien d’Oz

Magicien d ’oz

Compère Sujet observé

Page 52: Intro conception et évaluation des IHM

– Page 52

Interface « Baby face » : analyse des résultats

Usage des modalités par les sujets

Toutes commandes / Toutes sessions

Vocale

Tactile

Gestuelle

Embodied

Page 53: Intro conception et évaluation des IHM

– Page 53

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é

Page 54: Intro conception et évaluation des IHM

M É T H O D O L O G I E

E T E X E M P L E S

Approfondissement

Page 55: Intro conception et évaluation des IHM

– Page 55

Analyse de l’existant

Comment les utilisateurs procèdent ? Avec quoi ?

Page 56: Intro conception et évaluation des IHM

– Page 56

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 57: Intro conception et évaluation des IHM

– Page 57

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 58: Intro conception et évaluation des IHM

– Page 58

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 59: Intro conception et évaluation des IHM

– Page 59

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 60: Intro conception et évaluation des IHM

– Page 60

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)

Page 61: Intro conception et évaluation des IHM

– Page 61

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 62: Intro conception et évaluation des IHM

– Page 62

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 63: Intro conception et évaluation des IHM

– Page 63

É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 64: Intro conception et évaluation des IHM

– Page 64

É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 65: Intro conception et évaluation des IHM

– Page 65

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

Page 66: Intro conception et évaluation des IHM

E X E M P L E S

Illustration

Page 67: Intro conception et évaluation des IHM

– Page 67

Exemple de maquettage Balsamiq

Page 68: Intro conception et évaluation des IHM

– Page 68

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 grace à 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 69: Intro conception et évaluation des IHM

– Page 69

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 70: Intro conception et évaluation des IHM

– Page 70

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 71: Intro conception et évaluation des IHM

– Page 71

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 72: Intro conception et évaluation des IHM

– Page 72

Arbre de tâches HTA

Page 73: Intro conception et évaluation des IHM

– Page 73

Page 74: Intro conception et évaluation des IHM

– Page 74

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 75: Intro conception et évaluation des IHM

– Page 75

Miroir intelligent

Page 76: Intro conception et évaluation des IHM

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

Bloquantoui/non

Recommandations

Visibilité du statut du système

Correspondance 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.

Reconnaissance plutôt que rappel

le principe même de l’application est d’être un aide-mémoire, et donc de susciter le rappel plutôt que la reconnaissance. Néanmoins, la musique pourra être un vecteur de reconnaissance, cet aspect sera à évaluer par les tests utilisateurs. Ce critère sera par contre à respecter pour les aides-soigantes et les accompagnants.

Flexibilité et efficience de l’utilisation

« Design » esthétique et minimaliste

Aide à la reconnaissance, au diagnostic et à la correction des erreurs

cette heuristique sera très importante aussi du point de vue des accueillis, mais aussi vis-à-vis du personnel du centre et des accompagnants. La temporisation entre les périodes d'inactivité sera à évaluer ici

Aide et documentation

Page 77: Intro conception et évaluation des IHM

V O S P R E D E C E S S E U R S O N T É T É C R E A T I F S

L A C R É A T I V I T É R É A L I S T E / A V A N T G A R D I S T E S ?

La créativité c’est quoi ?

Page 78: Intro conception et évaluation des IHM

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 79: Intro conception et évaluation des IHM

– Page 79

POINTS FORTS

Mise en situation pour le recueil d’information concernant les gestes

Magicien d’Oz

Scénario

Méthode d’évaluation coopérative

Page 80: Intro conception et évaluation des IHM

Audience

Etat actuel Nos objectifs

Audience

Page 81: Intro conception et évaluation des IHM
Page 82: Intro conception et évaluation des IHM
Page 83: Intro conception et évaluation des IHM

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 84: Intro conception et évaluation des IHM
Page 85: Intro conception et évaluation des IHM

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 86: Intro conception et évaluation des IHM
Page 87: Intro conception et évaluation des IHM
Page 88: Intro conception et évaluation des IHM

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 89: Intro conception et évaluation des IHM

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 90: Intro conception et évaluation des IHM

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 91: Intro conception et évaluation des IHM

AVANCEES TECHNIQUES

- Construction des gants :

création d’un dispositif d’entrée

Page 92: Intro conception et évaluation des IHM

POINT FORT

Mise en situation : un vrai

prototype

Page 93: Intro conception et évaluation des IHM

AVANCEES TECHNIQUES

Webcam

- Traitement des images

-Détection des diodes

-Problèmes et limites

Page 94: Intro conception et évaluation des IHM

Mise en place de l’évaluation

Page 95: Intro conception et évaluation des IHM

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 96: Intro conception et évaluation des IHM

– Page 96

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 97: Intro conception et évaluation des IHM

– Page 97

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 98: Intro conception et évaluation des IHM

– Page 98

Prototype

– Evolution du prototype

• Première version

• Version finale

• Travail sur les coques amovibles

(Clémentine Némo and co)

Page 99: Intro conception et évaluation des IHM

– Page 99

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 100: Intro conception et évaluation des IHM

– Page 100

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 101: Intro conception et évaluation des IHM

– Page 101

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 102: Intro conception et évaluation des IHM

– Page 102

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 103: Intro conception et évaluation des IHM

– Page 103

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 104: Intro conception et évaluation des IHM

– Page 104

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