View
50
Download
0
Category
Preview:
DESCRIPTION
Conception des logiciels interactifs. Cours 3.1. Techniques de conception itérative. M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr. Cours 2 : Les utilisateurs ?. Plan Les concepts de base Ergonomie Utilisateur élastique Utilisabilité Travail prescrit, travail réel - PowerPoint PPT Presentation
Citation preview
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)
Recommended