conception et evaluation des interfaces homme … · messageprobe [hcil’02] videoprobe [ihm’03]...
TRANSCRIPT
Conception et Evaluation desInterfaces Homme-Machine
Wendy E. Mackay
LRI Université Paris-Sud, CNRS, INRIA
Mon expérience professionnelle
Formation :Psychologie expérimentaleInformatiqueGestion de lʼinnovation
Industrie (Digital Equipment)Développement de logiciels multimédia
Recherche (MIT, Xerox PARC, U. Paris-Sud, U.Aarhus, INRIA)Systèmes interactives : multimédia, réalité mixteMéthodes interdisciplinaires: conception participative
et vous ?
Interaction Située
La génération de nouvelles formes dʼinteractionqui augmentent les capacités humaines etinspirent la prochaine génération de systèmes interactifs
puis
sanc
e
simplicité
Les choses simple doivent rester simpleLes choses complexe doivent être possible
Le défi :
Interaction Située
La génération des nouvelles formes dʼinteractionqui augmentent les capacités humaines etinspirent la prochaine génération de systèmes interactifs
puis
sanc
e
simplicité
Le défi : Comment bouger la courbe ?
in|situ| Interaction Située
Thèmes de recherche :
Paradigmes dʼinteraction et de visualisation
Communication médiatisée
Conception participative
Ingénierie des systèmes interactifs
Semantic Pointing [CHI’04] Orthozoom [CHI’06] Metisse [UIST’05]
Paradigmes dʼinteraction
Comment rendre lʼinteraction plus simpleet plus puissante ?
Distinguer lʼespace moteur de lʼespace visuelIntégrer plusieurs dimensions (pan+zoom)Utiliser les métaphores du monde physique
Paradigmes de visualisation
Comment rendre la navigation plus simpleet plus puissante ?
Utiliser les capacitées perceptuellesNaviguer de la perspective de lʼutilisateurPasser du focus au contexte
Sigma lenses [CHI’08]Perspective View [HCI’06] Mélange [CHI’08]Navigation large graphs [CHI’09]
Object Tracker [CHI’06] Musink [CHI’09]OctoPocus [UIST’08] Arpege [soumis]
Paradigmes dʼinteraction
Comment aider lʼutilisateur à apprendre ?Aider lʼutilisateur à comprendre ce que fait lʼordinateurAider lʼordinateur à comprendre ce que fait lʼutilisateurDonner à lʼutilisateur le droit de définir ses propres commandes
Paradigmes dʼinteraction
Comment interagir avec les objets physiques ?Aider lʼutilisateur à capturer le monde réel à interagir avec le monde réel
SketchCam [IDC’07] TangicamCam [IDC’05] A-book [UIST’05] A20 [NIME’08]
Communication médiatisée
MessageProbe [HCIL’02] VideoProbe [IHM’03]
Comment communiquer avec les proches à distance ?Communication appliance : objet dédié
MirrorSpace [Multimedia’06] FamilyNet [Soups’05]
WeMe [HCII’05] Telebeads [IDC’06] MirrorSpace [IEEE Multimedia’04]FamilyNet [Soups’05]
Communication médiatisée
Comment communiquer avec les proches à distance ?Communication appliance : objet dédié
Ingénierie des systèmes interactifs
Création de toolkits et plateformesSystèmes de fenêtrageConception et exécution d’expériences contrôléesLien entre le papier et les activités en-ligne
Façades [UIST’08] Touchstone [CHI’07] Prism [CSCW’08]
Ingénerie des systèmes interactifs
WILD: Wall-Sized Interaction with Large DatasetsMur dʼimage interactif haute-résolution + table interactive32 écrans de 75cm, Mac/Linux/Windows130 millions de pixels, 5m50 x 1m80Suivi des gestes et des objetsUtilisateurs : 10 laboratoires de recherche, Univ. Paris-Sud
in|situ| Interaction Située
Thèmes de recherche :
Paradigmes dʼinteraction et de visualisation
Communication médiatisée
Conception participative
Ingénierie des systèmes interactifs
Ingénieurs Utilisateurs
!!
Chercheurs
Conception participative
Comment améliorer le processus de conception ?Trouver des techniques pour faire communiquer
les chercheurs, les ingénieurs et les utilisateursdans un langage commun ?
Point de vue scientifiqueSciences Sociales Collecter des données Informer les designers
Point de vue de l’ingénierie
Ingénierie Investiguer les problèmes techniques S’assurer que ça marche “in situ”
Point de vue du designDesign Inspirer des idées Remettre le problème en question
Conception participative
Trois perspectives :
Conception Générative
Quatre phases
Decouverte : qui est l’utiisateur ?
Invention : qu’est-ce qui est possible ?
Conception : qu’est-ce qu’on fait ?
Evaluation : est-ce que ça marche ?
userprofile
designspace
design
anlysis interpret
redesignimplicatons
designbrief
axesdesignoptions
newideas
usertests
userinsights
Quatre phases
InventerConcevoir
Evaluer ComprendreChaque phase :
1. Collection d’information
2. Analyse d’information
3. Génération deresources pourla conception
Approche pluridisciplinaire
design
psychologie
sociologieanthropologie
design industriel
typographie
arts graphiques
sciences de la nature
systèmesinteractifs
ingénierie
architectureinformatique
électroniquemécanique optique
physiologie
Méthode Scientifique - déductive
Théorie
Monde réel
Nouveau modèleModèle
Observation Evaluation
Nouveau modèle
Evaluation
Méthode Scientifique - inductive
Théorie
Monde réel
Nouveau modèleModèle
Observation Evaluation
Nouveau modèle
Evaluation
La science est cyclique
Théorie
Monde réel
Nouveau modèleModèle
Observation Evaluation
Nouveau modèle
Evaluation
Un mélange de la science et de lʼingénierie
Théorie
Monde réel
Interactionavec unartefact
Prototype
Nouveau modèleModèle
Simulation
Observation Evaluation
Nouveau modèle
Evaluation
Trade-offs
A
C
B
I
IIII
IIII
IV IV
III
FieldExperiments
FieldStudies
ComputerSimulations
FormalTheory
SampleSurveys
JudgementTasks
LaboratoryExperiments
ExperimentalSimulations
Particular Behavior SystemsUniversal Behavior Systems
UnobtrusiveResearch
Operations
ObtrusiveResearch
Operations
I. Settings in natural systems II. Contrived or created settingsIII. Behavior not setting dependentIV. No behavior observation needed
Major concern is:
A. Generality over actorsB. Precise measure of behaviorC. System character of context
Runkel & McGrath
Triangulation
Il est difficile d'être sûrUtiliser différentes paramétrisationsFaire varier le dispositif expérimental
Utiliser différentes méthodesExpérienceEtude de casInterviews
Exemples de méthodes pluridisciplinairesAnalyser
l’utilisateurInventerles idées
Prototyper le système
Evaluerle système
reconcevoirle système
Videobrainstorming
Participatory DesignDesign/Arts
Culturalprobe
Softwaresimulation
Computer science
Designwalkthrough
Psychology
Scenarioanalysis
Activity Theory
GroundedTheory
Cognitive Psychology
Designscenario
HCI
Designroom
Design/Arts
DesignCritique (Crit)
Design/Arts
Protocolanalysis
Cognitive Psychology
Heuristics
HCI
"Fly-on-the-wallobservation
Ethnography
Focusgroup
Marketing
Oralbrainstorming
Psychology
Paperprototyping
Participatory Design
InteractiveThread
HCI
GenerativeWalkthrough
HCI
Critical incidentinterview
Human Factors
Designspace
Design
Videoprototyping
Participatory Design
Usabilitystudy
Human Factors
ContextualInquiry
Antrhopology Design/Arts
Technologyprobe
Questionaire
Sociology
Wizard ofOz
Human Factors
Sketching
Design/Arts
Taskanalysis
Human Factors
DesignRationale
HCI
Comprendrel’utilisateur
Comprendre l’utilisateur
1. Collecte des informations :introspectioncarnetsobservationinterviewsquestionnaires
2. Analyse des informationsʻgrounded theoryʼʻcontextual inquiryʼ
3. Ressources pour le designScénarioProfil dʼutilisateur
introspection observation
interviews
questionnaires
Scenario
Profile d’utilisateur
carnets
Introspection
Le concepteur essaie le système,en essayant de penser comme lʼutilisateurEst-ce que le système lui convient ?
Ce que l'on peut faire systématiquement :Commencer avec une vraie tâcheChoisir un temps limitéSʼassurer quʼon ne sera pas interrompuParler ou écrire pendant que vous travaillezAnalyser ce que vous avez observé :
Interactions positives et négativesSurprisesIdées pour améliorer lʼinteraction
Carnet
Un carnet aide lʼutilisateur à reflêchir à son activitéau moment quʼil est en train dʼinteragir
Carnet
Questionnaires
Quelle information recherchez-vous ?Demander seulement ce qui est pertinent
Qui est le public ?50 - 1000 personnes
Comment l'envoyer et le récupérer ?En ligne ? Par courrier ?
Comment analyser les résultats ?Les questions déterminent les statistiques
Structure des phrases :ParallelOrdre cohérent
Zéro est soit une réponse moyenne, soit "je ne sais pas"
Questionnaires
Background Quelle est votre âge ?
Informations générales Depuis combien d'années utilisez-vous lʼemail ?
Questions dirigées Combien de messages avez-vous reçu aujourd'hui ?
Choix multiple J'utilise la fonction de destruction de messageo souvent o parfois o rarement o jamais
Scalaire Je peux facilement gérer mon courrier : Pas d'accord D'accord
-2 -1 0 1 2
Classement Classer les fonctions suivantes par ordre d'utilité :___ Copie aveugle___ Copie automatique à une liste de distribution___ Copie automatique à moi-même
Questions ouvertes Décrivez comment vous utiliser lʼemail ?
Interviews
Questions spécifique et dirigéesMêmes questions, même format pour tout le mondeAjouter des questions et re-interroger les sujets
Questions spécifique et ouvertes :e.g., Technique de l'incident critiqueInterroger à propos d'un événement marquant récent(la semaine dernière)Généraliser à partir d'un cas particulier
Questions générales et ouvertesPermettre aux utilisateurs d'expliquer ce qu'ils fontà leur manière
Poser des questions
spécifique
général
dirigé ouvert
incident critique
événement récentartifact spécifiqueheure spécifique
spéculation
opinion généraleélaboration
background
usage quotidien
classification
choix multipleéchelle Likert
opinion spécifique recommandationsréponse courte
InterviewsPeu de repondantsOn peut poser un serie de questions pour savoir plusAnalyse à la main
QuestionnairesPlein de repondantsPas de questions en plusAnalyse automatique possible pourquoi
commentaire
interview
questionnaire
Observation
Sur le terrain :La validité dépend des détailsChaque observateur est biaiséObserver quelquʼun ≠ interagir avec quelquʼunQuestions éthiques ...
On peut observer … ou dirigerDemander aux utilisisateurs d'effectuer des tâches
Observation simpleExpliquer à haute voixApprentissage coopératif ou co-découverte
Combiner avec des interviews ou des questionnaires
Invention : Generation des idées
1. Collecte des informationsRecherche webBrainstorming oralBrainstorming vidéo
2. Analyse des informationsVotes de préférenceAxes de technology
3. Ressources pour le designIdées clésEspace de conception
Recherche webBrainstorming oral
Brainstorming vidéo
Axes
Idées clés
Espace conception
Votes
Brainstorming
But :Générer autant d'idées créatives que possible
ProcédureChoisir un petit groupe avec différents rôles et expertisesLimiter le temps à (1 heure maximum)Décrire un problème de conception spécifiqueGénérer autant d'idées que possible
Les écrire sur un tableau ou un transparentNE PAS les évaluer
AnalyseA la fin, chacun choisit les 3 "meilleures" idées
Règles pour le brainstorming oral
Phase 1 : Générer une quantité d'idéesTout le monde participeEnregistrer toutes les idées …… y compris les idées "stupides"Ne pas évaluer les idées
Règles pour le brainstorming oral
Phase 1 : Générer une quantité d'idéesTout le monde participeEnregistrer toutes les idées …… y compris les idées "stupides"Ne pas évaluer les idées
Phase 2 : Classer en fonction de la qualitéVoter : chacun choisit ses idées préféréesClasser les idées par nombre de votesCommencer à discuter de la conception
à partir des "meilleures" idéesNe pas oublier les idées insolites
Technique des opposés
Si vous ralentissez, élargir lʼespace des possibilités.
Pensez aux opposés :simple compliquécourt longbon mauvaisdirect indirecttexte graphiquedrôle sérieuxprocessus objetdébut finindividuel séquence
Analyser les idées
VoterRelire chaque idée (scribe)Chaque personne fait un ʻxʼ à côté des trois ʻmeilleuresʼ idéesEst-ce quʼil y a des groupes dʼidées ?Résultat : Identifier les idées clés
Catégoriser les idéesDécouper les idées (ou les écrire sur des post-its)Organiser les idées qui vont bien ensembleChercher les trous et ajouter des idéesRésultat : Axes de technologie
Créer un espace de conceptionMettre les idées sur les axesChoisir les idées à poursuivre pour votre projet
Examples de brainstorming video
Brainstorming initialPrototypage style : Magicien d’OzSystème actuel
Conception : Quʼest-ce quʼon fait ?
1. Collecte des informationsCahier de charge+ résultats de phases précédentes
2. Analyse des informationsTable fonctionnelleAlternatives
3. Ressources pour le designScénario de conceptionStoryboardMaquettePrototype vidéo
Cahier de charge
Scénario conception
StoryboardMaquette
Prototype vidéo
Résultats
Alternatives
Table
La Conception demande …
… des choixNous créons des prototypes pour exprimer des concepts spécifiques
le but est la qualité, pas la quantité des idées
Attention ! Chaque choix limite les options,mais pose de nouvelles questionset souvent ouvre dʼautres possibilités
Scénario de Conception
But Créer une déscription réalistede lʼutilisation du nouveau système
ProcédureChoisir le profil de lʼutilisateurDécider comment cet utilisateur interagira avec votre
nouveau système, dans un context réelRaconter lʼhistoire de cette utilisation, pas à pas
Storyboard
Emprunté au monde du cinéma pour illustrer le scénario avec :Images clésPlansSous-titres et commentairesEnchaînements
Utilisé dans lʼindustriepour les DVDs
Donne une vuedʼensemble delʼinteraction
storyboard de Digital Equipment
Storyboard
But Illustrer le scénario de conceptionlʼutilisation de votre système par un vrai utilisateur,dans un contexte réel
ProcédureCommencer avec le scénarioCréer une série dʼimages + texte pour illustrer lʼhistoire
gros planmontrer
l’interaction
intertitre continuer
l’histoire …
Pierre laisse un message pour …
crédits noms de membres
du groupe
Structure dʼun Storyboard
titre du systèmeiRéunion
intertitre explique lasituation
Pierre est en réunion. Le
téléphone sonne.
plan d’ensemble montrer la situation
plan moyen montrer Pierre et
la technologie
gros plan montrer
l’interaction
Anne Dubois François MartinCharles Durrand
Storyboards
Planification organiser lʼhistoire en morceaux facile à lireidentifier les éléments clés et un ordre coherentdécider quels détails a montrer
Choix du momentFaire ressortir les moments qui comptent et couper les autres.
Choix du cadrageCommencer avec un plan dʼensemble, après montrer les détailsUtiliser les intertitres, les gros plans, les plans moyens
Choix de lʼimage Concentrer sur lʼinteraction, utiliser les effets spéciauxChoix des mots
Intertitre (film muet), voix off (narrateur), voix directe (dialogue)
Evaluation : Est-ce que ça marche ?
1. Collecte des informationsDesign WalkthroughExpérience
2. Analyse des informationsQualitativeQuantitative
3. Ressources pour le designListe de problèmes trouvésImplications pour la reconception
Design Walkthrough
Expérience
ProblèmesImplications
analysis
Evaluation de votre système
Techniques :HeuristiquesPrincipes de conceptionDesign WalkthroughExpériences contrôlées
Heuristiques
Norman (1983):
Rendre les choses visiblesOn peut connaître lʼétat de lʼinterface en observant le système
Principe du “mapping”Permettre de comprendre les correspondances entre
Actions et résultatsLes contrôles et leurs effetsLʼétat du système et ce qui est visible
Principe du feed-backInformer lʼutilisateur à lʼétat du système
Principes de Conception
Réification– Transformer une commande abstraite défiler -> scrollbar– en objet de lʼinterface
Polymorphisme– Faire marcher la même commande copier-coller– dans des contextes différents groupes
RéutilisationCapturer et réutiliser les motifs entrée (redo, macro)dʼinteraction sortie (copier-coller)
Beaudouin-Lafon& Mackay (2000)
Exemple : les guides magnétiques
réification de la commande dʼalignement
puissance et simplicité– commande Aligner vs. objet dʼalignement:– Aligner (une fois) vs Aligner (et rester aligné)
Exemple : les guides magnétiques
Reification de la commande dʼalignement
Puissance et simplicité– Commande dʼalignement vs objet dʼalignement– Aligner (une fois) vs Aligner (et rester aligné)
Formes multiples– Horizontal, vertical, diagonal, circulaire, rectangulaire– distribution dʼobjets
Commandes polymorphes– Créer / bouger / ajouter lʼobjet / enlever lʼobjet
Intégration des principes
Réification et polymorphisme– Plus dʼobjets, moins de commandes
Réification aide à la réutilisation des sorties– Les objets de “première classe” sont réutilisables
Polymorphisme aide à la réutilisation des entrées– Augmentation de la portée des commandes
Exemple: styles
Réification + réutilisation des sorties
Objet “Style”– Réification dʼune collection dʼattributs– Objets qui partagent un style = groupe– Changer le style = changer tout les objets– dans le groupe
Copier un “Style”– Copier les attributes de nʼimporte quel objet–
Collet un “Style”– Appliquer un style à nʼimporte quel objet
Concevoir une expérience simple
1. Spécifier l'hypothèseQue compare-t-on ?
2. Spécifier les variables indépendantesQu'est-ce qui varie ?
3. Opérationnaliser le comportementQu'est-ce qu'on étudie ?
4. Spécifier les variables dépendantesQu'est-ce qu'on mesure ?
5. Spécifier les procéduresQuels sont les groupes expérimentaux et de contrôle ?
6. Identifier les tests statistiques appropriésY a-t-il une différence ?
Exemple d'hypothèse
Comparer les menus linéaires et circulaires
HO (Hypothèse nulle) :
Il n'y a pas de différence de performanceentre les utilisateursen temps et taux d'erreur
pour la sélection d'un item dans un menu linéaireou un menu circulaire,
quelle que soit l'expérience antérieure d'utilisation de la souris ou d'autres types de menus par l'utilisateur.
Spécifier les variables indépendantes
Les variables indépendantes (facteurs) sont cellesque lʼon fait varier ou que lʼon contrôle
Les combinaisons de variables définissent les conditions
Variables indépendantes :Type de menu : linéaire, circulaireNombre d'items : 3, 6, 9, 12, 15Sujet : expert, novice, intermittent
=> 2 x 5 x 3 = 30 conditions uniquesNote : on peut traiter lʼexpertise du sujet comme facteur
Spécifier les variables dépendantes
Les variables dépendantes (mesures) sont celles quelʼon mesure
Pour faire une analyse statistique fiable, il fautsuffisamment de mesures pour chaque condition
Typiquement : de lʼordre de 30
Variables dépendantes :Temps pour sélectionner un itemNombre dʼerreursAutres ?
Design Walkthrough
Un groupe évalue un aspect spécifique, pas-à-pas :de l'architecture d'un systèmedu source d'un programmede la conception d'un systèmedes graphiquesdu texte (rapports, articles ... )
Plusieurs perspectives :L'ordinateur : Est-ce une erreur / bug ?L'utilisateur : Est-ce difficile à faire ?La direction : A-t-on besoin de cette fonction ?
Design Walkthrough
But Aider à identifier les problèmes informellement etrapidement, en utilisant des critères d'évaluation
ProcédureChoisir un petit groupe avec des rôles et desexpertises différentesFixer une durée, 1 heure au maximumLe présentateur déroule le scénarioChoisir le niveau des critiquesLe groupe identifie autant de problèmes que possibleUtiliser des règles pour aider à trouver les problèmes
Conception Générative
Decouverte : qui est l’utiisateur ?
Invention : qu’est-ce qui est possible ?
Conception : qu’est-ce qu’on fait ?
Evaluation : est-ce que ça marche ?
Reconception : comment l’améliorer ?
profil del’utilisateur
espace deconception
proto-typer
ana-lyser
inter-preter
implicationspour la design
cahierde charge
dimen-sioneralternatives
de designpossibilitéstechniques
études desalternatives
infos surl’utilisateur
Déconstruction générative
La conception est un domaine très vasteet pluri-disciplinaire
Nous ne pouvons pas enseigner la psychologie, lasociologie et le design dans un seul cours. Mais onpeut vous donner quelques exemples de principesqui peuvent élargir et améliorer votre espace deconception
Déconstruction générative : 5 exemples
Rhythmes et RoutinesFocus vs. Perception périphériquePlanification vs. Actions situésCognition distribuéeSystèmes co-adaptatives
Exemple : Réflexions sur les Post-Its
Quʼest-ce que cʼest ?Comment sont-ils utilisés ?Quelles sont les propriétés importantes ?Pourquoi ils marchent ?
Rythmes et Routines
Dan la vie quotidienne,les gens suivent les mêmes rhythmes :
le soleil se lève, les jours passent
et ils établissent des routines :manger et dormir chaque jour, aller au travail
Les systèmes devraient les prendre en compte
Rythmes et Routines
Marie a reçu un appel de Georges pour son fils JerômeElle sait que Pierre va manger à la maison ce soir, alors, ellemet un post-it sur la table de la salle à manger
Rhythme temporel :Marie sait que George reviendraquand il a faim
Routine spatiale :Marie connait la placede George à table
Perception périphérique
Deux aspects de la perception humaine :focus vs. periphérique
La plupart des systèmes supposent que l̓ attentionde lʼutilisateur est ciblée sur le système :
Mais que se passe-t-il à la périphérie ?
Perception périphérique
Marie met sa liste de choses à faire sur son frigo.Elle ne regarde pas tout le temps - mais elle est est conscientequand il y a trop de ʻjauneʼ : il faut faire des choses!
Concentration ciblée :Marie peut choisir de lire chaque note,si elle veut se concentrer sur une tâche
Attention périphérique :Marie est consciente quandla porte devient ʻjauneʼ,même si elle ne regardepas directement les post-its
Action située
On peut planifier nos activités :mais on agit toujours dans un contexte
Comment prendre en compte les interruptions ?
Comment donner aux utilisateurs la capacitéde changer dʼavis à tout moment ?
Action située
Marie a un rendez-vous avec Pierre la semaine prochaine ...mais elle sait quʼil a tendance à changer ses rendez-vous.Elle met un post-it sur le calendrier (plutôt que dʼécrire dessus)
Action émergente :Marie sait que le plan peut changerSon système est flexible
Co-localisation des artefacts :Marie sait quʼelle va regarder lecalendrier, alors elle met le post-it là
Cognition distribuée
Les objets physiques font partie de notre mémoireil nʼest pas nécessaire de tout mémoriser
Les objets peuvent être partagésmais ils ne sont pas interprétésde la même fa çon par tout le monde
Cognition distribuée
Marie partage son ordinateur avec son mari, Gilles.Elle laisse un post-it sur lʼécran qui explique comment faireplusieurs tâches quʼils font souvent.
Aide mémoire :Le post-it aide Marie et Gillesà oublier les détails : ils saventoù les trouver
Objet frontière: Marie et Gilles se servent du mêmepost-it différement
Systèmes co-adaptatifs
Les concepteurs des systèmes pensent quele système doit être utilisé comme il a été conçu
Mais …les utilisateurs les adaptent à leurs besoins propres
Comment faire un système plus facile àadapter par les utilisateurs ?