Conception des logiciels interactifs
description
Transcript of Conception des logiciels interactifs
![Page 1: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/1.jpg)
1
Conception des logiciels interactifs
M2-IFL/DU-TICE, [email protected]
Techniquesde conception itétative
Cours 3.1
![Page 2: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/2.jpg)
2
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ête3. Outils de Conception Centrée Utilisateur
(CCU )• Personas, Scénarios, Maquette et
prototype
Cours 2 : Les utilisateurs ?
![Page 3: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/3.jpg)
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
![Page 4: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/4.jpg)
4
Analyse de besoins1. 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
2. Les études de terrain• Analyse des artefacts existants, observation sur le
terrain et enregistrement d’activités dans un contexte de travail, interviews
3. 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
![Page 5: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/5.jpg)
5
Distinguer Analyse de besoins
• Quel est le problème à résoudre ? Conception
• Quelle est la solution du problème ?
![Page 6: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/6.jpg)
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)
![Page 7: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/7.jpg)
7
Analyse de tâches (Brekeley 2011)1. Qui va utiliser le système ?2. Quelles tâches exécutent-ils ?3. Quelles tâches souhaitent-ils ?4. Comment apprennent-ils à exécuter les
tâches ?5. Où sont exécutées les tâches ?6. Quelles sont les relations entre les
informations et les utilisateurs ?7. Quels sont les autres outils à disposition ?8. Comment les utilisateurs communiquent-ils
entre eux ?9. Quelle est la fréquence d’utilisation des
tâches ?10. Quelles sont les contraintes de temps ?11. Que se passent-il quand les choses vont
mal ?
![Page 8: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/8.jpg)
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
![Page 9: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/9.jpg)
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)
![Page 10: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/10.jpg)
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)
![Page 11: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/11.jpg)
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
![Page 12: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/12.jpg)
12• 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
![Page 13: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/13.jpg)
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
![Page 14: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/14.jpg)
14
Exemple
Jean-Claude Grosjean
![Page 15: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/15.jpg)
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-underst
and-your-users-with-personas/ http://usability.gov/methods/analyze_current/p
ersonas.html http://fr.wikipedia.org/wiki/Persona_%28ergono
mie%29 http://blocnotes.iergo.fr/breve/motsetphrases/l
es-personas/
![Page 16: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/16.jpg)
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
![Page 17: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/17.jpg)
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é
![Page 18: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/18.jpg)
18
Scénario (Caroll 97)
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
« Une autre perspective sur la conception de systèmes »
![Page 19: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/19.jpg)
19
Personnages et scénariosRé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
![Page 20: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/20.jpg)
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
![Page 21: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/21.jpg)
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
![Page 22: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/22.jpg)
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)
![Page 23: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/23.jpg)
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
![Page 24: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/24.jpg)
24
Prototype papier
![Page 25: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/25.jpg)
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)
![Page 26: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/26.jpg)
26
Développer un prototype Papier Video Diaporama Html Outil gratuit : Pencil
• http://pencil.evolus.vn/en-US/Home.aspx
![Page 27: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/27.jpg)
27
Résumé sur les prototypesPrototypes (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 ?
![Page 28: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/28.jpg)
28 • 28
C3 : Conception C3.1 : Technique de conception itérative
PersonasScénariosMaquettes et prototypes• Points sur le projet• Techniques (poly de Mackay et Beaudoin-Lafon)
– Espace de conceptionRemue-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
![Page 29: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/29.jpg)
Projet : phase 1Comprendre 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 29
![Page 30: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/30.jpg)
Projet : phase 2Inventer 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
30
![Page 31: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/31.jpg)
Projet : phase 3Mettre 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
31
![Page 32: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/32.jpg)
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)
32
![Page 33: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/33.jpg)
À Faire (1) Pour le 21/10
Liste des catégories d’utilisateurs Liste des tâches Personas et scénarios
33
![Page 34: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/34.jpg)
à 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 34
![Page 35: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/35.jpg)
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)
![Page 36: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/36.jpg)
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
![Page 37: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/37.jpg)
37
Remue-méninges
![Page 38: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/38.jpg)
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)
38
![Page 39: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/39.jpg)
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)
39
![Page 40: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/40.jpg)
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
40
![Page 41: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/41.jpg)
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
41
![Page 42: Conception des logiciels interactifs](https://reader035.fdocuments.net/reader035/viewer/2022062218/568165c2550346895dd8cb0f/html5/thumbnails/42.jpg)
42
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