La scénarisation interactive

1. La scénarisation interactive 14 novembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2580/

2. La semaine dernière • Les types d’image • Gestion de la taille des images • Utilisation des images avec Dreamweaver

3. Et donc on fait quoi aujourd’hui? • Conception centrée utilisateur • Analyse des besoins • Maquette • Validation

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

5. Conception centrée utilisateur

6. Conception centrée utilisateur Encore 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! »

7. Conception centrée utilisateur

8. Connaitre l’utilisateur!!! Koko et Penny Patterson : création d’un langage des signes adapté aux gorilles! http://www.koko.org/index.php Ordinateur 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

9. 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 profession • Ses habitudes de travail • Etc.

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

11. Conception centrée utilisateur • Cycle 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é

12. Analyse des besoins

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

14. Analyse des besoins • Inventaire des attentes par rapport au site Web (fournisseurs et utilisateurs du site) • Analyser les expériences antérieures • Analyser ce qui existe, ce qui va bien et ce qui doit changer • Commencer à répertorier les objets, les actions, les attributs, le vocabulaire à utiliser • Caractéristiques des usagers potentiels, leurs compétences et attitudes • Les usagers doivent être impliqués dans l’analyse des besoins!

15. Analyse des besoins • 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

16. Analyse des besoins – méthodologie • É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 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

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

18. 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  étude de l’existant • 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é  diagramme de cas d’utilisation

19. Les cas d’utilisation • On fait cette étape suite aux entrevues et en examinant ce qui existe  analyse des besoins! • On représente tout ce que le système fait ou tout ce qu’on veut faire avec. Quels sont les buts et les usages? • Cas = Acteur + Activité ou utilisation sur une composante de l’outil ou sur un autre acteur

20. Les cas d’utilisation Exemple d’un forum entre professeurs et étudiants • Étudiant • Écrire des messages sur ce qu’il lit. • Associer les messages avec ce qui a été vu en cours. • Prof • Être averti de ceux qui ne sont pas branchés depuis X jours. • Tous • Sélectionner les messages que l’on veut pouvoir relire, et les mettre à part. • Trier les messages en ordre de priorité.

21. Diagramme de cas d’utilisation Surveiller la présence Associer messages Ecrire messages Archiver messages Trier messages Usager Étudiant Professeur

22. Définition des 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 à passer et les fonctions visées

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

24. Maquette

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

26. Les représentation structurales • Il est nécessaire de faire une représentation structurale des scénarios et des interactions d’une application avant tout codage! • Cela se fait avant la maquette physique. • On peut faire ça sur papier, ou avec des logiciel spécialisés (Microsoft Visio, Smartdraw, Axure, Omnigraffle, ConceptDraw) ou non (Word, Photoshop, etc.). • On pense déjà aux futurs boutons, menus et autres moyens d’interaction qui déclencheront les actions.

27. La partie statique • Cas d’utilisation • Décrire toutes les fonctionnalités du système, tous les échanges possibles entre les usagers et le système. • Les ordonner et les choisir. • Structure des objets • De quoi on parle, qu’est-ce qu’on veut savoir ou montrer, avec quels détails? • Catégories et exemples des composantes. • Structure du site et hiérarchies des pages • Comment on organise le site pour faciliter la communication. • Stratégie de navigation et structure des pages.

28. La partie dynamique • Flux et divers processus • Décrire la communication entre différentes personnes ou diverses fonctions sur un système. • Flux et décisions  Structure dynamique • 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, enregistrements, vérifications et calculs).

29. Et donc? Partie statique + partie dynamique = représentation des interfaces Avec les structures, on peut donc associer une représentation visuelle à l’application multimédia que l’on veut faire. On pense ainsi aux futurs boutons, menus et autres moyens d’interaction qui déclencheront les actions.

30. Le contenu • Dé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

31. Structure des objets Collectif de salles de spectacle • Caté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 location • Exemple! • 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)]

32. Description des actions • Définir les principales actions que l’on veut faire sur les objets • Les actions de bases souvent utilisées : • Menus, barre d’outils • Trier • Rechercher et filtrer de l’information • Imprimer, enregistrer • Commenter • 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.

33. Structure statique des pages • Diagramme permettant de donner une vision globale du site Web • On ne met pas tous les liens! • Mais on met les contenus, les dossiers et les pages!

34. Structure statique des pages Intro IntroFlash Aide Références Accueil Accueil Flash Glossaire Sections Section 1 Section 3 Section 4 Section 5 Section 2 Forum Sous-section Choix Automatique Changement dans le cadre seulement Sous-section

35. Structure statique des pages Plan de Cours Accueil Description Évaluation Références Liens Structure du site Web du cours Travail 1 Travail 2 Projet

36. Structure dynamique des pages Information sur les bourses Une bourse pour vous ? Calendrier des demandes non etc. 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

37. Théâtre du rideau vert Bienvenue au Théâtre du Rideau VertSaison 2008 Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Ouverture: Animation mots apparaissent Trois coups… Passion • Le théâtre n’existe pas sans vous • Venez y jouer votre rôle • Information 345-2278 Tendresse Rêve Interaction: Mois - Effet 3D au survol Amour Sortie : Seul le cadre droit en bas change English N’oubliez pas les titres, Respectez la grille et les cohérence interne

38. Théâtre du rideau vert Bienvenue au Théâtre du Rideau VertProgramme Janvier 2008 Ouverture : Choix du mois reste sélectionné 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 18 janvier au 19 avril La maison de poupée Ibsen 20 janvier au 15 février Ubu Roi Ionesco Interaction : 3 lignes de biographie des auteursapparaissent au survol 3 lignes de description apparaissent au survol du titre Étoiles liées aux évaluations des spectateurs English

39. Théâtre du rideau vert Bienvenue au Théâtre du Rideau VertLe Malade Imaginaire Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Interaction: Description défilable Acteurs sont cliquables Les étoiles permettent de coter. Le Malade imaginaire est la dernière comédie écrite par Molière. C'est une comédie-ballet en trois actes (comportant respectivement 8, 9 et 15 scènes), représentée au Théâtre du Palais-Royal le 10 février 1673 par la troupe de Molière ; elle puise son inspiration dans la commedia dell'arte. La musique est de Marc-Antoine Charpentier et les ballets de Pierre Beauchamp. Argan : Remy Girard Toinette: Guylaine Tremblay Votre évaluation ? 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 le titre Rideau Vert, le bouton pour la version anglaise, etc.. Vous pouvez justifier les aspects ergonomiques de la page..

40. Validation

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

42. Préjugés • Le développement et l’évaluation, c’est cher! • Je connais le domaine  je sais que j’ai fait un truc bien! • On a testé l’outil en interne • Je sais l’utiliser donc tout le monde peut l’utiliser • On a fait passer un questionnaire et toute le monde aime ça • Personne n’aime les critiques

43. But de l’évaluation • Toujours préciser les objectifs de l’évaluation en premier! • Évaluer un système  adapté aux activités et au contexte? • Quelle est la valeur ajoutée du système?

44. Comment mettre en place l’évaluation? • Rechercher les autres systèmes, les usagers, les théories, les expériences qui se rapportent au système à évaluer. • Comparer un système à un autre ou à une version antérieure  observer les différences • Utilisabilité  critères ergonomiques • Impact  notion d’utilité (apprentissage, vente, échange)  À quoi ça sert, qui, pourquoi?  Différents usagers, attentes

45. Problématique Une problématique permet donc de bien identifier : • Pourquoi on met en place une évaluation • Ce qu’on veut évaluer • Comment on va évaluer

46. Méthodes d’évaluation • Évaluation analytique ou heuristique • Tests utilisateurs aussi appelé « évaluation empirique avec des usagers »

47. Evaluation heuristique • Faite par des experts en utilisabilité. • Utilisabilité: • Efficacité : but atteint ou non • Efficience : but atteint en combien de temps? erreurs? • Satisfaction de l’ usager • Ces experts sont familiers avec les différents critères ergonomiques à respecter pour faire un site Web facile à utiliser par tout le monde (voir prochain cours).

48. Evaluation heuristique Classer les problèmes ergonomiques trouvés pour pouvoir mieux les régler Comment? • Description du problème ergonomique trouvé • Quel principe ergonomique est bafoué? • Classement du problème selon sa sévérité : • Fréquence • Impact • Persistance du problème

49. Evaluation heuristique Echelle de classement du problème selon sa sévérité : • 0 = Pas de problème • 1 = Problème cosmétique à corriger éventuellement • 2 = Problème mineur : basse priorité • 3 = Problème majeur : haute priorité • 4 = Catastrophe : impératif à régler avant de sortir le produit

50. Tests utilisateurs • Protocole expérimentale • Méthodologie d’analyse des observations • Méthodologie d’analyse des traces • Utilisation des questionnaires