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

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 dutilisation."— 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 dutilisation Organisation du contenu - Méthodes des cartes Conception dune maquette basse définition Dabord Site de la bibliothèque Présentation du premier travail

2 Conception centrée utilisateur ergolab ergolab Conception centrée utilisateur ergolab ergolab La conception est le produit dun 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 dobjectifs précis dutilisabilité

3 Conception centrée utilisateur

4 Approche Persona Ne pas définir un usager typique..décrire différents types dusagers 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 linterface, va-t-elle apprécier le module dachat en ligne, etc.? » Imaginer plusieurs usagers typiques et confronter le produit à des archétypes précis… –Presbyte…rébarbatif à la technologie… pressé..Jeunes, vieux Sassurer quon 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 à lUniversité 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 luniversité, envoyer des courriels et discuter sur MSN. Il utilise souvent le site web de la bibliothèque de lUdeM mais na 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 dailleurs ses meilleures photos. Conférence dEric Brangier au HEC sur les Personas

6 Conception centrée utilisateur

7 Connaitre lutilisateur!!! Site pour les handicapés mentaux

8 É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 dutilisation, scénarios Pour chaque partie Le contenu Les méthodes Les produits

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

10 Analyse des besoins - Méthodologies Étude ethnographique –observation des activités, des tâches, de lutilisation 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 lapplication à développer –Intentions, cas dutilisation, 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 dutilisation 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 dutilisation et des exemples de fonctions. Liste de cas dutilisation proposés et mis en ordre de priorité. Exemple de cas dutilisation 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 dun tableau selon différentes tailles –Ajouter un nouveau tableau avec son descriptif

12 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 dutilisabilité 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ème les ordonner et les choisir Structure des objets.. de quoi on parle, qu est-ce qu on veut savoir ou montrer et avec quels détails caté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 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. Analyse dynamique

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ème les ordonner et les choisir Structure des objets.. de quoi on parle, qu est-ce qu on veut savoir ou montrer et avec quels détails caté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 dutilisation Suite aux entrevues.. En examinant lexistant.. Représentez tout ce que le système fait ou tout ce quon veut faire avec. Quels sont les buts les usages Cas = Acteur + activité ou utilisation sur une composante de loutil ou sur un autre acteur Forum 1. Etudiant Écrire des messages sur ce que je lis 2. et les associer au document 3. Tous Sélectionner les messages que je veux pouvoir relire, 4. et les mettre à part. 5. Tous Trier les messages en ordre de priorité 6. Prof être averti de ceux qui ne sont pas branchés depuis X jours

17 Cas d utilisation

18

19 Représentation graphique des Cas dutilisation Définir les différents buts que le système permettra de réaliser et les systèmes ou acteurs impliqués.

20 Exercice - Cas dutilisation Dessinez les cas dutilisation Pour donner linformation sur mon Laboratoire.. pour informer les étudiants sur les bourses Autre ? Décrivez les cas dutilisation des différents acteurs. Noubliez pas de représenter les activités hors du site.

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

22 Cas dutilisation de Studium Suggérer URL Studium Lire syllabus Suggérer document Prof Étudiant Modifier syllabus Vérifier Ajouts

23 Cas dutilisation de Studium Suggérer URL Studium Lire syllabus Suggérer document Prof Étudiant Modifier syllabus Vérifier Ajouts Courriel

24 É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 dutilisation, scénarios

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ème les ordonner et les choisir Structure des objets.. de quoi on parle, qu est-ce qu on veut savoir ou montrer et avec quels détails caté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 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 Structure statique des objets Théâtre du Rideau Vert

27 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 Structure statique des objets Département de Communication

28 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 Structure statique des objets Jeux sur ordinateur

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ème les ordonner et les choisir Structure des objets.. de quoi on parle, qu est-ce qu on veut savoir ou montrer et avec quels détails caté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 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 à lusager de les classer, de créer la structure daccès, les choix de menus. Libellés potentiels Regroupements possibles Ambiguïté Multiples chemins Méthode EZ Sort :

31 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

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

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

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

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) Quest-ce que cest ? Survol ? Recherche ? Apprendre ? Résumé ?

36 Exemples de la structure et des caractéristiques du contenu décrit de façon structurée (sections, Catégories) Définir les contenus dinformation (les feuilles) Définir les variables dont on aura besoin pour classer l'information et pour construire les pages daccè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 Décrire les actions, les outils de navigation Définir les principales actions que lon veut faire sur les objets –Par exemple pour une commande ? Pour un jeu ? Menus, Barre doutils, commandes, recherche Trier Rechercher ou Filtrer linformation –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é dinteraction désiré, de lutilisation des clés de claviers..(reconnaître le RETURN)

38 Planifier limplantation 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 linformation. Personnel requis pour faire la recherche, la validation et la mise à jour de linformation Personnel requis pour faire le suivi, pour répondre aux consommateurs Voir Wenschenk

39 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. Mais dans le temps … et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique

40 Flux de données

41 Interaction du conseiller avec lapplication dEXAO DFD - Flux de données

42 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. Mais dans le temps … et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique

43 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

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

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

46 Définir laide

47 Règles

48 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. Analyse dynamique Mais dans le temps … et quand ça devient plus animé. complexe et interactif ? 2/2

49

50 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. Analyse dynamique Mais dans le temps … et quand ça devient plus animé. complexe et interactif ? 2/2

51 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

52 Mais dans le temps … et quand ça devient plus animé. complexe et interactif ? 2/2 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. Analyse dynamique

53 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

54 Théâtre du Rideau Vert Saison Le théâtre nexiste 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 lanimation sarrête Information clignote une fois Continu Théâtre brille Sortie Audio=Bruits dapplaudissements 3 sec Animation Barre Mois clic = Accès à Horaire/ancre du mois survol= effet 3D Enveloppe clic = Lance courriel Interaction

55 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 douverture 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

56 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

57 Atelier Analyse des besoins sur un site Site sur la recherche à lUniversité de Montréal.... À réaliser Analyse des besoins Cas dutilisations Représentation de la structure actuelle. Représentation de la structure proposée. Site de la Société des Arts Technologiques Fondation Daniel Langlois


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 dutilisation."

Présentations similaires


Annonces Google