Interfaces et Scénarisation (COM2571)

1. Interfaces et Scénarisation(COM2571) Introduction 3 septembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2571/

2. Voila… • Cours donné les années précédentes par Aude Dufresne • Cette année, je m’en occupe pour la 3ème fois. • Ancien étudiant au doctorat à Polytechnique Montréal • Accessibilité des nouvelles technologies • Consultant en expérience utilisateur

3. Infos en vrac • http://lrcm.com.umontreal.ca/greg/COM2571/ • Courriel : gregory.petit@polymtl.ca • Cours les lundi de 13h à 16h en B-340 (Marie-Victorin) • 3 crédits • 2 travaux à rendre + 1 exam

4. Avant de commencer… • Interface??? • Scénarisation???  Qu’est ce que vous attendez de ce cours?

5. Et donc on fait quoi aujourd’hui? • Pourquoi ce cours??? • Premier exemple concret! • Que va-t-on voir dans ce cours? • IHM et Ergonomie • Théorie : Modèle du traitement humain de l’information • Atelier

6. Pourquoi ce cours???

7. Pourquoi ce cours??? • Si on met de coté la technique, il n’est pas si facile de concevoir une bonne application ou un bon site Web. • Accessibilité  le système doit s’adapter à l’utilisateur et pas le contraire! • Pour les applications et les sites Web complexes, il vaut mieux scénariser avant toute production. • On ne mesure jamais assez le travail préliminaire à faire avant de créer une application multimédia. IHM : Interaction Homme-Machine

8. Exemple

9. Exemple : Election présidentielle 2000 aux USA (Floride) • Écart entre les candidats de 537 (- de 1%) en Floride, sur plusieurs centaines de milliers  on recompte! • 19 000 bulletins de votes ont été rejetés car plus d’un candidat avaient été sélectionnés. • Plus d’infos ici : http://fr.wikipedia.org/wiki/%C3%89lection_pr%C3%A9sidentielle_am%C3%A9ricaine_de_2000#L.27imbroglio_de_Floride

10. Exemple : Election présidentielle 2000 aux USA (Floride) Origine de ce bordel Erreurs possibles : • Quel trou pour quel candidat? • Trous trop proches les uns des autres • Lors de la lecture, la main peut cacher des noms

11. Exemple : Election présidentielle 2000 aux USA (Floride) Commentaires des certains électeurs : • "When I went to push the one for president, I pushed one and it seemed to be just below the office of vice president. It seemed like I had to push one for vice president, too. Then I saw I had accidentally voted twice.“ • "It was so hard to tell who and what you were voting for. I couldn't figure it out, and I have a doctorate."

12. Exemple : Election présidentielle 2000 aux USA (Floride) Réaction du directeur des élections de Floride : "I don't think they are confused. I think they left the polling place and became confused. The ballot is very straightforward. You follow the arrow, you punch the location. Then you have voted for who you intend to elect." Roberts, assigné par le GouverneurJeb Bush (frère de W)

13. Exemple : Election présidentielle 2000 aux USA (Floride) • D’où l’importance d’une bonne IHM! • L’impact d’une mauvaise interface n’est pas toujours si grave … • Mais cela peut faire perdre beaucoup de temps à beaucoup de personnes (surtout aux utilisateurs!) • L’IHM est présente dans le commerce en ligne, les jeux, la formation en ligne et dans tous logiciels interactifs. • L’IHM est un vaste domaine d’application et de recherche.

14. Y’aura quoi dans ce cours?

15. Y’aura quoi dans ce cours? Apprentissage des principes de : • Évaluation d’applications et de sites Web. • Scénarisation interactive, • Processus de conception, Tout en utilisant des théories sur : • L’ergonomie, • La communication (parait qu’on est dans un département de communication …), • La conception.

16. Y’aura quoi dans ce cours? Des méthodologies de : • Évaluation heuristique d’interfaces, • Tests d’utilisabilité des maquettes et de systèmes informatisés. • Prototypage, • Gestion de projet, • Conception et production de maquettes, Du boulot : • Premier travail sur l’évaluation, • Second travail sur la conception, • Un exam!

17. IHM et Ergonomie

18. IHM : c’est quoi alors? IHM = Interaction Humain - Machine

19. Il faut donc des interfaces!!! • Interface (d’après toutsavoir.net) : • Ensemble des programmes gérant l'utilisateur et les rapports qu'il peut entretenir avec sa machine et les logiciels qu'elle abrite. • Si cette interface est jolie tout plein avec des tas de beaux dessins géométriques, c'est une interface graphique. • Mise en œuvre physique de règles de communication entre deux systèmes.

20. Il faut donc des interfaces!!! • Interface : Partie « visible » par l'utilisateur d'un logiciel Partie du logiciel gérant la communication entre la machine et l'utilisateur Naissance de l’ergonomie! Naissance de l’ergonomie cognitive!!!

21. Ergonomie • ergos «ergos» (travail) + nomos «nomos» (loi) • Grandjean (1969) : « l’adaptation du travail à l’homme » • Laville (1976) : «  l'ensemble des connaissances surle fonctionnement de l'homme en activité, afin de les appliquer à la conception des tâches, des outils, des machines et des systèmes de production » • Donc cela permet de faciliter l’utilisation d’un outil en se fondant sur la biologie, psychologie et la physique.

22. Ergonomie Cognitive • L’adaptation à la cognition humaine … • la perception, • l’activité symbolique, • la mémorisation, • la prise de décisions, • la résolution, • la motivation, • et sans doute plein d’autres trucs! (on verra ça le 07 mars)

23. Ergonomie Cognitive Plus concrètement l’ergonomie cognitive se rapporte : • à ce qui se passe dans votre petite tête, • au design des IHM  design d’un truc artificiel, complexe mais fonctionnel, • au moyen et au message pour que l’homme et la machine communique, • à créer des systèmes qui aident et complètent l’intelligence humaine, • à confronter les systèmes à l’usager et aux usages réels.

24. Norman (1986) • L’humain et l’ordinateur ont chacun leurs forces et leurs faiblesses. • Il faut donc concevoir un système qui maximise l’interaction entre les deux. • Communication = Cycle d’interaction avec un système émettre et recevoir de l’information de façon efficace selon 4 phases.

25. Norman  Cycle d’interaction Usager Gouffre Système

26. Norman  Le Gouffre • Gouffre de l’exécution • Établissement d’un but, • Formation d’une intension, • Spécification d’une suite d’actions, • Exécution des actions. • Gouffre de l’évaluation • Perception du système, • Interprétation du système, • Evaluation du système par rapport au résultat attendu. • La largeur des gouffres est reliée!

27. Ergonomie = Compromis • Les menus aident à la formation des intentions, mais nuisent à l'exécution (ex : Office 2003). • Plus de rétroaction aident l'évaluation, mais distrait la formation d'intentions. • La présence visuelle d’information peut favoriser la perception et l’attraction,mais elle alourdit en ajoutant de la complexité. • Office (Office 2007), • Kijiji, • Radio-Canada. • On adapte le système aux usages,mais les usages changent.

28. Théorie :Modèle du traitement humain de l’information

29. Modèle du traitement humain de l’information • Il faut prendre en compte les contraintes du traitement des informations par les humains! • Le temps T et la difficulté du traitement de l’information est formé de 3 composantes : • Le système sensoriel, • Le système cognitif, • Le système moteur. T = Ts + Tc + Tm

30. Modèle du traitement humain de l’information Système sensoriel : • Favoriser la discrimination sensorielle, • Attention aux contrastes - couleur, sons, détail, • Vitesse proportionnelle à l’activité, • Réduire les variations de vitesse, • Ralentir pour diminuer les erreurs, • Permettre d’ajuster, d’interrompre.

31. Modèle du traitement humain de l’information Système cognitif : • Mémoire à court terme ou mémoire de travail • Attention sélective, • Difficulté à se rappeler des choix de menus  raccourcir, • Oublie du parcours fait  d’où on vient? qu’est-ce qu’on cherche ? • Mémoire à long terme • Organisation en mémoire des concepts, des faits, • Partir de ce que l’usager connaît, • Fournir une structure, un résumé, répéter.

32. Modèle du traitement humain de l’information Système cognitif : • Le processeur : temps de reconnaissance et d’exécution • Donner le contrôle à l’usager, • Simplifier et morceler les étapes, • Supporter la résolution de problème..essais / erreur, • Prévoir les processus, la difficulté, la reconnaissance. • La motivation • L’apprentissage • Les attitudes

33. Modèle du traitement humain de l’information Système moteur : • Ergonomie physique des dispositifs, • Loi de Fitts , • T= I log2 2D/L • D = distance à parcourir • L = largeur de cible • I = constante (1 sec) • Si le bouton est loin sa taille doit augmenter.

34. Modèle du traitement humain de l’information Système moteur : • Placer les zones actives utilisées fréquemment ensemble, • Attention aux boutons « Annuler » ou « Effacer », • Penser aux erreurs possibles de manipulation.

35. Au delà du traitement humain de l’information  l’activité • La compréhension d’une interface et sa facilité dépendent des intentions, du contexte et de la structure des activités. • Hoc, 1998 : « un concepteur de système ne conçoit pas seulement une machine, mais un système homme-machine qui réalise une tâche définie »

36. Théorie de l’activité Lorsqu’on crée une interface, ou lorsqu’on essaie de la comprendre, on veut répondre à 3 questions dans l’ordre : • Pourquoi ? • Intentions, • Buts. • Quoi ? • Objets, • Commandes, • Évènements. • Comment ? • Méthodes suites d’opérations, • Organisation de l’utilisation des objets et commandes et des évènements.

37. Atelier

38. Expérimenter des interfaces • Un le fait … l’autre regarde et prend des notes. • Notez les étapes, les difficultés, les réponses. • Proposez ensuite des changements qui seraient souhaitables pour faciliter l’interaction. • Changer la structure d’interaction, • Éliminer une étape, • Changer un bouton, • Ajouter une fonction, un choix de menu, • Etc.

39. Expérimenter des interfaces • Trouvez dans le site de l’UdeM le calendrier pour connaître la date de la semaine de lecture à l’hiver pour le département de communication? • Cherchez à quelle heure et dans quelle salle se donne le cours de Applications Multimédias à l’hiver ? • Accédez au site de la DGTIC? • Trouvez le moyen le plus court pour accéder à Studium depuis la page d’accueil? • Comment renouveler vos emprunts à la bibliothèque. • Vous devez télécharger Endnote depuis la logithèque (enregistrez sur le disque, ne l’installez-pas) • Vous êtes un étudiant étranger en maîtrise de communication. Avez vous droit à des bourses ? Quand devez-vous envoyer votre demande ?