59
Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

  • Upload
    doannga

  • View
    214

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Codage Graphique de l’Information

1

Mountaz Hascoët, Université de Montpellier,

LIRMM

Page 2: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Plan• Introduction– Un peu de déconstruction pour commencer

• Workflow/dataflow– Des données à leur représentation

graphique interactive

• Variables graphiques • Couleurs–Modèles colorimétriques– Palettes– Contrastes et harmonies

Mountaz Hascoët, Univ. Montpellier 2

2

Page 3: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Arcs

Martin Dittus – Arc diagrams to visualise IRC references – source: visual complexityMartin Wattenberg – 2001 – Arc diagrams Infovis 2002

Page 4: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Arcs

Principe• Positions sur un axe • Taille des cercles• Lien

– Source/destination– Epaisseur des liens– Demi-plan– Longueur

• Ordre sur les éléments• ?• Référence

– Source parle de destination

– Quantité– Lien inverse– Aucun sens

Martin Dittus – Arc diagrams to visualise IRC referencesMartin Wattenberg – 2001 – Arc diagrams

Page 5: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Arcs

Matthias Dittrich - Source - http://www.matthiasdittrich.com/projekte/dliste/visualisations/index.html

Page 6: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

AnneauxVisualisation de la composition d’une université Australienne

• Organisation– RMIT University– College (3)– School (8 pour DSC)– Niveau– Program (210)– Course (2000)

• Sources de Financements• Passerelles (4700)

– Intra écoles– Inter écoles

• Flux d’étudiants• Bilan

– 8 dimensions interdépendantes

Andrew Dun – 2012 – College of Design and Social Context - Source - http://intensional.org/rmit_dsc/

Page 7: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Inclassable

Page 8: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Les différentes écoles

• Géographes– Jacques Bertin – Sémiologie graphique

• Statisticiens– Edward Tufte – Display of quantitative information– Leland Wilkinson – Grammar of Graphics

• Designers– David McCandless, Aaron Coblin, Manuel Lima, etc

• Psychologues– Gibson, Affordance theory– Lindsay, Norman – Human Information processing– Colin Ware – Perception for Design– Gestalt – Berlin School

• Informaticiens– Stuart Card, Jock Mackinlay, Ben Shneiderman, Robert Spence

Mountaz Hascoët, Univ. Montpellier 8

Page 9: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

WORKLOW - DATAFLOW

Des données brutes aux représentations graphiques interactives

Mountaz Hascoët, Univ. Montpellier 9

Page 10: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Des données aux graphiques (1/3)

Mounta

z H

asc

oët,

Univ

. M

ontp

elli

er

1010Ed. Chi, Data State Models, AVI 2002]

View

Visualization Abstraction

Analytical Abstraction

Value

Data Transformation

Visualization Transformati

on

Visual Mapping Transformation

Documents Textuels, Web page collections, Données d’expression

Extraction, Clustering, Filtrage

Graphes, Tables, Arbres

Codage: placement, pavage, interpolations

Objets graphiques

Opérations de rendu et transformations

Vue d’ensemble graphique

Page 11: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Des données aux graphiques (2/3)

Mountaz Hascoët, Univ. Montpellier 11

Dos Santos, S. and Brodlie, K. Gaining understanding of multivariate and multidimensional data through visualization. Computers & Graphics,

28(3):311–325. 2004.

Page 12: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Des données aux graphiques (3/3)

Mountaz Hascoët, Univ. Montpellier 12

Jeffrey Heer, Stuart K. Card, and James A. Landay. prefuse: a toolkit for interactive information visualization. In CHI 2005, Human Factors in

Computing Systems, 2005.

Page 13: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

CODAGE

Variables visuelles, appariement des variables, sémiologie graphique

Mountaz Hascoët, Univ. Montpellier 13

Page 14: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Les variables visuelles – C. Ware

Mounta

z H

asc

oët,

Univ

. M

ontp

elli

er

14Grammaire visuelle des éléments visuels

Extrait de Colin Ware, Information Visualization, 2000

Page 15: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Les variables visuelles – J. Bertin

– Taille– Valeur– Orientation– Grain– Couleur– Forme

Mountaz Hascoët, Univ. Montpellier 15

Extrait de J. Bertin, Sémiologie graphique, 1967 - 2005

Page 16: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Implantation des variables visuelles

• Les trois formes d’implantation visuelle– ponctuelle– linéaire– Surfacique

• Exemple– Les trois implantations de

quatres valeurs de grain

Mountaz Hascoët, Univ. Montpellier 16

Page 17: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Perception pré-attentive

« Une tâche qui s’effectue en moins de 200 à 250 ms sur un écran comportant de nombreux objets peut être considérée comme pre-attentive »

C.G. Healey

Mountaz Hascoët, Univ. Montpellier 17

Page 18: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Mountaz Hascoët, Univ. Montpellier II

18

Sélection

• Définition– Une variable graphique est dite sélective lorsqu’elle

permet d’isoler de manière pré-attentive les familles d’entités partageant la même valeur.

• Les variables sélectives:– Taille (moins de 5 tailles différentes présentes)– Valeur (moins de 5 en implantation surfacique)– Grain (moins de 5 en implantation surfacique)– Couleur (moins de 8 en implantation surfacique)– Orientation (moins de 2 en implantation linéaire)

• Les variables non sélectives:– La forme

Page 19: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Mountaz Hascoët, Univ. Montpellier II

19

Ordre

• Définition:– Une variable est dite ordonnée lorsque

différentes valeurs de cette variable peuvent être perçues comme naturellement ordonnées.

• Exemples de variables ordonnées– Taille– Grain– Valeur

Page 20: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Mountaz Hascoët, Univ. Montpellier II

20

Quantité

• Définition– Une variable est dite quantitative

lorsqu’elle permet de d’évaluer la distance entre deux de ses valeurs.

• Exemples de variables quantitatives– Taille

A B C D

1 2 3

1 2 5 10 20 50 100

Page 21: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Mountaz Hascoët, Univ. Montpellier II

21

Association

• Définition– Une variable est associative si ces

différentes valeurs ne modifient pas radicalement la visibilité des objets.

• Variables associatives– Toutes sauf taille et valeur

Page 22: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

En résumé

• Perception associative ()– Regrouper des semblables

• Perception sélective ( )– Rechercher un catégorie précise

• Perception ordonnée (O)– L’ordre géographique des taux de naissance

est-il semblable à celui des décès

• Perception quantitative (Q)– Evaluer le rapport quantitatif entre deux signes

Mountaz Hascoët, Univ. Montpellier 22

Page 23: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Exemples / Application

Mounta

z H

asc

oët,

Univ

. M

ontp

elli

er

23

Taille

Valeur

Orientation

Grain

Couleur

Forme

SélectiveQuantitativeOrdonnable

SélectiveOrdonnable

AssociativeSélective en implantation P et LAssociativeSélectiveOrdonnable

AssociativeSélective

Associative

Page 24: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

COULEURS

Modèles, Palettes, Harmonies, Contrastes

Mountaz Hascoët, Univ. Montpellier 24

Page 25: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Le phénomène physique

• Définition physique de la lumière– La lumière est issue d’une onde

électromagnétique perceptible par l’œil humain

– Deux caractérisations du spectre électromagnétique de cette onde peuvent être utiles• Corpusculaire: énergie des photons• Ondulatoire: longueur d’onde ou fréquence

Mountaz Hascoët, Univ. Montpellier 25

Page 26: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Le phénomène physique

Mounta

z H

asc

oët,

Univ

. M

ontp

elli

er

26

Page 27: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Le phénomène perçu

• Bâtonnets (rod) – Vision nocturne– Monochromatique– Faible intensité

lumineuse

• Cônes (cone)– Vision diurne– Couleur– Forte intensité

lumineuse– Trois types

• L,M,S

Mountaz Hascoët, Univ. Montpellier 27

Extrait de Dowling (1987). "The Retina: an approachable part of the brain." The Belknap Press of

Harvard University Press, Cambridge

Page 28: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Le phénomène interprété• Quelques effets célèbres:

Quel est le plus sombre ou le plus brillant: A, B, C, D ?Réponses:physique –> aucunperception physiologique – >aucun ?interprétation –> A est le plus brillant et D le plus sombre

Mountaz Hascoët, Univ. Montpellier 28

A B C D

Page 29: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Le phénomène socio-culturel

Mounta

z H

asc

oët,

Univ

. M

ontp

elli

er

29

Page 30: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Modèles

Mountaz Hascoët, Univ. Montpellier 30

Page 31: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

• Modèle de l’imprimeur– Orienté pigment

• Synthèse soustractive– Ajout de couleur conduit au noir

• Chaque pigment absorbe l’une des trois portions du spectre de la lumière visible.

• La couleur du pigment résulte des couleurs qu’il réfléchit

Modèle CMY : Cyan/Magenta/Yellow

Mountaz Hascoët, Univ. Montpellier 31

Page 32: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Modèles RVB – CIE 1920

• Modèle de l’image d’écran– Orienté émission de lumière

• Synthèse additive– l’ajout de couleurs conduit au blanc

• Chaque composante émet de la lumière dans sa longueur d’onde

• Modèle inspiré d’études de la CIE sur l’œil humain– R, V, B correspondraient aux teintes auxquelles les

récepteurs rétiniens seraient les plus sensibles

• Existe dans différentes variantes– sRVB

Mountaz Hascoët, Univ. Montpellier 32

Page 33: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Conclusion : Limites de RVB et CMY

• Représentation de l’espace colorimétrique orienté matériel

• Modèle éloigné des besoins des designers– Définition des contrastes, des harmonies– Différences significatives– Contrôle de la brillance– Contrôle de la teinte– Roue des couleurs

• Alternatives à RVB et CMY– HCB ou HSV– CIE XYZ– CIE L*U*V

Mountaz Hascoët, Univ. Montpellier 33

Page 34: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

HSB: Hue, Saturation, Brightness

• Aussi appelé HSV (V=Value)

• Hue: teinte–~ la longueur d’onde

• Saturation: pureté– À quel point la couleur est

mélangée à d’autre: • 0 -> blanc, max -> couleur

saturée ou pure (à éviter)

• Brightness / Value– Intensité lumineuse: • 0 -> noir.

– Attention: la définition de brillance n’est pas toujours la même

Mountaz Hascoët, Univ. Montpellier 34

Page 35: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Brillance, luminance, luminosité

• Chaque domaine donne ses définitions– Pas toujours cohérentes avec les autres

• Proposition– Brillance

• Intensité lumineuse perçue• ~ « Mesurable » subjectivement et contextuellement• Perspective perception/design

– Luminance• Intensité lumineuse émise ou réfléchie• ~ Mesurable objectivement• Perspective physique électronique

– Luminosité~ brillance• Très polysémique

Mountaz Hascoët, Univ. Montpellier 35

Page 36: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Modèle XYZ – CIE 1930

• Espace XYZ – C = X+Y+Z– Où Y est censé suivre la fonction

d’efficacité de l’œil• Sensibilité exacerbée sur les verts• Prend en compte perception

• Espace chromatique CIE– x = X / (X + Y + Z)– y = Y / (X + Y + Z)– Diagramme fer à cheval

• Propriétés– Les couleurs pures ou saturées

• Situées sur périphérie de la courbe sur le fer à cheval

• Longueur d’onde mentionnées en bleu

– Limite du visible ultraviolet et infrarouge• Situées sur segment de droite qui

ferme le fer à cheval

Mountaz Hascoët, Univ. Montpellier 36

Espace chromatique CIE xy

Page 37: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Espace chromatique CIE XYZ

• Spectre des couleurs visibles perceptibles avec x et y >0– Conversions avec RVB

• Représentation et comparaison de gamut– Le gamut ~ triangle dans

espace chromatique– Gamut = sous ensemble

des couleurs qu’un dispositif matériel (écran, projecteur) permet de produire

– E ~ blanc

Mountaz Hascoët, Univ. Montpellier 37

Espace chromatique CIE xy et gamut

Page 38: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Bilan espace chromatique CIE XYZ

• Aspect positif– Couvre l’espace

chromatique visible • avec seulement deux

coordonnées positives

• Aspect négatif–Modèle non uniforme• Diagramme de Mac

Adam

• Alternatives–Modèles CIELUV–Modèle CIELAB

Mountaz Hascoët, Univ. Montpellier 38

Espace chromatique CIE xy et diagramme de Mac Adam

Page 39: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Modèle CIELUV

• Trois composantes– l,u,v ou l*u*v*– l ~ brillance – u et v ~ x et y• De sorte à ce que l’espace colorimétrique

soit uniforme

• Espace colorimétrique uniforme– Le distance euclidienne en deux

couleurs représente la distance perçue

Mountaz Hascoët, Univ. Montpellier 39

Page 40: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Modèle CIELAB

• Utilise des oppositions de couleurs– Vert – Rouge (a)– Bleu – Jaune (b)

• Trois composantes l,a,b ou l*,a*,b*– l ~ brillance (idem cieluv)– a ~ distance entre vert et rouge• Min = vert (-300)• Max = rouge (299)

– b ~ distance entre bleu au jaune• Min = bleu (-300)• Max = jaune (299)

Mountaz Hascoët, Univ. Montpellier 40

Page 41: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Conclusion modèle de couleurs

• De nombreux autres modèles de couleur– En particulier pour images animées

• Comment faire de bonnes palettes de couleurs– Combien de couleurs ?– Physique -> infinité– Moniteur 24 bits -> plus de 16 Millions– Système perceptif humain -> 15

000 ? Mountaz Hascoët, Univ. Montpellier 41

Page 42: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Palettes

Mountaz Hascoët, Univ. Montpellier 42

Page 43: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Objectifs et questions

• Des palettes pour quoi faire?– Esthétique– Informatique• => codage et transmission des informations

• Comment les construire ?– Palettes adhoc• Créées par des auteurs

– Palettes génériques à création semi-automatiques• Prendre en compte les interactions entre couleurs

– Contrastes– Harmonies

• Choisir le bon nombre de couleurs– Discrimination– Catégories

Mountaz Hascoët, Univ. Montpellier 43

Page 44: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Objectifs et questions• Combien de couleurs dans une palette?– Expérience de Healey 1996

• Trouver un élément par sa couleur parmi d’autres éléments de n autres couleurs• Couleurs de même brillance• Distance entre chaque paire de couleurs choisie et fixée pour être identifiable• Nb couleurs varie : 3, 5, 7 et 9

– Résultats de l’expérience de Healey• Si nbc <= 5 : processus préattentif (ie < 200ms)

– Ne dépend ni de nb items ni des couleurs

• Si nbc = 7 ou 9 : processus plus complexe– Le choix de la couleur cible est déterminant

» Cibles vertes donnent les plus mauvais résultats

• =>Plus le nb de couleurs est élevé plus le choix des couleurs est déterminant

• Rappel– « Une tâche qui s’effectue en moins de 200 à 250 ms sur un écran

comportant de nombreux objets peut être considérée comme pre-attentive » C.G. Healey

Mountaz Hascoët, Univ. Montpellier 44

Page 45: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Conception de palettes adhoc

• Exemple de ColorBrewer (1/2)

Mountaz Hascoët, Univ. Montpellier 45

Page 46: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Principes de conception de palettesorientées codage

• Types des palettes de ColorBrewer– Données nominales

• Données qualitatives catégorisables mais non ordonnables ou pour lesquelles aucun ordre ne fait de sens

=> palettes qualitatives

– Données qualitatives ordinales• Données non numériques pour lesquelles un ou plusieurs

ordres peuvent faire du sens=> palettes séquentielles

– Données quantitatives• Données numériques => palettes divergentes

Mountaz Hascoët, Univ. Montpellier 46

Page 47: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Palettes Qualitatives

• Objectifs– contrôle des

distances entre teintes

– différentiation– Isobrillance

• Exemple– Coloration – de graphe

Mountaz Hascoët, Univ. Montpellier 47

Page 48: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Palettes séquentielles (1/2)

• Monochromatique–Min = blanc–Max = la couleur

saturée– C = Interpolation

linéaire (dans modèle XYZ ou L*a*b*) entre Min et Max

Mountaz Hascoët, Univ. Montpellier 48

Page 49: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Palettes séquentielles (2/2)

Mountaz Hascoët, Univ. Montpellier 49

• Polychromatique– Couleurs interpolées sur intervalles prédéfinis

• Du Jaune au Rouge• Du Rouge au Pourpre• Du Vert au Bleu• Du Jaune au Vert au Bleu

+– brillance décroissante

Page 50: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Palettes divergentes

Mountaz Hascoët, Univ. Montpellier 50

• Pour représenter des données numériques– Deux échelles

séquentielles concaténées• Rouge – Vert• Rouge – Violet

– Spectre complet

• Rouge - Jaune - Bleu• Rouge - Bleu

Page 51: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

HARMONIES ET CONTRASTES

Palettes génériques

Mountaz Hascoët, Univ. Montpellier 51

Page 52: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Harmonies (1/4)

• Définition– Ensemble de couleurs équilibrées ou assorties

• Harmonie de type 1– Déclinaison d’une couleur• Couleur (Hue)• Couleur+blanc – Nuance (Tint)• Couleur+gris – Ton (Tone)• Couleur+noir – Ombre (Shade)

• Harmonie de type 2–~dégradé– Principe de création:• modèle HSB • deux des composantes restent constantes (ex: S et B)• la troisième varie (ex: H)

Mountaz Hascoët, Univ. Montpellier 52

Page 53: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Harmonie (2/4)• Harmonie de type 3– Équilibre des forces– Prend en compte partiellement le contexte• Taille des surfaces colorées dans une composition

– Force d’une couleur (d’après Lyons et Moretti, 2010)• F(c) = Saturation(c) x Brillance(c) x Surface(c)• NB: d’autres définitions existent

– Valeurs de lumière établies par Goethe

– Harmonie de n couleurs c1, c2, … cn • pour tout i, j, F(ci) = F(cj)

Mountaz Hascoët, Univ. Montpellier53

Page 54: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Harmonies (3/4)

• Harmonies de type 4– Schémas théoriques construits à partir de la roue des couleurs–Multitude de schémas construits

• Définissent les relations entre couleurs• Par des relations d’angles sur la roue des couleurs• Permettent de générer toutes sortes d’harmonie par rotation du schéma

Mountaz Hascoët, Univ. Montpellier 54

Analogues Complémentaires Triade Complémentaire réparti

Page 55: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Harmonies (4/4)

• Schémas harmoniques de type 4 (suite)

Mountaz Hascoët, Univ. Montpellier 55

Rectangle Carré Triade Complémentaire réparti

Page 56: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Contrastes (1/4)

• Les sept contrastes d’Itten– Art de la Couleur, Johannes Itten– Peintre du début du 20ième siècle

• Lumière et ombre– Contraste de brillance ou, à défaut et le plus souvent

contraste de luminance

• Contraste de couleurs –Maximal entre trois couleurs primaires– Calcul possible mais controversé– Pour C1 and C2 deux couleurs définies en RGB par (r1,v1,b1)

et (r2,v2,b2) dans [0-255]3 : • d = |r1-r2| +|v1-v2|+|b1-b2| [6]

– NB: norme W3C ~ si d > 500 contraste couleur suffisant

Mountaz Hascoët, Univ. Montpellier 56

Page 57: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Contrastes (2/4)

• Contraste de température– Facile à calculer en HSB– Difficile à utiliser à bon escient

• Contraste de qualité– Qualité ~ saturation– Contraste de qualité = contraste Mat/brillant

• Contraste de quantité– Quantité ~ force de la couleur ~ valeur établie par Goethe ~

taille de la surface colorée– Valeurs de lumière établies par Goethe

– ->Dimensions des surfaces pour harmonie selon Goethe

Mountaz Hascoët, Univ. Montpellier 57

Chau

d

Froid

Jaune Orange Rouge Violet Bleu Vert9 8 6 3 4 6

Jaune Orange Rouge Violet Bleu Vert3 4 6 9 8 6

Page 58: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Contraste (3/4)

• Contraste simultané– Chaque couleur émise provoque simultanément la

perception de sa couleur opposée – Contraste simultané avec du gris ou du noir

• =>Un gris entouré d’une couleur forte est perçu dans la couleur complémentaire de la couleur qui l’entoure • Une cravate à rayure noire et rouge peut facilement paraître verte

et rouge.

– Contraste simultané entre couleurs• Deux couleurs presque complémentaires juxtaposées et

isoluminantes• Chaque couleur suggère l’autre

– Les couleurs suggérées se superposent aux couleurs émises – ~dissonance

• Effet scintillement, fatigue visuelle

Mountaz Hascoët, Univ. Montpellier 58

Page 59: Codage Graphique de l’Information - lirmm.frmountaz/Ens/Ihm/.../c5-codageCouleur.pdf · Codage Graphique de l’Information 1 Mountaz Hascoët, Université de Montpellier, LIRMM

Contraste (4/4)

• Contraste simultané (suite)– Atténuation d’un contraste simultané

• Une couleur C1 et un gris en contraste simultané• Ajouter une touche de couleur complémentaire de

C1 dans le gris

– Accentuation d’un contraste simultané• Ajouter une touche de couleur analogue au

complémentaire de C1 dans le gris

• Contraste des complémentaires– Relation de deux couleurs dont le mélange

donne le gris de ton neutre

Mountaz Hascoët, Univ. Montpellier 59