Transcript notes de cours

Introduction
3 septembre 2013
Grégory Petit
http://lrcm.com.umontreal.ca/greg/COM2571/
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
Infos en vrac
 http://lrcm.com.umontreal.ca/greg/COM2571/
 Courriel : [email protected]
 Cours les lundi de 13h à 16h en B-340 (Marie-Victorin)
 3 crédits
 2 travaux à rendre + 1 exam
Avant de commencer…
 Interface???
 Scénarisation???
 Qu’est ce que vous attendez de ce cours?
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
Pourquoi ce cours???
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
Exemple
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%A9s
identielle_am%C3%A9ricaine_de_2000#L.27imbroglio_
de_Floride
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
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."
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
Jeb Bush (frère de W)
le
Gouverneur
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.
Y’aura quoi dans ce cours?
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
département de communication …),
 La conception.
est
dans
un
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!
IHM et Ergonomie
IHM : c’est quoi alors?
IHM = Interaction Humain - Machine
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.
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!!!
Ergonomie
 ergos «ergos» (travail) + nomos «nomos» (loi)
 Grandjean (1969) : « l’adaptation du travail à l’homme »
 Laville (1976) : « l'ensemble des connaissances sur
le 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.
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)
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.
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 = émettre et recevoir de
l’information de façon efficace selon 4 phases.
Cycle d’interaction avec un système
Norman  Cycle d’interaction
Usager
Gouffre
Système
Intention
Action
Évaluation
Rétroaction
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!
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
mais les usages changent.
aux
usages,
Théorie :
Modèle du traitement humain
de l’information
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
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.
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.
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




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.
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.
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 »
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.



Objets,
Commandes,
Évènements.


Méthodes suites d’opérations,
Organisation de l’utilisation des objets et commandes et des
évènements.
 Quoi ?
 Comment ?
Atelier
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
souhaitables pour faciliter l’interaction.
 Changer la structure d’interaction,
 Éliminer une étape,
 Changer un bouton,
 Ajouter une fonction, un choix de menu,
 Etc.
seraient
Expérimenter des interfaces
1.
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?
2.
Cherchez à quelle heure et dans quelle salle se donne le cours de Applications
Multimédias à l’hiver ?
3.
Accédez au site de la DGTIC?
4.
Trouvez le moyen le plus court pour accéder à Studium depuis la page d’accueil?
5.
Comment renouveler vos emprunts à la bibliothèque.
6.
Vous devez télécharger Endnote depuis la logithèque (enregistrez sur le disque, ne
l’installez-pas)
7.
Vous êtes un étudiant étranger en maîtrise de communication. Avez vous droit à des
bourses ? Quand devez-vous envoyer votre demande ?
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]
http://lrcm.com.umontreal.ca/greg/COM2571/