1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Méthodes de conception centrée utilisateurs Cours 3.2.

Présentation au sujet: "1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Méthodes de conception centrée utilisateurs Cours 3.2."— Transcription de la présentation:

1 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Méthodes de conception centrée utilisateurs Cours 3.2

2 2 Plan Méthodes de conception Approche génie logiciel/ergonomique Exemples de démarches de conception en IHM Points communs à toutes ces méthodes Exemples de méthodes de conception Sites web : Coutaz, Lynch, Landay, Boucher Lucid Gould

3 3 Idées de base Équipe pluridisciplinaire Au moins : informaticien, ergonome, graphiste, spécialiste du domaine de lapplication Dépend des finances et de lampleur du projet Techniques « low cost » Syndrome de lABS Intégration de méthodes issues de linformatique (Génie logiciel) de lergonomie

4 4 Différences GL/ergonomie Objet détude GL : la machine : fonctionnement du système Ergo : les humains : utilisation du système Analyse des besoins GL : fonctionnalités (utilité) Ergo : utilisateurs et activité (utilisabilité) Conception GL : conception de lapplication puis de linterface Ergo : conception en parallèle du noyau applicatif et de linterface Évaluation GL : Validation (tests unitaires, dintégration du système) Ergo : Évaluation ergonomique

5 5 GL : Modèle en cascade (1970) Analyse des besoins Intégration et test du système Codage et tests unitaires Conception du système et du logiciel

6 6 GL : Modèle en cascade avec itérations Analyse des besoins Intégration et test du système Codage et tests unitaires Conception du système et du logiciel

7 7 GL : Modèle en V (pour les systèmes où la finalité est bien cernée, 1981) Conception logicielle Conception Analyse des besoins Codage Tests d'acceptation Tests d'intégration Tests unitaires Tests du système Conception détaillée

8 Autres modèles en GL Modèle en spirale (Boehm 1988) pour les applications à risques Modèles itératifs Méthode incrémentale (UP, Unified Process) Prototype livrable à chaque incrément) Modèles en Y (2TUP toutiyoupi) Spécification fonctionnelle//spécification technique Méthodes agiles (2001) RAD (rapid application development) X-P (Extrem programing) 8

9 Méthodes et cycle de développement 9 Analyse des besoins ÉlaborationConstructionTransition Processus projet Processus organisationnels Spécifications Analyse & Conception Implémentation Tests Déploiement Support du projet Configuration Gestion du projet Environnement Phases Itérations Itération Préliminaire Iter. #1 Iter. #2 Iter. #n Iter. #n+1 Iter. #n+2 Iter. #m Iter. #m+1 RUP 2TUP XP [Didier Girard]

10 10 User Centered System Design (UCSD, Norman 86) Étape d'analyse - systèmes existants - contexte d'utilisation Synthèse de l'analyse : - Modèle de l'utilisateur - Modèle de la tâche Étape de conception : - Les concepts informatiques - Modèle de l'interaction Conception Centrée Utilisateur Critères d'Utilisabilité Scénarios d'utilisation Caractéristiques de l'utilisateur

11 11 Norme ISO 13407 (1999) Les 5 principes de la conception centrée utilisateur Une analyse des besoins des utilisateurs, de leurs tâches et de leur contexte de travail La participation active des utilisateurs à la conception Une répartition appropriée des fonctions entre les utilisateurs et la technologie Une démarche itérative de conception Lintervention dune équipe de conception multidisciplinaire

12 12 Conception centrée utilisateur l'utilisateur et sa tâche sont prioritaires sur le fonctionnement du système remplacer la logique de fonctionnement par la logique d utilisation dans la conception de logiciel "Talking to users is not a luxury, it's a necessity"(Gould 88) "Early and continual focus on the user, fight for user " (Schneiderman) démarche qui intègre l'analyse de l'activité et des modèles d'utilisateurs les guides et principes ergonomiques

13 Conception techno-centrique 13 Contre-exemples Conception ego-centrique ( cours Landay)

14 14 Préoccupations ergonomiques & modèle en V (Coutaz) Conception logicielle Conception Analyse des besoins Codage Tests d'acceptation tests d'intégration Espace IHM Modèle de l'utilisateur Modèle de la tâche Modèle de l'interaction tests unitaires tests du système Évaluation ergonomique Espace Logiciel

15 15 L'évaluation au cœur de la conception

16 16 Un modèle proposé par des ergonomes (Kolski 2001)

17 17 Conception participative W. Mackay, C. Letondal (2004) l'utilisation de la technologie est co-adaptative la technologie modifie les habitudes de travail et les attentes des utilisateurs les utilisateurs adaptent la technologie à leurs besoins, l'interprètent et la modifient obtenir des informations sur les utilisateurs par différentes approches au sein d'équipes pluridisciplinaire (triangulation) par différentes techniques (dont prototypage) intégrer les utilisateurs au processus de conception indispensable sur les activités de collaboration ou sur les activités ouvertes et mal identifiées

18 18 Conception itérative Proposer des solutions techniques à partir de scénarios qui permettent dexplorer leurs avantages et leurs inconvénients Techniques dexploration des scénarios pour les faire évoluer Techniques de protoypage

19 19 Plan Techniques Méthodes de conception Exemples de méthodes de conception centrée utilisateur Coutaz Landay Lucid Gould Synthèse personnelle

20 20 Conception de sites web (Coutaz) Principes de base Ne se limite pas à écrire du code html ou Java La valeur du contenu est centrale Nécessite une bonne connaissance du public cible, de leur activité et du contexte de lactivité Analyses de terrain indispensables Spécificités du web Multiplicité des types daccès Variabilité des ressources physiques Diversité des utilisateurs Temps de développement très courts Mises à jour fréquentes

21 21 Processus de développement 1.Organisation de léquipe Chef de projet, Concepteur dinteraction, développeur, expert en utilisabilité, graphiste, auteur, rédacteur 2.Définition du site Cahier des charges, scénarios, contenu du site 3.Conception et prototypage Critères de succès, structure du site, navigation, contenu, présentation Règles ergonomiques, contraintes techniques 4.Évaluation Tout au long de la conception Implique tous les membres de léquipe + le client + des utilisateurs

22 22 Le cahier des charges Objectifs généraux et critères de succès Utilisateurs cibles Spécifications techniques de la plateforme daccueil Contraintes particulières Analyse des tâches

23 23 Landay : design of sites

24 24 Document à la fin de létape : découverte Site : Idées principales : Buts du site : Contraintes : Critères de succès : Catégories dutilisateurs (personnages) : 10 principales utilisations du site (scénarios dutilisation)

25 25 LUCID Logical User-Centered Interactive Design Principes : 1.Distinguer Conception centrée utilisateur Conception technique 2.Logiciel : composant dune activité humaine plus large 3.Prendre en compte les communications humaines dans lactivité 4.Garder trace des actions passées de lutilisateur 5.Concevoir dans les termes de lutilisateur, de lactivité et non dans les termes techniques

26 26 Les 6 étapes de Lucid 1.Développement du concept du produit Construire une vision claire et partagée 2.Analyse des besoins Découvrir les utilisateurs et leur activités 3.Conception dun prototype Conception globale 4.Conception itérative Conception détaillée 5.Conception et développement informatiques Suivi de réalisation 6.Sortie du produit Support à ladoption du produit et préparation de la version suivante

27 27 1. Développer le concept Décrire rapidement le produit Son nom, à qui sadresse-t-il ? Que fait-il ? Quel problème résout il ? Définir les retombées attendues Quels sont les bénéfices attendus du projet ? Identifier le public ciblé et le segmenter Construire des catégories (rôles, tâches, compétences) Ne pas oublier les utilisateurs secondaires : vendeurs… Identifier les principales tâches qui pourront être accomplies avec le système Identifier les contraintes de haut niveau Plateforme, bruit, accès public Proposer une maquette pour illustrer le concept Produit : une description dune page et une maquette

28 28 2 Analyse des besoins Indispensable de travailler avec des utilisateurs finaux dans cette étape Segmenter le public cible Identifier les principales tâches Créer des scénarios pour décrire le travail actuel Identifier les fonctionnalités à définir intégration dans lactivité besoins de communication Identifier les objets métier objets métiers : pas les objets informatiques Produit : un document de synthèse des besoins

29 29 3 Conception dun prototype Développer le modèle conceptuel de linterface Identifier les métaphores Déterminer les principaux écrans et la navigation dun écran à lautre Définir les grandes lignes dune charte graphique Produit de cette étape : un diaporama présentant les principaux écrans la navigation

30 30 4 Conception itérative Affinement de la conception à partir du premier prototype Revue de conception Inspection par des experts Inspection par des utilisateurs Tests dutilisabilité Produit : un dossier de spécifications et un prototype stabilisé

31 31 5 Conception et développement informatiques Méthode de Génie Logiciel Modélisation informatique (UML) Mise en œuvre informatique Suivi de réalisation Ajustements de budgets, de délais, suivi de modification de spécifications Définir Les procédures dinstallation Laide en ligne La documentation La formation

32 32 6 Livraison du produit Tests finaux auprès de quelques utilisateurs Évaluation du système Préparation de la prochaine version

33 33 La méthode de J. D. Gould Objectif : Développer des systèmes utilisables Utilisabilité ?11 critères Le processus de conception 4 phases Démarrage, conception initiale, développement itératif, installation 4 principes Se centrer continuellement et depuis le tout début sur les utilisateurs Tester continuellement et depuis le début auprès des utilisateurs Adopter une méthode de conception itérative Maintenir une vision globale des problèmes dutilisabilité

34 34 11 critères dutilisabilité Performance du système : fiabilité et réactivité Fonctionnalités : adéquation à lactivité Interface utilisateur : organisation, dispositifs matériels dentrée sortie, conception pour les utilisateurs finaux mais aussi pour dautres groupes Documents daccompagnement : utilisateurs finaux et autres groupes Traduction : de linterface et des documents Diffusion : formation, aide en ligne, support téléphonique Adaptabilité et extension Installation et désinstallation Maintenance et service Publicité : acheter et utiliser Groupes dutilisateurs

35 35 Leçons de lexpérience Dans des systèmes complexes personne ne réussit du premier coup Le développement de logiciel comporte toujours des surprises Il faut naviguer dans un océan de changements Rédiger des contrats nélimine pas les besoins de changer Les besoins évoluent avec le système Les concepteurs ont besoin doutils logiciels pour les assister Définissez des objectifs de comportement du système et des objectifs de performance Aussi bon que soit votre système, les utilisateurs feront des erreurs en lutilisant

36 36 Les étapes incontournables (1) Démarrage Définir le problème qui se pose aux utilisateurs Étude de lexistant, des normes, recommandations etc. Conception initiale Identifier les utilisateurs et les tâches quils ont à effectuer Étudier les compétences des utilisateurs Étudier les contraintes matérielles et logicielles Définir des objectifs de comportement du système

37 37 Les étapes incontournables (2) Conception itérative Construire des scénarios dutilisation Concevoir et construire des prototypes Tester les prototypes Modifier itérativement les prototypes jusquà ce que soient atteints : Les objectifs Les dates butoirs Installation Installer le système chez les utilisateurs Évaluer les réactions des utilisateurs et leur degré dadoption du système

38 38 Principe 1 Se centrer continuellement et depuis le tout début sur les utilisateurs Comment ? Définir un ensemble dutilisateurs potentiel. Penser aux utilisateurs secondaires : formateurs, vendeurs etc. Parler avec eux des points positifs et négatifs de leur travail Visiter les lieux de travail, Observer ces utilisateurs quand ils effectuent les tâches, Les filmer Étudier lorganisation du travail Leur demander de commenter à haute voix quand ils travaillent Essayer de faire leur boulot (si possible) Faites participer les utilisateurs Intégrer un expert du domaine dans léquipe de conception Utiliser lanalyse de tâches Utiliser des questionnaires Définissez des objectifs de comportement du système

39 39 Analyse de tâches Qui utilisera le système ? Quelles sont les tâches quils effectuent actuellement ? Quelles tâches sont souhaitables ? Comment sont apprises les tâches Où sont elles accomplies ? Comment les utilisateurs accèdent-ils aux données pour effectuer leur tâches ? De quels autres outils les utilisateurs disposent-ils ? Comment les utilisateurs communiquent-ils entre eux ? Quelle est la fréquence des tâches ? Quelles sont les contraintes temporelles et matérielles ? Quest-ce qui arrive quand ça ne va pas ?

40 40 Synthétiser lanalyse de tâches (1) Méthodes formelles Ex : GOMS (Goals, Operators, Methods, Selection rules) Lourdes et complexes à mettre en œuvre Modèles hiérarchiques de tâches Tâche = but + procédure (sous-tâches avec des relations) Tâches composites et tâches élémentaires Arbres de tâches « décorés » Objets métiers, pré ou post conditions, fréquence, complexité, durée, acteur

41 41 Synthétiser lanalyse de tâches(2) Listes de tâches Description Catégorisation Séquencement Dépendances Durée Scénarios de tâches Commentaires, questions, minutage etc.

42 42 Appliquer lanalyse de tâches Quelles sont les tâches que le système doit couvrir et celles quil vaut mieux faire manuellement ? Quelles sont les tâches qui posent le plus de problèmes aux utilisateurs ? Le système résout-il des problèmes essentiels ou marginaux ? Est-ce quon oblige lutilisateur à des tâches redondantes Quelles sont les relations entre les tâches ?

43 43 Principe 2 : tester, tester, tester Faire tester des scénarios écrits ou filmer Rédiger les manuels utilisateurs avant le codage Faire des maquettes et simuler le futur système Construire très tôt des prototypes Faire très tôt des démonstrations Utiliser des vidéos Utiliser les forums, les réseaux, les conférences Tester les prototypes de façon rigoureuse Organiser des séances de cassez-moi-ça Mener des études de terrains Faire des études de suivi dutilisation Inclure des programmes qui gardent des traces des actions des utilisateurs pour les analyser

44 44 Principe 3 Adopter une méthode itérative de conception 3 impératifs Identifier les changements et les évaluer Tests auprès des utilisateurs, inspection etc. Conséquences du changement Se donner les moyens deffectuer des changements Organiser le travail de développement Disposer doutils logiciels Vouloir effectuer des changements

45 45 Principe 4 Maintenir une vision globale des problèmes dutilisabilité Comment ? Un groupe doit être chargé de lutilisabilité sur lensemble du projet et sur lensemble des critères Rédiger les manuels utilisateurs avant le codage pour guider le codage Rédiger des manuels utilisateurs pour les utilisateurs secondaires (formateurs, vendeurs, maintenances, chercheurs etc.) Prévoir la diffusion et lexploitation du produit

46 Synthèse personnelle : besoins Utilité globale Moyens : Entretiens, étude de lexistant Résultats : Objectifs généraux, critères de succès (client/donneur dordre) Utilisateurs Moyens Entretiens, observations, statistiques, règles générales, Magicien doz Résultats Personnages (moins de 10) et des scénarios dutilisation Tâches Pour un site Web Énumérer le contenu, les fonctionnalités principales Définir la navigation, linteraction 46

47 Synthèse personnelle : conception (1) Conception générale Pour un site web Architecture de linformation, choix des termes, navigation et les transactions Moyens : tris des cartes, concurrence, scénarios et personnages Résultats : plan de site, parcours clients, transactions Micro-utilité : Les petits plus qui font la différence Moyens : Analyse concurrentielle, Scenario de conception, Remue-méninges, Revue de conception, storyboard, prototype video, maquette papier Résultats : prototypes low fidelity, scenarios de conception 47

48 Synthèse personnelle : conception (2) Interface conceptuelle Pour un site web : Organisation générale des pages (zoning), maquettage conceptuel Pour une application Table des objets et des fonctions Prototypes Interface concrète Alternatives de conception, Storyboard, Charte graphique, Revue de conception, inspection par des experts 48

49 Synthèse personnelle (plus tard) Développement Évaluation 49

50 50 Références http://www.ergolab.net/ http://iihm.imag.fr/docs/coutaz.ecole2/ConceptionPage sWeb.html http://iihm.imag.fr/docs/coutaz.ecole2/ConceptionPage sWeb.html http://www.designofsites.com/home/ http://leadersintheknow.biz/UsabilityUserExperience/L UCIDFramework/tabid/178/Default.aspx http://leadersintheknow.biz/UsabilityUserExperience/L UCIDFramework/tabid/178/Default.aspx Gould, J. D., Boies, S. J., & Ukelson, J. (1997). How to design usable systems. In Helander, M. G., Landauer, T. K., & Prabhu, P. V. (Eds.), Handbook of human-computer interaction, 2d ed., 231-254. Amsterdam, The Netherlands: North-Holland.Helander, M. G., Landauer, T. K., & Prabhu, P. V. (Eds.)North-Holland John M. Carroll http://www.personal.psu.edu/faculty/j/m/jmc56/ http://www.personal.psu.edu/faculty/j/m/jmc56/

51 51 Reférences (suite) Boucher A., Ergonomie Web, Eyrolles, 2009 Brangier E., Barcenilla J., Concevoir un produit facile à utiliser : Adapter les technologies à lhomme, Editions dorganisation, 2003. Letondal C., Mackay W., Participatory Programming and the Scope of Mutual Responsability: Balancing Scientific, design and software commitment, Proceedings Participatory Desing Conference, Toronto, Canada, 2004. Mackay W., Fayard A.-L., "Radicalement nouveau et néanmoins familier : les strips papiers revus par la réalité augmentée", Actes des Journées IHM 1997

52 52 Take home messages Idée force Talking to users is not a luxury (Gould) Time spent in the early phases pays most dividends (Landay) Deux problèmes de conception Conception centrée utilisateur (Ergo) Conception technique (GL) Conception centrée utilisateur en deux niveaux Niveau tâche/activité : interface conceptuelle, conception globale Niveau écran : conception détaillée