Méthodologie de conception

1. D’abord Site de la bibliothèque Présentation du premier travail Méthodologie de conception Approche centrée utilisateur et approche Persona Analyse des besoinsDéfinition des objectifs, fonctions et cas d’utilisationOrganisation du contenu - Méthodes des cartes Conception d’une maquette basse définition

2. Conception centrée utilisateurergolab La conception est le produit d’un processus de consultation… • Une préoccupation en amont des utilisateurs, de leurs tâches et de leur environnement • La participation active de ces utilisateurs • Une répartition appropriée des fonctions entre les utilisateurs et la technologie • L'itération des solutions de conception : on peut s'imaginer le cycle comme une spirale, une démarche qui boucle et reboucle jusqu'à ce que le système satisfasse aux exigences définies au départ. • L'intervention d'une équipe de conception multi-disciplinaire • Spécification et poursuite d’objectifs précis d’utilisabilité

3. Conception centrée utilisateur

4. Approche Persona • Ne pas définir un usager typique..décriredifférents types d’usagers • Personnaliser les interactions, que chaque personne se sente unique Alan Cooper • « Choisir une femme précise, lui donner une biographie, un âge, une occupation, un foyer, une famille, des attentes face au produit, etc. Ce qui permet de concevoir son application en faisant constamment référence à cette personne et à ses attentes. Par exemple, est-ce que Judith aimerait tel aspect de l’interface, va-t-elle apprécier le module d’achat en ligne, etc.? » • Imaginer plusieurs usagers typiques et confronter le produit à des archétypes précis… • Presbyte…rébarbatif à la technologie… pressé..Jeunes, vieux S’assurer qu’on choisit bien les différents usagers typiques. • Prévoir des chemins spécifiques (flexibilité)

5. Exemple des personas • Michel 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 discuter sur MSN. • Il 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 tient régulièrement un jour un blog où il parle de sa passion pour la photographie. Il y met d’ailleurs ses meilleures photos. • Conférence d’Eric Brangier au HEC sur les Personas

6. Conception centrée utilisateur

7. Connaitre l’utilisateur!!! http://www.ville.montreal.qc.ca/accessimple • Site pour les handicapés mentaux

8. Étapes de la scénarisation interactive • Pour chaque partie • Le contenu • Les méthodes • Les produits Analyse des besoins Objectifs de communication Cas d’utilisation, scénarios Maquette Description du contenu et exemples Design de la structure d ’interaction Design des principaux écrans et des boutons Validation par le client Validation par les usagers Programmation

9. Analyse des besoins • Inventaire des attentes par rapport au système (fournisseurs et utilisateurs du système d ’information) • Expériences antérieures, point de comparaisonAnalyser ce qui existe, ce qui va bien et ce qui doit changerCommencer à répertorier les éléments du système (images, contenus, attributs, connaître les gens, les besoins, le vocabulaire) • Caractéristiques des usagers potentiels • Inventaire 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

10. Analyse des besoins - Méthodologies • Étude ethnographique • observation des activités, des tâches, de l’utilisation des systèmes existants. • Identification des processus de communication, des goulots d’étranglement, observation et recueil « in situ » des besoins. • Entrevues auprès des principaux acteurs concernés par le changement • Entrevues auprès des usagers et clients • 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 • Estimé préliminaire des coûts et de l’échéancier Consensus

11. Analyse des besoins - Produits • Texte décrivant les besoins et contraintes • Texte décrivant le contexte prévu d’utilisation • Texte décrivant la compétition et expérience antérieure • Texte spécifiant les objectifs et la stratégie privilégiée • Liste des acteurs, le contexte d’utilisation et des exemples de fonctions. • Liste de cas d’utilisation proposés et mis en ordre de priorité.Exemple de cas d’utilisation pour une Galerie virtuelle de tableaux • Naviguer de façon historique dans les tableaux • Trier les tableaux selon la grandeur, la date, la couleur • Rechercher un tableau sur un thème • Rechercher les tableaux à vendre • Acheter la reproduction d’un tableau selon différentes tailles • Ajouter un nouveau tableau avec son descriptif

12. Quoi dire ? Quoi montrer ? Objectifs de communication • Spécifier les objectifs de communication • 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, les fonctions visées. • Choix d'une métaphore et justification • Choix techniques (environnement matériel et logiciel) • Choix médiatiques (composantes des médias) • Stratégies générales de l'interface • Critères de performance et d’utilisabilité visés.

13. Mais dans le temps …comment s’organisent les différentes représentations ? 1/2 Cas d’utilisation - théorie de l’activité décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et systèmeles ordonner et les choisir Structure des objets.. de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscatégories et exemples des composantes Structure du site et hiérarchies des pages Comment on l’organise pour faciliter la communication Stratégie de navigation et structure des pages Analyse statique

14. Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système Flux et décisions Décrire la navigation avec des conditionnels Flux et séquence Montrer plus en détail ce qui se passe « derrière » une interaction (les processus en activités.. Enregistrement, vérification, calcul) Et finalement Représentation des interfaces Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.

15. Mais dans le temps …comment s’organisent les différentes représentations ? 1/2 Cas d’utilisation - théorie de l’activité décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et systèmeles ordonner et les choisir Structure des objets.. de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscatégories et exemples des composantes Structure du site et hiérarchies des pages Comment on l’organise pour faciliter la communication Stratégie de navigation et structure des pages Analyse statique

16. Les Cas d’utilisation • Suite aux entrevues.. En examinant l’existant.. • Représentez tout ce que le système fait ou tout ce qu’on veut faire avec. Quels sont les buts les usages Cas = Acteur + activitéou utilisation sur une composante de l’outil ou sur un autre acteur Forum • Etudiant Écrire des messages sur ce que je lis • et les associer au document • Tous Sélectionner les messages que je veux pouvoir relire, • et les mettre à part. • Tous Trier les messages en ordre de priorité • Prof être averti de ceux qui ne sont pas branchés depuis X jours

17. Cas d’utilisation

18. Cas d’utilisation

19. Représentation graphique des Cas d’utilisation Définir les différents buts que le système permettra de réaliseret les systèmes ou acteurs impliqués.

20. Exercice - Cas d’utilisation Dessinez les cas d’utilisation Pour donner l’information sur mon Laboratoire.. pour informer les étudiants sur les bourses Autre ? Décrivez les cas d’utilisation des différents acteurs. N’oubliez pas de représenter les activités hors du site.

21. Utilisez les éléments suivants • Copiez, collez les et changez les textes. • Ce qui est important c’est de représenter les communications et le traitement d’information visées Système Utilisation Acteur

22. Cas d’utilisation de Studium Studium Lire syllabus Modifier syllabus Étudiant Suggérer URL Vérifier Ajouts Suggérer document Prof

23. Cas d’utilisation de Studium Courriel Studium Lire syllabus Modifier syllabus Étudiant Suggérer URL Vérifier Ajouts Suggérer document Prof

24. Étapes de la scénarisation interactive Analyse des besoins Objectifs de communication Cas d’utilisation, scénarios Maquette Description du contenu et exemples Design de la structure d ’interaction Design des principaux écrans et des boutons Validation par le client Validation par les usagers Programmation

25. Mais dans le temps …comment s’organisent les différentes représentations ? 1/2 Cas d’utilisation - théorie de l’activité décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et systèmeles ordonner et les choisir Structure des objets.. de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscatégories et exemples des composantes Structure du site et hiérarchies des pages Comment on l’organise pour faciliter la communication Stratégie de navigation et structure des pages Analyse statique

26. Contenu Structure statique des objetsThéâtre du Rideau Vert • Catégories • Événement • Date, Titre, Auteur, Metteur en scène, Acteurs, Historique de la pièce, historique du réalisateur • Images ou vidéos • Sujet, Document, format, taille, Description • Exemple • 6 jan-3mars, Le Malade Imaginaire, Molière, De Andrea, [Remy Girard, Guylaine.....] • Images • Remy Girard, Girard.gif, gif, 20k, penche chaise • Guylaine, à trouver, photo • Vidéo • Malade Imaginaire, Imagi.moo, Quicktime, 100k, Enreg scène 2

27. Contenu Structure statique des objetsDépartement de Communication • Catégories • Professeur • Nom, bureau, téléphone, courriel, Description, publications, site web • Horaire • Trimestre, Jour, heure, Sigle de cours, Nom de cours, Professeur, local • Programme • Nom, numéro • Cours • Sigle, description, crédits • Bloc • Statut - obligatoire vs optionnel • Minimum, maximum • Liste de cours

28. Contenu Structure statique des objetsJeux sur ordinateur • Catégories • Lieux • Entrée, Corridor, PremierNiveau, 2eNiveau, 3eNiveau • Magasin, Sortie • Biens • Armes • Épée, fusil, arbalète, • Pouvoirs • Invisible, poison, vue, • Niveaux d’énergie • Santé • Force • Intelligence • Popularité • Richesse • Or • Historique des points • Nombre de parties jouées • Points moyens • Personnages - Force, honnêteté, rapidité, intelligence, pouvoirs • Orques, Nains, chevaliersNoirs, Sorciers

29. Mais dans le temps …comment s’organisent les différentes représentations ? 1/2 Cas d’utilisation - théorie de l’activité décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et systèmeles ordonner et les choisir Structure des objets.. de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscatégories et exemples des composantes Structure du site et hiérarchies des pages Comment on l’organise pour faciliter la communication Stratégie de navigation et structure des pages Analyse statique

30. Contenu Maquette • Méthodes des cartes • pour organiser le contenu • “individus choisis pour leur représentativité • du public cible sont invités • à grouper par famille un ensemble de cartes • établi préalablement par l'expérimentateur.” • Ergoweb 2003 • Cartes = les feuilles • Demander à l’usager de les classer,de créer la structure d’accès, les choix de menus. • Libellés potentiels • Regroupements possibles • AmbiguïtéMultiples chemins Méthode http://www.ergoweb.ca/cartes.html EZ Sort : http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/410

31. Maquette Produits • Stratégie générale d'interaction • Design de la navigation • Croquis papier de quelques pages • Justification de la maquette par rapport aux besoins et aux objectifs • Justification en termes d'utilisabilité • principes directeurs • efficacité (valeur ajoutée) • Justification en termes motivationnels par rapport aux besoins Nous verrons Contenu, Structure, Écrans

32. Structure statique des pages Nous avons vu avec la technique des cartesqu’il n’était pas facile de choisir une bonne structure pour un site d’information Mais comment représenter cette structure ? AxureWireFrame… Hiérarchie Organigramme Structure des séquences.

33. Structure Organisation statique des pages Combien de liens de boutons dans la page Programmation ? Illustrator PageMaker Word

34. Structure statique des pages Pas tous les liens.. mais les contenus…les dossiers et les pages Structure Intro IntroFlash Aide Références Cinema CinamaFlash Glossaire Sections Apprentissage Scénarisation Production Systèmes Ergonomie Forum Sous-section Page et ancres Choix Automatique Changement dans le cadre seulement Page et ancres Sous-section N.B. Toutes les sections comme la Section Systèmes

35. Structure générale des contenus de navigation • Pour certaines structures de navigation il faut d’autres formes de représentation • écran unique • Hiérarchie • Linéaire • réseau (index multiples) • contextuel, réalité virtuelle • animation • intelligent (basé sur règles) Qu’est-ce que c’est ? Survol ? Recherche ? Apprendre ? Résumé ?

36. Contenu Maquette • Exemples de la structure et des caractéristiques du contenu décrit de façon structurée (sections, Catégories) • Définir les contenus d’information (les feuilles) • Définir les variables dont on aura besoin pour classer l'information et pour construire les pages d’accès au contenu • Créer la structure dans un environnement où il sera facile de rajouter des informations et de les trier • Mode plan • tableaux - Excel ou Word • base de données - File Maker, Access • Graphes - pour les structures plus complexes (accès multiples, interactifs) - Visio, Omnigraffle, Illustrator. • Éventuellement déléguer l'élaboration du contenu, formulaires • Contribute contenus dynamiques. • Logiciel Wireframe

37. Contenu Décrire les actions, les outils de navigation • Définir les principales actions que l’on veut faire sur les objets • Par exemple pour une commande ? Pour un jeu ? • Menus, Barre d’outils, commandes, recherche • Trier • Rechercher ou Filtrer l’information • Weinschenk Table Objet - Action fig 3.3 table des actions fig 3.9 • Imprimer, enregistrer, commenter, réserver un produit. • 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..(reconnaître le RETURN)

38. Contenu Planifier l’implantation et le soutien aux usagers • Information et formation aux différentes phases de développement • Impact et changements organisationnels associés.Changements dans le processus de traitement de l’information. • Personnel requis pour faire la recherche, la validation et la mise à jour de l’information Personnel requis pour faire le suivi, pour répondre aux consommateurs • Voir Wenschenk

39. Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système Flux et décisions Décrire la navigation avec des conditionnels Flux et séquence Montrer plus en détail ce qui se passe « derrière » une interaction (les processus en activités.. Enregistrement, vérification, calcul) Et finalement Représentation des interfaces Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.

40. Flux de données

41. DFD - Flux de données Interaction du conseiller avec l’application d’EXAO

42. Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système Flux et décisions Décrire la navigation avec des conditionnels ou règles Flux et séquence Montrer plus en détail ce qui se passe « derrière » une interaction (les processus en activités.. Enregistrement, vérification, calcul) Et finalement Représentation des interfaces Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.

43. Structure Information sur les bourses Structure dynamique des interactifs Une bourse pour vous ? Calendrier des demandes non non Étranger ? 1er Cycle ? Boursier ? oui oui oui Liste des bourses Accessibles aux étrangers Règlement pour le renouvellement Liste des bourses De premier cycle Classées par département

44. Structure Règles ex: dans les jeux Structure dynamique des décisions Conditions Actions Si Temps_depuis_douche > 24 hres Popularité = Popularité - 10 Si Popularité > 50 Voisins visitent

45. Exemple - Système Conseiller utilisant des règles

46. Définir l’aide

47. Règles

48. Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système Flux et décisions Décrire la navigation avec des conditionnels Flux et séquence Montrer plus en détail ce qui se passe « derrière » une interaction (les processus en activités.. Enregistrement, vérification, calcul) Et finalement Représentation des interfaces Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.

50. Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système Flux et décisions Décrire la navigation avec des conditionnels Flux et séquence Montrer plus en détail ce qui se passe « derrière » une interaction (les processus en activités.. Enregistrement, vérification, calcul) Et finalement Représentation des interfaces Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions.