Trois lois fondamentales de la perception visuelle

Trois lois fondamentales de la perception visuelle

ETUDE Les lois de la perception visuelle ne peuvent etre negligees par les concepteurs de services d’information en ligne, qui doivent bien connaitre et maitriser les processus d’identification, d’integration et de memorisation de l’information. En raison de la structure complexe des documents electroniques et des modalites specifiques de navigation et de lecture a l’ecran, l’organisation graphique des informations oblige a respecter les principes de l’ergonomie visuelle et cognitive.

Apres avoir rappele et illustre les caracteristiques fondamentales de la vision, cette etude s’acheve par la presentation d’un exemple d’application : l’evolution de la page d’accueil d’un site intranet. par JOELLE COHEN Conseil et formatrice en communication visuelle L’ecran efficace Trois lois fondamentales de la perception visuelle “ Dans l’acte de voir, sont implicites tous les mecanismes de la pensee, comme la comprehension de relations, les inferences et l’elaboration de concepts. Gaetano Kanizsa(1980) AVEC L’ESSOR DES NOUVELLES TECHNOLOGIES de l’information et de la communication, nous assistons a une proliferation d’interfaces graphiques elaborees, sur le plan visuel, de facon intuitive et souvent inorganisee ; cela conduit a une saturation plus qu’a une utilisation optimale du canal visuel. La structure complexe des documents electroniques et les conditions particulieres de navigation et de lecture a l’ecran imposent

Désolé, mais les essais complets ne sont disponibles que pour les utilisateurs enregistrés

Choisissez un plan d'adhésion
en effet de prendre en compte les contraintes relevant de l’ergonomie visuelle et de l’ergonomie cognitive.

Il devient ainsi indispensable de connaitre, de respecter et d’exploiter les caracteristiques essentielles de la vision : la vision est instantanee, la vision ordonne, la vision regroupe. A partir de quelques exemples, nous allons montrer comment la conjonction de ces trois proprietes, associee au choix motive des signi? ants graphiques, permet d’ameliorer les processus d’identi? cation, d’integration et de memorisation de l’information. 192 • Documentaliste – Sciences de l’information 2000, vol. 37, n° 3-4 1 La vision est instantanee 2

La vision ordonne La premiere propriete perceptive du medium visuel reside dans sa capacite de transmission des informations. Avec un debit de l’ordre de 107 bits par seconde, il permet d’acheminer vers le cerveau sept fois plus d’informations que le systeme sensoriel auditif. Sa superiorite perceptive est liee a sa capacite a communiquer, dans un meme instant de perception, non pas un seul son ou une seule syllabe (proprietes du systeme auditif) mais les relations entre trois variables : les deux dimensions du plan (x et y) et la luminance (z).

Ces trois variables de? nissent ce que l’on pourrait appeler le plus petit acte cognitif de la vision : reconnaitre et localiser une variation ponctuelle de luminance, au niveau du pixel. La construction d’une perception globale repose sur la capacite du systeme visuel a traiter simultanement, en parallele, une multitude de pixels pour faire emerger des formes de plus en plus organisees. La ? gure 1 recapitule les speci? cites respectives des systemes visuel et auditif. Perception lineaire et perception globale

L’? il est un instrument d’optique qui permet d’enregistrer les informations sur le monde environnant. Face a une scene visuelle naturelle ou face a une image, nous percevons des variations d’intensite lumineuse re? echies par les elements constitutifs de l’image. Lorsqu’elles Joelle Cohen est diplomee de sont progressives et contrastees, l’Ecole des hautes etudes en sciences ces variations de luminance sociales, dans la specialite Sciences vehiculent une perception de l’information. En projetant sur la ordonnee.

Lorsque leurs surfaces semiologie graphique l’eclairage de varient en taille, elles traduisent la psychologie cognitive, ses travaux une proportionnalite et offrent visent a enoncer les conditions une perception hierarchisee. Jugement visuel et variation de luminance Considerons, pour montrer les differences entre ces deux modes de perception visuelle, les deux cartes presentees en ? gures 2 page suivante.. La ? gure 2a compare le nombre total de maternites en France realisant moins de 450 accouchements par an. Cette representation autorise une perception lineaire et sequentielle de l’information.

Pour repondre a une question generale de type : « La repartition en France des maternites realisant moins de quatre cent cinquante accouchements par an fait-elle apparaitre des caracteristiques regionales ? », il est necessaire de deployer une strategie complexe d’exploration, de calcul, de memorisation et de comparaison des donnees. Ce processus genere un cout cognitif important en termes de temps de traitement de l’information et de mobilisation de la memoire de travail. La ? gure 2b, en revanche, offre une vision globale et instantanee de la distribution du phenomene etudie. L’? il peut identi? r, comparer, opposer des departements, voire des regions, dans un temps minimum de perception : au sud, on manque de bebes ; en Bretagne et en Bourgogne, nous avons de forts contrastes, etc. A la question precedente : « La repartition en France des maternites realisant moins de quatre cent cinquante accouchements par an fait-elle apparaitre des caracteristiques regionales ? », la reponse apparait immediatement : oui, le sud de la France enregistre les taux les plus eleves. En ordonnant les luminances achromatiques, l’? il associe aux taches les plus sombres les valeurs les plus importantes.

Les ? gures 3a et 3b representent une carte par regions des hopitaux francais qui pratiquent moins de mille interventions chirurgicales par an. Sur le plan graphique, ce phenomene peut engendrer deux jugements visuels opposes si la constitution des paliers visuels est independante de l’ordre numerique des pourcentages. En effet, si nous souhaitons connaitre, dans un temps minimum de perception, les regions les plus marquees par la crise hospitaliere, la ? gure 3a montre trois regions : la Bretagne, le Centre et Rhone-Alpes, tandis que la ? gure 3b identi? trois autres regions : le Sud-Ouest, les regions du Nord et du Nord-Est. Rapportee a la legende, la premiere generales d’efficacite de tout dispositif de visualisation des informations. Cette specialisation la conduit a de multiples interventions en conseil et en formation, le plus souvent sur des problematiques liees a des projets Intranet et Internet. Elle est par ailleurs secretaire generale de l’association Carrefours telematiques (Universite Paris VII) et auteur d’articles publies dans la Revue de bibliologie : Schema et schematisation. (Telephone 06 19 74 09 93, courriel joelle. [email protected] net) Figure 1 – Specificites des systemes sensoriels visuel et auditif Documentaliste – Sciences de l’information 2000, vol. 37, n° 3-4 • 193 ETUDE L’ECRAN EFFICACE : TROIS LOIS FONDAMENTALES DE LA PERCEPTION VISUELLE carte est semantiquement juste mais, d’un point de vue perceptif, elle est visuellement fausse (variations de luminance non ordonnees). La seconde carte est semantiquement et visuellement juste : elle met en concordance le caractere ordonne de l’information et la nature ordonnee des variations progressives de luminance.

Ordre visuel et variation de taille et de luminance Avec les deux exemples suivants, nous allons mettre en evidence les effets sur la perception visuelle de la mise en ordre et de la mise en forme de l’information. La ? gure 4 presente la liste des publications periodiques proposees sur le site du Commissa- riat a l’energie atomique (CEA). D’un point de vue perceptif, nous constatons des densites graphiques dispersees de facon aleatoire sur l’ecran. Les caracteres typographiques ont la meme luminance, le meme contraste, la meme taille. Le corps des caracteres frole le seuil de visibilite.

Nous ne discernons sur l’ecran aucune hierarchie visuelle, aucun ordre visuel. Seul le titre bene? cie d’une graisse et d’un corps de caracteres plus importants. L’absence de reperes graphiques freine le balayage transversal de l’? il sur la page. D’un point de vue cognitif, cette presentation oblige le lecteur a proceder a une lecture exhaustive des donnees pour faire emerger la structure sous-jacente du contenu. Figure 2a – Perception lineaire de l’information Le Nouvel Observateur, n° 1. 62 du 4 au 10 janvier 1996 Figure 2b – Perception globale de l’information Suggestion de traitement graphique de la meme carte

Figures 3a et 3b – Jugement visuel different de l’analyse semantique 194 • Documentaliste – Sciences de l’information 2000, vol. 37, n° 3-4 La ? gure 5 reprend la presentation generale du site de la Bibliotheque nationale de France (BNF). Par opposition a la precedente, cette page offre une perception globale et structuree de l’information. Il y a ici une parfaite adequation entre l’analyse semantique des trois niveaux d’information (rubriques, sous-rubriques et items) et le choix des habillages graphiques (luminance, taille, couleur et forme des caracteres).

En effet, nous distinguons de facon quasi instantanee cinq rubriques qui reposent sur la concomitance d’une hierarchisation visuelle adaptee et d’une forte homogeneite graphique. Cette presentation tabulaire facilite la selectivite de l’information, reduit les couts cognitifs de memorisation et offre au lecteur une plus grande liberte de navigation sur l’ecran. numeriques ; soit deux formes differentes qui, selon la loi de la similitude, s’associent sur le plan. La ? gure 6b presente une liste structuree d’items. L’? il percoit quatre groupes composes de quatre elements, soit quatre categories d’items.

C’est la rupture visuelle dans l’intervalle horizontal entre la rubrique et la premiere sous-rubrique qui va inferer un phenomene de dissociation entre les donnees. De meme, c’est la proximite et l’homogeneite des ruptures spatiales qui induisent et canalisent le nombre de plans de perception (deux plans : rubriques et sous-rubriques). La ? gure 6c renforce la structure visuelle de la ? gure precedente (graisse et majuscule) et modi? e la nature des plans de perception en associant au 3 La vision regroupe Figure 4 – Uniformisation graphique et lecture exhaustive Liste des publications periodiques proposees par le CEA (www. ea. fr, fevrier 2000) Les premiers travaux sur la comprehension de l’organisation perceptive ont commence en Allemagne dans les annees vingt avec la psychologie de la forme (Gestalt-theorie). Selon ce courant de pensee, l’acte perceptif repose principalement sur des ensembles organises de formes globales signi? catives. En ce sens, les psychologues de la forme ont enonce un certain nombre de lois structurales dont deux retiendront particulierement notre attention : la loi de la proximite et la loi de la similitude.

Elles jouent un role fondamental dans l’organisation visuelle de l’information : l’une concourt aux phenomenes de categorisation et garantit l’instantaneite perceptive de la structure ; l’autre genere une richesse inferentielle et accelere, de ce fait, les processus d’identi? cation et d’integration de l’information. Selon le principe de la proximite, l’? il a tendance a grouper les elements qui sont proches. C’est la distance relative entre les elements qui determine les groupements. Selon le principe de la similitude, l’? l regroupe dans le champ visuel des elements qui presentent des caracteristiques communes de luminance, de taille ou de forme. Trois exemples vont illustrer ces principes. La ? gure 6a repertorie une liste d’items repartis sur une vingtaine de lignes et dont la regularite spatiale nous conduit a voir, dans un temps minimum de perception, une seule et meme unite visuelle (loi de la proximite). La lecture de la liste nous apprend que nous sommes en presence de deux unites semantiques distinctes : des rubriques et des sous-rubriques traduites graphiquement par des caracteres alphabetiques et des caracteres

Figure 5 – Hierarchisation graphique et lecture selective Page d’accueil du site de la BNF (www. bnf. fr, janvier 2000) Documentaliste – Sciences de l’information 2000, vol. 37, n° 3-4 • 195 ETUDE L’ECRAN EFFICACE : TROIS LOIS FONDAMENTALES DE LA PERCEPTION VISUELLE concept de la proximite celui de la similitude des luminances chromatiques. L’? il distingue deux plans de perception non plus en fonction de la repartition spatiale des items mais en fonction de leur luminance chromatique (noir et rouge). A l’interieur de chaque plan de perception, les habillages graphiques re? tent visuellement deux unites semantiques ordonnees (rubriques et sous-rubriques). Categorisation visuelle, similitude graphique et regularite spatiale pacement horizontal qui separe la ? n d’une rubrique est toujours plus important que celui qui separe le titre de son texte. Sur le bandeau de gauche, l’information est tres structuree. La loi de la similitude regroupe les deux niveaux d’information en fonction des deux luminances utilisees : la couleur jaune pour les titres, la couleur blanche pour les sous-titres. L’homogeneite des variations graphiques guide l’exploration et permet au lecteur d’isoler les unites visuelles de son choix.

L’ecran reproduit en ? gure 7 presente une liste de mesures relevant de la politique du ministere de la Culture. D’un point de vue de la perception immediate, la regularite des puces jaunes et des traits noirs entre chaque item laisse a penser qu’il s’agit d’une seule liste (loi de la proximite). Le titre se differencie du texte par deux caracteristiques : il est de couleur jaune et il est justi? e a droite. Ce n’est qu’a la lecture du texte que nous nous apercevons qu’il s’agit de deux listes : une liste de mesures tarifaires et un dossier de presse.

Cette information ne peut pas etre percue immediatement car le deuxieme titre n’utilise pas les memes habillages graphiques que le premier titre. En consequence de quoi, l’? il associe des informations de nature et de niveaux differents (loi de la similitude des luminances). La ? gure 8 reproduit la page d’accueil du site web de la Fnac. Cette page offre une tres grande regularite : les photos sont toujours situees au meme endroit, quel que soit l’encombrement typographique du texte qui precede. L’? il regroupe systematiquement la photo et le texte associe (loi de la proximite). L’es- 4

Exemple d’application sur un intranet Les trois ecrans presentes en ? gures 9 page 198 montrent l’evolution de la page d’accueil du site « Ressources documentaires » des Assurances generales de France (AGF)1 depuis une premiere mise en forme lineaire et sequentielle jusqu’a une mise en forme structuree utilisant toutes les proprietes de l’espace graphique. Chaque ecran fera l’objet d’une breve analyse fondee sur les principales lois perceptives presentees precedemment. D’un point de vue perceptif, la page d’accueil de la ? gure 9a offre deux espaces d’inscriptions de taille et de luminance differentes.

Le premier, de couleur jaune, occupe approximativement un sixieme de l’espace visuel contre cinq sixiemes pour le second qui apparait sur un fond blanc. Cette variation de surface induit une hierarchie spatiale : l’? il associe a la masse la plus importante des informations de premier plan et infere sur la surface la plus etroite des niveaux informationnels d’ordre Figure 6a – Lire une liste organisee. Figure 6b – Voir une liste organisee (loi de la proximite). Figure 6c – Renforcer visuellement une liste organisee (loi de la similitude). 196 • Documentaliste – Sciences de l’information 2000, vol. 37, n° 3-4 econdaire. A la lecture de l’ecran, un desequilibre apparait entre le fond semantique et la forme graphique : une information d’ordre secondaire (l’article du jour) occupe la partie centrale de l’ecran, tandis que les informations principales (recherche en langage naturel, recherche thematique, etc. ) sont releguees a gauche de l’ecran sur un bandeau d’inscription etroit qui augmente le nombre de saccades oculaires et freine tout balayage visuel des elements textuels. L’uniformite typographique dans le corps du caractere n’offre aucune hierarchie visuelle. Les rubriques se succedent sans regroupement thematique.

Cette page d’accueil oblige l’usager a lire l’ecran sur un axe vertical puis sur un axe horizontal pour ensuite pouvoir structurer visuellement l’information. La phase intermediaire de re? exion, presentee sur la ? gure 9b, introduit trois nouvelles dimensions. La premiere porte sur le reequilibrage visuel des deux surfaces d’inscription (un quart et trois quarts de l’ecran). La deuxieme concerne la reorganisation fonctionnelle de la page d’accueil en fonction des niveaux informationnels des donnees (les services au centre, l’article du jour sur la colonne de gauche).

En? n la troisieme releve d’une strategie communicationnelle tournee vers l’usager et qui vise a anticiper trois requetes principales (poser une question, consulter un theme et s’informer sur la concurrence). Un dysfonctionnement visuel se manifeste neanmoins par une signaletique qui est a la fois homogene et ambigue dans la partie centrale de l’ecran. En effet, selon la loi de la similitude, l’? il associe a chaque nouvelle couleur de ? eches et de syllabes (orange, vert, mauve et turquoise) une rubrique de meme niveau informationnel.

Or, seule la premiere rubrique est decomposee en trois sous-rubriques, les autres etant disposees sur deux colonnes en bas de l’ecran. Cette variation des densites graphiques au sein des quatre rubriques introduit un con? it visuel entre des unites semantiques qui graphiquement ont la meme valeur et qui visuellement generent une hierarchie informationnelle, proportionnelle a la surface d’inscription. Notons egalement la gestion des espaces sur la colonne de gauche qui, selon la loi de la proximite, induit trois unites semantiques alors qu’il ne s’agit que d’une seule et meme unite (l’article du jour). La ? ure 9c offre une page d’accueil structuree, homogene et fonctionnelle centree sur le « dialogue » avec les usagers. L’? il percoit de facon quasi instantanee trois plans de perception : les requetes des utilisateurs sur la partie centrale de l’ecran, la typologie des ressources documentaires 1 Voir pages 200-204 l’article relatif a la reconception de l’intranet documentaire des AGF. sur la colonne de gauche et l’actualite du jour sur la partie inferieure de l’ecran. Il regroupe des luminances similaires et categorise les elements informationnels (trois questions, trois rubriques et une selection du jour).

La repartition des surfaces d’inscription est harmonieuse (approximativement un tiers et deux tiers de l’ecran sur l’axe vertical et un quart sur l’axe horizontal). La colonne de gauche offre un confort visuel superieur grace a sa largeur et autorise, de ce fait, un balayage oculaire continu sur la zone textuelle. Cet espace est tres structure : deux niveaux d’information apparaissent en fonction des deux luminances choisies (couleur blanche pour les rubriques, couleur bleue pour les sous-rubriques). Fig. 7 – Decoupage lineaire de l’espace d’inscription Mesures gouvernementales en matiere culturelle (site www. ulture. gouv. fr, fevrier 2000) Fig. 8 – Decoupage structure de l’espace d’inscription Page d’accueil du site de la Fnac (www. fnac. fr, janvier 2000) Documentaliste – Sciences de l’information 2000, vol. 37, n° 3-4 • 197 ETUDE L’ECRAN EFFICACE : TROIS LOIS FONDAMENTALES DE LA PERCEPTION VISUELLE Figure 9a – Page d’accueil du site “ Ressources documentaires “ des AGF (1) Intranet AGF (mai 2000) Nous pouvons observer une parfaite adequation entre la charte graphique (luminance, graisse, contraste, couleur et taille des caracteres), les unites semantiques et les niveaux d’information.

Cette organisation spatiale hierarchise l’information, fait emerger des relations structurelles entre les donnees, reduit la prise en charge perceptive et guide l’usager dans sa demarche exploratoire. 4 Fig. 9b – Phase intermediaire d’etude du site « Ressources documentaires » des AGF (2) Respect de l’? il et du sens Ces differents exemples confortent l’idee selon laquelle les lois fondamentales de la perception visuelle president a toute organisation visuelle de l’information. Spontanement, l’? il hierarchise, ordonne et categorise les objets en fonction de leurs similitudes, de leurs differences et de leurs oppositions.

La recherche systematique d’une adequation logique entre les proprietes perceptives du referent (les donnees) et celles du signi? ant (leurs habillages graphiques) permet de solliciter le canal visuel dans des conditions optimales de rapidite et d’ef? cacite. Vehiculer visuellement du sens, c’est garantir a l’usager une richesse inferentielle, une selectivite des informations et un gain cognitif. JUILLET 2000 Bibliographie [1] Rudolf ARNHEIM, La Pensee visuelle. Paris, Flammarion, 1969. 354 p. [3e ed. : 1997] [2] Jacques BERTIN. Semiologie graphique : les diagrammes, les reseaux, les cartes.

Paris, Mouton-Gauthier-Villars, 1967. 431 p. [2e ed. : Ecole des hautes etudes en sciences sociales, 1997] [3] Serge BONIN, Madeleine BONIN, La Graphique dans la presse : informer avec des cartes et des diagrammes. Paris, CFPJ, 1989. 174 p. [4] C. BONNET, R. GHIGLIONE, J. -F. RICHARD, Traite de psychologie cognitive. 1. Perception, action langage. Paris, Dunod, 1989. 266 p. [5] Vicki BRUCE, Patrick GREEN, La Perception visuelle : physiologie, psychologie et ecologie. Presses universitaires de Grenoble, 1993. 511 p. [6] GROUPE m , Traite du signe visuel : pour une rhetorique de l’image.

Paris, Seuil, 1992. 506 p. [7] Paul GUILLAUME, La Psychologie de la forme. Paris, Flammarion, 1979. 260 p. [8] Gaetano KANIZSA, La Grammaire du voir. Paris, Diderot, 1997. 320 p. [Ed. originale en italien : 1980] [9] Pierre LEVY, Les Technologies de l’intelligence. Paris, La Decouverte, 1990. 233 p. [10] Jacques NINIO. L’Empreinte des sens. Paris, Odile Jacob, 1991. 310 p. Figure 9c – Page d’accueil du site « Ressources documentaires » des AGF (3) Intranet AGF (juillet 2000) 198 • Documentaliste – Sciences de l’information 2000, vol. 37, n° 3-4