Conception des logiciels interactifs
This presentation is the property of its rightful owner.
Sponsored Links
1 / 42

Conception des logiciels interactifs PowerPoint PPT Presentation


  • 61 Views
  • Uploaded on
  • Presentation posted in: General

Conception des logiciels interactifs. Cours 3.1. Techniques de conception itétative. M2-IFL/DU-TICE, UPMC [email protected] Cours 2 : Les utilisateurs ?. Plan Les concepts de base Ergonomie Utilisateur élastique Utilisabilité Travail prescrit, travail réel

Download Presentation

Conception des logiciels interactifs

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Conception des logiciels interactifs

Conception des logiciels interactifs

Cours 3.1

Techniques

de conception itétative

M2-IFL/DU-TICE, UPMC

[email protected]


Cours 2 les utilisateurs

Cours 2 : Les utilisateurs ?

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

  • Outils de Conception Centrée Utilisateur (CCU )

    • Personas, Scénarios, Maquette et prototype


C3 conception

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


Analyse de besoins

Analyse de besoins

  • 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

  • Les études de terrain

    • Analyse des artefacts existants, observation sur le terrain et enregistrement d’activités dans un contexte de travail, interviews

  • 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


Distinguer

Distinguer

  • Analyse de besoins

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

  • Conception

    • Quelle est la solution du problème ?


Analyse des t ches

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)


Analyse de t ches brekeley 2011

Analyse de tâches (Brekeley 2011)

  • Qui va utiliser le système ?

  • Quelles tâches exécutent-ils ?

  • Quelles tâches souhaitent-ils ?

  • Comment apprennent-ils à exécuter les tâches ?

  • Où sont exécutées les tâches ?

  • Quelles sont les relations entre les informations et les utilisateurs ?

  • Quels sont les autres outils à disposition ?

  • Comment les utilisateurs communiquent-ils entre eux ?

  • Quelle est la fréquence d’utilisation des tâches ?

  • Quelles sont les contraintes de temps ?

  • Que se passent-il quand les choses vont mal ?


Cat gories d activit mackay

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


Les classes d utilisateurs stakeholders

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)


Exemples

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)


Personnas

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


P ersona

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


Cr ation d un personnage

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


Exemple

Exemple

Jean-Claude Grosjean


En savoir plus

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-understand-your-users-with-personas/

  • http://usability.gov/methods/analyze_current/personas.html

  • http://fr.wikipedia.org/wiki/Persona_%28ergonomie%29

  • http://blocnotes.iergo.fr/breve/motsetphrases/les-personas/


Sc narios

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


Sc narios et cycle de vie

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é


Sc nario caroll 97

Scénario (Caroll 97)

« Une autre perspective sur la conception de systèmes »

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


Personnages et sc narios

Personnages et scénarios

Ré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


Exemple de personnage et de sc narios

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


Conception it rative et prototypage

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


Maquettes et prototypes

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)


Maquette

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


Prototype papier

Prototype papier


Prototype

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)


D velopper un prototype

Développer un prototype

  • Papier

  • Video

  • Diaporama

  • Html

  • Outil gratuit : Pencil

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


R sum sur les prototypes

Résumé sur les prototypes

Prototypes (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 ?


C3 conception1

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


Projet phase 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


Projet phase 2

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


Projet phase 3

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


Projet phase 4

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)


Faire 1

À Faire (1)

  • Pour le 21/10

    • Liste des catégories d’utilisateurs

    • Liste des tâches

    • Personas et scénarios


Faire suite

à 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


Remue m ninges brainstorming 1

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)


Remue m ninges 2

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


Remue m ninges

Remue-méninges


Sc narios cours 2

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)


Story board

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)


Table fonctionnelle

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


Alternatives

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


Take home messages

Take home messages

  • Idée force

    • Talking to usersis not a luxury (Gould)

    • Time spent in the early phases pays mostdividends (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


  • Login