1 conception des logiciels interactifs m2-ifl/du-tice, upmc [email protected] techniques...

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

Upload: alais-beaulieu

Post on 03-Apr-2015

113 views

Category:

Documents


3 download

TRANSCRIPT

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

1

Conception des logiciels interactifs

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

Techniquesde conception itérative

Cours 3.1

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

3

Distinguer

Analyse de besoins (cours 2)• Quel est le problème à résoudre ?

– Méthodes formellesCf. livre de Brangier

– Méthodes informellesPersona et scénario11 questions (cous de Berkley)Catégories d’activités (Mackay)

Conception (cour 3 et 4)• Quelle est la solution du problème ?

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

4

Analyse de besoins1. 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

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

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

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

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

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

6

Techniques de conception itérative

(d’après Mackay)

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

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

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

8

Remue-méninges- Brainstorming (1)

But• Générer le plus grand nombre possible d'idées

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

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

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

10

Remue-méninges

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

11

Table fonctionnelleBut :

• 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

• 11

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

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éaliserRésultat :

• Une description des alternatives

• 12

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

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é

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

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 prototypeProcé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éningesRésultat : une histoire ou un story board

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

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)

• 15

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

16

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

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

17

Story-board (exemple)

• 17

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

18

Conception itérative et prototypageProblème : complexité des spécifications

• problèmes ouverts et difficiles à spécifier• communication au sein de l'équipe, avec les

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

19

Pourquoi des Prototypes ?

contraintes de temps et d'argent perturbent ce cycle idéaldé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édentsdé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)

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

20

Prototypes ?

Représentation• Dessin -> SimulationPrécision• Informel -> Vraie grandeurInteractivité• Regarder -> AgirÉvolution• Jetable -> IncrémentalStratégie• Horizontal, verticale, niveau tâche, niveau

scénario

Beaudoin-Lafon && Mackay 07

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

21

Maquetteobjet

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

22

Prototype papier

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

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

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

24

Développer une maquette

PapierVideoDiaporamaHtmlOutil gratuit : Pencil

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

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

25

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)

• « 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 communInconvénients

• qui décide d'arrêter les itérations et quand ?

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

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

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

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

27

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

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

28

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

Projet : 3- Mettre en œuvre une idée

Comment faire ?Collecte d’informations

Fonctionnalités et mode d’utilisationAnalyse

Table fonctionnelle Alternatives

Ressources pour le design Scénario de conception Storyboard Maquette

29

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

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/quantitativeRessources pour le design

Liste de points forts Listes de problèmes (pondérés)

30

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

À 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

31

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

à 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

32

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

33

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)