1

Conception des logiciels interactifs

M2-IFL/DU-TICE, UPMCElisabeth.Delozanne@upmc.fr

Techniquesde 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ête3. Outils de Conception Centrée Utilisateur

(CCU )• Personas, Scénarios, Maquette et

prototype

Cours 2 : Les utilisateurs ?

3

DistinguerAnalyse de besoins (cours 2)

• Quel est le problème à résoudre ?– Méthodes formelles

Cf. livre de Brangier– Méthodes informelles

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

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

5

C3 : ConceptionC3.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 phasesOuvrir 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 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

12

AlternativesBut :

• 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

13

Scénarios et cycle de vieQuand 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 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

15

Story-boardBut :

• 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

16

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

17

Story-board (exemple)

• 17

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

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)

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

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

22

Prototype papier

23

Prototypeobjet

• 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 maquettePapierVideoDiaporamaHtmlOutil gratuit : Pencil

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

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 ?

26• 26

C3 : ConceptionC3.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

Projet : 1- Comprendre les utilisateursQuel 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 + introspectionAnalyse 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

Projet : 2- Générer des idéesQu’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

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

Projet : 4- Évaluer une idéeEst-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

À 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

à 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

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)