Perception Cédric Dumas Elements from CS 7450 - Information Visualization Jan. 10, 2002 - John Stasko – Georgia Tech On privilégie le point de vue humain. il ne s'agit pas d'adapter la machine a l'homme mais d'optimiser les systèmes, avec des délais d'adaptation + ou - long. (= but de l'ergonomie) L'amélioration des conditions de travail passe par la formation et la familiarisation avec de nouveaux outils dont les effets bénéfiques n'apparaissent pas immédiatement. 26/03/2017

2 L’origine ? Un des premiers domaines de recherche de la psychologie expérimentale Le plus important : la vision LA VISION c'est un des premiers domaines d'étude de la psychologie avec la mémoire. d'abord la vision car c'est une des seules qu'on arrrivait à mesurer (en terme de seuil, de temps, de présentation de l'information, etc). exemple : le nombre de lettre que l'on est capable de lire en X ms sans bougre l'oeil (=genre 6 ou 7 en 250 ms). On parle ici de percevoir, pas de traiter (on ne prend pas en compte la memorisation). vision + facile à mesurer et moins subjectif que l'odorat ou l'ouie.

Pourquoi ? Système visuel 3 Pourquoi ? Homme connaissances physiologie problèmes Système bien gérer/présenter l’information Comment quelqu’un utilise le système ??? Système visuel Ce que l’on perçoit n’est pas ce que l’on voit L’information visuelle est traitée logique bien connue du systeme peut etre differente de la logique de l'utilisateur => comment faire pour penser comme l'utilisateur ? (vous reussirez toujours a fabriquer le systeme, technologie) montrer que le cerveau complémente l'information, la traite, La vision n'est pas une photographie, c'est une activité exemple: vision en robotique pas aussi facile que ca

Activité perceptive Interprétation des messages sensoriels 4 Activité perceptive Interprétation des messages sensoriels Pour acquérir une connaissance du milieu, de ses actions organise en un tout cohérent et significatif l’ensemble des informations exemple activite perceptive : visu permet de savoir si un objet est à porté de main qd on veut le saisir exemple organisation visuelle : vision de stereogramme, d'images complexe, meme si jamais vue

Exemple Perception : phénomène dynamique 5 Exemple Escher joue avec nos attentes ce qui nous incite a voir tout d'abord une image cohérente la perception est (parfois) <> realite car modifiee par des connaissances acquises ou par la maniere de traiter l'info sensorielle. Perception : phénomène dynamique analyse sens +  connaissances

Sens Vision Toucher Audition Goût Odorat + fonction kinesthésique 6 Sens Système nerveux stimuli réponse récepteurs effecteurs environnement environnement Vision Toucher Audition Goût Odorat + fonction kinesthésique vision seul moyen qu'a l'homme de localisation dans l'espace extra corporel fonction kinesthésique renseigne l'individu sur les positions et mouvements de son corps. ---- sensation <> perception sensation = phénomène physique (réaction nerveuse à la présence d'énergie) = processus par lequel une info de l'environnement externe est transmise au cerveau. perception = expérience subjective du sujet associé à cette sensation (ie recherche dynamique pour une meilleure interprétation possible).

Fonction kinesthésique 7 Fonction kinesthésique Infos fournies par les capteurs proprioceptifs Donne les postures du corps Permet de contrôler l’équilibre les capteurs proprioceptifs = capteurs mécanique de la peau, des muscles, des tendons, des articulations, capteurs gravito-inertiels de l'oreille interne. posture entrainant un blocage ischémique (on en sent plus ses jambes), on ne peut plus marcher contrôler l’équilibre = debout (gravité), vélo, ski, etc (experience sur tendons musculaires -> vibration 100 hz -> sensation de mouvement)

Audition sens multidirectionnel fonction de signalisation 8 Audition sens multidirectionnel fonction de signalisation fonction esthétique: la musique fonction sociale: la langage

Toucher Le contact de la peau la pression sur la peau 9 Toucher Le contact de la peau la pression sur la peau le mouvement du contact sur la peau la température perçue par la peau le façonnement en trois dimensions des objets touchés etc... Certains endroits sur le corps ont une plus grande acuité: main, pouce, doigts, lèvre supérieure, nez, joues Dans un environnement naturel, le toucher est une action et une exploration dirigée sur les objets... et non pas seulement des sensations passives d'objets entrant en contact avec notre peau (brrr). Le mouvement est aussi important qu'en vision et on peut facilement savoir si le mouvement vient de notre corps ou de l'objet L'intention, le but est aussi important dans le toucher actif. C'est dans le but d'identifier la nature de l'objet que les doigts vont l'explorer en tout sens. Plus de récepteurs sont alors utilisés (dans les joints et tendons) que dans le toucher passif. Utilisation du toucher actif pour identifier des objets perception haptique: perception tactile d'objets tridimensionnels

Fonction visuelle Iris Pupille Cornée Cristallin Fovéa Point aveugle 10 oeil en mouvement permanent : saccade, A/R rapide (4 a 5 fois par secondes) L'iris. Il détermine la couleur de l'oeil et contient les muscles permettant la dilatation ou le rétrécissement de la pupille. La pupille. Elle détermine la quantité de lumière entrant dans l'oeil. La taille de l'ouverture dépend de la lumière atteignant le fond de l'oeil, de l'attention, etc. La cornée. Elle réfracte la lumière entrant dans l'oeil pour permettre la formation d'une image sur le fond de la rétine (lentille non ajustable). Assure une première convergence des rayons lumineux. Le cristallin. Il réfracte la lumière entrant dans l'oeil pour permettre la formation d'une image sur le fond de la rétine, fonction de lentille biconvexe, dont la courbure varie pour focaliser a differents niveaux (= accomadation) La fovéa. la retine est dans le fond de l'oeil (= tissu systeme nerveux) composée de photo recepteurs (cones, batonnets et premiers neurones de traitement). Partie centrale de l'oeil où la résolution (nombre de cellules) est la plus élevée. Le point aveugle. Point de départ du nerf optique. Aucun récepteur ne se trouve à cet endroit Fonction visuelle Iris Pupille Cornée Cristallin Fovéa Point aveugle

Fovéa Centre de l ’œil = macula Centre de la macula = fovéa 11 Fovéa Centre de l ’œil = macula Centre de la macula = fovéa Cellules photo-réceptrices sensibles spécifiquement à des longueurs d’onde: cônes bâtonnets acuité visuelle focntion du nbr de photorecepteurs, la retine en est tapisse. Au centre se trouve la macula, beaucoup de cellules, au centre de la macule, il y a la fovea, ou il y a encore plus de cellules, 1.5 mm de diametre Les cellules photo-réceptrices transforment la lumière en influx nerveux. si un meme stimulus est envoyé en permanence, la cellule arrete d'emettre (saturation) => battement de cils, mouvements des yeux (battements augmente qd nous devons etre plus vigilants)., qui évitent aussi le pt aveugle. Une cellules photo-réceptrice contient un seul type de pigment. cones : 7 millions, vision des couleurs, surtout centrés au niveau de la fovea (10%), 3 types de cones (R,V,B) batonnets : 120 millions, vision noir et blanc densite aussi importante autour de la fovea (7 mm de la fovea), 20 batonnets pour 1 cône ailleurs, vision des constrastes et faible luminance. + sensible que cone, mais vision moins detaillee.

Spectre électromagnétique 12 Spectre électromagnétique perception de la couleur est relative. on est sensible aux petites différences, surtout sur des grandes surfaces (-> IL faut bcq de couleurs sur les systemes) on est pas sensible aux valeurs absolues donc on ne peut utiliser que moins de 10 couleurs à la fois (si on mets deux rouges, il y aura confusion)

Color Models HVS model Hue - what people think of color Value - light/dark, ranges black<-->white Saturation - intensity, ranges hue<-->gray white Value Hue Saturation black

Color Categories Are there certain canonical colors? Post & Greene ‘86 had people name different colors on a monitor Pictured are ones with > 75% commonality

Luminance Important for fg-bg colors to differ in brightness Hello, here is some text. Can you read what it says? Hello, here is some text. Can you read what it says? Hello, here is some text. Can you read what it says? Hello, here is some text. Can you read what it says? Hello, here is some text. Can you read what it says? Hello, here is some text. Can you read what it says?

Color for Categories Can different colors be used for categories of nominal variables? Yes Ware’s suggestion: 12 colors red, green, yellow, blue, black, white, pink, cyan, gray, orange, brown, purple Fréderic Vernier suggestion : 6 hues + black-gray-white Red, yellow, blue, cyan, green, magenta Think to LCD screnn !

Color for Sequences Can you order these (low->hi)

Possible Color Sequences Gray scale Full spectral scale Single sequence part spectral scale Single sequence single hue scale Double-ended multiple hue scale

Color Purposes Call attention to specific data Increase appeal, memorability Increase number of dimensions for encoding data Example, Ware and Beatty ‘88 x,y - variables 1 & 2 amount of r,g,b - variables 3, 4, & 5

Using Color Modesty! Less is more Use blue in large regions, not thin lines Use red and green in the center of the field of view (edges of retina not sensitive to these) Use black, white, yellow in periphery Use adjacent colors that vary in hue & value

Using Color Do not use adjacent colors that vary in amount of blue Don’t use high saturation, spectrally extreme colors together (causes after images) Use color for grouping and search Beware effects from adjacent color regions (my old house - example)

Compositions difficiles 22 Compositions difficiles Magenta Bleu Compuserve's WinCim 2.0 Microsoft Word Compuserve's WinCim 2.0 : trop de couleur, inesthétique, distayante, confuse Word : moins de couleurs, plus adaptées, plus basé sur la forme (the judicious use of color is less likely to give rise to unintended interpretation based on the user's personal and cultural color associations) PROBLEME DE CHOIX DES COULEURS Easy CD creator : icone quasi identique avec surtout la fleche rouge en cas de succes et la crois rouge en cas d'echec : quand la fenetre apparait,on croit toujours qu'il y a eu un probleme, quelque soit l'icone (confusion) PROBLEME DE SEMANTIQUE DES COULEURS exemple Web : concordance des couleurs pour se repérer (FRAME ET ONGLETS DANS LES PAGES WEB) -> COULEURS UTILISEES POUR D'AUTRES FONCTIONS (SEMANTIQUES). mais il faut des codes de couleurs (8 codes couleurs max).

Perception de la brillance 23 Perception de la brillance Contraste = différence de luminance contraste faible = lecture difficile contraste fort = gêne Le système visuel accentue les contrastes seuil de perception : intensite de la lumiere et espace temporel défini. (sur une surface donnee) ensemble de cellules = affinement de la detection, detection de contours accomodation permet d'adapter la focalisation et la sensibilite des recepteurs retiniens aux conditions de lumière predominantes. Deux solutions doivent varier en sel de 8% lumières intensité 8% objets poids 2% sons intensité 5% sons fréquence 0.3%

Luminance/Brightness Measured amount of light coming from some place Brightness Perceived amount of light coming from source

Different Brightness ?

Different Brightness ?

Brightness Perceived brightness is non-linear function of amount of light emitted by source Typically a power function S = aIn S - sensation I - intensity Very different on screen versus paper

Grayscale Probably not best way to encode data because of contrast issues Surface orientation and surroundings matter a great deal Luminance channel of visual system is so fundamental to so much of perception We can get by without color discrimination, but not luminance

Problème de contraste Apple's QuickTime 4.0 Player 29 Problème de contraste Apple's QuickTime 4.0 Player IBM RealCD (IBM's User Interface Architecture and Design Group) par principe ET 60 ans : 1/3 de lumiere qui filtre / 20 ans Pas de gris/ris -> FATIGUE DE LA VUE ! la petite pomme en bas a gauche de l'image de droite n'est pas un bouton ! contrairement aux autres (bouton play, volume et les 3 petites barres sous le bouton play qui en sont).

Key Perceptual Properties Brightness Color Texture Shape

Perception de la profondeur 31 Perception de la profondeur Image formée au niveau de la rétine est bi-dimensionnelle perception de la 3ème dimension indices monoculaires indices binoculaires

Indices monoculaires Indices picturaux 32 Indices monoculaires Indices picturaux la taille relative des objets l’intensité lumineuse l’ombrage sur l’objet l’interposition la hauteur du champ visuel le gradient de texture la perspective linéaire la parallaxe du mouvement Indice non pictural : l'accommodation indices picturaux = proprietes spatiales contenues dans l'image elle meme (utilises par les peintres/dessinateurs depuis la renaissance). * objet donnée éloigné = image plus petite au niveau de la retine. + sensible si : objet connu objet répété sur la scéne plusieurs fois a differents echelles * Les objets ayant une intensité lumineuse élevée paraissent plus proche que les objets ayant une intensité lumineuse plus faible. * ombrage sur l'objet fonction de l'orientation de l'objet/source lummineuse permet de discriminer en particulier les formes convexes des formes concaves * L'objet qui se trouve plus haut dans le champ visuel est perçu comme étant plus éloigné que l'objet qui se trouve plus bas dans le champ visuel. * le gradient de texture correspond a la varaition de densité de la texture (ou du grain) de l'objet avec la profondeur * perspective linéaire : convergence des lignes paralleles * la parallaxe du mouvement: Si un observateur se déplace ou bouge la tête, l'image d'un objet proche se déplace plus rapidement sur la rétine que l'image d'un objet éloigné. * l'accomodation : Le cristallin modifie sa courbure avec l'éloignement des objets afin que la projection de leur image s'effectue exactement au niveau de la rétine. Le degré de courbure est contrôlé par un ensemble de muscles. Lorsque ces muscles sont activés, le cerveau reçoit une information en retour le renseignant sur l'amplitude de la variation et, donc indirectement, sur la distance à laquelle se trouve l'objet dont l'image se projette sur la rétine.

33 Exemple d’ombrage eclairage par en dessous : nous supposons traditionnellement que l'eclairage vient d'en haut, donc ce qui est eclairé par au dessus parait comme une bosse, et par en dessous comme un trou. Mais en fait : Ramachandran (68) : le systeme visuel fait l'hypothese simplificatrice que tous les elements d'une scene partagent une source lumineuse commune.

Problèmes de perception 3D 34 Problèmes de perception 3D Pirates: Quest for the seas Pirates : couleurs codées en dur dans le programme, difficile à lire, effet 3D sur le texte rend les choses plus difficile.

Indices binoculaires La disparité rétinienne la convergence oculaire 35 Indices binoculaires La disparité rétinienne la convergence oculaire 200 degres de champ de vision La région du champ visuel accessible simultanément par les deux yeux et donnant lieu à la vision stéréoscopique est de 120° de large par 135° de haut. Il reste donc un angle de 40° de chaque côté qui demeure insensible au relief. Le seuil stéréoscopique pour la discrimination entre une distance d'environ 3 kilomètres avec l'infini (montagnes lointaines) ou de résoudre la profondeur d'un objet de 100 microns (comme un ovule humain) à 10 cm (Wandell, 1995). * yeux a distance donc image reuc legerement differente, En fusionnant les deux images, le cerveau recueille des informations sur la distance à laquelle se trouve un objet et peut reconstituer sa troisième dimension (profondeur). (test du stylo : un oeil ouvert, stylo dans l'axe d'un objet, qui n'est pas le meme qu'avec l'autre oeil) * convergence : Les yeux sont mobiles et peuvent soit se déplacer dans la même direction (saccade oculaire) soit converger sur un même point de l'espace (convergence oculaire). Lorsqu'on regarde un objet situé à 10 mètres, la ligne de vision des deux yeux est presque parallèle. Quand l'objet s'approche, les deux yeux tournent progressivement vers l'intérieur. L'angle formé par les deux yeux permet au cerveau d'évaluer la distance à laquelle se trouve l'objet. a l'infini les yeux regardent sur des axes paralleles. +mouvement de la tete (scrutation) construction d'un représentation : niveau cognitif niveau 2.5 D: orientation et profondeur des surfaces exterieures niveau 3D : integration de la forme et de l'orientation pour constuire des objets 3D cohérents.

La perception du mouvement 36 La perception du mouvement Le mouvement absolu Le mouvement relatif Le mouvement apparent MA : on peut voir un objet se déplacer, meme si il n'y a aucuncontexte autour. Mais il y a des seuils (fct de la luminance de l'objet, de la duree d'exposition, etc) MR : contexte statique autour de l'objet.seuil de detection 10x inferieur au mouvement absolu. (= perception illusoire des elements mobiles et immobiles, d'ou la possibilite de voir des nuages fixes et lune se deplacer, etc) MApp : si l'on presente l'objet succesivement a deux endroits differents, l'objet est percu comme s'etant deplace. Cette perception de mouvement n'apparait que si 'intervalle est < 150ms entre deux stimuli. exemple : avec eclairage stromboscopique, au cinema, etc...

Problèmes d’animation 37 Problèmes d’animation Mouvement relatif et apparent Drawing Board LT Drawing Board LT : le probleme est que la barre indique la progression de la copie du fichier, il y en a qq centaines, dont elle clignote rapidement d'un fichier à l'autre, très troublant et ne donne pas du tout l'info essentielle : ou en est-on de l'installation totale du programme. ANIMATION / MOTRICITE : - boutons de rotation dans le mauvais sens. - baisser une manette pour augmenter une valeur etc.

L’organisation perceptive 38 L’organisation perceptive Loi de proximité Loi de clôture Loi de continuité Loi de similitude tendance du cerveau a tout organiser. loi de proximite : Les éléments sont perçus comme appartenant à une même figure si ils sont proches. loi de clôture : Un stimulus incomplet ou non fermé tend à être perçu comme fermé et complet. exemple : on voit plutot un cercle que 4 lignes courbes Loi de continuité : Les éléments se trouvant dans la même continuité spatiale (ligne droite ou courbe) sont perçus comme appartenant à une même figure. -> ligne continues et courbes fonctionnent mieux Loi de similitude Les éléments similaires sont perçus comme appartenant à une même figure. (attention : PROXIMITE d'OBJECTS, EFFETS INDUITS, etc...) Pour cette raison, dans un texte imprimé, l'usage des espaces blancs et des interlignes revêt une grande importance: la structure des paragraphes, et donc la cohérence logique du texte, peut disparaître complètement si les interlignes sont inadéquats.

L’organisation perceptive (2) 39 L’organisation perceptive (2) Loi de destin commun Loi de taille relative Loi de symétrie Loi de destin commun Les éléments qui se déplacent ensemble sont perçus comme appartenant à une même figure. Loi de taille relative Si la scène visuelle comprend des éléments de tailles différentes, les petits éléments sont perçus comme appartenant à une figure tandis que les grands éléments sont perçus comme appartenant au fond. Et on ne voit que la croix noire et pas la croix blanche -> préférer les orientations horizontales et verticales Loi de symétrie Les éléments disposés symétriquement sont perçus comme appartenant à une même figure => Ces lois renvoient en fait à des données élémentaires de la perception visuelle : 1. La matière est cohésive, donc les éléments qui sont proches appartiennent vraisemblablement à la même matière (donc même objet). 2. L'interruption d'une forme simple, d'une ligne ou d'une courbe est en général causée par un objet plus proche. 3. Les éléments similaires appartiennent en général au même objet car un objet se caractérise par une texture régulière. => mais comment le cerveau traite l'info pour donner une perception cohérente de la scène ?

Traitement global de la forme 40 Traitement global de la forme traitement global de la forme, son identification ne nécessite pas le traitement des éléments constitutifs = Gestalt (psychologue allemand du début de siècle) "le tout est different de la somme des parties" perception visuelle <> image mais traitement d'info => ne pas induire des réponses non appropriée NE PAS CREER D'ILLUSIONS PERCEPTIVES decodage/comprehension : on reconnait le chien => on cree des prototypes, des proto de formes de couleurs, etc... dependance CULTURELLE.

Figure et Fond 41 - figure de gauche ambigue (vase de Rubin) - figure de droite pas ambigue : difficile de voir une forme blanche orientation (vert/hor) symmétrie espace blanc/noir : figure petite / fond figure entourée à l'arriere plan contribuent a la figure qui apparait.

Eléments de diagramme (1) 42 Eléments de diagramme (1) les diagrammes sont un bon exemple de shémas qui sont à mi chemin entre conventions et perception. ex : style de nomage sous forme de label codé (couleur) etc d'un apprentissage plus ou moins aisé et à l'opposé des éléments qui utilisent la perception. dexu exemples de grammaire ici : - les diagrammes de noeuds reliés - les cartes géographiques (cartes en couches) -> utilisation des lois de la gestalt, pas d'ambiguités, etc... Extrait de Information Visualization: Perception for Design, Colin Ware, éd. Morgan-Kaufmann

Eléments de diagramme (2) 43 Eléments de diagramme (2)

Le principe de monosémie 44 Le principe de monosémie Faire correspondre à chaque variable cognitive (élément d'information, données ou relation) une et une seule variable visuelle (couleur, forme, etc.): si dans une carte de géographie le bleu représente l'eau (les cours d'eau, la mer, l'océan, etc.), il ne faut plus utiliser cette couleur pour représenter un autre élément d'information.

Le principe de l'effet proportionnel 45 Le principe de l'effet proportionnel Les données doivent être traduites sous une forme visuelle dont les variations sont interprétables en fonction des valeurs propres des données Valeur quantitative forme gradient les "camemberts" ou les histogrammes sont une bonne illustration de ce principe; de même l'utilisation la variation d'intensité d'une même couleur pour traduire un phénomène progressif (plus le bleu est intense, plus la profondeur de l'eau est grande).

Le principe du moindre coût 46 Le principe du moindre coût toujours opter pour la représentation la plus économique et la plus simple; la compréhension et la communication obéissent spontanément à la loi du moindre effort.

Le principe de simplification 47 Le principe de simplification les dessins figuratifs et les illustrations sont plus lisibles s'ils sont simplifiés le critère de pertinence n'est pas le réalisme de la représentation mais bien la reconnaissance de l'objet représenté. De ce point de vue un dessin est souvent plus efficace qu'une photographie qui, réaliste, ne permet pas de sélectionner l'information pertinente; de même une représentation est plus lisible en noir et blanc qu'en couleurs sauf si celles-ci sont l'unique façon de représenter l'information pertinente.

Le principe de familiarisation 48 Le principe de familiarisation Préférable d'utiliser des pictogrammes (modèles graphiques normalisés), des symboles et des conventions dont l'usage s'est déjà répandu. Les composantes culturelles ou socioculturelles sont dans cette perspective très importantes.

Eléments de cartographie (1) 49 Eléments de cartographie (1)

Eléments de cartographie (1) 50 Eléments de cartographie (1)

51 Cartographie http://cartographie.dessciences-po.fr

52 Sémiologie Graphique La communication graphique se fonde sur des règles différentes de la communication linguistique L’efficacité de la transmission visuelle n’est bien réalisée cependant que si le message a été préalablement codé en respectant un certain nombre de règles assez strictes de la communication par les moyens graphiques. On appelle sémiologie graphique l’ensemble des règles qui permettent l’utilisation d’un système graphique de signes pour la transmission d’une information La sémiologie graphique est une discipline qui s'occupe : de la transcription, dans le système graphique d'un signe, d'un ensemble de données ; du traitement de ces données afin de faire apparaître l'information d'ensemble recherchée; de la construction d'images les mieux adaptées à communiquer cette information. « la perception visuelle dispose de trois variables sensibles : la variation des taches et les deux dimensions du plan, et ceci, hors du temps. Les systèmes destinés à l’œil sont d’abord spatiaux et atemporels. D’où leur propriété essentielle : dans un instant de perception, les systèmes linéaires ne nous communiquent qu’un seul son ou signe, tandis que les systèmes spatiaux, dont la graphique, nous communiquent dans le même instant les relations des trois variables. Utiliser au mieux cette puissance considérable de la vision dans le cadre d’un raisonnement logique, tel est l’objet de la graphique, niveau monosémique de la perception spatiale.» (Bertin, 1999, p.7) La communication graphique se fonde sur des règles différentes de la communication linguistique : la première transmet plusieurs informations en même temps, alors que la seconde trouve sa pertinence dans la succession et la linéarité de la langue. Cette caractéristique de la graphique implique, selon M. Béguin et D. Pumain, que « cette efficacité de la transmission visuelle n’est bien réalisée cependant que si le message a été préalablement codé en respectant un certain nombre de règles assez strictes de la communication par les moyens graphiques. On appelle sémiologie graphique l’ensemble des règles qui permettent l’utilisation d’un système graphique de signes pour la transmission d’une information. » (Béguin et Pumain, 2003, p.40). Au sein de la géographie, la sémiologie graphique a trouvé un champ d’application privilégié dans les processus d’élaboration d’un des outils fondamentaux de la géographie : la carte et, par extension, à l’ensemble des techniques qui permettent sa production (SIG et télédétection).

53 Variables visuelles les variables ne possèdent pas la même aptitude à exprimer les mêmes informations. Tailles : variation quantitatives. Forme : identité de l’objet Variation intensité : relation d’ordre Couleurs : identité, différences, culturel, sens Grains (trames) = {formes, taille}, différences relatives Orientation : exprime une différence Le choix judicieux des variables visuelles est un des éléments qui contribue non seulement à la lisibilité du document mais aussi à son intelligibilité. Les informations à transmettre peuvent appartenir à trois types généraux: 1. les informations différentielles: une nomenclature d'objets, de biens de productions, de pays, etc.; 2. les informations ordonnées: les périodes géologiques, l'ordre chronologique, etc. ; 3. les informations quantitatives: des mesures, des proportions, etc. Or, toutes les variables ne possèdent pas la même aptitude à exprimer les mêmes informations. La couleur ou la forme, par exemple, sont bien incapables de traduire des rapports quantitatifs alors qu'elles expriment parfaitement les différences. définir le type d'information vous désirez communiquer vous permet de choisir la variable visuelle la plus adéquate. Vous pourrez choisir parmi les variables suivantes, classiquement reconnues comme pertinentes Les tailles: la variation de taille permet de traduire parfaitement les variations quantitatives. Les formes: elles expriment relativement bien l'identité de l'objet à représenter et donc, par relation, les différences; qu'il s'agisse de pictogrammes ou de formes fondamentales (le carré, le cercle, etc.), leur lisibilité est souvent plus grande que celle des dessins réalistes. Les valeurs: la variation de valeur d'une couleur est une variation d'intensité lumineuse du plus sombre au plus clair, ou inversement; elle traduit une relation d'ordre et des différences relatives (relation quantitative). les couleurs: comme les formes, les couleurs traduisent des différences mais ne peuvent cependant les ordonner entre elles; elles sont de plus chargées de significations culturelles et psychologiques. Les grains: ces éléments constitutifs des trames combinent déjà plusieurs variables (formes, taille) et traduisent une relation d'ordre et des différences relatives (relation quantitative). L'orientation: permet de positionner un signe par rapport aux deux axes du graphique; elle exprime les différences et gagne en efficacité en combinant les variables de grains et de valeur.

Monde perçu et monde réel 54 Monde perçu et monde réel Constance perceptive Ambiguïtés perceptives Illusion perceptive Le monde perçu n'est pas exactement le monde qui se projette sur le fond de la rétine. Le cerveau humain extrait donc des invariants à partir de l'image rétinienne qui lui permettent d'avoir une perception stable du monde. obn reconnait toutes les formes d'une lettre qu'on identifie comme la lettre 'A' -> traitemetn de la forme + mecanisme congitifs (appariement, detection de forme, etc) Grace aux études sur la perception, on a mis en évidence : Constance perceptive Ambiguïtés perceptives Illusion perceptive

Constance perceptive Propriétés invariantes des objets perçus: 55 Constance perceptive Constance perceptive: Les propriétés des objets perçus demeurent relativement invariantes en dépit des nombreuses variations que ces objets subissent La constance perceptive de la forme : Quelle que soit son orientation, un objet semble avoir toujours la même forme bien que sa projection sur la rétine varie considérablement. La constance perceptive de la taille : Malgré le fait que l'image rétinienne d'un objet placé à 100 mètres soit la moitié de l'image rétinienne du même objet placé à 50 mètres, nous percevons les deux objets comme étant un objet unique caractérisé par une taille unique. Nous ne voyons pas l'objet rapetisser ou s'agrandir. La constance perceptive de la luminosité : Malgré les variations dans l'intensité lumineuse (entre le midi et le soir par exemple), la luminosité des objets semblent rester constante. exemple : un cygne blanc errant sur un lac ne devient pas instantanément gris lorsqu'un nuage voile soudainement le soleil. Pourtant, la couleur blanche dépend de l'intensité lumineuse. Un objet blanc est davantage blanc quand l'intensité lumineuse augmente, et davantage gris quand l'intensité lumineuse diminue. Cette constance est sans doute liée au fait qu'on évalue la luminosité d'un objet d'un point de vue relatif. Si l'éclairage diminue, tous les objets sont affectés par cette diminution mais les intensités relatives sont conservées. La constance perceptive de la couleur Selon la source d'éclairage utilisée, la lumière reflétée par les objets peut avoir des caractéristiques différentes. exemple : la lumière artificielle contient davantage de rayon lumineux de longueur d'onde élevée (rouge) que de rayon lumineux de longueur d'onde basse (bleu). Pourtant, une feuille blanche sous un éclairage naturel ne parait pas rouge-orangé sous un éclairage artificiel. Comme précédemment, ce phénomène s'explique par le fait que l'on évalue la couleur d'un objet d'un point de vue relatif. Si la composition de l'éclairage varie, tous les objets sont affectés par cette variation mais les couleurs relatives sont conservées. Propriétés invariantes des objets perçus: constance perceptive de la forme constance perceptive de la taille constance perceptive de la luminosité constance perceptive de la couleur

Constance et consistance 56 Constance et consistance « consistency makes the interface familiar and predictable » (The Windows User Interface Guidelines for Software Design, Microsoft Press) Paint Visual Basic 5.0 WebZip : l'icone de gauche n'est pas un CONTROLE (contrairement a sa forme qui suggere l'acces a une aide). l'image de droite est un control, mais fait avec une bitmap, difficilement identifiable en tant que tel, et qui plus est, rien ne se passe lorsque le pointeur passe sur l'objet. WebZip

Les Ambiguïtés perceptives 57 Les Ambiguïtés perceptives Fonction : des connaissances des attentes du contexte A : hexagone ou cube B: cube vue de dessous ou de dessus Rock, Hall et Davis (1994) ont montré que la perception de la réversibilité d'une figure n'apparaît que si le sujet sait au préalable que la figure est réversible. => Ce résultat démontre qu'une explication purement physiologique de ce phénomène n'est pas envisageable. contexte : de ce que l'on a vu avant. Hochberg et Brooks (96) : vision 2D ou 3D d'une figure liées à sa "complexité" : plus une figure contient d'angles, plus elle est bidimensionnellement complexe, et plus elle a de chance d'être vu comme la représentation d'un objet simple, tridimensionnel. ( + nbr de lignes continues, + nbr d'angle de taille identiques -> + un pattern est complexe, discontinu et assymétrique, plus il y a de chance qu'on le voit en 3d).

Problème d’ambiguïté Zoc (envoi de fichier) Send 58 Problème d’ambiguïté Zoc (envoi de fichier) Send Send without carriage returns Send with quotes Send with CIS quotes sens des 4 premiers boutons : - Send - Send without carriage returns - Send with quotes - Send with CIS quotes

Les illusions perceptives 59 Les illusions perceptives Illusions géométriques Distorsion de la réalité non-concordance entre notre perception et notre représentation cognitive du même stimulus physique. Illusion de Müller Lyer, de Ponzo, de Titchener explication : - lié à la nature des réponses des cellules rétiniennes ou - lié à nos connaissances sur la perspective linéaire

Les illusions perceptives (2) 60 Les illusions perceptives (2) Figures paradoxales Figures illusoires l'escalier de Penrose figure impossible dans son ensemble (vue 3D) car ne respecte pas les règles de la perspective linéaire. (conflit loi de la Forme (Gestalt) et perspective) figures de Kanizsa la figure n'existe pas.

Related Disciplines Psychophysics Cognitive psychology Applying methods of physics to measuring human perceptual systems How fast must light flicker until we perceive it as constant? What change in brightness can we perceive? Cognitive psychology Understanding how people think, here, how it relates to perception

Perceptual Processing Seek to better understand visual perception and visual information processing Multiple theories or models exist Need to understand physiology and cognitive psychology

One (simple) Model Two stage process Parallel extraction of low-level properties of scene Sequential goal-directed processing Stage 1 Stage 2 Early, parallel detection of color, texture, shape, spatial attributes Serial processing of object identification (using memory) and spatial layout, action Ware 2000

Stage 1 - Low-level, Parallel Neurons in eye & brain responsible for different kinds of information Orientation, color, texture, movement, etc. Arrays of neurons work in parallel Occurs “automatically” Rapid Information is transitory, briefly held in iconic store Bottom-up data-driven model of processing Often called “pre-attentive” processing

Stage 2 - Sequential, Goal-Directed Splits into subsystems for object recognition and for interacting with environment Increasing evidence supports independence of systems for symbolic object manipulation and for locomotion & action First subsystem then interfaces to verbal linguistic portion of brain, second interfaces to motor systems that control muscle movements

Stage 2 Attributes Slow serial processing Involves working and long-term memory More emphasis on arbitrary aspects of symbols Top-down processing

Preattentive Processing How does human visual system analyze images? Some things seem to be done preattentively, without the need for focused attention Generally less than 200-250 msecs (eye movements take 200 msecs) Seems to be done in parallel by low-level vision system

How Many 3’s? 1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686

How Many 3’s? 1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686

What Kinds of Tasks? Target detection Boundary detection Counting Is something there? Boundary detection Can the elements be grouped? Counting How many elements of a certain type are present?

Example Determine if a red circle is present (2 sides of the room)

Hue Can be done rapidly (preattentively) by people Surrounding objects called “distractors”

Example Determine if a red circle is present

Shape Can be done preattentively by people

Example Determine if a red circle is present

Hue and Shape Cannot be done preattentively Must perform a sequential search Conjuction of features (shape and hue) causes it

Example Is there a boundary in the display?

Fill and Shape Left can be done preattentively since each group contains one unique feature Right cannot (there is a boundary!) since the two features are mixed (fill and shape)

Example Is there a boundary in the display?

Hue versus Shape Left: Boundary detected preattentively based on hue regardless of shape Right: Cannot do mixed color shapes preattentively

Example Is there a boundary?

Hue versus brightness Left: Varying brightness seems to interfere Right: Boundary based on brightness can be done preattentively

Caractéristique pré attentives 83 Caractéristique pré attentives http://www.csc.ncsu.edu/faculty/healey/PP/index.html Perception préattentive : théorie •Notre système visuel de bas niveau (25 millions de cellules) fait de la reconnaissance de motif en parallèle en permanence •Les caractéristiques préattentivessont reconnues à ce niveau •Les autres nécessitent un parcours séquentiel ! •On a parfois besoin de données visuelles non préattentives –Labels/étiquettes sur les données –Représentations traditionnelles acceptables par les utilisateurs novices •Excellentes théories psychologiques –Information Visualization: Perception for Design de Colin Ware

Conclusion Vision Bas niveau Générique 84 Conclusion Vision Bas niveau Générique L’information visuelle est traitée ne pas créer d’illusions perceptives test pilotes : vision diurne + stereoscopie

Ergonomie des interfaces 85 Ergonomie des interfaces Étroitement liée à la psychologie cognitive (human factors) Les règles évoluent avec les systèmes informatiques Ne pas augmenter inutilement la charge cognitive de l’utilisateur

Evaluation Evaluation pour la conception, 86 Evaluation Evaluation pour la conception, Evaluation pour la remédiation ... IHM Compréhension de la manipulation de l ’objet Usage dans l'ergonomie, teste les interfaces faites = remédiation mieux de le faire des la conception mais on gere les erreurs plus qu'on ne gere la creation. autre voie : ergonomie au niveau de la creation (mais remets en cause les methodes, qu'est ce qu'on peut faire pour aider à créer. cf ergonomie cognitive). les deux approches sont bonnes.

Evaluation Orienter action Orienter signification 87 on essaye de faire des interfaces liées à l'action ("j"agis sur..") mais la signification est liés à l'action -> il faut comprendre si on veut agir => il faut faire les deux. (ie les gens ne font pas que de l'action dans leur activité). - connaitre la signification de l'action - connaitre le sequencement de l'action (idée de la tache qui n'est pas qu'une sequence d'action, toujours dans l'idee de l'ergonomuie cognitive)

Critères ergonomiques 88 Critères ergonomiques Aide à l ’évaluation des interfaces utilisateurs 8 critères (D. Scapin, INRIA) 8 critère de Scapin ou les 5 règles de Ban Schneiderman ou les 7 règles d'or de Joëlle Coutaz

Critères ergonomiques 89 Critères ergonomiques Guidage Incitation Groupement/distinction entre items Localisation Format Feed-back immédiat Lisibilité Charge de travail Brièveté Concision Actions minimales Densité informationnelle guidage : ensemble des moyens mis en oeuvre pour conseiller, orienter, informaer et conduire l'utilisateur lors de ses interactions avec l'ordinateur (messages, alarmes, etc), y compris dans ses aspects lexicaux. objectits : - faciliter l'apprentissage du systeme - faciliter le reperage, le suivi de l'exectution - augmenter les perfs du couple H/M _____________ charge de travail : ensemble des elements de l'interface qui jouent un role dans la réduction de la charge perceptive et/ou mnséique des utilisateurs objectif : limiter les erreurs : plus la charge est lourde, plus le risuqe d'erreurs augmente.

Critères ergonomiques 90 Critères ergonomiques adaptabilité (de l'interface) Signifiance = sens + pertinance controle explicite : prise en compte par le systeme des actions explicites de l'utilisateur, controle de l'utilisateur sur le deroulement des taches. (un utilisateur accepte plus facilement un logiciel si il peut le controler) adaptabilité : capacité du systeme à prendre en compte le contexte et les préférences de l'utilisateur objectidfs: - mieux coller au modele mental de l'utilisateur - pour s'adapter à l'utilisateur, proposer plusieurs méthodes pour faire la meme tache gestion des erreurs : les moyens permettant d'éviter ou de réduire les erreurs d'une part, de les corriger lorsqu'elles surviennent. objectifs : - augmenter les performances - améliorer la satisfaction de l'utilisateur - augmenter le plaisir d'utilisation homgénéité/cohérence : manière dont les choix de conception de l'interface sont conservés pour des contextes identiques, et sont différents pour des contextes différents. objectidfs : - faciliter la mémorisation des commandes et des labels - réduction des erreurs - éviter le refus de l'utilisation - réduire le gouffre de l'execution Signifiance des codes et dénominations : adéquation entre l'objet ou l'information affichée ou entrée, et son référent, relation signifiant/signifié objectifs : - si le codage est signifiant, la mémorisation est meilleure - facilite l'incitation compatibilité : accord pouvant exister entre les caractéristiques des utilisateurs (mémoire, perceptions, habitudes, ...) et des tâches, d'une part, et l'organisation des sorties, des entrées, et du dialogue d'une application donnée a part. concerne egalement le degre de similitude entre plusieurs applications ou environements. objectifs :- facitiliter le transfert d'informations d'un contexte a l'autre - augmenter les performances. Contrôle explicite Actions explicites Contrôle utilisateur Adaptabilité Flexibilité Expérience utilisateur Gestion des erreurs Protection contre les E Qualité des messages E Correction des E Homogénéité/Cohérence Signifiance des codes et dénominations Compatibilité

Critères ergonomiques 91 Critères ergonomiques Conditions nécessaires mais non suffisantes art délicat soigner les détails mais ne pas introduire de gadgets ou x les fonctions étudier de nombreuses interfaces regard critique / piquer les bonnes idées regarder les guides et critères art délicat = faire des compromis entre différentes recommendations contradictoires en fonction de la tahce ou du public cible.

Un Logiciel doit... être adapté à l'utilisateur être adapté à la tâche 92 Un Logiciel doit... être adapté à l'utilisateur être adapté à la tâche reposer sur un langage cohérent être convivial fournir des aides à l'utilisateur o être adapté à l'utilisateur. A quel public on s'adresse. Utiliser son vocabulaire. o être adapté à la tâche. regoupés les données les plus fréquemment utilisées sur une même page écran. o reposer sur un langage cohérent. Syntaxe identique pour un même dialogue. o être conivial. l'opérateur doit pouvoit à tout moment interrompre sa tâche, le logiciel doit empêcher les fausses manoeuvre. En cas d'attente un message doit signaler que la procédure se déroule . o fournir des aides à l'utilisateur. Messages d'erreurs doivent être explicites et décrire clairement la cause de l'erreur.

Mais... 40 % des fonctions utilisées 93 Mais... 40 % des fonctions utilisées temps d’apprentissage d’un nouveau système = 6 mois outil inadéquat : utilisateur détourne les règles activités et opérations supplémentaires 2% of Toolbar & Menu Items make up to 90% of all TB & Menu usage by all users 88% of features are used by 5% or less of Office users at least once a month Au 1er janvier 2001 : 8423 user studies 63 412 parcipants 111 000 hours video 2001 : 1330 user studies 12 798 participants Une étude sur l'utilisation des logiciels menée par Senach 87 montre que les logiciels proposent de nombreuses fonctions mais seulement 40% d'entre elles sont à peu près utilisées par les utilisateurs. -> Les fonctions proposées sous exploitées sont sans interet ou d'une mise en oeuvre trop difficile ========== images encadrées = illustration = MS OFFICE ! le temps d'apprentissage d'un nouveau système est d'environ 6 mois, même chez les opérateurs confirmés -> Pour éviter de perturber l'activité de l'opérateur, il faudrait adapter le logiciel à la manière de faire le travail, au lieu du contraire. Quand à scapin (1986) il établit une typologie des comportements que développe l'opérateurs selon le degré d'inadaption de l'outil: -> Détournement des règles prévues pour l'utilisation du système informatique afin de contouner les difficultés rencontrées pour réaliser une tâche. -> Développement d'activivités compensatoires, d'opérations supllémentaires ou détoiurnées qui modifie notablement la tâche initiale et ralentit le travail.

94 Conclusion Respecter l ’homogénéité et la cohérence: de la présentation de l'information Étudier la connaissance des utilisateurs (vocabulaire, habitudes de travail, etc)