Conception des logiciels interactifs

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

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

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

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

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

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

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

10. Remue-méninges

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

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

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

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

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

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

17. Story-board (exemple)

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

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

20. Prototypes ? Beaudoin-Lafon && Mackay 07 • 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

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

22. Prototype papier

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

24. Développer une maquette • Papier • Video • Diaporama • Html • Outil gratuit : Pencil • http://pencil.evolus.vn/en-US/Home.aspx

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

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

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

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

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

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

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

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

33. 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 (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)