LIF14 conceptionIHM

Conception des IHM
Fabien Duchateau
fabien.duchateau [at] univ-lyon1.fr Universit Claude Bernard Lyon 1
2013 - 2014
Transparents disponibles sur http://liris.cnrs.fr/stephanie.jean-daubias/ Version originale par Stphanie Jean-Daubias

1/108
Introduction
tapes du cycle de dveloppement dun logiciel : Analyse (spcications, analyse de lexistant et conception) Ralisation (programmation, bases de donnes, tests) Livraison (intgration, validation, documentation) Maintenance (mises jour, correction de bugs)
2/108
LIF14 - Interactions Homme Machines // Conception des IHM
UCB Lyon 1
Introduction (2)
IHM = ensemble des dispositifs matriel et logiciel permettant un-e utilisateurice dinteragir avec un systme interactif cran/interface dune application : Artefact concret qui sera utilis par les utilisateurices Un tiers des questions lors de runions avec les utilisateurices porte sur les IHM Phase de maintenance : 33% de debugging et 67% de changements demands par les utilisateurices
3/108
J. Nielsen, Usability engineering, Academic Press, 1993

LIF14 - Interactions Homme Machines // Conception des IHM UCB Lyon 1
Introduction (2)
IHM = ensemble des dispositifs matriel et logiciel permettant un-e utilisateurice dinteragir avec un systme interactif cran/interface dune application : Artefact concret qui sera utilis par les utilisateurices Un tiers des questions lors de runions avec les utilisateurices porte sur les IHM Phase de maintenance : 33% de debugging et 67% de changements demands par les utilisateurices
Les IHM doivent tre penses ds la phase danalyse du logiciel !

3/108
J. Nielsen, Usability engineering, Academic Press, 1993

Introduction (3)
Les IHM ont un impact signicatif sur : Attractivit du logiciel Gain de productivit Cots de dveloppement, de maintenance et de formation
4/108
http://dilbert.com/
Examples de bonnes/mauvaises pratiques

Refonte des crans de saisie chez Ameritech : gain de 600ms / appel 3 millions $ / an Catastrophe de lAirbus (1992) : confusion dachage des units sur un cadran daltimtrie Accident nuclaire de Three Mile Island (1979) : absence de prise en compte de la dimension humaine dans le processus de supervision
5/108
http://en.wikipedia.org/wiki/Three_Mile_Island_accident
Plan du cours
Conception en gnie logiciel Mthodes de conception IHM Techniques de recueil dinformations Un cas concret
6/108
UCB Lyon 1
Conception en gnie logiciel
Mthodes de conception IHM
Techniques de recueil dinformations
Un cas concret
Nombreuses mthodes de conception en gnie logiciel : Quick and dirty Merise Modle en cascade Modle en V Modle par incrments Modle en spirale Modle Agile
7/108
UCB Lyon 1
Un cas concret
"Quick and dirty

Initialement le nom du systme dexploitation MSDOS tait QDOS, pour Quick and Dirty OS Pas de description prcise de la mthode : Phase danalyse et de conception souvent limite (voire inexistante) Programmation rapide mais sale, code peu rutilisable Encore utilise pour des prototypes, maquettes ou projets dtudiant-e-s... Mthode viter !
8/108
http://fr.wikipedia.org/wiki/QDOS
Un cas concret
Merise
Mthode franaise pour lanalyse, la conception et la gestion de projet
9/108
fr.wikipedia.org/wiki/Fichier:MERISE.jpg
Un cas concret
Merise
Mthode franaise pour lanalyse, la conception et la gestion de projet
Inconvnients
Pour des projets de grande ampleur mais souvent internes. Inadapte aux environnements distribus.
9/108
fr.wikipedia.org/wiki/Fichier:MERISE.jpg
Un cas concret
Modle en cascade
Modle classique du gnie logiciel hrit du BTP (1966) : Dni pour de grands projets Importance des documents signs par les utilisateurices Passage ltape suivante uniquement si ltape prcdente est satisfaite Retour possible uniquement ltape prcdente
10/108
Laurent Audibert, UML 2 : De lapprentissage la pratique, Ellipses, 2009

Un cas concret
Modle en cascade (2)
11/108
UCB Lyon 1
Un cas concret
Modle en cascade (2)
Inconvnients
Implication limite des utilisateurices. valuation lors des deux dernires phases (eet tunnel).
11/108
UCB Lyon 1
Un cas concret
Modle en V
Modle trs populaire (1980) : Dveloppement et tests sont eectus en parallle Importance des documents Retours possibles chaque tape mais sans connatre leur porte
12/108
UCB Lyon 1
Un cas concret
Modle en V (2)
Frederic Brooks, The Mythical Man-Month : Essays on Software Engineering, Addison-Wesley, 1995
13/108
UCB Lyon 1
Un cas concret
Modle en V (2)
Inconvnients
valuation tardive du logiciel. Dicult intgrer de nouvelles fonctionnalits pendant le dveloppement
Frederic Brooks, The Mythical Man-Month : Essays on Software Engineering, Addison-Wesley, 1995
13/108
UCB Lyon 1
Un cas concret
Modle par incrments

Construction du noyau Ajout progressif de fonctionnalits
Noyau
14/108
UCB Lyon 1
Un cas concret
Modle par incrments

Construction du noyau Ajout progressif de fonctionnalits
Noyau
Inconvnients
Problmes possibles pour ajouter une fonctionnalit, voire remise en cause du noyau
14/108
UCB Lyon 1
Un cas concret
Modle en spirale
Meta-modle dni en 1986 par Barry Boehm : Plus gnral que le modle en V Itrations longues (6 mois 2 ans) Chaque cycle est dcoup en 4 phases
Dterminer les objectifs, les alternatives pour les atteindre et les contraintes valuation des alternatives, analyse des risques Dveloppement, validation et vrication de la solution retenue (en utilisant un autre modle) Planication du cycle suivant
15/108
UCB Lyon 1
Un cas concret
Modle en spirale (2)
16/108
http;//en.wikipedia.org/wiki/Spiral_model
Un cas concret
Modle en spirale (2)
Inconvnients
tape cruciale danalyse des risques, que lutilisateurice doit accepter
16/108
http;//en.wikipedia.org/wiki/Spiral_model
Un cas concret
Modle Agile
Agile regroupe plusieurs mthodes existantes partageant des valeurs communes : 1. Dveloppement itratif et incrmental 2. Adaptation aux changements 3. Forte collaboration (interne et externe) 4. Logiciels oprationnels
17/108
UCB Lyon 1
Un cas concret
Modle Agile (2)

Scrum (1995). Lquipe est soude pour concevoir une partie prcise des fonctionnalits. Lutilisateurice aide dnir les priorits sur les prochaines fonctionnalits dvelopper.
Figure: Itrations (sprints) de la mthode Scrum
18/108
fr.wikipedia.org/wiki/Fichier:PlanificationScrum.png
Un cas concret
Modle Agile (3)

Extreme Programming (1996) qui inclut de frquents dlivrables (cycles courts), une programmation en binme, une intgration facilite des changements utilisateurices.
19/108
http://extremeprogramming.org
Un cas concret
Modle Agile (4)

Dynamic Systems Development Method (DSDM) est base sur RAD (Rapid Application Development, 1991)
http://en.wikipedia.org/wiki/DSDM http://commons.wikimedia.org/wiki/File:Rad15.gif
20/108
UCB Lyon 1
Un cas concret
Modle Agile (5)

RUP (Rational Unied Process), FDD (Feature Driven Development), Crystal Clear, etc.
21/108
http://en.wikipedia.org/wiki/Software_engineering_process
Un cas concret
En rsum
Le cycle de vie en gnie logiciel concerne les IHM
Avantages des mthodes de conception gnie logiciel

Certaines mthodes Agile poussent impliquer fortement les utilisateurices pendant la phase de conception du logiciel
22/108
UCB Lyon 1
Un cas concret
En rsum
Le cycle de vie en gnie logiciel concerne les IHM
Avantages des mthodes de conception gnie logiciel

Certaines mthodes Agile poussent impliquer fortement les utilisateurices pendant la phase de conception du logiciel
Inconvnients des mthodes de conception gnie logiciel

Mthodes centres systme Utilisateurice impliqu-e principalement en aval et en amont du projet (analyse et valuation)
22/108
UCB Lyon 1
Un cas concret
En rsum (2)

Principe dindpendance entre le noyau fonctionnel et linterface utilisateur :
Interface et interaction ne sont dnies quaprs Dans les logiciels interactifs, cette sparation nest pas si nette Ncessit de prvoir lusage en mme temps que les fonctionnalits
Fonctionnalits mises en avant au dtriment des utilisateurices
23/108
UCB Lyon 1
Un cas concret
En rsum (2)

Principe dindpendance entre le noyau fonctionnel et linterface utilisateur :
Interface et interaction ne sont dnies quaprs Dans les logiciels interactifs, cette sparation nest pas si nette Ncessit de prvoir lusage en mme temps que les fonctionnalits
Fonctionnalits mises en avant au dtriment des utilisateurices
Mthodes de conception spciques aux IHM

23/108
UCB Lyon 1
Un cas concret
Plan du cours
24/108
UCB Lyon 1
Un cas concret
Direntes mthodes existantes : Conception itrative Conception par prototypage Conception centre utilisateur Conception participative Conception informative Conception par personas et scnarios
25/108
http://blog.excilys.com/2010/09/13/
Un cas concret
Pourquoi des mthodes de conception IHM ?
Pourquoi utiliser des mthodes de conception spciques aux IHM ? Rduction des cots de dveloppement et de maintenance du logiciel Rduction des risques Gain de productivit ct utilisateurices Rutilisation et amliorations des composants de base du logiciel Rduction du budget et du temps pour la formation au logiciel
26/108
J.F. Nogier, Ergonomie du logiciel et design Web, Dunod, 2008

Un cas concret
Conception itrative
Succession de phases Anements progressifs des spcications du produit valuations des solutions retenues Ralisations, modications jusqu obtention dun produit satisfaisant
27/108
UCB Lyon 1
Un cas concret
Conception itrative (2)

Le processus de construction est itratif : Pour des problmes diciles spcier Processus de conception ni ascendant, ni descendant Dveloppement de solutions partielles, intermdiaires Apparition en cours de dveloppement de nouveaux objectifs Prise en compte de lavis des utilisateurices qui peuvent changer Communication au sein de lquipe de conception, avec les utilisateurices Dicult grer la conception itrative prototypage
28/108
UCB Lyon 1
Un cas concret
Conception par prototypage
Le prototypage permet : Aux concepteurices de travailler sur plusieurs ensembles de dtails la fois Aux utilisateurices de voir ce que sera le systme nal De se concentrer sur les parties problmatiques de linterface Dtudier des alternatives de conception De sassurer de lutilisabilit du systme
29/108
UCB Lyon 1
Un cas concret
Types de prototype
Prototypes informels, sur papier Dessiner des crans sur papier, sur logiciel Utiliser des post-its / transparents / prsentations pour des montages dynamiques Excuter un scnario et essayer des variantes pour des choix
de haut niveau : dcider des fonctionnalits qui seront disponibles de niveau intermdiaire : dessiner une squence dcrans de bas niveau : dessiner des ides dicnes
30/108
UCB Lyon 1
Un cas concret
Types de prototype (2)
Example de prototype papier pour une application tlphone

31/108
http://www.youtube.com/watch?v=YQsHwooTP5E
Un cas concret

Prototypes vido Crer une vido de lutilisation dun prototype Simuler les fonctionnalits non implantes, les interactions Prototypes informatiques laide doutils : Accs direct linterface : Visual Basic, Delphi Assistance au prototypage : Visual C, Tcl-Tk, Pencil
32/108
http://pencil.evolus.vn/
Un cas concret
Dun prototype papier aux prototypes logiciel

33/108
https://wiki.ubuntu.com/SoftwareStore
Un cas concret
Conception centre utilisateur

Trois phases : Analyse (identication des fonctionnalits ou services, i.e., lutilit recherche par les utilisateurices de lapplication) Dveloppement (construction de la structure des menus et dcoupage en fentres / pages Web) valuation (ranement progressif du prototype)
34/108
UCB Lyon 1
Un cas concret
Conception centre utilisateur (2)

Prise en compte des utilisateurices : Ds la phase danalyse tude de lutilisateurice et de sa tche Ncessit de spcier les caractristiques : De lutilisateurice De la tche raliser De linteraction Relations concepteurice - utilisateurice : Utilisateurice observ-e dans la rsolution de sa tche Interrog-e sur ses attentes Questionn-e sur le logiciel conu
35/108
UCB Lyon 1
Un cas concret

Avantages : Prise en compte de lutilisateurice avant la phase dvaluation Dicults : Choisir des utilisateurices reprsentatifs et disponibles Ne pas oublier le contexte rel dutilisation Expliciter les comportements, les connaissances mises en jeu...
Techniques de recueil dinformations associes

Observation directe, entretiens, questionnaires
36/108
UCB Lyon 1
Un cas concret
Modle de lutilisateur : identier les caractristiques pertinentes de lutilisateurice
Donnes gnrales
taille, ge, sexe, dciences niveau de formation, habitudes culturelles
Donnes lies lapplication : comptences sur le domaine/en informatique

dbutant, occasionnel, expriment, expert
37/108
UCB Lyon 1
Un cas concret

Modle de la tche : identier lenchanement des processus dune tche Construire la hirarchie de tches du systme Spcier chaque tche, penser aux exceptions valuer la dcomposition avec lutilisateurice Dnitions : Tche
but = ce qui doit tre fait procdure = un ensemble de sous-tches relies par des relations de composition ou des relations temporelles
Tche lmentaire
tche dcomposable uniquement en actions physiques oprations dE/S
38/108
UCB Lyon 1
Un cas concret
Figure: Modle de tche pour lactivit envoyer un sms

39/108
UCB Lyon 1
Un cas concret

Modle de linteraction : il consiste tablir une correspondance directe entre : Les objets conceptuels informatiques (e.g., un chier) Les objets dinteraction et de prsentation
les reprsentations du chier lcran (ferm, ouvert) les oprations sur le chier (modication, suppression, etc.)
Cette correspondance doit : Apparatre comme "naturelle" Sinscrire dans une cohrence densemble : la mtaphore
40/108
UCB Lyon 1
Un cas concret

Mtaphore dans le modle de linteraction : utilisation de concepts connus de lutilisateurice Facilite lapprentissage Lutilisateurice anticipe le comportement du systme Examples de mtaphore du monde rel : Spatiales (bureau, maison, etc.) Sociales ou techniques (imprimante, courrier, etc.)
41/108
UCB Lyon 1
Un cas concret
Conception participative
Prise en compte des utilisateurices : Pas seulement comme testeurs Mais aussi comme partenaires de conception :
Tches essentiellement connues des utilisateurices Source possible dinnovations
Relations concepteurice-utilisateurice : Utilisateurice partenaire de conception part entire Et participe aux choix de conception naux
Techniques de recueil dinformations associes

Scnarios, magicien dOz, inspections cognitives, brainstorming, prototypes
42/108
UCB Lyon 1
Un cas concret
Conception participative (2)

Avantages
Seules les utilisateurices connaissent la ralit des tches Indispensable pour les activits mal identies ou peu structures Facilite lacceptation du logiciel
43/108
UCB Lyon 1
Un cas concret
Conception participative (2)

Avantages
Seules les utilisateurices connaissent la ralit des tches Indispensable pour les activits mal identies ou peu structures Facilite lacceptation du logiciel
Inconvnients
Augmentation des cots de dveloppement Contradictions possibles entre les utilisateurices participant-e-s et les autres Obligation daccepter des compromis pour satisfaire des participant-e-s, mme sils/elles ont tort
43/108
UCB Lyon 1
Un cas concret
Conception informative
Prise en compte des utilisateurices : Pas seulement comme testeurs Mais sans les considrer comme partenaires de conception Mthode imagine pour la conception avec des enfants
Relations concepteurice-utilisateurice : Utilisateurice dans lquipe de conception Mais ne participe pas aux choix naux
44/108
UCB Lyon 1
Un cas concret
Mthode des personas et scenarios

Mthode des personas : Utilise dans dirents domaines (plans marketing, sondages, etc.) Introduite aux dbuts des annes 1990 pour la conception dIHM Objectifs de la mthode : Meilleure comprhension des utilisateurices et de leurs buts Vision partage des utilisateurices Cration de scnarios partir des personas
45/108
UCB Lyon 1
Un cas concret
Mthode des personas et scenarios (2)

Dnition du persona (ou archtype) : Pas un-e utilisateurice rel-le, mais une abstraction de plusieurs Regroupe les traits caractristiques les plus frquents des utilisateurices La description dun persona peut inclure : Des objectifs, contraintes, environnement de travail Ce qui va dclencher leurs actions Ce qui peut les inuencer Ce qui peut les freiner ou les faire fuir
46/108
UCB Lyon 1
Un cas concret

Description dun persona (suite) : Un prnom Un titre Une photo Une devise (par rapport lapplication) Une description, ducation, background social
47/108
UCB Lyon 1
Un cas concret

Description dun persona (suite) : Un prnom Un titre Une photo Une devise (par rapport lapplication) Une description, ducation, background social viter les super-personas et les strotypes !
47/108
UCB Lyon 1
Un cas concret
Exemples de personas
48/108
UCB Lyon 1
Un cas concret
Exemples de personas
48/108
UCB Lyon 1
Un cas concret

Un scnario est une sorte dhistoire avec : Un persona Un environnement Un but (que le persona doit accomplir) Des obstacles Excution dun scnario orientation pour les choix de fonctionnalits, interactions, interfaces (et plus tard valuation de linterface ralise)
http://www.karizmatic.fr/humaniser-lutilisateur/ http://www.qualitystreet.fr/tag/persona/
49/108
UCB Lyon 1
Un cas concret

Example de scnario : Se connecter au site Grooveshark, chercher des musiques par titre, auteur ou album, les ajouter la playlist et tendre cette playlist par lajout de musiques dans le mme genre musical.
50/108
UCB Lyon 1
Un cas concret

Avantages
Empathie cognitive (comprendre les tats ou croyances dune autre personne) Applicable au Web / large chelle
Inconvnients
Mauvaise dnition des personas chec Distance par rapport aux utilisateurices rel-les Besoin de modier les personas en cas de nouveaux rsultats ou denvironnement dirent
51/108
UCB Lyon 1
Un cas concret
En rsum
Garder les points forts des direntes mthodes : Prise en compte prcoce de lutilisateurice ds la conception Prise en compte prcoce de lvaluation ds la conception
utilisateurice utilisateurice conception conception valuation valuation
52/108
UCB Lyon 1
Un cas concret
En rsum (2)
Comme lutilisateurice est au centre de ces mthodes, besoin de techniques pour recueillir les informations
53/108
UCB Lyon 1
Un cas concret
Plan du cours
54/108
UCB Lyon 1
Un cas concret
La plupart des mthodes de conception pour IHM ncessitent de collecter des informations sur les utilisateurices et leurs activits avec des techniques : Scnario de conception Inspection cognitive Magicien dOz Enqute / entretien Observations Focus group
55/108
Tri par cartes Questionnaire Remue-mninges Conception en parallle Audit ergonomique
UCB Lyon 1
Un cas concret
Scnarios de conception
But : Crer une description raliste de lutilisation du nouveau systme Moyen : Utiliser les scnarimages (storyboards) du monde du cinma Points cls, commentaires, enchanements Pour une vue densemble de linteraction
56/108
UCB Lyon 1
Un cas concret
Scnarios de conception (2)
Procdure : Identier des activits existantes

typiques inhabituelles
Crer des scnarios de travail en gnralisant les histoires

mlanger les vnements de direntes provenances incorporer des situations inhabituelles dans des activits typiques inclure des situations qui aboutissent et dautres pas
http://grouplab.cpsc.ucalgary.ca/saul/681/1998/prototyping/ survey.html
57/108
UCB Lyon 1
Un cas concret
Figure: Modle pour crire un scnarimage
58/108
http://fr.wikipedia.org/wiki/Storyboard
Un cas concret
Example de scenarimage
59/108
UCB Lyon 1
Un cas concret
Inspections cognitives (cognitive walkthroughs)

But : valuer le systme en se mettant la place de lutilisateurice Moyen : Spcication dune srie de tches et des squences dactions pour les raliser Procdure : valuation en imaginant ce que ferait lutilisateurice
comprend-il les messages, le comportement du systme ?
Interprtation et prise en compte des rsultats

60/108
UCB Lyon 1
Un cas concret
Inspections cognitives (2)
Example dinspection cognitive pour lutilisabilit diTunes
61/108
http://www.youtube.com/watch?v=Ro77wQq0sWo
Un cas concret
Magicien dOz
But : Simuler les fonctionnalits absentes du systme Systme rel inexistant ou partiellement dvelopp Technique dicile mettre en place : adapt des systmes lourds, dicile dvelopper Moyen : Un compre eectue les actions la place du systme
62/108
UCB Lyon 1
Un cas concret
Magicien dOz (2)

Procdure : Le magicien interprte les entres de lutilisateurice Il supple aux manques du prototype et contrle le comportement du systme Sensation dutiliser un vrai systme
De moins en moins utilis cause des logiciels de protypage dinterface
63/108
http://fr.wikipedia.org/wiki/Le_Magicien_d%27Oz
Un cas concret
Magicien dOz (3)
Example : projet DIALORS, un systme de dialogue pour rserver un billet de train en langage naturel Exprimentations relles en 1984 : une opratrice simule les rponses du systme Un des points mis en avant : face la machine, les utilisateurices ont adopt - contrairement aux attentes des concepteurices - un langage hach simplication du modle pour le langage naturel
http://www-lium.univ-lemans.fr/~luzzati/recherches/ historique_files/DVHM%20luzzati.pdf
64/108
UCB Lyon 1
Un cas concret
Enqute / entretien
But : Identier des pistes de conception pour les prochaines itrations ou des exemples spciques de problmes rencontrs par les utilisateurices Caractristiques : Interviewer lutilisateurice dans son environnement de travail (face face) Dure recommande de 45 minutes / une heure Privilgier le magntophone la prise de notes (traces et concentration sur lchange)
65/108
UCB Lyon 1
Un cas concret
Enqute / entretien (2)
Procdure : Rassembler un panel reprsentatif dutilisateurices Pendant linterview en face face :

questions semi-directives pour lanalyse (degr de libert) questions plutt directives pour lvaluation (cibler un lment) neutralit de lenquteurice reformulation des rponses
Analyse des rsultats
66/108
fr.wikibooks.org/wiki/Outils_mthodologiques_(sociologie)
Un cas concret
Possibilit dutiliser les entretiens pour des incidents critiques : Dtcter les points forts et points faibles dun systme Demander de se souvenir dun problme particulier vcu dans un pass rcent Demander de dcrire chaque incident en dtail Demander ce qui est habituel et ce qui ne lest pas dans lincident
67/108
UCB Lyon 1
Un cas concret
Avantages
Analyse qualitative Identication des tendances et des priorits, ou dans le cas dentretiens critiques, des points forts ( renforcer) et des points faibles ( corriger)
68/108
UCB Lyon 1
Un cas concret
Avantages
Analyse qualitative Identication des tendances et des priorits, ou dans le cas dentretiens critiques, des points forts ( renforcer) et des points faibles ( corriger)
Inconvnients
Vision subjective (ne pas en tirer des conclusions chires)
68/108
UCB Lyon 1
Un cas concret
Observations
But : Identier les gros problmes du logiciel (prototype / systme nal) Procdure : En laboratoire ou sur le terrain Choisir au moins 2 utilisateurices qui agiront indpendamment
69/108
UCB Lyon 1
Un cas concret
Observations (2)
Procdure (suite) Dnir une mission spcique (rsoudre un problme, suivre un scnario) Dcider de ce que lon veut mesurer Demander aux utilisateurices deectuer la tche (mthode intrusive)
observation directe simple avec explication haute voix deux pour observer leurs interactions (interrogations, explications)
Enregistrer les interactions, puis les analyser

papier, audio, vido, trace informatique
70/108
UCB Lyon 1
Un cas concret
Observations : analyse de protocole
Traces papier : Cot de traitement acceptable Un seul point de vue, car pr-analys
71/108
UCB Lyon 1
Un cas concret
Observations : analyse de protocole (2)

Enregistrements vido (ou audio) : Voir le visage, la posture de lutilisateurice Voir lcran Oculomtrie (eye tracking)
72/108
UCB Lyon 1
Un cas concret

Enregistrements vido (ou audio) : Voir le visage, la posture de lutilisateurice Voir lcran Oculomtrie (eye tracking)
Permet de corriger certains biais des protocoles verbaux Trs long et coteux dpouiller
72/108
UCB Lyon 1
Un cas concret

Traces informatiques : Mmorisation de (toutes) les actions de lutilisateurice Permet de rejouer la session Objectif : dpouillement automatiquement
lanalyse doit tre prvue avant
TRACE 13:13:42 Dbut 13:14:14 Exercice 3 13:14:29 Partie 2 13:14:32 Cahier de brouillon 13:14:49 Reprsentation graphique 13:14: !rac libre 13:14: 9 E""ace#ent 13:1 :$1 Exercice 4 %&ui'( 13:1 :3$ )ntersection 13:1 : 4 Exercice ter#in 13:1 : * Dsacti'er les bulles d+aide 13:1,:$$ -asquer la palette 13:1,:$2 .ide 13:1,:$3 .ide page 2 13:1,:$, /in de l+aide 13:1,:30 Copier : x12231, 13:1,:41 Coller : x12231, 13:10: 2 Enregistre#ent 13:10: 4 /in
PRODUCTIO N 13:17:54 [Identificatio n] JEANDAUBIAS Stphanie Date : 3!" ! ""# [E"1] 111" ""11 [E" $1] "1 [E" $ ] "1 [E"3] ""1""""""" %a&3'%(&a' [)IN]
73/108
UCB Lyon 1
Un cas concret
Focus group
But : Comprendre les motivations des utilisateurices En groupe, et donc bnce de la dynamique de groupe Sance lme, paperboards, et/ou assistant-e-s
74/108
UCB Lyon 1
Un cas concret
Focus group (2)
Procdure : Dnir dirents thmes aborder (5 ou 6 recommands) Limiter le groupe 7-10 participant-e-s (timidit, temps de parole) Animation du groupe :
activit brise-glace, les utilisateurices font connaissance rappeler les rgles respecter exercices de dicult croissante, et portant sur des points de plus en plus prcis du systme synthse des rsultats et discussions
75/108
UCB Lyon 1
Un cas concret
Focus group (3)
Avantages
Vision globale sur le systme en terme de motivations, prfrences, priorits, attentes voire conits. Sances enrichies par les interactions et par la rutilisation des rsultats des sances prcdentes. mergence dides nouvelles
76/108
UCB Lyon 1
Un cas concret
Focus group (3)
Avantages
Vision globale sur le systme en terme de motivations, prfrences, priorits, attentes voire conits. Sances enrichies par les interactions et par la rutilisation des rsultats des sances prcdentes. mergence dides nouvelles
Inconvnients
viter pour lvaluation (utilisateurices pas en situation relle)
76/108
UCB Lyon 1
Un cas concret
Tri par cartes

But : Construire larchitecture de linformation dune application Utilis en dbut de conception Eectuer plusieurs tris (de 3 10 selon convergence des rsultats et le mode) Prparation : Panel reprsentatif dutilisateurices Sance en mode individuel ou groupe Chaque carte = une information ou une fonctionnalit (dcrite par un ou 2 mots-cls)
77/108
UCB Lyon 1
Un cas concret
Tri par cartes (2)

Procdure en 3 tapes : Validation des mots-cls sur les cartes (rcriture au besoin) Regroupement des cartes qui se ressemblent Choix dun nom pour chaque groupe construit Analyse des rsultats : Reprer les groupes les plus frquemment forms statistiques Analyse qualitative base sur les observations lors des sances Possibilit de tri ferm (groupes dj dnis et les participant-e-s y rangent les cartes)
78/108
UCB Lyon 1
Un cas concret
Tri par cartes (3)

Avantages
Garantie de trouver ce que lon cherche (organisation du contenu) Peu de problmes de navigation entre les fentres / pages Combiner le tri ferm puis tri ouvert en cas de nombre de cartes important (> 100)
79/108
UCB Lyon 1
Un cas concret
Questionnaires
But : Rsumer conomiquement lavis de nombreuses utilisateurices Procdure : Dterminer le public (reprsentatif) destinataire du questionnaire Comment diuser/rcuprer Comment analyser les rsultats (automatiquement/manuellement) Types de questions : Informations gnrales Questions ouvertes, diriges, QCM chelle, classements
80/108
UCB Lyon 1
Un cas concret
Questionnaires (2)
81/108
UCB Lyon 1
Un cas concret
Remue-mninges (brainstorming)
But : Gnrer un grand nombre dides cratives Procdure : Runir un petit groupe avec dirents rles et expertises Limiter le temps (1h) Dcrire un problme de conception spcique
82/108
UCB Lyon 1
Un cas concret
Remue-mninges (2)
Phase 1 : gnrer une grande quantits de solutions

faire participer tout le monde, enregistrer toutes les ides sans les valuer
83/108
UCB Lyon 1
Un cas concret
Remue-mninges (3)
Phase 2 : classer les ides en fonction de leur qualit
chacun annonce les ides quil prfre les ides sont classes par nombre de votes commencer la conception partir des ides les mieux classes ne pas oublier les ides insolites
84/108
UCB Lyon 1
Un cas concret
Conception en parallle
But : Crer plusieurs interfaces et slectionner leurs points forts
Procdure : Panel reprsentatif dutilisateurices Chaque utilisateurice (ou groupe) ralise indpendamment une interface (papier, logiciel, etc.) Discussion autour des interfaces ralises
85/108
http://www.useit.com/papers/parallel_design/
Un cas concret
Conception en parallle (2)

Avantages
Les meilleures ides mergeant de la session sont gardes Pistes pour prioritiser les tapes suivantes de conception
86/108
UCB Lyon 1
Un cas concret
Conception en parallle (3)
87/108
UCB Lyon 1
Un cas concret
Audit ergonomique
But : valuation rapide dune interface par des experts en ergonomie Procdure : Dans lidal, valuation par plusieurs experts indpendants et confrontation de leurs rsultats En pratique, valuation par un expert en ergonomie et relecture par un expert du domaine (cf cours dvaluation)
88/108
UCB Lyon 1
Un cas concret
Audit ergonomique (2)
Avantages
Rapidit de laudit Pistes pour prioritiser les tapes suivantes de conception
89/108
UCB Lyon 1
Un cas concret
Avantages
Rapidit de laudit Pistes pour prioritiser les tapes suivantes de conception
Inconvnients
Cot de laudit Aucun retour des utilisateurices naux de lapplication
89/108
UCB Lyon 1
Un cas concret
90/108
UCB Lyon 1
Un cas concret
En rsum
Analyse Dveloppement valuation
Scnarios de conception Inspections cognitives Magicien dOz Enqutes / entretiens Observations Questionnaire Remue-mninges Focus group Tri par cartes Conception en parallle Audit ergonomique
Quand utiliser quelle technique ?
91/108
http://www.usability.gov
Un cas concret
Plan du cours
92/108
UCB Lyon 1
Un cas concret
Dnition du sujet de TD
Sujet : conception dune application de reconnaissance de dchets pour le tri slectif Description de lapplication Public cible Description du dispositif Liste des fonctionnalits Mthode(s) de conception Enchanement et ralisation des maquettes
93/108
UCB Lyon 1
Un cas concret
Dnition du sujet de TD
Sujet : conception dune application de reconnaissance de dchets pour le tri slectif Description de lapplication Public cible Description du dispositif Liste des fonctionnalits Mthode(s) de conception Enchanement et ralisation des maquettes
Voyons 3 propositions ralises par des groupes dtudiant-e-s

93/108
UCB Lyon 1
Un cas concret
Proposition 1 : une application mobile

Description de lapplication : Lapplication permet didentier un dchet soit en le photographiant avec la fonction appareil photo dune tablette, soit en le recherchant dans des catgories, soit en saisissant des mot-cls. Une fois le dchet identi, lapplication indique le type de poubelles o le jeter. Des fonctionnalits cartographiques sont galement disponibles (localisation des poubelles, dition collaborative). Public cible : Tout public, quip dune tablette avec appareil photo Description du dispositif : Application mobile (tablettes) avec appareil photo
94/108
UCB Lyon 1
Un cas concret
Proposition 1 : une application mobile (2)

Liste des fonctionnalits : Recherche dun dchet par mot-cl ou catgorie Reconnaissance dun dchet par photographie Golocalisation des poubelles Travail collaboratif dajout de poubelles
95/108
UCB Lyon 1
Un cas concret
Conception, premire itration Pas dutilisateurice mthode des personas et scnarios Analyse :
questionnaire (site Web) et rsultats de sondages pour dnir des personas et des scnarios remue-mninges pour les ides et fonctionnalits prioritaires
Dveloppement des interfaces par prototypage En parallle, diusion et promotion (site Web, etc.) Phase dvaluation :
inspection cognitive (en utilisant les personas)
96/108
UCB Lyon 1
Un cas concret

Conception, premire itration Exemple de scnario : Steve, 22 ans, se lve 7h et prend son petit djeuner. la n de son repas, sa bouteille de lait de riz est vide et il ne sait pas o il peut la jeter. Heureusement, il se souvient avoir tlcharg une application pour le tri slectif. Il dcide alors de lutiliser. Empoignant la bouteille dune main, il la prend en photo et lapplication russit reconnatre le dchet. Il consulte la che produit correspondante et dcouvre le type de poubelles adquat pour y jeter la bouteille, ainsi que des informations de recyclage sur lobjet. Satisfait, Steve quitte lapplication en appuyant sur le bouton Home .
97/108
UCB Lyon 1
Un cas concret

Conception, seconde itration Utilisateurices attir-e-s par lapplication grce la promotion mthode de conception centre utilisateur Analyse :
focus group pour comprendre les motivations des utilisateurices entretiens avec les utilisateurices pour dnir le modle de la tche
Dveloppement des interfaces :

conception en parallle pour amliorer les faiblesses dtectes sur les interfaces
Phase dvaluation :
observations de lutilisateurice
98/108
UCB Lyon 1
Un cas concret

Conception, seconde itration
Modle de la tche pour la proposition 1

99/108
UCB Lyon 1
Un cas concret
Vido de dmonstration de la proposition 1 (IHM-ecolo)

100/108
UCB Lyon 1
Un cas concret
Proposition 2 : une borne prs des poubelles

Description de lapplication : Un-e utilisateurice apporte son dchet aux poubelles de recyclage mais ne sait pas dans quelle poubelle le jeter. Une borne tactile permet didentier le dchet par recherche (mot-cl et catgorie) ou par scan du code barre, puis indique la couleur de la poubelle o jeter le dchet. Des conseils et astuces sont galement achs sur la borne pour valoriser le dchet (compostage, dons, etc.) Public cible : Les personnes qui recyclent dj Description du dispositif : Application lourde sur des bornes situes ct des poubelles
101/108
UCB Lyon 1
Un cas concret
Proposition 2 : une borne prs des poubelles (2)

Liste des fonctionnalits : Recherche dun dchet par mot-cl ou catgorie Reconnaissance dun dchet par code barre Conseils et astuces de recyclage Menu de conguration
102/108
UCB Lyon 1
Un cas concret
Conception, premire itration Utilisateurices rels proximit des lieux de recyclage mthode de conception informative Analyse :
questionnaires pour tayer les fonctionnalits scnarios de conception pour modliser les interactions
Dveloppement des interfaces :

tri par cartes pour raliser lenchanement des interfaces
Phase dvaluation :
magicien dOz par linstallation de bornes ctives
103/108
UCB Lyon 1
Un cas concret

Conception, premire itration
Enchanement des crans pour la proposition 2

104/108
UCB Lyon 1
Un cas concret
Vido de dmonstration de la proposition 2 (Tri-force)

105/108
UCB Lyon 1
Un cas concret
Proposition 3 : du jeu ducatif "Big Brother"
volution de la proposition (et des interfaces) : A lorigine un jeu ducatif pour apprendre bien trier les dchets
106/108
UCB Lyon 1
Un cas concret
volution de la proposition (et des interfaces) : A lorigine un jeu ducatif pour apprendre bien trier les dchets Enregistrement des actions de tri (quel dchet et dans quelle poubelle) grce au tlphone portable
106/108
UCB Lyon 1
Un cas concret
volution de la proposition (et des interfaces) : A lorigine un jeu ducatif pour apprendre bien trier les dchets Enregistrement des actions de tri (quel dchet et dans quelle poubelle) grce au tlphone portable Ajout dun systme de rcompense et punition pour chaque personne
106/108
UCB Lyon 1
Un cas concret
volution de la proposition (et des interfaces) : A lorigine un jeu ducatif pour apprendre bien trier les dchets Enregistrement des actions de tri (quel dchet et dans quelle poubelle) grce au tlphone portable Ajout dun systme de rcompense et punition pour chaque personne Finalement, nimporte qui est capable "dattraper une personne" et de savoir si elle recycle bien
106/108
UCB Lyon 1
Bilan
Ce quil faut retenir : Les mthodes de conception en gnie logiciel sont insusantes pour la conception des IHM Conception de lIHM prcoce, mthodique, itrative, exprimentale Pas de mthode scientique analytique pour la conception des IHM, mais plutt des mthodes empiriques Combiner direntes mthodes de conception IHM Leur associer une ou plusieurs techniques de recueil dinformations
107/108
UCB Lyon 1
Des questions, commentaires ?
108/108
www.projectcartoon.com

LIF14 conceptionIHM

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

LIF14 conceptionIHM

Загружено:

Авторское право:

Доступные форматы

Conception des IHM

Transparents disponibles sur http://liris.cnrs.fr/stephanie.jean-daubias/ Version originale par Stphanie Jean-Daubias

LIF14 - Interactions Homme Machines // Conception des IHM

J. Nielsen, Usability engineering, Academic Press, 1993

Les IHM doivent tre penses ds la phase danalyse du logiciel !

J. Nielsen, Usability engineering, Academic Press, 1993

Examples de bonnes/mauvaises pratiques

LIF14 - Interactions Homme Machines // Conception des IHM

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Conception en gnie logiciel

LIF14 - Interactions Homme Machines // Conception des IHM

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

"Quick and dirty

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Laurent Audibert, UML 2 : De lapprentissage la pratique, Ellipses, 2009

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Modle en cascade (2)

LIF14 - Interactions Homme Machines // Conception des IHM

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Modle en cascade (2)

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

LIF14 - Interactions Homme Machines // Conception des IHM

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Modle par incrments

LIF14 - Interactions Homme Machines // Conception des IHM

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Modle par incrments

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

LIF14 - Interactions Homme Machines // Conception des IHM

Conception en gnie logiciel

Mthodes de conception IHM

Techniques de recueil dinformations

Modle en spirale (2)