Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit
-
Upload
marrok-dubost -
Category
Documents
-
view
115 -
download
0
Transcript of Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit
![Page 1: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/1.jpg)
Méthodologie de conceptionAnalyse des besoins
Interfaces et Scénarisation (COM2571)
01 octobre 2013Grégory Petit
http://lrcm.com.umontreal.ca/greg/COM2571/
![Page 2: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/2.jpg)
Il y a deux semaines …
Définition d’une problématique pour faire une évaluation
Méthodes d’évaluation
Tests utilisateur
![Page 3: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/3.jpg)
Maquette
Scénarisation interactiveAnalyse des besoins
Objectifs de communication
Cas d’utilisation, scénarios
Description du contenu
et exemples
Design de la structure
d’interaction
Design des principaux écrans et
des boutons
Validation par les usagers
Programmation
Validation par le client
![Page 4: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/4.jpg)
Et donc on fait quoi aujourd’hui?
Conception centrée utilisateur
Approche persona
Analyse des besoins
Un peu de design
Atelier
![Page 5: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/5.jpg)
Conception centrée utilisateur
![Page 6: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/6.jpg)
Conception centrée utilisateurEncore des préjugés chez les concepteurs …
« Bien sur que je sais quel genre d’utilisateur va utiliser mon produit! »
« J’ai été étudiant, donc je sais comment concevoir un produit pour des étudiants. »
« Si j’ai une bonne idée, les utilisateurs l’aimeront certainement! »
« De toute façon, les utilisateurs ne savent comment dire ce qu’ils veulent! »
![Page 7: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/7.jpg)
Conception centrée utilisateur
![Page 8: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/8.jpg)
Connaitre l’utilisateur!!!
Koko et Penny Patterson : création d’un langage des signes adapté aux gorilles!http://www.koko.org/index.phpOrdinateur pour Koko, le Koko’s Mac II qui lui permet d’activer des phrases vocales en touchant des icones sur un écran tactile : http://www.beanblossom.in.us/larryy/KokoChapter.html
![Page 9: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/9.jpg)
Connaitre l’utilisateur!!!Définir les caractéristiques de l’utilisateur :
Connaître la physiologie et la psychologie basique humaine
Groupe spécifique? (non-voyants, enfants, personnes âgées…)
Ses connaissances, compétences et expériences avec la technologie
Son éducation, sa professionSes habitudes de travailEtc.
![Page 10: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/10.jpg)
Conception centrée utilisateur
Produit d’un processus de consultation et de participation active des utilisateurs
Préoccupation en amont des utilisateurs, de leurs tâches et de leur environnement
Répartition appropriée des fonctions entre les utilisateurs et les concepteurs
![Page 11: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/11.jpg)
Conception centrée utilisateurCycle de conception : itération de solutions
démarche qui boucle et reboucle jusqu'à ce que le système satisfasse aux exigences définies au départ
Intervention d'une équipe de conception multidisciplinaire
Spécification et poursuite d’objectifs précis d’utilisabilité
![Page 12: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/12.jpg)
Cycle de conception centrée utilisateur
Source: ISO 13407 Human-centered design processes for interactive systems
![Page 13: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/13.jpg)
Approche persona
![Page 14: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/14.jpg)
Approche personaPersona définir les profils d’utilisateurs
Ne pas définir un usager typique décrire différents types d’usagers
Un persona permet de décrire un utilisateur spécifique, mais imaginaire, qui fait parti d’un groupe d’usager cible (nom, âge, profession, expériences et compétences avec l’outil informatique, etc.)
![Page 15: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/15.jpg)
Approche personaIl faut généralement définir : Informations générales (âge, sexe, situation familiale)Éducation et expérience professionnelle Rôle et/où responsabilité avec le futur produitCompétences technologiquesCompétences dans le domaine concerné par le
produitMotivations et enviesButs et attentesContraintes qui pourraient limiter l’utilisation du
produitQualité unique
http://www.ld-grid.org/resources/representations-and-languages/personas
![Page 16: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/16.jpg)
Exemple – bibliothèque de l’UdeMMichel est un étudiant de 21 ans, en seconde année de
baccalauréat en communication à l’Université de Montréal. Il sait très bien rédiger ses idées sur papier depuis le secondaire.
Il vit en collocation avec 2 amis. Il a un ordinateur portable, une imprimante et une connexion internet chez lui.
Il utilise généralement son ordinateur pour écouter de la musique, écrire des articles pour le journal de l’université, envoyer des courriels et aller sur des réseaux sociaux.
Il tient régulièrement un jour un blog où il parle de sa passion pour la photographie. Il effectue d’ailleurs de petites contrats de photographie.
![Page 17: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/17.jpg)
Exemple – bibliothèque de l’UdeMIl utilise souvent le site Web de la
bibliothèque de l’UdeM mais n’a aucune idée comment ce système a pu être conçu.
Il consulte le site Web de la bibliothèque pour emprunter les ouvrages pertinents pour ses cours mais aussi pour de la lecture personnelle.
Pour mieux se concentrer, il lui arrive de travailler à la bibliothèque.
![Page 18: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/18.jpg)
Analyse des besoins
![Page 19: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/19.jpg)
Analyse des besoinsInventaire des attentes par rapport au système
(fournisseurs et utilisateurs du système)Analyser les expériences antérieuresAnalyser ce qui existe, ce qui va bien et ce qui
doit changerCommencer à répertorier les objets, les actions,
les attributs, le vocabulaire à utiliserCaractéristiques des usagers potentiels, leurs
compétences et attitudesC’est dans cette étape que la conception centrée
utilisateur et l’approche persona peuvent être utiles!
![Page 20: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/20.jpg)
Analyse des besoinsInventaire général des sources d'information,
exemple de contenus, caractéristiques médiatiques du contenu, contraintes à l'accès
Ressources disponibles pour aider à l'élaboration, la mise en forme, la mise à jour
Description des contraintes techniques à considérer pour l'élaboration et la diffusion
![Page 21: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/21.jpg)
Analyse des besoins – méthodologie
Étude ethnographiqueObservation des activités, des tâches, de
l’utilisation des systèmes existantsIdentification des processus de communication,
des goulots d’étranglement, observation et recueil en situation des besoins
Entrevues auprès des principaux acteurs concernés par l’élaboration du système
Entrevues auprès des usagers et clients
![Page 22: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/22.jpg)
Analyse des besoins – méthodologie
Recherche expériences similaires, systèmes existants, sources de contenus
Description fonctionnelle de l’application à développer
Intentions, cas d’utilisation, fonctions principales, scénarios
Esquisse générale de structuration des objets, du contenu
Estimation préliminaire des coûts et de l’échéancier
![Page 23: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/23.jpg)
Analyse des besoins – produitsTexte décrivant les besoins et contraintesTexte décrivant le contexte prévu d’utilisationTexte décrivant la compétition et expérience
antérieure étude de l’existantTexte spécifiant les objectifs et la stratégie
privilégiéeListe des acteurs, leur contexte d’utilisation et
des exemples de fonctionsListe de cas d’utilisation proposés et mis en
ordre de priorité diagramme de cas d’utilisation
![Page 24: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/24.jpg)
Diagramme de cas d’utilisationPrépar
e le cours
Donne le
cours
Prépare les
examens
Professeur
Étudiant
Suivent le
cours
Dorment en cours
![Page 25: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/25.jpg)
Définition des objectifs de communication
Comment va-t-on répondre aux besoins définis?
Choisir parmi les besoins, les fonctions possibles et préciser la stratégie Trop ≠ mieux La meilleure approche ≠ la plus directe Les fonctions et objectifs primaires et secondaires
Spécifier le message à passer et les fonctions visées
Définir les étapes de livraison
![Page 26: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/26.jpg)
Définition des objectifs de communication
Choisir une métaphore si besoin et la justifier
Choisir les outils techniques à utiliser (environnement matériel et logiciel)
Choisir les techniques de médiatisation (composantes des médias)
Définir la stratégie générale de l'interface
Définir les critères de performance et d’utilisabilité visés.
![Page 27: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/27.jpg)
Problèmes pouvant survenir
Ces objectifs peuvent évoluer en cours de projetÉvolution technologiqueAnalyse des besoins affinée après présentation
des premiers objectifs aux utilisateurs finaux
Étapes de livraisons trop serrées
Mauvaise communication entre les différentes équipes du projets et avec les utilisateurs finaux
![Page 28: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/28.jpg)
Un peu de design
![Page 29: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/29.jpg)
Le design selon Weinscheink Pour ce cours, on va suivre les indications de
notre ami Weinscheink (Chap. 3 du livre présent dans les références)
Weinscheink s’intéresse aux GUI (Graphical User Interface)
On est toujours dans le processus de la scénarisation interactive!
![Page 30: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/30.jpg)
Le design selon Weinscheink S’assurer que les tâches se feront comme les
usagers veulent les faire (théorie de l’activité)
Faire l’analyse des besoins et définir les objectifs de communication
Construire des scénarios d’utilisation
Décrire les objets, leurs attributs, les actions sur ces objets
![Page 31: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/31.jpg)
Le design selon Weinscheink Ne pas faire l’interface, mais la structure
d’abord (voir le cours prochain sur les structures)
Faire une maquette assez détaillée pour permettre un parcours, une validation par des scénarios correspondant aux cas types
Ca reprend bien le schéma vu au début du cours que revoila!
![Page 32: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/32.jpg)
Maquette
Scénarisation interactiveAnalyse des besoins
Objectifs de communication
Cas d’utilisation, scénarios
Description du contenu
et exemples
Design de la structure
d’interaction
Design des principaux écrans et
des boutons
Validation par les usagers
Programmation
Validation par le client
![Page 33: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/33.jpg)
Création de maquetteModèle général du contenu et exemples les
objets, leurs propriétés , leurs fonctions et les actions pouvant être faites sur ces objets
Structures statiques et dynamiques
Maquette basse définition des pages principales (boutons, menus, texte, illustrations, etc.) sans oublier la description des effets des pages et des interactions entre elles
![Page 34: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/34.jpg)
Le contenuDéfinir les contenus d’information
Définir les variables dont on aura besoin pour classer l'information et pour construire les pages d’accès au contenu
Définir comment les informations vont interagir, si elle doivent interagir
![Page 35: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/35.jpg)
Le contenu – exempleCollectif de salles de spectacleCatégories:
Spectacle : titre, artiste, date, heure, prix du billet Salle de spectacle : nom, lieu, capacité de spectateur,
superficie de la scène, type de forfait de locationExemple!
Spectacle : The Flower Tour, Émilie Simon, 23 aout 2008, 20h, 35$ (régulier)
Salle de spectacle : Spectrum, Ste Catherine, 3000 spectateurs, 350 pieds carrés, [forfait 1 jour (2000$), forfait moins d’une semaine (1500$ par jour), forfait moins d’un mois (1200$ par jour)]
![Page 36: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/36.jpg)
Méthode des cartesPermet d’organiser le contenuOn choisit des individus parmi
le public cibleCes individus doivent classer
par famille des cartes préétablies
Ils créent ensuite les structures d’accès, les choix de menu, les groupements d’items
http://www.ergoweb.ca/cartes.html
![Page 37: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/37.jpg)
Description des actionsDéfinir les principales actions que l’on veut faire
sur les objetsLes actions de bases souvent utilisées :
Menus, barre d’outilsTrierRechercher et filtrer de l’informationImprimer, enregistrerCommenter
Décider des actions en fonction de la fréquence, des standards, du degré d’interaction désiré, de l’utilisation des clés de claviers, etc.
![Page 38: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/38.jpg)
Exemple de structureBienvenue au Théâtre du Rideau vert
Vos commentaires
sondage suggestions
Recevoir dépliant
Programmation Malade imaginaire
Le Roi etc.
Maladeimaginaire Description
Dates Acteurs Auteur
Organisation financé par historique
Achat de billets
Les Roix Maudits
Anglais
![Page 39: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/39.jpg)
Atelier
![Page 40: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/40.jpg)
Le respect de l’environnementLe gouvernement du Québec veut ajouter sur
son site Web une partie donnant des petits trucs pour mieux respecter l’environnement dans la vie quotidienne.
Vous êtes mandaté pour :Créer un personaFaire l’analyse des besoins (public cible, besoin
de communication existant, métaphores et style à employer, intégration dans l’organisation, etc.)
Définir les objectifs de communicationDéfinir les différents contenus d’information
![Page 41: Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit](https://reader035.fdocument.pub/reader035/viewer/2022062219/551d9da2497959293b8d1fb4/html5/thumbnails/41.jpg)
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]://lrcm.com.umontreal.ca/greg/COM2571/