COM2571 Interfaces et scénarisation

Interactions Humain-Ordinateur

InterfacesJeux Jeux et mondes virtuels

Scénarios interactifs

Évaluation auprès des usagers

Veille technologique

Analyse des usages ecommerce

Aide en ligne, documentation, formation

Un cou

rs pr

atiqu

e

mais

pas d

e pro

ducti

on

Au programme aujourd’hui

B340 ... le déroulement du cours

Pourquoi ce cours ?

Présentation du plan de cours et des méthodes d’évaluation

http://lrcm.com.umontreal.ca/dufresne/com2571/

Les notes (PowerPoints) sont mises en ligne

Comment imprimer – Gris 4 par pages.

Présentation du domaine des

Interactions Humain - Ordinateur IHM (CHI)

Pourquoi ce cours ?

Pourquoi l’étude des interactions Humain Ordinateur ?

Il n’est pas si facile de concevoir un bon site Internet,d’informatiser la communication de façon efficace

Les systèmes doivent s’adapter aux activités humaines, pas le contraire.

Les applications multimédias, les sites web,les interfaces sur mobile sont complexes à développer, il faut scénariser.

Il faut pouvoir choisir une technologie, participer à la conception,évaluer, savoir ce qui se passe et améliorer les systèmes.

Scénariser la Communication

Exemples de conception

Bornes des BixisVote électroniqueSystèmes de réponse automatisée au téléphone

Services communautaires accessibles

Guichet étudiant ?Information sur les bourses

Service à la clientèle en ligneIntégration des médias - TV, Web, Blogue

Gestion de vos courriels, gestion des réseaux sociaux selon l’usage visé. Contenus générés par les utilisateurs.

Applications et Interfaces des portables Système de navigation au téléphone

http://cuwu.editthispage.com/2000/11/08

Exemple tiré de l’élection présidentielle US 2000:Préparé par Yan Bodain, M.A.

Jean-Yves Fiset, ing., Ph. D. et Sandrine Prom TepHec Montréal

À un moment donné, 1% des votes était sous examen (écart entre les candidats est de quelques centaines, sur plusieurs centaines de milliers).

19 000 bulletins de votes ont été rejetés car plus d’un candidat y étaient sélectionnés.

http://cuwu.editthispage.com/2000/11/08

Bulletin de vote électronique de la Floride

Quelques possibilités d’erreurs:• Lecture de haut en bas => ensemble de candidats associé au second trou• Lignes horizontales alignées sur les trous• Espacement réduit entre les trous• Gauchers (droitiers) ne distinguent pas correctement les noms au moment

de voter

Exemple tiré de l’élection présidentielle US 2000

Exemple tiré de l’élection présidentielle US 2000

Commentaires d’é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."

Selon le 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 Gov. Jeb Bush, (frère de George W.'s)

Références

Bastien, J. M. C., & Scapin, D., L. (1993). Ergonomic Criteria for the Evaluation of Human-Computer Interfaces.  (156). INRIA.

Gentner, D., & Nielsen, J. (1996). The Anti-Mac interface. Communications of the ACM, 39(8), 70-82.

Nielsen, J. (2000). Conception de sites Web : l'art de la simplicité. Paris: CampusPress France, 387p. ISBN 2744008877

Lindsay, P. H., & Norman, D. S. (1980). Traitement Humain de l'Information. Montréal: Etudes Vivantes. Translated from

Lindsay, P. H., & Norman, D. A. (1977). Human information processing : an introduction to psychology (2d ed.), pp. xxiii, 777. New York: Academic Press. 0124509606. BF 455 L55 1977

Norman, D. A. (1986). Cognitive Engineering. In D. A. Norman, & S. Draper (Ed.), User Centered System Design:  New Perspectives on Human-Computer Interaction (pp. 31-62). Hillsdale, N.J.: Erlbaum.

Shneiderman, B. (1998). Designing the user interface : strategies for effective human-computer interaction (Third ed.). Reading, Mass.: Addison-Wesley, 638p. ISBN 0201572869 - p.104-112

Weinschenk, S., & Yeo, S. C. (1997). GUI design essentials for Windows 95, Windows 3.1, World Wide Web. New York: Wiley,345p. ISBN 0471175498 - Ch3 - p.51-83.

Pourquoi l’étude des interactions Humain Ordinateur ?

L’impact d’une mauvaise interface n’est pas toujours si grave…

Mais elle peut faire perdre des milliers d’heures à des milliers de personnes.

Avec le commerce électronique, les jeux vidéos, l’intégration actuelle des médias traditionnels et électroniques, la formation en ligne, …

il y a dans les IHM un vaste domaine d’application et de recherche.

Association des professionnels de l’utilisabilitéhttp://www.utilisabilitequebec.org/

Présentation du cours ....

Apprentissage des principes de scénarisation interactive et du processus de conception et d'évaluation des applications de communication informatisée, en utilisant diverses théories ergonomiques et communicationnelles.

Théories sur l’ergonomie et la conception

Méthodologies de prototypage et de gestion de projet de conception, de description et de production de maquettes d’évaluation heuristique des interfaces (experts) d’évaluation empirique ou tests d’utilisabilité des maquettes et des systèmes

informatisés auprès des usagers

Exercices et travaux liés à l’évaluation la conception

Sites d’information, ecommerce, eformationJeux, logiciels

Présentation du domaine des Interactions Humain Ordinateur (IHM)

Qu’est-ce qu’une interface ?

Qu’est-ce que l’ergonomie cognitive ?

Problématique spécifique à la communication Humain-ordinateur (Norman 1986)

Modèle du traitement de l’information

Manipulation directe vs Intelligence des systèmes

Recherches dans le domaine

Ce qui est important ???? Comprendre les concepts

Qu’est-ce qu’une interface ?

Toutsavoir.net : interface Ensemble des programmes gérant l'utilisateur et les rapports qu'ils 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 oeuvre physique de règles de communication entre deux systèmes.

Dicofr.com - InterfaceUne voie d'échange d'informations qui permet à un ordinateur ou plusieurs ordinateurs ou des équipements extérieurs (imprimantes, moniteurs ou modems) ou deux ou plusieurs ordinateurs de communiquer.

Interface Utilisateur Partie visible par l'utilisateur d'un logiciel, en d'autres termes le programme gérant l'interaction entre la machine et l'utilisateur.

Interface graphique Surcouche d'un système d'exploitation apportant le système de fenêtres et de menus inventé par Xerox. Sa vulgarisation pour le grand public a eu lieu grâce aux travaux d'Apple avec la sortie du Lisa puis du Macintosh en 1984.

IHM Interaction Homme Machine ou IPSITout ce qui permet une communication homme/machine.

Définir les IPSI …un problème pour l’Ergonomie cognitive

Qu’est-ce que l’ergonomie cognitive ?

ergos travail et nomos lois naturelles.

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

Grandjean (1969)

elle étudie "l'adaptation du travail à l'homme".

faciliter l'utilisation d'un outil

en se fondant sur les connaissances dans les sciences biologiques, psychologiques et physiques

L’ergonomie cognitive s’intéresse à…l’adaptation à la cognition humaine, soit:

perception, activité symbolique, mémorisation, prise de décision, résolution, motivation

Concrètement...

L’Ergonomie Cognitive s’intéresse surtout au design des Interactions Humain Machine

Ce qui se passe entre vos deux oreilles

design de quelque chose d’artificiel,de complexe.qui soit fonctionnel

Inventer le médium et le message

L’humain et l’ordinateur ont chacun leurs forces et leurs faiblesses.Concevoir un système qui maximise l’interaction entre les deux (Norman, 86)

Créer des systèmes qui complètent l’intelligence humaine..

Confronter les systèmes aux usagers et aux usages réels

Communication Humain Ordinateur

Communication - émettre et recevoir l’information de façon efficace selon quatre phases

Norman (1986)

Le Gouffre

Intentions Actions

L ’Usager Le Système

Evaluation Rétroaction

Problématique de l’adaptation des systèmes informatiques

Norman 1986: Cycle d'interaction avec un système informatisé:

Fossé de l’exécution Établissement d'un but

Formation d'une intention

Spécification d'une suite d'actions

Exécution des actions

Fossé de l’évaluation Perception de l'état du système

Interprétation de l'état du système

Évaluation de l'état du système par rapport au but

La largeur des fossés est reliée

Les difficultés et les erreurs sont partout

Design = Compromis

les menus aident à la formation des intentions mais nuisent à l'exécution

plus de rétroaction aident l'évaluation, mais distrait de la formation d'intentions

la présence visuelle peut favoriser la perception et la rétention aux différents stades, mais elle alourdit en ajoutant de la complexité

La toile du Québec

Médias intégrés Radio-Canada

Les multiples index et choix diminuent l'attention portée à l'information.

Définir l’accès en fonction des usages, mais ceux-ci changent.

Théories ?

Modèle du Traitement Humain de l'Information

Il faut considérer les contraintes du traitement des informations par les humains

Le temps et la difficulté du traitement de l’information est formé de trois composantest = ts + tc + tm (sensoriel, cognitif et moteur)

système sensoriel favoriser la discrimination sensorielleattention aux contrastes - couleur, sons, détailvitesse proportionnelle à l’activitéréduire les variations de vitesseralentir pour diminuer les erreurspermettre d’ajuster, d’interrompre

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 à parcourirL = largeur de cibleI = constante (1 sec)

Si le bouton est loin sa taille doit augmenterPlacer les zones actives utilisées fréquemment ensemblePlutôt en bas à droite, dans l’ordre de lecture..sauf sur Internet..Pourquoi ?

Attention aux boutons « Annuler » ou « Effacer »Penser aux erreurs possibles de manipulation

système cognitif - Mémoiremémoire à court terme ou mémoire de travail

attention sélective, difficulté à se rappeler des choix de menus - raccourcir oublie le parcours fait - d’où on vient? 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

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

Et les autres dimensions cognitives : la motivation, le flot, l’apprentissage, les attitudes.

Modèle du Traitement Humain de l'Information...

Mais au delà de faciliter la compréhension de l’Outil..

La compréhension d’une interface et sa facilité dépend des intentions..du contexte et de la structure des activités..

Hoc, 1998 - On n’utilise pas l’ordinateur pour lui-même…mais pour des buts super ordonnés

« 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 » Hoc, 1998

Au delà du traitement de l’information... L’activité

Lorsqu’on spécifie une interface, ou lorsqu’on essaie de la comprendre,

on cherche à répondre à trois questions dans l’ordre:

Pourquoi ? Intentions, buts

Quoi ? Objets, commandes, évènements

Comment ? Méthodes suites d’opérationsOrganisation de l’utilisation des objets et

commandeset des évènements.

Dans la Toile.. http://www.toile.qc.ca Quels sont les buts..les objets et commandes..les méthodes

Théorie de l’activité:

Atelier - expérimenter des interfaces

C’est une course 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.

Atelier - expérimenter des interfaces

C’est une course …Un(e) le fait …Un(e) regarde et note les problèmes..Vous devez pourvoir répondre à toutes les questions et noter les difficultés.

1. Trouvez dans le site de l’UdeM le calendrier pour connaître la date de la semaine de lecture à l’hiver ?

2. Cherchez à quelle heure et dans quelle salle se donne le cours de Applications Internet à l’Automne ?

3. Pouvez-vous vous inscrire aussi à l’hiver à au cours de relation publique ?

4. Vous ne vous rappelez plus de votre mot de passe pour votre courriel, que faire ?

5. Vous voulez renouveler vos emprunts à la bibliothèque.

6. Vous devez downloader Endnote de la logithèque (enregistrez sur le disque, ne l’installez-pas)

7. Vous êtes un étudiant étranger en maîtrise. Avez vous droit à des bourses ? Quand et à qui devez-vous envoyer votre demande ?

Rapport sur les difficultés.. propositions de changements…