Conception des logiciels interactifs Cours 3.1 Techniques de conception itérative 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

Distinguer Analyse de besoins (cours 2) Quel est le problème à résoudre ? Méthodes formelles Cf. livre de Brangier Méthodes informelles Persona et scénario 11 questions (cous de Berkley) Catégories d’activités (Mackay) Conception (cour 3 et 4) Quelle est la solution du problème ?

Analyse de besoins Définir le concept de départ (Comprendre) 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 (Recueillir des informations) Analyse des artefacts existants, observation sur le terrain et enregistrement d’activités dans un contexte de travail, interviews Synthèse des résultats (Prototyper :Ressources pour la conception) 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

C3 : Conception C3.1 : Techniques de conception (poly de Mackay et Beaudoin-Lafon) Personas, Scénarios Maquettes et prototypes Espace de conception Remue-méninges, tables fonctionnelles, alternatives Scénario de conception, storyboard Points sur le projet C3.2 : Méthodes de conception Approche génie logiciel/ergonomique Exemples de démarches de conception en IHM Sites web : Coutaz, Lynch, Landay, Boucher Lucid Gould Points communs à toutes ces méthodes 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)

Techniques de conception itérative (d’après Mackay)

Deux phases Ouvrir l’espace des solutions Générer un maximum d’idées Remue-méninges Six-to-one (trouver six idées, puis les combiner) Restreindre l’espace des solutions Formaliser les meilleures idées (avec alternatives) Tâches prioritaires (Structurer le contenu, Concevoir l’interaction) Tables fonctionnelles et Alternatives Arborescence du site, scénario de conception, story-boards, maquettes papier/interactive, schémas filaires

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 (même farfelues) 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

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

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 Brainstroming (« remue-méninges ») Scénario de conception, scénario de travail Évaluation Scénario d’utilisation Revue d’utilisabilité

Scénario de conception (de travail) Objectif Description précise de l’activité d’un persona sur le logiciel futur pour spécifier le prototype Procédure (1 h maxi, groupe de 4/5) Écrire une histoire décrivant ce qui arrive à un persona qui utilise le logiciel futur Utiliser Les entretiens pour inclure Les problèmes identifiés Les situations habituelles ou non Les idées issues du remue-méninges Résultat : une histoire ou un story board

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)

Structure d’un storyboard Cours 4, Beaudoin-Lafon && Mackay 09

Story-board (exemple) Story board pour une e-formation sur lequel a travaillé une stagiaire de M2-IFL Pour communiquer avec le client avant le codage

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 ».

Pourquoi des 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 conception sur papier : prises de décisions dans le risque passage d'une itération à une autre : remises en cause des choix précédents démarches de prototypage/maquettage (de + en + couramment utilisées) aider les utilisateurs (ou les clients) à imaginer l'interface s'assurer de l'utilisabilité dans différentes conditions se concentrer sur des détails qui font qu'un système bon en théorie est inutilisable se concentrer sur les parties problématiques de l'interface étudier des alternatives de conception (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

Prototypes ? Représentation Dessin -> Simulation Précision Informel -> Vraie grandeur Interactivité Regarder -> Agir Évolution Jetable -> Incrémental Stratégie Horizontal, verticale, niveau tâche, niveau scénario Beaudoin-Lafon && Mackay 07

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 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 une maquette 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) « Le diable est dans les détails » 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 : Techniques de conception (poly de Mackay et Beaudoin-Lafon) Personas, Scénarios Maquettes et prototypes Espace de conception Remue-méninges, tables fonctionnelles, alternatives Scénario de conception, storyboard Points sur le projet C3.2 : Méthodes de conception Approche génie logiciel/ergonomique Exemples de démarches de conception en IHM Sites web : Coutaz, Lynch, Landay, Boucher Lucid Gould Points communs à toutes ces méthodes 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 : 1- Comprendre les utilisateurs Quel est le problème ? Découverte : Déjà Noté les bonnes et les mauvaises idées d’application voisines Étudié les caractéristiques de vos utilisateurs Interviews + observation + introspection Analyse des données : Aujourd’hui, nous allons en TD Catégories d’utilisateurs, d’activité Ressources pour la conception : Profils d’utilisateurs, personnages, catégories d’utilisation, scénarios d’utilisation

Projet : 2- Générer des idées Qu’est-ce qu’on peut faire ? 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 : 3- Mettre en œuvre une idée Comment faire ? Collecte d’informations Fonctionnalités et mode d’utilisation Analyse Table fonctionnelle Alternatives Ressources pour le design Scénario de conception Storyboard Maquette

Projet : 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 atelier final) Analyse Qualitative/quantitative Ressources pour le design Liste de points forts Listes de problèmes (pondérés)

À Faire (1) Pour le 20/11 : Finaliser le travail d’aujourd’hui en atelier Livrable 1 : Définition du problème Pour le 4/12 : Avant le cours Mettre en œuvre une idée Remue-méninges (Brainstorming), scénarios de conception, table fonctionnelle, alternatives Personae et scénarios de conception (histoire ou storyboard) En séance : présentation des scénarios de conception

à faire (suite) pour le 18/12 (dernière avant Janvier) Avant le cours Mettre en œuvre une idée Maquette (low-tech) En séance Évaluer une idée Revue de conception

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 (Génie Logiciel) Conception centrée utilisateur en deux niveaux Niveau tâche/activité : interface conceptuelle, conception globale Niveau écran : conception détaillée (cours 4)