L ergonomie des documents
This presentation is the property of its rightful owner.
Sponsored Links
1 / 40

L’ergonomie des documents PowerPoint PPT Presentation


  • 80 Views
  • Uploaded on
  • Presentation posted in: General

TECFA Technologies pour la Formation et l’Apprentissage. Faculté de Psychologie et de Sciences de l’Education. L’ergonomie des documents. Cours Ergonomie des Interactions Personne-Machine 11 décembre 2013. Présentation réalisée par Mireille Bétrancourt . Plan de la séance.

Download Presentation

L’ergonomie des documents

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


L ergonomie des documents

TECFA

Technologies pour la Formation et l’Apprentissage

Faculté de Psychologie et de Sciences de l’Education

L’ergonomie des documents

Cours Ergonomie des Interactions Personne-Machine

11 décembre 2013

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


Plan de la s ance

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 documents multimédia à consulter si le sujet vous intéresse


Rappel rapide sur le test utilisateur

Rappel rapide sur le test utilisateur


L ergonomie des documents

Contexte global d’utilisation

Analyse de l’activité

Analyse du système

1 entretien

Contenu, organisation, fonctionnalités,

outils d’aide

Pb d’utilisabilité « supposés »

Un ou plusieurs exemples

de tâches authentiques

Problèmes rencontrés

Vous êtes ici

Scénario d’utilisation

Test utilisateurs

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

Pb d’utilisabilité observés :

Diagnostic, propositions de remédiation


Design de documents techniques

Design de documents techniques

Activité 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. (2013). Ergonomie des documents numériques. in Traité Informatique, H7 220, Techniques pour l’Ingénieur (TPI) : Paris (1ère édition 2000).


Quel enjeu

Attention

ATTENTION

Produit corrosif

Produit corrosif

Eviter le contact avec

la peau et les yeux.

Eviter le contact avec

la peau et les yeux.

Quel enjeu ?

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

Le format de présentation participe à la construction

d ’une représentation de ce que dit le texte


Du mod le transmissif de la communication

Du modèle transmissif de la communication…

Message ?

Message

Personnages de @EinarFaanes, CC

codage

décodage

Signal

Source

Emetteur

Récepteur

Destinataire

Shannon, C. E. & Weaver, W. (1949).A Mathematical Model of Communication. Urbana, IL: University of Illinois Press

Journée PECUSI – Lyon, 12 Juillet


Au mod le pragmatique de la communication

…au modèle pragmatique de la communication

Représentation de la situation,

Modèle de l’autre

Représentation de la situation,

Modèle de l’autre

Objectif

Objectif

Vous avez l’heure ?

Oui

11h30

Searle, J. R. (1975). A Taxonomy of Illocutionary Acts. In: Gunderson, Keith (ed.) Language, Mind, and

Knowledge. Minneapolis: University of Minnesota: 344-369.

Sperber, D. & D. Wilson (1986/1995) Relevance: Communication and Cognition. 2nd edition. Oxford: Blackwell.


Les actes de langage

Vous avez l’heure ?

Les actes de langage

Searle, Austin

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

locutoire

L demande si j ’ai l’heure

illocutoire

L veut savoir l’heure

perlocutoire

L souhaite que je lui donne l’heure


Les actes de langage1

16h25 !

Les actes de langage

Searle, Austin

Vous avez l’heure ?

locutoire

L demande si j ’ai l’heure

illocutoire

L veut savoir l’heure

perlocutoire

L souhaite que je lui donne l’heure


Les actes de langage2

Oui.

Les actes de langage

Searle, Austin

Vous avez l’heure ?

locutoire

L demande si j ’ai l’heure

illocutoire

perlocutoire


M thodologie d investigation

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

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 ?


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

Quelle police choisir (2) ?


Quelle couleur de fond police

Au niveau physiologique :

effet de battement insupportable

effet de battement insupportable

Quelle couleur de fond / police ?

Attention à l ’utilisation de couleurs !

Éviter les combinaisons rouge/bleu

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

C ’est plus lisible que blanc sur fond noir.

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


Quelle couleur de fond police1

Au niveau physiologique :

Quelle couleur de fond / police ?

Attention à l ’utilisation de couleurs !

Ressources sur le Web :

Pour tester :

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

Appli interactive Colortester


Quelle utilisation des couleurs

Au niveau cognitif :

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.


Mise en page et densit d information

Ce produit est très

irritant, évitez de

l ’inhaler.

Ce produit est très irritant,

Évitez de l ’inhaler.

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


Comment mettre une information en avant

enrichissement typographique : taille > gras > italique

augmenter l ’interlignage

ajouter un cadre de couleur différente

ajouter une icône simple ou une animation

Comment mettre une information en avant ?

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 avant1

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

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

4

2

3

1

Risque d ’explosion : tenir éloigner des flammes.

Risque d ’explosion : tenir éloigner des flammes.

Comment mettre une information en avant ?

Young & Wogalter, 1990


Principes g n raux

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

Principes généraux

Utiliser un codage redondant

Préserver l’homogénéité

Deux règles d ’or


Pour aller plus loin el ments compl mentaires sur les documents informatis s et multim dia

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 fen tres ponctuelles1

Les atouts

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

introduit plusieurs niveaux de lecture

flexibilité par rapport au niveau d ’expertise

Les fenêtres ponctuelles


Les attributs vid o

Les attributs vidéo

Effet de flash

Effet de flash

Inverse vidéo

Inverse vidéo

clignotement


L effet multim dia

poignée

piston

valve d ’entrée

valve de sortie

L ’effet multimédia

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 dia1

L’effet multimédia

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

apparaît dans plus de 80% des études

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

améliore la compréhension et le transfert

Denis, 1984; Levie & Lentz, 1982


Fonction des graphiques

Rôle esthétique, attractif et motivant

identifier un objet, un scène

Organiser des informations spatial ou temporelles

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

Fonction des graphiques


L effet de contigu t temporelle

L’effet de contiguïté temporelle

L’intégration spatiale des informations verbales et

graphiques facilite la mémorisation et la compréhension

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 pas

complémentaires

Sweller & collègues


L effet de contigu t temporelle1

L’effet de contiguïté temporelle

Animation et commentaires audio (ou écrits)

doivent-ils être présentés simultanément

Ou

séparément ?


Effet de contigu t temporelle

blabla

rétention

transfert

rétention

transfert

Effet de contiguïté temporelle

blabla

rétention

transfert


Le principe de contigu t

Le principe de contiguïté


Le principe de contigu t1

Le principe de contiguïté

Mayer & Anderson, 1992


Effet de modalit

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 modalit1

blabla

Effet de modalité

D ’après Mayer (2001)

sélection

organisation

intégration

codage pictural

Modèle

mental

codage verbal

R° verbale


Effet de redondance

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 redondance1

blabla

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.

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 seul

Ecrit seul

Oral et écrit

Effet de redondance


Effet de coh rence

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

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


Le design de document multimedia

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


  • Login