Download - 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC [email protected] Techniques de conception itétative Cours 3.1.

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

1

Conception des logiciels interactifs

M2-IFL/DU-TICE, [email protected]

Techniquesde conception itétative

Cours 3.1

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

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ête

3. Outils de Conception Centrée Utilisateur (CCU )

• Personas, Scénarios, Maquette et prototype

Cours 2 : Les utilisateurs ?

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

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

5

Distinguer Analyse de besoins

• Quel est le problème à résoudre ? Conception

• Quelle est la solution du problème ?

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

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

14

Exemple

Jean-Claude Grosjean

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

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

24

Prototype papier

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

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

26

Développer un prototype Papier Video Diaporama Html Outil gratuit : Pencil

• http://pencil.evolus.vn/en-US/Home.aspx

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

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

28 • 28

C3 : Conception

C3.1 : Technique de conception itérativePersonasScé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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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 29

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

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

30

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

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

31

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

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

À Faire (1)

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

33

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

à 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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

37

Remue-méninges

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

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Techniques de conception itétative Cours 3.1.

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