Conception et Evaluation des Interfaces Homme … · MessageProbe [HCIL’02] VideoProbe [IHM’03]...

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 ?

Utilisateur

Interaction

OrdinateurUtilisateurs

Environnement

Artefacts

située

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]


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


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]


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]


Comment communiquer avec les proches à distance ?Communication appliance : objet dédié


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




Ingénieurs Utilisateurs

!!

Chercheurs


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


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èle

Evaluation

La science est cyclique

Théorie

Monde réel



Nouveau modèle

Evaluation

Mais, quʼest-ce quʼon fait avec la conception ?

Interactionavec unartefact

PrototypeSimulation

Un mélange de la science et de lʼingénierie

Théorie

Monde réel

Interactionavec unartefact

Prototype


Simulation


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 : Qui est lʼ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

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

La Conception demande …

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 ?

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 ?

Systèmes co-adaptatifs

Marie veut garder une adresse écrite sur un morceau de papier.Elle utilise un post-it pour coller lʼadresse dans son agenda

Reconception du système :Marie comprend les caracteristiquesdes post-its et les utilise commecolle, pas comme une note

Conception et Evaluation des Interfaces Homme … · MessageProbe [HCIL’02] VideoProbe [IHM’03]...

Documents

Transcript of Conception et Evaluation des Interfaces Homme … · MessageProbe [HCIL’02] VideoProbe [IHM’03]...