Méthodologie de conception Conception centrée utilisateur (site ergoweb) 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

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

Conception centrée utilisateur

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

É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

Analyse des besoins Inventaire des attentes par rapport au système (fournisseurs et utilisateurs du système d ’information). Exigences organisationnelles, Weinschenk - tâches critiques. Expériences antérieures, point de comparaison, compétiteurs Analyser ce qui existe, ce qui va bien et ce qui doit changer Commencer à répertorier les objets, les actions, les attributs, le vocabulaire. Caractéristiques des usagers potentiels, compétences, attitudes, 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

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 Weinschenk Table Objet -Action fig 3.3 Estimé préliminaire des coûts et de l’échéancier (Gayeski)

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, leur contexte d’utilisation et des exemples de fonctions Liste de cas d’utilisation proposés et mis en ordre de priorité. Exemples 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

Répertorier tous les aspects, les acteurs de l’interaction Cas d’utilisation

Cas d’utilisation Quels sont les dimensions de communication du système ? Usager Nutritionniste

Objectifs de communication 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.

Design - Weinscheink Ch3 S’assurer que les tâches se feront comme les usagers veulent les faire (théorie de l’activité) Maquette assez détaillée pour permettre un « parcours - walk through », une validation par des scénarios correspondant aux cas types. Session de scénarisation - Equipe multidisciplinaire, 2h00, tableau blanc, scénarios (cas d’utilisation prêts) Ne pas faire l’interface..mais la structure d’abord. Décrire les objets, leurs attributs, les actions sur ces objets.(fig 3.3) Choisir la métaphore 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

DESIGN Produits - Maquette Cas d’utilisation Structure statique du site (organisation des pages) Structure dynamique (si interactif) dans le cas d’un site interactif (branchements conditionnels, règles) Vérification d’un formulaire, variables, calculs. Maquette basse définition des principales pages (boutons,menus, texte, illustrations), description des effets et de l’interaction.

Produits - Description DESIGN Produits - Description 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 Description générale des composantes : animations, vidéos. Nous verrons Contenu, Structure, Écrans

Contenu DESIGN Exemples de la structure et des caractéristiques du contenu décrit de façon structurée (sections, Catégories) Décider les contenus d’information (les feuilles) Définir les concepts, les catégories 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 sur papier puis dans un environnement, où il sera facile de rajouter des informations et de les trier Structure dans PowerPoint tableau - Excel ou Word base de données - File Maker, Access Graphes - pour les structures plus complexes (accès multiples, interactifs) - Visio, OmniGraffle. Éventuellement déléguer l'élaboration du contenu, formulaire

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

Contenu DESIGN Définir les objets, les informations à diffuser, les feuilles et leurs contenus 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

Décrire les actions, les outils de navigation 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)

Planifier l’implantation et le soutien aux usagers 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

Structure statique Illustrator Omnigraffle Visio Organisation statique des pages Combien de liens de boutons dans la page Programmation ? Illustrator Omnigraffle Visio

Structure Structure statique des pages IntroFlash Intro Aide Références CinamaFlash Cinema Sections Glossaire Apprentissage Ergonomie Scénarisation Production Systèmes Forum Sous-section Page et ancres Choix Automatique Page Cadre Page et ancres Sous-section N.B. Toutes les sections comme la Section Systèmes

Scénarisation - Structure en Flash Définir ce qui est fait en Flash..et ce qui est fait dans le pages Internet. Vous pouvez faire une application qui n’est faite qu’en Flash, comme un jeu, une borne dans un musée, sur un Iphone ou Ipad mais il faut la charger sur Internet. Pour votre scénario il faut présenter la structure des séquences Pour chaque séquence la succession d’animation Les principaux calques et ce qu’il y aura dedans. Voici un exemple simple.. Puis un plus complexe:

Exemple: Auberge avec activités d’hiver Principales séquences Important : intégrez des animations dans la présentation et la navigation- Exemples: Cinema et images animées

Exemple: Auberge avec activités d’hiver Séquence d’activités ..suite d’animations et calques

Exemple: Auberge avec activités d’hiver Séquence Formulaire Suite des sections Quels seraient les calques, boutons de navigation ?

Modèle intégrant Flash et html Exemple semblable au Site de fondation Daniel Langlois

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é

Structure statique

Structure dynamique Structure dynamique des interactifs Autres exemples de jeux utilisant des variables et des règles

Description d’une interaction en Flash - graphe de séquence

Structure Description et justification de la structure 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, ...

Design d'écrans 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 Voir notes sur les principes de design d’écrans.

Théâtre du Rideau Vert Saison 97-98 Animation 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 Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Passion Le théâtre n’existe pas sans vous Venez y jouer votre rôle Information 345-2278 Tendresse Rêve Interaction Barre Mois clic = Accès à Horaire/ancre du mois survol= effet 3D Enveloppe clic = Lance courriel Info@rideauVert.qc.ca Amour English

Horaire Théâtre du Rideau Vert English Animation Jan Fév Mar Avr Mai Entrée Mois sélectionné est illuminé Ancre du mois choisi Audio: trois coups d’ouverture Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc 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 Roi Ionesco Interaction Le Malade Imaginaire Survol = Audio et textes apparaissent Clic = Ouvre Description Mois Clic change de mois Théâtre du Rideau Vert Exemple de justification Le programme est présenté selon une métaphore habituelle (verticale), flexibilité - les titres et les images permettent de naviguer consistance- le titre et les mois sont au même endroit perception - le rouge des titres attire l’attention, au centre facile à cliquer. Support à navigation - titres choisis sont marqués en vert si visités ... English

Horaire Théâtre du Rideau Vert English Animation Jan Fév Mar Avr Mai Entrée Mois sélectionné est illuminé Ancre du mois choisi Audio: trois coups d’ouverture Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc 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 Roi Ionesco Interaction Le Malade Imaginaire Survol = Audio et textes apparaissent Clic = Ouvre Description Mois Clic change de mois Théâtre du Rideau Vert Exemple de justification Le programme est présenté selon une métaphore habituelle (verticale), flexibilité - les titres et les images permettent de naviguer consistance- le titre et les mois sont au même endroit perception - le rouge des titres attire l’attention, au centre facile à cliquer. Support à navigation - titres choisis sont marqués en vert si visités ... English

Le malade Imaginaire, Molière 6 janvier au 13 mars 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...... Théâtre du Rideau Vert Remy Girard Guylaine Tremblay English 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..

Atelier - Deuxième travail Choix du sujet Remue méninges Analyse des besoins Cas d’utilisation Objectifs Structure possible Composantes médias Conseils Un projet réaliste..une maquette qui présente ce que serait le site.. Testez les interactions que vous voulez intégrer Réduisez la taille et décomposez en sous parties Organisez bien vos fichiers et faites des copies de sauvegarde.