La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Méthodologie de conception Approche centrée utilisateur et approche Persona Analyse des besoins Définition des objectifs, fonctions et cas d’utilisation.

Présentations similaires


Présentation au sujet: "Méthodologie de conception Approche centrée utilisateur et approche Persona Analyse des besoins Définition des objectifs, fonctions et cas d’utilisation."— Transcription de la présentation:

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

2 Premier travail 30% (équipe 2) : Évaluation ergonomique d'un site ou d'une application informatique Les étudiants doivent organiser l'évaluation d'un site ou d'une application informatique. Ils doivent prévoir la consigne, les tâches, les questionnaires (avant et/ou après) et filmer l'utilisation par 3 usagers. Rapport d'évaluation de l'expérience, qui présente des images d'écran, décrit l'expérience, avec des extraits de verbalisations, qui classe les problèmes principaux problèmes rencontrés par les usagers selon l’évaluation heuristique de Nielsen et les critères ergonomiques de Bastien Scapin. et offre des recommandations

3 Conception centrée utilisateur ergolab ergolab Conception centrée utilisateur ergolab ergolab 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é

4 Conception centrée utilisateur

5 Approche Persona • Ne pas définir un usager typique..décrire diffé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é)

6 Exemple de persona • 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.

7 Conception centrée utilisateur

8 Connaitre l’utilisateur!!! Koko et Penny Patterson : création d’un langage des signes adapté aux gorilles! Ordinateur pour Koko, le Koko’s Mac II qui lui permet d’activer des phrases vocales en touchant des icones sur un écran tactile :

9 Connaitre l’utilisateur!!! • Site pour les handicapés mentaux

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

11 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 comparaison Analyser ce qui existe, ce qui va bien et ce qui doit changer Commencer à 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

12 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

13 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

14 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.

15 Produits • Modèle général du contenu et exemples - objets propriétés –Tableau : No –Titre : XXXXX –Année : 1972 –Type : portrait / figuratif / abstrait –Thème : Homme/foule/nature morte/ –Technique : acrylique • Structure statique du site (organisation des pages) • Structure dynamique dans le cas d’un site interactif (branchements conditionnels) • Maquette basse définition des principales pages (boutons,menus, texte, illustrations), description des effets et de l’interaction.

16 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 Contenu, Structure, Écrans Nous verrons

17 • 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 PowerPoint –tableau - Excel ou Word –base de données - File Maker, Access –Graphes - pour les structures plus complexes (accès multiples, interactifs) - Visio, persuasion, Illustrator. • Éventuellement déléguer l'élaboration du contenu, formulaire

18 • 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

19 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 EZ Sort :

20 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)

21 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

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

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

24 Structure des contenus de navigation • Choix et évaluation des possibilités • écran unique • hiérarchie • contextuel, réalité virtuelle • linéaire • réseau (index multiples) • animation • intelligent (basé sur règles) Qu’est-ce que c’est ? Survol ? Recherche ? Apprendre ? Résumé ? Niveau et densité d’information approprié

25 Organisation des pages et navigation Commentaires sur les aspects d'organisation du contenu, de flexibilité, de support à la navigation, etc... On peut définir une structure générale de choix auquel on a accès partout - bannière ou frame. Ne pas trop limiter l'espace réservé à l'information. Planifier Réversibilité - l'accès et le recul dans l'information. Flexibilité - plusieurs accès aux informations Visibilité et orientation - Indices du contexte Bien répartir l'information - rapidité, pas trop complexe Autres critères ergonomiques…fermeture, erreurs,... Description et justification de la structure

26 • Design visuel des pages en général –Définir une grille - zones de textes et de dessins Définir modèle (template) –Design des outils de navigation • Critique en fonction des critères ergonomiques du design d'écrans • Tenir compte des possibilités techniques • Intégration dans la maquette d'exemples de contenus (croquis numérisés, photos non traitées) • Développement d'un exemple des principaux types de pages selon la structure • Montage de la maquette papier et du document de présentation

27 Théâtre du Rideau Vert Saison • Le théâtre n’existe pas sans vous • Venez y jouer votre rôle • Information Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Passion Rêve Tendresse Amour English Entrée Titres apparaissent puis l’animation s’arrête Information clignote une fois Continu Théâtre brille Sortie Audio=Bruits d’applaudissements 3 sec Animation Barre Mois clic = Accès à Horaire/ancre du mois survol= effet 3D Enveloppe clic = Lance courriel Interaction

28 Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Théâtre du Rideau Vert Horaire English Entrée Mois sélectionné est illuminé Ancre du mois choisi Audio: trois coups d’ouverture Animation Interaction Le Malade Imaginaire Survol = Audio et textes apparaissent Clic = Ouvre Description Mois Clic change de mois 6 janvier au 13 mars Le malade imaginaire - Molière « Drelin, drelin, drelin: ah, mon Dieu! Ils me laisseront ici mourir. » 14 mars au 19 mai La maison de poupée - Ibsen « NORA - Je crois que je suis avant tout un être humain, au même titre que toi ou que je dois en tout cas essayer de le devenir » 20 mai au 24 juin Ubu RoiIonesco

29 Le malade Imaginaire, Molière Remy Girard Guylaine Tremblay Une fois de plus un grand auteur.. Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur Mettre les vrais textes, un aperçu des vraies images, de façon à tester les grandeurs, la lisibilité, etc..Ne pas oublier les éléments généraux, comme ici le titre Rideau Vert, le bouton pour la version anglaise, etc.. Théâtre du Rideau Vert English 6 janvier au 13 mars

30 Atelier Analyse des besoin pour les eportfolios Contexte • Développement d’un site Eportefolios où les étudiants présentent leurs réalisations Matériel fourni • Exemple du site de design industriel • Liste des cas d’utilisation ou fonctions possibles du système CasEportfolios.pptCasEportfolios.ppt • Lien URL pour Omnigraffle on va y revenir Lien URL pour Omnigraffle À faire • Analyser l’exemple • Analyser les cas d’utilisation par rapport au site de design industriel en ajouteriez vous ? • Analyser comment s’appliquent les cas d’utilisation pour les eportfolios en communication • Analyser ce qui devrait changer dans le site de design industriel –Structure.. Hiérarchie ? Nom des sections, des menus. –Contenu des écrans qu’est-ce qui manque ? • Discuter de la métaphore, des illustrations, du logo.. À réaliser • Description détaillée des cas d’utilisation et modifications à faire


Télécharger ppt "Méthodologie de conception Approche centrée utilisateur et approche Persona Analyse des besoins Définition des objectifs, fonctions et cas d’utilisation."

Présentations similaires


Annonces Google