Conception des logiciels interactifs Cours 3.1 Techniques de conception itétative M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr

Cours 2 : Les utilisateurs ? Plan Les concepts de base Ergonomie Utilisateur élastique Utilisabilité Travail prescrit, travail réel Tâche et activité D’autres modèles Recueil de données Entretiens, Observations, Magicien d’Oz, Enquête Outils de Conception Centrée Utilisateur (CCU ) Personas, Scénarios, Maquette et prototype Références et Bibliographie : pour introduire le cours: [Poulain et Valot 1996] OFTA chapitre 2, Gérard Poulain et Claude Valot, Ergonomie des interfaces futures, dans Nouvelles Interfaces Homme-Machine, Observatoire Français des Techniques Avancées, Diffusion Lavoisier, Paris Décembre 1996, ISBN 2-906028-04-5, p. 45-63. [Rabardel et al 98] Pierre Rabardel, Nicolle Carlin, Marion Chesnais, Nathalie Lang, Gérard Le Joliff, Martine Pascal, Ergonomie concepts et méthodes, éditions Octares, Toulouse, 1998, 180 p, ISBN2-906769-45-2 petit précis d’ergonomie à l’usage des non spécialistes [Cerratto 1999] Teresa Cerratto,Comment penser la collaboration avec des artefacts, in T. Cerrato, Activité collaborative sur réseau : une approche instrumentale de l’écriture en collaboration, Thèse de l’Université Paris 8, décembre 1999, chapitre 4, p. 77-102 [Beguin et Rabardel 2000] Pascal Béguin, Pierre Rabardel, Concevoir pour les activités instrumentées, in Alain Vom Hofe (ed.), Interactions Homme-Système : perspectives et recherches psycho-ergonomiques, numéro spécial de la Revue d’intelligence Artificielle, vol 14 – n° 1-2/2000, Hermès, p. 35-54. pour en savoir plus sur l'ergonomie •  http://www.lergonome.org

C3 : Conception C3.1 : Technique de conception itérative Personas Scénarios Maquettes et prototypes Points sur le projet Techniques (poly de Mackay et Beaudoin-Lafon) Espace de conception Remue-méninges, tables fonctionnelles, alternatives Scénario de conception, storyboard C3.2 : Méthodes de conception 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 Références Ce cours s’inspire principalement : Du cours et des TP sur la conception participative de Wendy Mackay à la conférence IHM’2002, Poitiers, Novembre 2002 Des tutoriels « Design and Rapid Evaluation of usable Web sites » organisé par Gene Lynch et «Scenario Based Usability Engineering » organisé par John M. Caroll et Mary B. Rosson à la conférence CHI’2000 en avril 2000 à la Haye Bibliographie [Bastien et al. 2001] Christian Bastien, Dominique SCAPIN, évaluation des systèmes d’information et critères ergonomiques, in Christophe KOLSKI (Ed.), Environnements évolués et évaluation de l'IHM, Interaction homme-machine pour les systèmes d'information Vol 2, Hermès, 2001, 53-113 [Drouin et al. 2001] Annie Drouin, Annette Valentin, Jean Vanderdonckt, Les apports de l’ergonomie à l’analyse et à la conception des systèmes d’information, in Christophe KOLSKI, (ed.), Analyse et conception de l'IHM, Interaction homme-machine pour les systèmes d'information Vol 1, chapitre 2, Hermès, 2001, 250 p, ISBN 2-7462-0239-5, p. 51-83 [Nielsen 2000], Jakob Nielsen, Conception de sites Web, l'art de la simplicité, Campus Press France, 2000, 385 p., 249 F, ISBN 2-7440-0887-7 [Bastien 1993] J. M. BASTIEN, D. SCAPIN, Ergonomic Criteria for the Evaluation of Human-Computer Interaction , rapport technique N°156 de l'INRIA, 81p., Juin 93 LUCID Software Design : Logical User-Centered Interactive Design, http://www.cognitic.com/method/lucid.html Deux exemples de conception centrée sur les utilisateurs, leur activité et les situations de travail Wendy Mackay, Anne-Laure Fayard, "Radicalement nouveau et néanmoins familier : les strips papiers revus par la réalité augmentée" , Journées IHM 1997 ( Accessible en ligne http://www.daimi.au.dk/~mackay/publications.html) Duplàa Emmanuel, Visser Willemien, « e-Ti », prototype d’assistance à la planification d’itinéraires multimodaux,Spécifications ergonomiques pour une application Web sur la base d’une démarche expérimentale, Actes IHM’2002 (papier écrit à partir du stage de DEA d’E. Duplaa, promotion 2000-2001 du DEA CHM&IE, Le Mans)

Analyse de besoins Définir le concept de départ Problème à résoudre, état de l’art, participants au projet et les bénéficiaires ou le public cible, hypothèses sur l’impact du projet, questions auxquelles le projet est confronté et les contraintes Les études de terrain Analyse des artefacts existants, observation sur le terrain et enregistrement d’activités dans un contexte de travail, interviews Synthèse des résultats Analyse de tâche et catégories d’activité Scénarios d’utilisation et personas Pensez le plus tard possible en terme de fonctionnalités offertes par le logiciel

Distinguer Analyse de besoins Quel est le problème à résoudre ? Conception Quelle est la solution du problème ?

Analyse des tâches Méthodes formelles Cf. livre de Brangier Méthodes informelles 11 questions (cous de berkley) Catégories d’activités (Mackay)

Analyse de tâches (Brekeley 2011) Qui va utiliser le système ? Quelles tâches exécutent-ils ? Quelles tâches souhaitent-ils ? Comment apprennent-ils à exécuter les tâches ? Où sont exécutées les tâches ? Quelles sont les relations entre les informations et les utilisateurs ? Quels sont les autres outils à disposition ? Comment les utilisateurs communiquent-ils entre eux ? Quelle est la fréquence d’utilisation des tâches ? Quelles sont les contraintes de temps ? Que se passent-il quand les choses vont mal ?

Catégories d’activité (Mackay) Objectifs : Préparer la création de personas et de scénarios Faire une synthèse des comportements observés mais en conservant les détails utiles pour la conception Procédure : Travail collectif itératif Relire et organiser les exemples observés dans les entretiens Créer des histoires courtes pour illustrer chaque catégorie d’activité observée (au moins deux histoires par catégories) Résumer

Les classes d’utilisateurs (stakeholders) Les utilisateurs du logiciel Leurs collègues et supérieurs (directeurs) Les développeurs Les responsables maintenance et support Les vendeurs du logiciel Le service informatique de l’organisation Les clients de l’organisation Les syndicats Les entreprises mères Les associations d’employés Les actionnaires (shareholders) Les gouvernements (Ramage, 1997)

Exemples Chercheurs de l’Institut Pasteur [Letondal&Mackay 04] Enquête : Utilisateurs occasionnels de logiciels scientifiques (36 %) Utilisateurs de micro-ordinateurs (15%) Jeunes scientifiques (15 %) intéressés par la bioinformatique Les apprentis (15%) qui s’initient à l’informatique Les Gourous (6%) qui sont passionnés d’informatique et de programmation Pépite Élèves, professeurs (débutants, expérimentés, formateurs, collège, lycée), chercheurs (en didactique, en informatique)

Personnas Créer des personnages Leurs compétences Visuelles, tactiles, manipulatrices Métiers Connaissances du domaine Leur contexte Leur activité Pourquoi Évite les problèmes d’utilisateur élastique, de taille unique ou de logiciel bon à tout faire Maintenir des usagers et leur contexte dans l’équipe de conception tout au long du projet Faire référence à des utilisations de façon précise dans l’équipe de conception Fait gagner du temps (on parle de la même chose), facilite la collaboration et la communication

Persona Représentation fictive d’utilisateur probable Créé à partir de données réelles. Guide les décisions concernant la conception Précise les besoins et les caractéristiques des différents groupes d'utilisateurs lors de la conception

Création d’un personnage Quoi ? Buts, attentes, motivations Contexte Quand ? Où ? Quel ordinateur ? Taille de l’écran ? Quel navigateur ? Quelle connexion ? Qui ? Age, sexe, éducation, expérience en informatique et sur internet Valeurs Psychologie timide/agressif, impatient/patient, impulsif/systématique Lui donner vie : en faire des affiches

Exemple Jean-Claude Grosjean

En savoir plus www.chairerbc.com/axisdocument.aspx?id=194&langue=en...true http://www.matthieu-tranvan.fr/webmarketing/taux-de-conversion-webmarketing/outil-definir-personas-e-commerce.html http://www.qualitystreet.fr/tag/persona/ http://works.bepress.com/djilali_idoughi/3/ http://thinkvitamin.com/design/how-to-understand-your-users-with-personas/ http://usability.gov/methods/analyze_current/personas.html http://fr.wikipedia.org/wiki/Persona_%28ergonomie%29 http://blocnotes.iergo.fr/breve/motsetphrases/les-personas/

Scénarios ? Une description d’une suite d’événements possibles Format histoire, « story board », video, tableau, description formelle Catégories en IHM scénarios d’utilisation décrivent l’existant (avant ou après la conception) scénarios de conception (ou de travail) imaginent l’utilisation de systèmes futurs Pourquoi ? stimuler l’imagination et la créativité, susciter des questionnements un design pertinent pour de vrais utilisateurs dans un vrai contexte, pallier aux insuffisances et à la rigidité des analyses hiérarchiques Qui utilise ? Théâtre et cinéma, économistes, politiques, stratèges, management, marketing, conception orientée objet (use-case de UML), IHM

Scénarios et cycle de vie Quand utiliser des scénarios en IHM ? Tout au long du cycle de développement du produit Analyse de besoins Scénario problème, scénario d’utilisation Scénario observé ou des mixages de scénarios observés Conception et prototypage Scénario de conception, scénario de travail Brainstroming (« remue-méninges ») Évaluation Scénario d’utilisation Revue d’utilisabilité

« Une autre perspective sur la conception de systèmes » Scénario (Caroll 97) « Une autre perspective sur la conception de systèmes » Perspective « scénario »  Descriptions concrètes Accent mis sur des exemples précis Dirigé par le travail Ouvert, fragmentaire Informel, brut, familier Résultats envisagés Persp. « classique »  Descriptions abstraites Accent mis sur des types génériques Dirigé par la technologie Complet, exhaustif Formel, rigoureux Résultats spécifiés

Personnages et scénarios Résumé Définir les principales utilisations du logiciel Polycopié : catégories de tâches Définir les catégories d’utilisateurs Polycopié : catégories d’utilisateurs et exemples de personnages Associer un personnage à chaque utilisation et écrire un scénario Raconter une histoire dans un intervalle de temps donné Inclure des événements courants ou moins et des incidents Polycopié : scénario d’utilisation

Exemple de personnage et de scénarios Marie-France Expérimentée Professeur principale (orientation) Aime se renouveler, tester des méthodes nouvelles Très attachée à ses élèves et à leur réussite personnelle Pas passionnée par la technique en soi Appel au secours enfants, maris, amis pour la dépanner ou lui montrer comment marche un logiciel Contexte Collège Salle avec des vieux ordinateurs en techno et à la doc Scénario 1 : Orientation des élèves de 3° fin d’année, confirmer Scénario 2 : Début d’une nouvelle leçon, homogénéiser la classe

Conception itérative et prototypage Problème : complexité des spécifications problèmes ouverts et difficiles à spécifier communication au sein de l'équipe, avec les utilisateurs, les clients Solution : le prototypage construction de maquettes et/ou de prototypes développement de solutions partielles ou intermédiaires apparition de nouveaux objectifs tests d'alternatives de conception évaluations des solutions retenues succession de phases affinements progressifs des spécifications du produit réalisations et intégrations des aménagements jusqu'à obtention d'un produit satisfaisant Apparaît au début des années 1990. En particulier méthode RAD Rapid Application Development Voir aussi ma thèse en 1991, le développement de Pépite - conception : processus mental à la fois ascendant et descendant - complexité : on est obligé de raisonner en même temps à 2 niveaux au niveau abstrait du modèle au niveau de la restitution : prototype, instance du modèle Idée de base : l’analyse des besoins ne peut se faire en une seule fois. Les besoins et leur expression évoluent au cours de la conception. Aujourd'hui des chercheurs comme Derycke et Dourish estiment que l’expression des besoins est impossible : le temps de développement et de commercialisation des logiciels étant très supérieurs à celui de l’évolution des besoins. Ils préconisent de prévoir de donner les moyens aux utilisateurs de définir eux-mêmes leur outils en définissant des « logiciels malléables ».

Maquettes et prototypes contraintes de temps et d'argent perturbent ce cycle idéal démarche qualité ergonomie : recommandations et modèles pour éviter des erreurs grossières mais conception sur papier : prises de décisions dans le risque passage d'une itération à une autre peut provoquer des remises en cause des choix précédents intérêt des démarches de prototypage/maquettage (de + en + couramment utilisées) étudier des alternatives de conception s'assurer de l'utilisabilité dans différentes conditions aider les utilisateurs (ou les clients) à imaginer l'interface se concentrer sur les parties problématiques de l'interface se concentrer sur des détails qui font qu'un système bon en théorie est inutilisable Référence : Beaudoin-Lafon, Mackay (03) Prototype informel : pour tester des idées, des scénarios matériel : papier, marqueur, post-it, transparents Prototype papier : dans les première phases de conception bas niveau : dessiner des idées d'icônes niveau intermédiaire : dessiner une séquence d'écran haut niveau : décider d'une séquence d'écran, quelles fonctionnalités Prototype généré rapidement avec des générateurs d'interface largeur : créer des écrans sans application derrière pour tester différentes fonctionnalités profondeur : développer l'interface complète pour certaines tâches scénario : développer suffisamment de fonctionnalités pour exécuter tout un scénario Prototype vidéo : - créer une vidéo de l'utilisation d'un prototype, simuler les fonctionnalités non implémentées - simuler une interaction qui n'existe pas encore (par exemple en réalité augmentée, le bureau électronique, attention rien à voir avec la métaphore du bureau, ici c'est un vrai bureau) Prototype incrémental ou modulaire construit comme un composant d'un produit Certains auteurs distinguent maquettes et prototypes d'autres non

Maquette objet présentation, organisation, simulation des écrans ni accès au données, ni calculs matériel post-it, tableaux de papier, logiciels de présentation, générateurs d'interface intérêt phases initiales de la conception (analyse des besoins, spécification ) réalisables rapidement et par des non-informaticiens (ergonomes, futurs utilisateurs) facilement modifiables et paramétrables supports de communication au sein de l'équipe de conception faire surgir de nouvelles idées, fonctionnalités, difficultés (réactions spontanées) vérifier l'adéquation des choix aux besoins des utilisateurs, des clients éviter les malentendus Ne pas hésiter à jeter

Prototype papier

Prototype objet développement en profondeur d'une fonctionnalité complète petite partie du système matériel générateurs d'interface plate-forme de développement intérêt vérifier la faisabilité technique ou l'interopérabilité valider une solution mesurer un temps de réponse conseils concerne plus les décideurs que l'utilisateur final (dans cette conception) La distinction maquette/prototype n'est pas toujours claire. Par contre il faut décider si le prototype est jetable ou non. Dans le cas d'un prototype non jetable, on parle de développement incrémental (Cf. le module de diagnostic de Pépite)

Développer un prototype Papier Video Diaporama Html Outil gratuit : Pencil http://pencil.evolus.vn/en-US/Home.aspx

Résumé sur les prototypes Prototypes (ou maquette) Pour qui ? Pour aider les concepteurs, les utilisateurs, les clients, les prescripteurs, les décideurs Pourquoi ? "Un système peut être bon en théorie mais mauvais en pratique à cause de détails, même petits" (Wendy Mackay) Les bons prototypes permettent aux concepteurs de travailler sur les détails et sur plusieurs détails en même temps aux utilisateurs et aux clients de voir ce que sera le système final à l’équipe de se constituer un référentiel commun Inconvénients qui décide d'arrêter les itérations et quand ? Drouin et al. 2001 « Les études informatiques se traduisent souvent par de volumineux dossiers textuels dont il est difficile de se construire une représentation synthétique. Or pour confronter efficacement les différents points de vue, pour les comprendre (à défaut de les partager), il faut qu'il y ait un référentiel commun partiel et les échanges sont facilités par des supports concrets. Dessins d’écrans, schémas d’enchaînements, maquettes, ou encore prototypes, aident les différents acteurs à anticiper les contraintes ou les avantages des futures situations, servent d’illustration pour les explications ou les échanges [VAL 97]. Ils permettent d’examiner en commun différentes options de conception et de les affiner, tant au niveau de la structure des traitements, de la navigation ou des aspects de présentation. Ces objets intermédiaires servent de médiateurs dans le processus de conception, à la fois représentation, traduction des idées mentales, mais également support de nouvelles interactions. Plus les interactions sont nombreuses et variées (par la confrontation de multiple acteurs), plus la médiation est riche [JEA 96]. »

C3 : Conception C3.1 : Technique de conception itérative Personas Scénarios Maquettes et prototypes Points sur le projet Techniques (poly de Mackay et Beaudoin-Lafon) Espace de conception Remue-méninges, tables fonctionnelles, alternatives Scénario de conception, storyboard C3.2 : Méthodes de conception 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 Références Ce cours s’inspire principalement : Du cours et des TP sur la conception participative de Wendy Mackay à la conférence IHM’2002, Poitiers, Novembre 2002 Des tutoriels « Design and Rapid Evaluation of usable Web sites » organisé par Gene Lynch et «Scenario Based Usability Engineering » organisé par John M. Caroll et Mary B. Rosson à la conférence CHI’2000 en avril 2000 à la Haye Bibliographie [Bastien et al. 2001] Christian Bastien, Dominique SCAPIN, évaluation des systèmes d’information et critères ergonomiques, in Christophe KOLSKI (Ed.), Environnements évolués et évaluation de l'IHM, Interaction homme-machine pour les systèmes d'information Vol 2, Hermès, 2001, 53-113 [Drouin et al. 2001] Annie Drouin, Annette Valentin, Jean Vanderdonckt, Les apports de l’ergonomie à l’analyse et à la conception des systèmes d’information, in Christophe KOLSKI, (ed.), Analyse et conception de l'IHM, Interaction homme-machine pour les systèmes d'information Vol 1, chapitre 2, Hermès, 2001, 250 p, ISBN 2-7462-0239-5, p. 51-83 [Nielsen 2000], Jakob Nielsen, Conception de sites Web, l'art de la simplicité, Campus Press France, 2000, 385 p., 249 F, ISBN 2-7440-0887-7 [Bastien 1993] J. M. BASTIEN, D. SCAPIN, Ergonomic Criteria for the Evaluation of Human-Computer Interaction , rapport technique N°156 de l'INRIA, 81p., Juin 93 LUCID Software Design : Logical User-Centered Interactive Design, http://www.cognitic.com/method/lucid.html Deux exemples de conception centrée sur les utilisateurs, leur activité et les situations de travail Wendy Mackay, Anne-Laure Fayard, "Radicalement nouveau et néanmoins familier : les strips papiers revus par la réalité augmentée" , Journées IHM 1997 ( Accessible en ligne http://www.daimi.au.dk/~mackay/publications.html) Duplàa Emmanuel, Visser Willemien, « e-Ti », prototype d’assistance à la planification d’itinéraires multimodaux,Spécifications ergonomiques pour une application Web sur la base d’une démarche expérimentale, Actes IHM’2002 (papier écrit à partir du stage de DEA d’E. Duplaa, promotion 2000-2001 du DEA CHM&IE, Le Mans)

Projet : phase 1 Comprendre les utilisateurs Vous avez déjà Découvert les caractéristiques de vos utilisateurs Interviews + observation + introspection Noté les bonnes et les mauvaises idées d’application voisines Aujourd’hui, nous allons en TD Analyser les données Catégories d’utilisateurs, d’activité Prochaine séance Créer des ressources pour la conception Profils d’utilisateurs, personnages, catégories d’utilisation, scénarios d’utilisation

Projet : phase 2 Inventer des idées Découverte Remue-méninges (brainstorming) Analyse Sélection des idées Alternatives technologiques Ressources pour la conception Problème à résoudre Espace de conception Idées clés Axes technologiques Contraintes

Projet : phase 3 Mettre en œuvre une idée Collecte d’informations Cahier des charges Analyse Table fonctionnelle Alternatives Ressources pour le design Scénario de conception Storyboard Maquette

Projet : phase 4 Évaluer une idée : est-ce que ça marche ? Découverte Méthode d’inspection Heuristiques (cours 1 et 2) Revue de conception (cours 4 et 5) Test utilisateurs (cours 5 et ateliers) Analyse Qualitative/quantitative Ressources pour le design Liste de points forts Listes de problèmes (pondérés)

À Faire (1) Pour le 21/10 Liste des catégories d’utilisateurs Liste des tâches Personas et scénarios

à faire (suite) Pour le 25/11 Mettre en œuvre une idée Avant le cours Remue-méninges (Brainstorming), scénarios de conception, table fonctionnelle, alternatives En cours Story-board La séance suivante :25/11(dernière avant Janvier) Évaluer une idée Maquette (low-tech) En TD : Revue de conception

Remue-méninges- Brainstorming (1) But Générer le plus grand nombre possible d'idées créatives rapidement Procédure Réunir un petit groupe avec différents rôles et expertises Limiter le temps (1h) Décrire un problème de conception spécifique Générer autant d'idées que possible et les lister au tableau ou au rétroprojecteur Sélectionner les meilleures idées Types Idées de conception (conception générale) Dessin des écrans (conception détaillée)

Remue-méninges (2) Règles pour que le brainstorming soit efficace Phase 1 : Générer une grande quantités d'idées Faire participer tout le monde Enregistrer toutes les idées Ne pas évaluer les idées Phase 2 : Classer les idées en fonction de leur qualité Chacun annonce les idées qu'il préfère Les idées sont classées par nombre de votes Commencer la conception à partir des idées les mieux classées Ne pas oublier les idées insolites

Remue-méninges

Scénarios (cours 2) But : Capturer les problèmes et les choses qui marchent Garder le contexte en mémoire Se centrer sur l’interaction, pas sur les fonctionnalités Procédure : Choisir un personna Raconter une histoire plausible Construire une série d’évènements qui décrivent l’interaction Utiliser les faits réels obtenus lors des interviews et des observations Type : Scénario d’utilisation (sans le produit) Scénario de conception (avec le produit) Résultat : Une histoire (2 ou 3 pages)

Story-board But : Illustrer le scénario Focaliser sur les détails de l’interaction Procédure : Dessin plus texte Centrer sur la dynamique de l’interaction Type : Scénario d’utilisation (sans le produit) Scénario de conception (avec le produit)

Table fonctionnelle But : Donner une vision d’ensemble des fonctions et des objets de l’interface Procédure : Lister les objets conceptuels (ceux qui ont sens pour l’utilisateur) Lister l’ensemble des fonctions et les objets auxquels elles s’appliquent Vérifier la cohérence des deux tables Résultat : Liste des objets de l’interface Objet, propriétés, représentations, fonctions Liste des fonctions Fonctions, objets, interaction, effet

Alternatives But : Trouver au moins 3 alternatives pour implémenter une fonctionnalité Procédure : Choisir une fonctionnalité Chercher différents types d’interaction/ de technologies pour la réaliser Résultat : Une description des alternatives

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