L’ergonomie des documents

Cours Ergonomie des Interactions Personne-Machine13 décembre 2011

L’ergonomie des documents

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

TECFATechnologies pour la

Formation et l’Apprentissage Faculté de Psychologie et de Sciences de l’Education

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

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

Plan de la séance

Rappel projet : où vous devez être Design de document « centré utilisateur » :

activité de conception d’affiche d’information

Debriefing – Modèle de conception de documents « centré utilisateur » et recommandations

Eléments complémentaires sur les docuemnts multimédia à consulter si le sujet vous intéresse


Rappel rapide 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 documents techniquesActivité de conception d’affiche

Références :Dillon, A. (2004) Designing Usable Electronic Text. 2nd Edition, London: CRC Press (1st edition, 1994).Caro, S. & Bétrancourt, M. (sous presse). Ergonomie des documents numériques. in Traité Informatique, H7 220, Techniques pour l’Ingénieur (TPI) : Paris (1ère édition 2000).

http://www.ischool.utexas.edu/~adillon/BookSynopses/Designing.html


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.

Un document = un contenu + sa mise en forme (disposition, lisibilité, interactivité)


Les actes de langageSearle, 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 ?

Interagir avec un document, c’est comme interagir avec une interface.



locutoire

illocutoire

perlocutoire


16h25 !


L veut savoir l’heure

L souhaite que je lui donne l’heure



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 MINUSCULESMajuscules : 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éesCertains 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 à propositionsL'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


Pour aller plus loinEléments complémentaires sur 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 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

L’effet multimédia


Fonction des graphiques

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

identifier un objet, un scène

Organiser des informations spatial ou temporelles

Rôle esthétique, attractif et motivant


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

L’effet de contiguïté temporelle


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

L’effet de contiguïté temporelle


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

L’ergonomie des documents