Conception des logiciels interactifs

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

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

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

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

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

6. 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)

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

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

9. 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)

10. 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)

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

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

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

14. Exemple Jean-Claude Grosjean

15. 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/

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

17. 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é

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

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

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

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

22. 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)

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

24. Prototype papier

25. 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)

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

27. 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 ?

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

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

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

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

32. 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)

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

34. à 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 • Avant le cours • Maquette (low-tech) • En TD : Revue de conception

35. 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)

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

37. Remue-méninges

38. 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)

39. 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)

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

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

42. Take home messages • Idée force • Talking to usersis not a luxury (Gould) • Time spent in the early phases pays mostdividends (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