Cours Ergonomie des Interactions Personne-Machine - M. Bétrancourt 1 Lergonomie des documents Cours Ergonomie des Interactions Personne-Machine 15 décembre

Cours Ergonomie des Interactions Personne-Machine - M. Bétrancourt1

L’ergonomie des documents

Cours Ergonomie des Interactions Personne-Machine15 décembre 2010

Présentation réalisée par Mireille Bétrancourt

TECFATechnologies pour la

Formation et l’ApprentissageFaculté de Psychologie et de Sciences de l’Education

http://tecfa.unige.ch/perso/mireille


Plan de la séance

• Présentation de groupes• Modèle d’interaction de Norman• Mise au point sur test utilisateurs et question

• Design de document « centré utilisateur » : activité de conception d’affiche d’information


Modèle de Norman (1986!)


Manipulation directe et interaction « naturelle »


Affordances

Voir références dans les commentaires

Voir aussi photos bacs de recyclageCartons vs. bouteilles plastiques

Affordance dans le courant du « ecological interface design »


Mise au point sur le test utilisateur


Analyse de l’activité

Test utilisateurs

Analyse du système

Contenu, organisation, fonctionnalités, outils d’aidePb d’utilisabilité « supposés »

Scénario d’utilisation

Contexte global d’utilisation

Un ou plusieurs exemples

de tâches authentiquesProblèmes rencontrés

Pb d’utilisabilité observés :Diagnostic, propositions de remédiation

1 entretien

5 utilisateurs / -trices d’un même public cible

Vous êtes ici


Le scénario

Est l’ensemble des tâches proposées aux utilisateurs d’une même population cible

Déterminé selon l’analyse de l’activité et l’analyse préalabledu site

Recommandations : Voir dans le site du courshttp://tecfa.unige.ch/tecfa/teaching/LMRI41/projet_phase2.html#scenario

Ou suivre Description du projet > Fin de la section II analyse de l’activité

http://tecfa.unige.ch/tecfa/teaching/LMRI41/projet_phase2.html%23scenario


Le test utilisateur

Permet de tester le site, pas les utilisateurs !

Méthode de « verbalisation concurrente » : inciter l’utilisateur à penser tout haut pendant qu’il exécute les tâches.

Recommandations : Voir dans le site du courshttp://tecfa.unige.ch/tecfa/teaching/LMRI41/projet_phase4.html

Ou suivre Description du projet > IV Test utilisateurs, lien dans partie A

http://tecfa.unige.ch/tecfa/teaching/LMRI41/projet_phase4.html


Présentation en tableau (exemple)

Recommandations : Voir dans le site du courshttp://tecfa.unige.ch/tecfa/teaching/LMRI41/projet_phase4.html#Diagnostic


Design de document technique

Activité de conception d’affiche


Quel enjeu ?

Le format de présentation participe à la constructiond ’une représentation de ce que dit le texte

Attention

Produit corrosif

Eviter le contact avec la peau et les yeux.

ATTENTION

Produit corrosif

Eviter le contact avec la peau et les yeux.


Les actes de langage

Searle, Austin

locutoire

illocutoire

perlocutoire

L demande si j ’ai l’heure

L veut savoir l’heure

L souhaite que je lui donne l’heure

Vous avez l’heure ?



Searle, Austin

locutoire

illocutoire

perlocutoire


16h25 !


L veut savoir l’heure

L souhaite que je lui donne l’heure



Searle, Austin

locutoire

illocutoire

perlocutoire


Oui.



La mise en forme du document

M + K => S

M = mise en forme du message

K = connaissances des lecteurs sur le domaine

S = signification que l ’auteur veut transmettre

David (1985)


Méthodologie d’investigation

Etude expérimentale de performances

Exploration de mouvements oculaires

Etude d’utilisabilité sur panel d’utilisateurs


Les dispositifs non linguistiques de mise en forme du texte


Quelle police choisir ?

Sur écran choisir des polices sans sérif (Arial, Helvetica, Geneva par exemple)

Elles sont plus lisibles que les polices avec sérif.

Gras, italique : ralentissent la lecture

MAJUSCULES : MOINS LISIBLES QUE MINUSCULES

Majuscules : moins lisibles que minuscules


Quelle police choisir (2) ?

L ’œil lit le haut des lettres.

L ’œil lit le haut des lettres.

L ’OEIL LIT LE HAUT DES LETTRES


Attention à l ’utilisation de couleurs !

Quelle couleur de fond / police ?

Éviter les combinaisons rouge/bleu

effet de battement insupportable

effet de battement insupportable

Lisibilité maximale : caractères noirs sur fond blanc, ou en tout cas foncés sur fond clair.

Au niveau physiologique :

C ’est plus lisible que blanc sur fond noir.

Pour tester : http://tecfa.unige.ch/perso/lombardf/CPTIC/couleurs/bleu-noir.htmll

http://tecfa.unige.ch/perso/lombardf/CPTIC/couleurs/bleu-noir.html


Attention à l ’utilisation de couleurs !

Quelle couleur de fond / police ?

Ressources sur le Web :

Au niveau physiologique :

Appli interactive Colortester

Pour tester : http://tecfa.unige.ch/perso/lombardf/CPTIC/couleurs/bleu-noir.htmll

http://tecfa.unige.ch/themes/FAQ-FL/colortester/colortester.html

http://tecfa.unige.ch/perso/lombardf/CPTIC/couleurs/bleu-noir.html


Quelle utilisation des couleurs ?

Se limiter à un nombre réduit de couleurs (7 maximum),faciles à distinguer

Utiliser la couleur pour coder de l ’information

Consistance du choix de couleur sur tout le document

Le choix des couleurs doit être consistant avec leur signification commune.

Au niveau cognitif :


Mise en page et densité d’information

Quantité d ’espace : 20 à 40% sur papier, 40 à 60% sur écran

Longueur des lignes : 50 à 70 caractères

Ce produit est trèsirritant, évitez de l ’inhaler.

Ce produit est très irritant, Évitez de l ’inhaler.


Comment mettre une information en avant ?

ajouter un cadre de couleur différente

augmenter l ’interlignage

enrichissement typographique : taille > gras > italique

ajouter une icône simple ou une animation

L'écrit est particulièrement touché par les bouleversements induits par les technologies de

l'information dans tous les domaines de l'activité humaine, qu'il s'agisse du travail, de la vie

sociale, de la recherche ou de la création artistique.

L'écriture est l'une des plus anciennes technologies culturelles.Ses interrelations avec les structures sociales. Ses incidences sur le développement de la

pensée abstraite, ses effets sur le fonctionnement de la mémoire ont été étudiés depuis

longtemps.

Images fixes et animées

Certains vont jusqu'à prédire la disparition à courte échéance de l'écrit par obsolescence

complète de l'écriture et de la lecture ; d'autres, d'une manière moins radicale, anticipent son

cantonnement à la seule lecture, la prise en charge de la production de la trace matérielle

étant entièrement dévolue à des dispositifs techniques.

Appel à propositions

L'appel à propositions est plus particulièrement centré sur deux thématiques complémentaires.

Références : http://edutechwiki.unige.ch/en/Font_readability


Comment mettre une information en avant ?

Young & Wogalter, 1990

Risque d ’explosion : tenir éloigné des flammes.

Risque d ’explosion : tenir éloigné des flammes.

Risque d ’explosion : tenir éloigner des flammes.

Risque d ’explosion : tenir éloigner des flammes.

1

2

3

4


Principes généraux

Utiliser un codage redondant

Préserver l’homogénéité

Deux règles d ’or

Toute variation de mise en forme sera interprétée !

On ne pense pas le document sur écran comme sur papier

Deux règles d ’or


Les documents informatisés et multimédia


Les fenêtres ponctuelles

Ceci est une fenêtre ponctuelle qui s ’active dynamiquement lorsque la souris entre dans une zone sensible


Les fenêtres ponctuelles

Les atouts

diminution de la charge présente sur l ’écran

introduit plusieurs niveaux de lecture

flexibilité par rapport au niveau d ’expertise


Les attributs vidéo

Effet de flash

Inverse vidéoInverse vidéo

Effet de flash

clignotement


poignée

piston

valve d ’entrée

valve de sortie

Fonctionnement d’une pompe à vélo.

Lorsque l’on tire la poignée, le piston monte, la valve d’entrée s’ouvre, la valve de sortie se ferme et l’air entre dans la partie basse du cylindre.

L ’effet multimédia


L ’effet multimédia

L ’effet positif de l’ajout d ’illustrations graphiques à un texte :

améliore la mémorisation d ’environ 36%

améliore la compréhension et le transfert

apparaît dans plus de 80% des études

Denis, 1984; Levie & Lentz, 1982


Fonction des graphiques

Utiliser l’espace comme métaphore d’autres relations

identifier un objet, un scène

Organiser des informations spatial ou temporelles

01020304050

60708090

1er trim.

2e trim.3e trim. 4e trim.

EstOuestNord

Rôle esthétique, attractif et motivant


Effet de contiguité spatiale

Format séparé



Format intégré



Format escamot



Deux cas où l’intégration est défavorable :

si les deux sources d’information sont redondantes

si les deux sources d’information ne sont pascomplémentaires

L’intégration spatiale des informations verbales etgraphiques facilite la mémorisation et la compréhension

Sweller & collègues


Effet de contiguïté temporelle

Animation et commentaires audio (ou écrits) doivent-ils être présentés simultanémentOuséparément ?


Effet de contiguïté temporelle

blabla rétention transfert

rétention transfert

blabla rétention transfert


Niveau représentationnel

Document Multimedia

connections référentielles

connections représentationnelles

Représentation verbale Représentation visuelle

Information verbale Information picturale

Le principe de contiguïté


Niveau représentationnel

Document Multimedia

connections référentielles

connections représentationnelles

Représentation verbale Représentation visuelle

Information verbale Information picturale

Mayer & Anderson, 1992

Le principe de contiguïté


Effet de modalité

Le commentaire qui accompagne un graphique ou une animation doit-il être présenté sous une modalité écrite ou orale ?

Mayer et Moreno, 1998


Effet de modalité

codage pictural

codage verbal

Modèlemental

R° verbaleblabla

D ’après Mayer (2001)

sélection organisation intégration


Effet de redondance

Faut-il présenter les commentaires à la fois à l’oral et à l’écrit ?Ou uniquement à l’oral ou uniquement à l’écrit ?


Effet de redondance

blabla

Oral seul

L’ampoule doit être connectée à la pile selon deux directions: l’un des fils va au pôle positif, l’autre au pôle négatif.

Ecrit seul

blabla

L’ampoule doit être connectée à la pile selon deux directions: l’un des fils va au pôle positif, l’autre au pôle négatif.

Oral et écrit


Effet de cohérence

Quel effet de l ’ajout d ’informations attractives (illustrations, exemples, sons, vidéos...) ?

Hypothèse motivationnelle

Hypothèse de la charge cognitive

Ex de site Web : http://www.lesurbanophiles.com/

http://www.lesurbanophiles.com/


Le design de document multimedia

Un principe de base : diminuer la charge cognitive inutile liée au traitement des informations :

- Perception, attention

- Mise en relation entre différentes sources

- Informations et relations implicites

Documents

Cours Ergonomie des Interactions Personne-Machine - M. Bétrancourt 1 Lergonomie des documents Cours Ergonomie des Interactions Personne-Machine 15 décembre