Gilles Tabart
email: tabart@lii-enac.fr

-Sylvie Athènes
email: athenes@cena.fr

Stéphane Conversy
email: stephane.conversy@enac.fr

-Jean-Luc Vinot
email: vinot@cena.fr

Conception instrumentée du rendu graphique des interfaces

Keywords: Interaction Homme Machine, rendu graphique, Design, pluridisciplinarité, couleurs, méthode de conception, évaluation HCI, graphical rendering, Design, pluri-disciplinary, colors, design method, evaluation

Nous proposons de définir une activité de conception de rendu graphique des IHM, qui vise à assurer la qualité de restitution des composants de l'image. Ignorée dans la plupart des méthodes de conception, il s'agit d'une activité à part entière, cruciale pour le succès d'un projet de conception et pour la validation des IHM critiques. Cette activité est par nature pluri-disciplinaire: exploration de solutions (design, infovis), évaluation (psychologie expérimentale), influence des technologies matérielles et logicielles (informatique), et processus de conception lui-même (design rationale, maintenance, informatique.) Dans cet article, nous détaillons l'activité de conception de rendu graphique des IHM, en identifiant notamment ses points clefs. Nous présentons également un outil qui instrumente cette conception: nous en décrivons les principales fonctionnalités, ainsi que les méthodes associées permettant l'accomplissement de cette activité. Enfin, nous discutons des apports d'un outillage de l'interdisciplinarité dans le processus de conception.

ABSTRACT. We propose to define the activity of graphical rendering design, which aims at maximizing the display quality of the image components. Overlooked in most design methods, this activity is essential for the success of a design project and for the validation of interfaces of critical systems. As such, it is pluri-disciplinary: graphical design (design, infovis), evaluation (experimental psychology), influence from hardware and software technologies (computer science), design methodology (design rationale, maintenance, computer science). In this paper, we detail the activity of graphical rendering design of HMI, by identifying its main dimensions. We also present a tool that instruments it: we describe its main functionalities, as well as the methods allowing to achieve the activity. Finally, we discuss about the benefits of inter disciplinary instrumentation during the design process.

Introduction

La conception de logiciels interactifs comporte des phases de définition du problème, de génération de solutions et d'évaluation. Durant la phase de génération de solutions, les concepteurs (en général des informaticiens et des spécialistes en « facteurs humains », comme les ergonomes) définissent l'interface graphique de l'application, en fonction de l'activité visée (figure 1). Conformément aux objectifs de conception, l'aspect de l'interface évolue d'un état d'ébauche à des représentations plus fidèles, mais souvent limitées à l'élaboration d'une représentation conceptuelle de l'IHM : composition structurelle de l'application (écrans et fenêtres, navigation…), définition des objets principaux d'affichage des informations et d'interaction (widgets, composants métiers…), définition de leurs différents états et du codage visuel correspondant, entre autres.

Pour certaines applications spécialisées -représentation et exploration de grands volumes de données multidimensionnelles -, des spécialistes de la visualisation d'informations (InfoVis) appliquent des méthodes structurées pour élaborer des représentations visuelles interactives [START_REF] Card | Information Visualization Readings in Information Visualization:Using Vision to Think[END_REF]. Ils caractérisent le type de représentation et déterminent les fonctions de transformation à appliquer entre données et variables visuelles. De plus en plus fréquemment, des designers graphiques interviennent pour créer des solutions graphiques globales de mise en forme et pour « esthétiser » les applications à forte composante marketing (web, grand-public, design produit). De façon différente, ces deux métiers portent une attention particulière au média d'affichage. L'InfoVis met en oeuvre les propriétés des variables visuelles pour réaliser un mapping contrôlé des données sur l'image de restitution. Le Design graphique met en forme des sens, « architecture » et harmonise des espaces d'expression virtuels -visuels et d'interaction (« trompe l'oeil ») -en ciblant particulièrement et précisément la qualité d'impression rendu à l'utilisateur sur le support terminal (écran).

A l'issue de cette phase de conception graphique, un ensemble de spécifications est livré aux équipes en charge du développement logiciel. Ces spécifications sont structurées par l'analyse de l'activité et très fortement orientées sur la forme par la discipline (ergonomie, graphisme, InfoVis) et les outils des rédacteurs (éditeur, format des visuels), mais aussi par leur vision a priori de l'application informatique. Les spécifications graphiques sont souvent insuffisantes pour décrire précisément les propriétés des objets d'implémentation, ce qui engendre deux problèmes majeurs lors de la phase de développement. D'une part, comme les développeurs n'ont généralement pas participé aux phases de conception et ne connaissent pas les raisons et les contraintes qui ont guidé les choix des concepteurs, ils doivent « imaginer » des solutions sans toujours maitriser les impacts en termes d'utilisabilité. D'autre part, les visuels peuvent être spécifiés à l'inverse sous la forme d'images structurées très riches mais non directement utilisables dans le code et souvent incompatibles avec les capacités graphiques réelles du système, de l'environnement de développement ou de l'affichage final sur les périphériques cibles. Ces problèmes engendrent une discontinuité dans le cycle de vie du projet et rendent difficile le portage « fin » des solutions proposées. Ils sont porteurs de risques conséquents pour l'activité, comme l'interprétation erronée de données de vol sur l'écran radar dans un système de contrôle aérien. De plus, le manque de précision des spécifications graphiques est symptomatique d'une évaluation incomplète des choix de codage des informations.

Les phases de validation des prototypes ou du produit final, mettant en oeuvre des évaluations utilisateurs, révèleront dans le meilleur des cas et au travers de problèmes d'usage les erreurs les plus « évidentes » de cette réalisation graphique. Les fortes capacités d'adaptation des utilisateurs, leur permettant de mobiliser plus de ressources cognitives dans le cadre de simulations en situation nominale, ne favorisent pas la détection de configurations pourtant « à risque ». Ces risques résultent en partie d'une insuffisante prise en compte, tout au long du cycle du projet, des choix et des interactions visuelles des propriétés graphiques mises en oeuvre, mais aussi de leur contextualisation. L'importance donnée dans l'IHM à la conception de ce frontal visuel interactif, n'empêche pas la réalisation finale d'une interface produisant un véritable « goulet d'étranglement » pour l'usage de l'application : la forte capacité des opérateurs humains (et des systèmes informatiques), est de fait limitée aux capacités d'expressivité et de « jouabilité » de la scène graphique rendue par l'affichage.

Afin de pallier ces problèmes, nous introduisons dans cet article la notion de rendu graphique des interfaces, que nous décrivons dans la section suivante. La conception du rendu graphique est par nature pluridisciplinaire, et nous décrivons brièvement dans la section 2.2 chacune des disciplines -et leurs conceptsimpliquées dans ce travail. La deuxième contribution de l'article consiste en la Figure 2 : La conception du rendu graphique des interfaces description de l'instrumentation de l'activité de conception de rendu graphique. Afin d'en illustrer les principaux aspects, nous utilisons un scénario d'activité de conception, décrit en section 3.1. Puis nous énumérons les services que doit offrir un outil instrumentant cette activité, avant de décrire un outil qui en implémente certains. Enfin, nous concluons par une discussion de l'apport de l'outil dans le support de l'interdisciplinarité.

Conception du rendu graphique des interfaces

Rendu graphique des interfaces : définition

Dans le domaine des Arts, le terme de rendu désigne l'exécution restituant fidèlement l'impression donnée par la réalité. Par extension dans les arts graphiques, ce terme désigne la qualité de restitution finale d'une reproduction graphique sur un support ; Le terme de chaîne graphique désignant, dans le domaine de l'industrie graphique, l'ensemble des professions (et non des outils) qui interviennent, de la conception à la finalisation du produit graphique, pour assurer cette qualité. En informatique, le rendu est le processus de production de l'image calculée d'une scène, composée d'éléments graphiques, sur un périphérique d'affichage. Ces éléments graphiques sont décrits par des fichiers de données ou codés par des objets et des propriétés, et mis en oeuvre au travers de langages, programmes, moteurs et matériels graphiques.

La problématique du rendu est déjà prise en compte pour un type graphique particulier, n écessitant une grande attention : le texte. Des moteurs de rendu spécialisés, associés à des directives graphiques (hints) fournies dans les fichiers de fonte, garantissent une lisibilité maximum sur des affichages à faible résolution (rendu de petites tailles ou sur écran basse résolution). Dans cet exemple du texte, nous pouvons distinguer graphiquement un élément symbolique, de sens : le caractère (la lettre latine majuscule [A]), et un élément d'impression, image du signe typographique : le glyphe (une trace réalisée quelconque d'écriture ou d'impression de ce caractère : « A », « A », « A », « A »..). Plus largement, nous pouvons reprendre la notion du « signe linguistique » qui désigne une entité formée par la réunion d'un couple signifié (concept) et signifiant (image matérielle de médiation du signe), pour poser le problème du rendu graphique comme l'existence liée de deux éléments : l'« expression » logique d'un objet visuel de signification, et son « impression », matérialisation visuelle du signe rendu par le média (pixels). Pour une application de contrôle aérien, une alarme sur un vol pourrait être caractérisée par le symbole iconique d'un triangle orange et rendue par l'affichage d'une forme rastérisée de pixels colorés, la qualité du rendu pouvant alors se mesurer par sa capacité à restituer visuellement ce symbole. Cette notion d'impression, essentielle pour comprendre le travail du designer graphique, nous permet d'étendre le concept du rendu graphique, par delà la simple production technique de l'image pixels par le système, au contexte d'affichage et jusqu'à la perception, sensation et interprétation par l'observateur de la scène visuelle.

Dans cet article, nous introduisons la notion de conception du rendu graphique des interfaces comme une phase de conception nécessaire à la réalisation d'un système interactif correct (figure 2). Alors que la conception graphique de l'IHM a pour but de construire des représentations visuelles adaptées à l'activité, la conception du rendu graphique de l'interface se préoccupe de la qualité de restitution des composants symboliques dans l'image IHM réalisée : bonne restitution perceptive (contrastes, interactions) des objets de visualisation présentés par le système graphique et efficacité de la restitution sémantique des signifiants graphiques implémentés. Cette qualité de restitution, sémiologique et sémantique, dépend tout particulièrement du choix et de la composition des objets graphiques à implémenter, de la compréhension de leurs propriétés perceptives et de leurs interactions, et du réglage fin des variables visuelles utilisées. Elle nécessite aussi la vérification expérimentale de ces choix.

Dans ce but, nous proposons de définir, pour l'informatique, les éléments d'une chaîne graphique de rendu des interfaces, à l'image de celle des industries graphiques, pour désigner l'ensemble des disciplines (spécialistes et compétences) qui interviennent de la conception à la vérification d'un produit d'interface graphique. L'instrumentation (méthodes et outils) de cette chaîne graphique de rendu a pour but de rendre efficace la conception graphique de l'interface. Intégrant les savoir-faire de plusieurs disciplines, elle inclut l'exploration de solutions possibles (infovis et design), l'intégration de connaissances sur les capacités humaines et l'évaluation expérimentale (psychologie expérimentale), l'influence des technologies matérielles et logicielles (informatique), et le processus de conception lui-même (design rationale, maintenance, informatique).

Une approche pluridisciplinaire

Afin de mieux situer l'apport de ces différentes disciplines à la conception du rendu, nous présentons ci-dessous un bref aperçu des principales notions que nous utilisons dans notre travail collaboratif.

2.2.1

Sémiologie graphique et InfoVis

Le but d'une représentation graphique abstraite comme les graphes ou les cartes est de rendre efficace la lecture et l'interprétation de données. Pour être véritablement efficaces, les représentations graphiques doivent reposer sur l'utilisation des propriétés perceptives, c'est-à-dire maximiser les capacités de l'oeil à aller du détail à l'ensemble et découvrir à la fois la structure générale et ses exceptions. La sémiologie graphique est une théorie permettant de décrire et d'utiliser les propriétés et les phénomènes perceptifs en jeu lors de la lecture d'une représentation graphique particulière (Bertin, 1967). Elle résulte d'un travail d'analyse et de l'expertise d'un cartographe (Bertin), et est basée sur des connaissances de la perception visuelle. Le présent paragraphe décrit cette théorie et en présente les éléments proches de notre problématique.

Toute représentation graphique peut être considérée comme la transcription d'un tableau de données. C'est donc le résultat d'une transformation d'un ensemble de « relations » (dans le sens du modèle relationnel de base de données) en « marques » sur un plan d'affichage. Une relation est un produit cartésien de « composantes », comme le cours de l'or en fonction du temps. Une marque est un produit cartésien de « variables visuelles ». Celles définies par Bertin sont au nombre de huit ; il s'agit des positions en X et Y sur le plan d'affichage, de la forme, de l'orientation, de la taille, de la « valeur » (semblable à la luminosité), de la « couleur » (semblable à la chrominance) et du « grain » (densité des éléments de trame).

Chacune des variables visuelles utilisées pour représenter les données a des propriétés perceptuelles intrinsèques. Une variable visuelle est « sélective » si elle permet de grouper des éléments semblables selon cette variable (par exemple le sous-ensemble de marques vertes parmi toutes les marques). Une variable visuelle est « associative » si elle peut être volontairement ignorée et permettre de joindre deux sous-ensembles séparés par cette variable en un seul ensemble (par exemple percevoir l'ensemble de marques vertes, de forme circulaire ou carrée : la forme est associative). Une variable visuelle est ordonnée si la différence de valeur selon cette variable permet de donner un ordre entre les marques. Enfin, une variable visuelle est quantitative si le rapport des différences de valeur entre deux marques selon cette variable peut être quantifiée (par exemple, estimer le rapport de taille entre deux marques).

La plupart des variables visuelles permettent plusieurs types de perception à condition d'en fixer soigneusement la « longueur », c'est-à-dire le nombre de valeurs disponibles selon le type de perception à induire. Ainsi, il est difficile, voire impossible, de percevoir sélectivement selon la luminosité dans un ensemble de marques variant selon plus de cinq valeurs de luminosité. En revanche, un lecteur pourra percevoir de façon ordonnée selon une vingtaine de valeurs de luminosité. Pour chacune des variables visuelles, Bertin propose un nuancier, c'est-à-dire une répartition de valeurs selon une variable, de façon telle que chacune des valeurs soit à une distance perceptive minimale de ses voisines. On peut rapprocher ces nuanciers de celui de Munsell, sa table de couleurs organisant des nuances, à égale distance visuelle, selon 3 axes de propriétés : la teinte (hue), la saturation (chroma), et la luminosité (value) [START_REF] Munsell | A Pigment color System and Notation[END_REF].

Les interactions entre variables visuelles dissociatives (valeur et taille) ont une influence sur la perception. Une variable visuelle qui n'est pas associative est dissociative : elle ne peut être ignorée et empêche donc le regroupement selon d'autres variables. De plus, les variables dissociatives faisant varier la lisibilité des marques -les signes très petits ou de valeur proche du fond sont peu visibles -leur combinaison avec les autres variables visuelles biaise la perception. Par exemple, sur un fond blanc, une petite marque noire sera plus visible qu'une marque de la même taille mais de couleur jaune. Cependant, Bertin ne donne pas d'élément permettant de quantifier l'influence de la taille et de la valeur sur la perception des autres variables.

Les propriétés perceptives d'une marque dont deux variables sont combinées sont celle de la variable de « plus haut niveau » (figure « niveau d'organisation », p186 de (Bertin, 1967)). Par ailleurs, une combinaison redondante, c'est-à-dire transcrivant une même composante, permet d'accroître la différence perçue entre deux marques (augmentation de la longueur). Bertin propose de façon extensive plusieurs combinaisons de variables en décrivant leurs propriétés et leurs longueurs.

Design graphique

Le design graphique est un domaine issu des Arts appliqués à l'industrie. Il peut être défini comme le « traitement formel des informations et des savoirs. Le designer graphique [étant] alors un médiateur qui agit sur les conditions de réception et d'appropriation des informations et des savoirs qu'il met en forme »1 .

Le domaine des Arts Graphiques à pour but la création « plastique » d'un message visuel (communication) pour des spectateurs ou des « clients » ; le Design quant à lui intègre dès son fondement (W. Gropius, Bauhaus 1925), une vision fonctionnaliste : « la forme e[s]t la fonction ». Le design graphique des IHM (issu du design produit) pense globalement l'objet, le signe et le besoin pour créer du sens et construire des représentations interactives en harmonisant la forme, la fonction et l'interaction. Le designer graphique, comme un architecte, pense l'espace interactif (sensoriel et cognitif) support de l'activité, par une analyse centrée sur l'utilisateur et construit des représentations pertinentes en utilisant des techniques systématiques et expérientielles. Contrairement aux limites strictes posées par Bertin, ces représentations peuvent être largement « réalistes » (voire « figuratives »), mettre en oeuvre des styles graphiques complexes ou supporter des interprétations polysémiques.

Le design graphique met en oeuvre librement des styles picturaux et visuels, en utilisant plus formellement des techniques d'art fondées par des millénaires d'expérimentations visuelles, et avec une compréhension de deux principes fondamentaux en tension : contraste et harmonie. Les contrastes, traduits pour partie seulement par les propriétés de la sémiologie graphique (aucune notion dans la sémiologie graphique des contrastes de lumière, netteté, touche, composition, matière, facture...), ont été théorisés et largement expérimentés (les 7 contrastes de la couleur de J. Itten [START_REF] Itten | Art de la couleur. Édition originale en 1961[END_REF]) ou sont devenus des modèles de référence pluridisciplinaire [START_REF] Munsell | A Pigment color System and Notation[END_REF]. Ces contrastes structurent la composition toute entière dans une unité proportionnée de « contraires » multiples: c'est le principe d'harmonie. Ils sont l'objet, par le designer, d'équilibres subtils (dominantes), de corrections fines et de déformations localisées (rehaussement d'arêtes, sur perspective, estompe) et qui toutes concourent à l'expression esthétique et de sens.

Cette structure harmonique et sensible de la représentation s'appuie sur un principe objectif de mesure : égalité et différence « suffisante », basé sur un système de proportions qui « satisfait » à l'échelle humaine et vise l'adaptation et l'optimisation des nuances plastiques aux capacités de perception et d'impression du spectateur. Ces mesures sont en partie formalisables, mais, si la structure de composition globale (design) est partageable, la nature plus « analogique » du « dessin » réalisé et l'ensemble des « accumulations » et variations plastiques qui le constituent sont plus difficilement exprimables, séparables ou calculables.

Nous pourrons dans le cadre de la conception instrumentée de rendu, en extraire des modèles et des savoir-faire pour l'exploration des solutions, la notation et la représentation des propriétés et des contraintes graphiques (composition, proportions, couleur, typographie), ou l'explicitation des choix de design. A l'inverse une instrumentation partagée de la conception de rendu doit impacter la structure et la formulation des propriétés graphiques misent en oeuvre par le designer graphique.

2.2.3

Psychologie expérimentale La psychologie expérimentale s'intéresse à la compréhension des mêmes phénomènes que la psychologie (perception, mémoire, attention, apprentissage, entre autres) mais elle utilise l'approche expérimentale pour répondre à ces questions. D'une manière générale, le comportement de sujets est observé et mesuré tandis qu'ils sont mis dans des situations soigneusement contrôlées. Les mesures obtenues font ensuite l'objet d'analyses statistiques.

Dans le domaine de la perception visuelle, les données accumulées depuis plus d'une centaine d'années ont mis en évidence des principes de fonctionnement dont la connaissance est avantageuse, voire indispensable, pour la conception d'interfaces graphiques. Par exemple, on a pu montrer que le système visuel humain a une énorme capacité pour mettre en relation les éléments du champ visuel qui ont un aspect en commun (forme, couleur, luminosité, dynamique, entre autres) et ainsi détecter des patterns spatiaux et/ou temporels [START_REF] Ware | Information, Visualization: Perception for Design[END_REF]. Une utilisation précise de cette capacité par les concepteurs facilitera grandement la lecture et la compréhension d'une interface par l'utilisateur. A l'opposé, la superposition résultante d'un grand nombre de variables graphiques peut induire des relations fortuites entre les éléments et conduire à une fausse interprétation des informations présentées. Dans le même ordre d'idées, l'Ecole de la Gestalt a proposé au début du siècle dernier un ensemble de lois qui organisent la perception d'ensembles d'éléments [START_REF] Ware | Information, Visualization: Perception for Design[END_REF]. Ainsi, le système visuel est très sensible à la proximité entre les éléments et à leurs similitudes. Il est également sensible à la symétrie et à la distinction entre la figure et le fond. D'une manière générale, le système visuel, habitué à évoluer dans un monde d'objets réels, tend à interpréter ce qui est affiché sur un écran selon les principes qui régissent le monde physique tri-dimensionnel (par exemple, diminution de la taille avec l'éloignement). Toute représentation graphique qui viole ces tendances naturelles augmente le coût cognitif pour l'utilisateur et risque d'entraîner des erreurs d'interprétation (voir Shepard (1992) pour une illustration de ces tendances de la perception visuelle).

Un autre corpus de résultats scientifiques pertinents pour la conception d'interfaces vient des études sur l'attention [START_REF] Humphreys | Visual cognition: Computational, experimental & neuropsychological perspectives[END_REF]. On sait ainsi qu'attention et point de fixation du regard ne sont pas synonymes puisqu'il est possible de porter son attention sur n'importe quel endroit de l'espace sans déplacer son point de fixation. En outre, la taille du champ attentionnel dépend de la densité des informations présentées; plus la densité augmente, plus le champ attentionnel diminue. On a également pu montrer que des stimuli apparaissant dans le champ visuel périphérique produisent des effets rapides et irrépressibles, même en cas de tâches parallèles. Par contraste, des stimuli dans le champ visuel central ont des effets plus lents, sont dépendants de la pertinence de l'information qu'ils portent, peuvent être ignorés et sont affectés en cas de tâches parallèles. Enfin, certains aspects des objets affichés sur un écran sont traités très rapidement de manière dite « pré-attentive » (moins de 10ms par objet alors que la durée de traitement est habituellement de l'ordre de 40ms ou plus par objet). Ces aspects concernent la forme, la couleur, le mouvement et la position spatiale d'un objet. Au regard de ces résultats, le concepteur d'interface devra choisir les propriétés et le lieu d'affichage des objets en fonction de l'effet attentionnel recherché, alarme ou information facultative, par exemple. L'apport de la psychologie expérimentale à la conception des interfaces ne se limite cependant pas à une meilleure compréhension des phénomènes perceptifs en jeu et à une utilisation de résultats expérimentaux pertinents ; l'évaluation quantitative, qui est au coeur de l'approche expérimentale, est indispensable pour estimer et comparer des choix de design au fur et à mesure de leur implémentation dans l'interface. Pour être cohérente, cette évaluation doit mettre en rapport l'intention du concepteur avec la performance obtenue, le contraignant ainsi à exprimer le niveau perceptif visé pour la fonction en cours d'évaluation. Traditionnellement, la psychologie expérimentale distingue trois niveaux de perception. Le premier niveau est celui de la simple perception qu'il y a quelque chose. Par exemple, on peut juste voir qu'il y a un élément affiché sur l'écran. Le deuxième niveau est celui de la discrimination, autrement dit, de la distinction entre deux choses. Ainsi, on peut voir que deux éléments affichés ne sont pas identiques. Le troisième et dernier niveau est celui de l'identification de ce qui est perçu. Par exemple, on est capable de lire ce qui est affiché, par opposition à percevoir simplement qu'il s'agit d'écriture. Pour chacun de ces trois niveaux de perception, les contraintes de l'affichage sont évidemment différentes. Pour ne retenir que l'exemple du contraste, il devra être beaucoup plus fort pour l'identification que pour la simple perception. La connaissance et l'ajustement au niveau nécessaire et suffisant du degré de perception requis permet au concepteur de nuancer l'affichage des éléments graphiques et d'éviter ainsi une trop grande prégnance des informations.

Dans le cadre de notre travail collaboratif, cette discipline contribue à la définition des variables graphiques pertinentes et à la modélisation de leur influence sur le système visuel humain, ainsi qu'à leur évaluation quantitative au travers d'expériences rigoureuses (voir [START_REF] Shepard | Effets des Paramètres Graphiques sur la Perception Visuelle : Expérimentations sur la Forme, la Surface, l'Orientation des Objets et la Définition des Ecrans[END_REF] pour un exemple d'exploration de l'interaction entre taille, forme et contraste d'un objet). Dans l'étude présentée ici, il ne s'agit pas d'explorer des variables mais de quantifier et valider le rendu des choix de conception à l'aide d'évaluations ad hoc au fur et à mesure de l'avancement du travail.

2.2.4

Ergonomie physique et cognitive L'ergonomie physique et cognitive est une discipline qui utilise des connaissances sur les capacités perceptives et les capacités de raisonnement des êtres humains pour analyser et améliorer les conditions de travail des utilisateurs. L'ergonomie a permis de définir des normes de santé et de conception des interfaces graphiques. Par exemple, la norme EN ISO 9241 définit des « exigences ergonomiques des terminaux à écran de visualisation utilisés pour des tâches de bureau » [START_REF] Iso | Exigences ergonomiques pour travail de bureau avec terminaux à écrans de visualisation (TEV) " --Partie 11: Lignes directrices relatives à l'utilisabilité[END_REF]. Les normes définissent notamment des quantités « appropriées » pour les valeurs contrôlant le rendu graphique, comme par exemple l'angle visuel et l'épaisseur de trait d'un caractère, le contraste entre fond et texte etc. Cependant, les normes sont données à titre indicatif et visent la généralité: elles doivent donc être adaptées à chaque cas particulier.

Modèles de couleur et application aux STIC

La Commission Internationale de l'Eclairage (CIE) définit des modèles standardisés pour la couleur : espace « physique » CIE XYZ et espace CIE La*b*, homogène avec la perception visuelle humaine, et se basant sur un modèle de perception par composant opposé (CIE, 1976). L'espace LCH(ab) est une version polaire de l'espace cartésien La*b* qui permet d'exprimer la couleur selon trois composantes : Luminosité, Chroma (ou saturation) et Hue (ou teinte). La manipulation indépendante de ces dimensions permet aux concepteurs une exploration efficace et compréhensible de l'espace de couleurs.

En théorie, dans l'espace CIE La*b*, la mesure des différences chromatiques visuelles est égale à la mesure des distances euclidiennes entre couleurs. Cependant, cette distance n'est valide que sur de petites distances, car l'espace CIE La*b* n'est pas parfaitement homogène. Delta E (CIE, 1976) est une formule de distance incluant des corrections, mais son application reste limitée à des distances moyennes. De plus, le modèle colorimétrique CIE La*b* est un modèle restreint à la modélisation de couleurs isolées. Il ne prend pas en compte les interactions chromatiques ou lumineuses entre couleurs. CIECAM02 (Color Appearance Model 2002) [START_REF] Cie | A Colour Appearance Model for Colour Management Systems[END_REF] est un algorithme qui permet de corriger une couleur afin qu'elle soit perçue de la même manière sur des fonds de luminosités différentes. Dans le calcul réalisé pour la correction, les influences de la taille ou de la forme des éléments à corriger ne sont cependant pas prises en compte. Les travaux plus récents dans ce domaine mettent en avant le fait que la perception des couleurs dépend de la perception de la totalité de l'image, ce qui a donné naissance au concept de « modèle de l'image » plutôt que du « modèle de couleur » (Johnson, 2004).

Le problème des différences de rendu des couleurs entre médias d'affichage est traité par l' International Color Consortium (ICC, 2004). L'ICC a défini un système de profils décrivant la manière dont les périphériques rendent les couleurs. Ces profils contiennent des informations colorimétriques sous forme de coordonnées (XYZ, L*a*b*, RGB ou CMJN) et permettent de faire le lien entre les coordonnées théoriques d'une couleur à atteindre et les transformations colorimétriques à appliquer pour réellement atteindre cette couleur. Pour les écrans, il s'agit de profils RGB. En transitant par un espace de couleur standard, il est possible de passer d'un périphérique à l'autre en gardant une continuité au niveau du rendu des couleurs. Cette continuité n'est pas parfaite car chaque périphérique de rendu de couleur a un gamut propre (ensemble fini de couleurs atteignables). Les profils ICC permettent aussi de simuler sur un support le rendu d'une couleur tel qu'il serait affiché sur un autre support, ou de donner des informations de rendu sans avoir accès au support.

Concevoir un rendu graphique, nos méthodes et constatations

Durant les activités de conception dans lesquelles nous avons été impliqués par le passé, principalement dans le cadre de demandes d'interventions correctives suite à des difficultés rencontrées par des équipes projet du domaine ATC, nous avons mené des phases de conception de rendu. Nous ne les avions pas immédiatement identifiées comme telles : c'est le recul sur ces expériences qui nous a conduit à identifier le problème, et à définir cette activité de conception de rendu. Nous avons analysé nos pratiques de travail, notamment en inventoriant le type des problèmes que nous avons rencontrés. Par ailleurs, nous avons peu à peu inventé des méthodes et conçu des outils ad hoc pour structurer la conception de rendu. A partir de cette analyse, nous avons tiré des enseignements sur les services qu'une méthode instrumentée doit fournir pour mener efficacement l'activité de conception de rendu [START_REF] Tabart | Designing graphical elements for cognitively demanding activities: an account on fine-tuning for colors[END_REF]. Cette section est un résumé des services nécessaires.

Concevoir avec des exemples réels et contrôlables

La plupart des outils de conception graphique, ou les éditeurs utilisés pour supporter cette conception, propose des interfaces spécialisées pour le choix et le réglage des couleurs. Elles utilisent souvent une boîte de dialogue modale avec des interacteurs de type slider, le feedback se faisant sur une forme (échantillon) remplie de la couleur en cours de conception [START_REF] Lyons | Nine tools for generating Harmonious Colour Shemes[END_REF]. Cependant, les couleurs conçues ainsi, hors contexte, sur des formes ni choisies ni modifiables, donnent souvent des résultats inadéquats lorsqu'elles sont transposées sur le système final. La méthode par essai/erreur associée, qui consiste à concevoir, puis à essayer en contexte, pour corriger ensuite, prend du temps, et empêche l'établissement d'une boucle d'itération rapide. Pour pallier ce problème, nous avons adapté l'un de nos outils en incluant un exemple spécifique du système final à la place de formes rectangulaires pour le feedback. Non seulement la visualisation d'un exemple réel permettait de vérifier immédiatement le résultat, mais elle a complètement changé notre façon de concevoir, car nous pouvions tester plusieurs solutions rapidement et ajuster précisément chaque couleur. Un système adapté doit permettre l'inclusion d'exemples réels, dont les variables visuelles sont immédiatement mises à jour (en cours d'interaction) quand le concepteur en modifie les caractéristiques.

Concevoir avec plusieurs exemples visibles simultanément

Un objet graphique ou une variable visuelle peut être impliqué dans plusieurs situations. Par exemple, lors de la conception de la couleur associée à une alarme, il est nécessaire de prendre en compte tous les fonds auxquels un objet de cette couleur est susceptible d'être superposé. De même, il est nécessaire de tester tous les objets susceptibles de recevoir cette couleur, notamment pour vérifier l'influence de la surface ou de la rastérisation. Enfin, la juxtaposition de plusieurs exemples permet de comparer plusieurs solutions et d'opérer un choix par l'exemple. Une interface classique oblige à jongler entre chaque exemple, et il n'est pas possible vérifier si un changement qui rend un exemple visible adéquat ne rend pas un exemple non visible inadéquat, ou si même un changement est « favorable ». Un outil approprié doit donc non seulement contrôler un exemple réel, mais proposer la visualisation de plusieurs exemples à la fois, juxtaposés, ou affichables avec une manipulation rapide.

Considérer la scène globale

Nous avons mis en avant l'importance de concevoir avec des vrais exemples. Cependant, ces exemples ne sont que des parties de la scène graphique globale. Chacun des objets participent à l'apparence de la scène globale, et la visualisation de cette dernière est le seul moyen de vérifier la consistance et le confort de l'interface finale. Inversement, la perception globale a une influence sur la perception des éléments individuels. Afin de faire l'expérience de ces influences, le concepteur doit travailler sur des scènes composées, réalistes et globales en regard de l'interface finale, et pas seulement sur des versions approchées ou simplistes.

Encourager l'exploration

Afin de maximiser la qualité de la conception, il est nécessaire d'explorer et de comparer des solutions alternatives. Nos outils ad hoc freinaient l'exploration, car ils nécessitaient de modifier des configurations et de relancer l'application réelle, une manipulation trop coûteuse en temps. Nous pouvions cependant utiliser deux écrans sur lesquels nous affichions des versions alternatives, ce qui nous permettait de les comparer. Ce principe doit être généralisé pour toute configuration intermédiaire en cours de conception, qu'elle concerne un élément ou plusieurs, en s'appuyant sur les principes de « chemin parallèle d'exploration » [START_REF] Terry | Supporting experimentation with Side-Views[END_REF].

Encourager l'expression des contraintes

Nous avons constaté l'importance d'exprimer et de réifier les contraintes qui sous-tendent la conception. En effet, il est difficile de se rappeler des contraintes pendant les phases d'exploration. Un bon exemple de contrainte réifiée est la « molécule » rigide des outils avancés de conception de couleur [START_REF] Lyons | Incorporating Groups into a Mathematical Model of Color Harmony for Generating Color Schemes for Computer Interfaces[END_REF]. De telles contraintes manipulables directement permettent de régler des ensembles de couleur plus facilement (par exemple, baisser la luminosité de façon globale). De même, des contraintes exprimées de façon mathématique pourraient vérifier que des modifications de valeurs d'une propriété ne violent pas une contrainte respectée auparavant. Cependant, il est parfois difficile d'exprimer des contraintes, que ce soit de façon graphique, formelle ou même prosaïque. Par exemple, le réglage visuel entre les gris des différents types de secteur est délicat (3 à 4 valeurs à répartir de façon non homogène sur une faible plage de contraste) et sa formalisation en contraintes serait complexe ou pourrait même gêner la conception d'une solution maximisée. Dans ce cas l'expression des contraintes serait plutôt de conserver une notation textuelle du problème et des choix réalisés.

2.3.6

Exprimer et structurer les couleurs

Le modèle LCH (CIE LCHab), associé à des moniteurs calibrés, semble être un bon outil pour exprimer les couleurs. Cet espace de couleur permet d'effectuer des manipulations dont les résultats sont prévisibles. De plus, il permet de structurer le design en permettant de concevoir des familles ou des hiérarchies de couleur qui varient selon une des dimensions L, C, ou H. Cependant, le modèle trouve ses limites aux deux extrémités de l'échelle du degré de réglage. Ainsi, la résolution et le gamut du modèle de couleur du système de rendu (RGB) ne permet pas de régler finement les valeurs de couleur ni de restituer certaines nuances. Il est donc nécessaire de disposer d'un outil de réglage fin utilisant et visualisant les limites du modèle d'impression final. A l'opposé, de grandes manipulations de valeur conduisent à des résultats surprenants. Même si LCH est supposé être proche d'un repère orthogonal, il ne l'est pas strictement, et il ne permet pas de garantir que la modification d'une couleur identifiable conserve son identité (une couleur vue comme un rouge sera par exemple perçue comme orangée puis comme ocrée quand on baissera sa seule saturation). Un outil approprié doit donc fournir plusieurs manières d'exprimer les couleurs et les contraintes associées, notamment pour tenir compte des couleurs nommées.

2.3.7

Instrumenter l'ensemble de l'activité de conception

Nous avons observé que notre activité ne consistait pas seulement à élaborer une configuration finale de variables visuelles. Ainsi, la disponibilité de quelques outils de mesure de contraste a permis de justifier en partie nos choix de conception. Par ailleurs, c'est l'explicitation et l'expression des contraintes qui a permis aux utilisateurs de redéfinir leur problème, de discuter des solutions, et de favoriser leur acceptation. L'expression des contraintes pourrait renforcer la justification, notamment en montrant que les critères des documents de spécification sont bien respectés. De plus, cela permettra à des équipes de conception futures de reprendre facilement l'ensemble des contraintes sous-tendant les choix de conception d'une interface à adapter (nouveaux services, nouvelles contraintes), en étendant la notion de document de conception actif [START_REF] Boy | Active design documents[END_REF]. Par ailleurs, l'outil doit instrumenter la conception des plans d'expérimentation pour choisir parmi des solutions alternatives, ou pour valider la qualité des choix [START_REF] Mackay | Touchstone : exploratory design of experiments[END_REF]. Un outil adapté ne doit donc pas seulement instrumenter l'activité de conception, mais aussi celle de design rationale [START_REF] Lacaze | Design Rationale for Increasing Profitability of Interactive Systems Development[END_REF], et d'évaluation.

2.3.8

Evaluer les choix au fur et à mesure

Le défi posé dans le choix et l'organisation des paramètres visuels dans la conception d'une interface graphique est la quantification du résultat de ces choix. Se fiant essentiellement à quelques grandes règles et à sa propre expérience, le concepteur doit souvent attendre la phase de validation de son interface auprès d'utilisateurs pour avoir un retour, plus souvent qualitatif que quantitatif, sur les effets de ses choix graphiques. Cette situation est peu satisfaisante car un retour en arrière est toujours coûteux et tend à ajouter des éléments plutôt qu'à clarifier l'interface. Une solution consiste à avoir recours à des évaluations rapides et objectives au fur et à mesure que le design avance, permettant d'assurer d'une part, la validité du choix effectué au regard de la fonction à assumer et, d'autre part, l'intégration de chaque nouveau paramètre dans l'ensemble de ceux déjà existants. L'outil de conception graphique doit donc intégrer cette possibilité de mesurer qualitativement ou, de préférence, quantitativement les effets perceptifs des choix de conception.

Instrumenter la conception de rendu graphique

Le type d'interfaces graphiques auxquelles nous nous intéressons correspond à des interfaces critiques, dont la qualité dépend de caractéristiques graphiques subtiles. Nous avons choisi de focaliser, dans un premier temps, notre travail de conception de rendu des interfaces sur le paramétrage des propriétés graphiques de couleur. Afin d'illustrer les concepts -et leur instrumentation -que nous décrivons dans la suite de l'article, nous présentons dans la section suivante un scénario réel de conception, caractéristique de la problématique de conception du rendu graphique.

Un scenario de conception : PARIS-FLUX

Le scénario est issu de l'activité de contrôle aérien, pour laquelle une explication succincte est nécessaire. L'espace aérien français est divisé en secteurs géographiques (volumes d'espace à contrôler) et durant son vol, un avion traverse plusieurs secteurs. Chaque secteur est à la charge de deux contrôleurs, qui ont deux tâches principales à accomplir : réguler l'ensemble des vols du secteur dont ils ont la responsabilité, à l'aide d'une image affichée sur l'écran radar afin d'éviter les conflits et « livrer » les vols aux contrôleurs des secteurs adjacents selon certaines conditions.

Le problème

En général, les vols suivent des routes aériennes standardisées et leur séquencement sur ces routes crée une image de flux sur l'écran radar des contrôleurs. L'identification des vols du trafic en fonction de leur destination finale, et donc de leur appartenance à un flux donné est un besoin important pour l'activité du contrôleur. En effet, très tôt en entrée de secteur, l'identification du vol lui permet d'anticiper la route aérienne à suivre et de détecter des conflits potentiels. S'il doit gérer une convergence entre avions à destination du même flux ou un croisement d'avions de flux différents, il le fera pour une grande part visuellement à partir de l'image radar. Il en va de même quand le contrôleur régule, séquence et livre selon les conventions, les avions d'un même flux au contrôleur suivant.

Le scénario concerne plus spécifiquement les secteurs « en-route » et « d'approche » de la Région Parisienne. Leur vocation essentielle est le séquencement du trafic à l'arrivée ou au départ des plates-formes aéroportuaires de Roissy CDG et d'Orly, ainsi que de leurs terrains associés. La « livraison » des vols par les contrôleurs du secteur en route aux contrôleurs des secteurs d'approche de Roissy et d'Orly fait l'objet de procédures de coordinations très précisément réglées et différentes pour Roissy CDG et Orly, les coordonnées géographiques du lieu de « livraison » étant différentes pour les deux aéroports. Autrement dit, un avion à destination de Roissy CDG ou de ses terrains associés ne sera pas dans le même flux qu'un avion à destination d'Orly ou de ses terrains associés. En revanche, un avion à destination de Roissy, par exemple, sera dans le même flux qu'un avion à destination d'un terrain associé à Roissy, et ce, jusqu'au point de livraison au secteur suivant. Il en va de même pour le flux à destination d'Orly ou l'un de ses terrains associés. Bien qu'ils fassent partie du même flux, il peut être néanmoins important de maintenir une distinction entre les vols convergeant vers un aéroport principal (Orly ou Roissy CDG) et ceux convergeant vers l'un de leurs terrains associés: par exemple, en cas de trafic modéré, les contrôleurs peuvent « empiler » (même position géographique, hauteur différente) un vol « associé » (moins fréquent) avec un vol « principal », et « paralléliser » ainsi en partie le trafic pour permettre aux vols d'atterrir plus vite sur leur terrain respectif tout en respectant la cadence pour chaque terrain. Le codage des vols de ces flux devait être réalisé sur l'écran radar par une configuration de la couleur de l'objet représentant un « vol ». Comme l'illustre la figure 3, un objet « vol » est composé d'une « piste » (ainsi nommée par référence aux anciennes « pistes radar », correspondant à la position calculée de l'avion), et d'une « étiquette » liée à la piste. La couleur peut porter sur la piste seule ou sur

Objectifs de conception

Le niveau perceptif sollicité est soit celui de la discrimination entre différents éléments, soit celui de l'identification d'un élément. L'identification étant portée par la couleur, il faut vérifier que les six couleurs choisies sont suffisamment différentes pour ne pas entraîner de confusion lors de la lecture élémentaire. Il faut aussi vérifier que les six couleurs ne peuvent pas être confondues avec les couleurs déjà existantes, en particulier des bleus pour certains vols et des oranges pour les alarmes.

Les vols appartenant à un sous-flux doivent être perçus sélectivement: en un seul coup d'oeil, tous les vols d'un même sous-flux doivent être perçus, et aucun intrus ne doit faire partie de la sélection. Le réglage de la différence entre les couleurs identifiant chacun des 3 flux, d'une part, et chaque paire de couleurs des sous-flux d'autre part, est particulièrement délicat, car la différence doit être suffisamment grande pour permettre l'identification immédiate de chaque sous-flux, et suffisamment petite pour permettre la fusion des paires de sous-flux en leur flux respectif. Ce type de perception est différent de la perception associative à la Bertin, qui est « inter variable visuelle » (associer des éléments de même couleur mais de formes différentes, par exemple), alors qu'il s'agit ici de perception associative « intra variable visuelle » (associer des éléments de couleurs différentes mais semblables).

Le choix de couleur pour les sous-flux doit faire l'objet de deux évaluations distinctes, l'une mettant en jeu la perception sélective et l'autre la perception associative. Ainsi, pour un même affichage, on observera des tâches différentes (par exemple, montrer le flux ou montrer un intrus dans un flux), ce qui revient à tester la variable visuelle « couleur » selon sa capacité sélective, d'un côté, et selon sa capacité associative, de l'autre, car garantir l'une n'implique pas forcément que l'autre est garantie. En outre, il serait pertinent de vérifier que le codage des couleurs est immédiatement perceptible et résistant à l'augmentation de la charge cognitive. Pour ce faire, il est possible d'ajouter des contraintes temporelles lors des différentes tâches expérimentales.

Il est important de noter ici que les évaluations ne concernent que la perception, et non l'adéquation des choix par rapport à l'activité. Par exemple, nous avons mis en avant la question du problème de l'identification par la couleur en présence d'autres éléments de l'interface. La couleur n'est pas la seule variable visuelle caractérisant un élément. Le type des éléments colorés de l'étiquette, ou même le contenu textuel de l'étiquette peuvent permettre à un contrôleur d'identifier précisément l'état ou le type d'un vol. Ainsi, le fait qu'une évaluation ne donne pas des résultats absolument concluant sur cet aspect, ne signifie pas que l'interface est inutilisable. En revanche, cette évaluation peut pointer les problèmes éventuels, ou donner des éléments aux concepteurs sur leur gravité.

Un outil pour instrumenter la conception de rendu

A partir des constations faites dans la partie 2, nous avons entrepris la réalisation d'un outil de support à la conception du rendu graphique des interfaces. Nous décrivons cet outil au travers des différentes phases qui permettent de concevoir, explorer, vérifier etc. un rendu graphique et nous illustrons les concepts introduits à l'aide du scénario PARIS-FLUX décrit en 3.1.

Réaliser des briques graphiques élémentaires

Comme nous l'avons précisé en 2.3, pour concevoir un rendu, il est important de travailler avec des exemples réels et contrôlables, appropriés à l'interface cible, plutôt que sur des exemples simplistes comme des rectangles colorés. Ainsi, nous avons conçu un outil de construction d'exemples à partir d'ensembles de « briques graphiques » élémentaires. Les briques sont présentées dans la première partie (à gauche) de l'outil (cf. figure 4). L'utilisateur peut charger ou modifier des briques déjà existantes, ou en créer de nouvelles. Ces briques sont des représentations « orientées rendu » (conçues et réalisées en fonction du contexte graphique de production) des objets de l'interface, des éléments visuels de composition d'une future scène graphique à paramétrer. Par exemple, pour concevoir le rendu d'un logiciel ATC on utilisera des briques qui seront les « macros éléments » d'une image radar comme des objets vol, des fonds de secteurs, des routes etc. L'intérêt d'utiliser un outil d'édition externe réside dans le fait que nous disposons ainsi d'un logiciel existant, et disposant de toutes les fonctionnalités de création graphique. Cependant, il est important de garder dans l'outil que nous proposons la possibilité de modifier ces briques au niveau atomique par exemple en modifiant la couleur, la taille ou la forme d'un sous composant (ex : rajouter un champ d'alarme et une couleur associée sur la partie étiquette d'un vol), de les nommer et de les organiser en ensembles de composants applicatifs (structure de nommage et organisation des fichiers).

Les exemples sur lesquels le concepteur travaille sont ainsi réels (homogènes avec l'affichage ciblé), exhaustifs et contrôlables. Les briques graphiques sont composées au sein de scènes exemples, que nous décrivons dans la section suivante.

Composer des scènes exemple

Dans une partie centrale du logiciel, l'utilisateur va composer les scènes exemples sur lesquelles il souhaite travailler (figure 5). Pour cela il crée une nouvelle scène dans laquelle il dispose par drag & drop les briques graphiques sur un fond, ce fond pouvant être lui-même défini par l'inclusion d'une brique graphique particulière. Il peut également charger des scènes exemples existantes, les modifier ou les enregistrer. L'utilisateur contrôle la disposition de sa scène, en ajustant la position et la profondeur (priorité) des briques graphiques la composant. Il peut supprimer des briques élémentaires à la scène ou en rajouter soit depuis la bibliothèque de composants, soit en copiant ou en clonant une brique déjà présente dans la scène. Dans le cas d'un clonage, et uniquement dans ce cas, les propriétés graphiques (couleurs) des sous composants de la brique clonée seront dépendantes de celles de la brique mère, une modification sur l'une d'entre elles entraînera une modification à l'identique sur l'autre. L'utilisateur peut créer et disposer des scènes différentes afin de les comparer. Il peut de la même manière que pour les briques copier ou cloner des composants entre deux scènes, ou une scène entière existante afin de la dériver et pour faciliter l'exploration du design. Les scènes exemples peuvent être soit une scène avec plusieurs éléments (comme une re-création d'une image radar), soit une simple juxtaposition de briques. Le partage de couleur par clonage permet à un concepteur de constater immédiatement l'impact d'une modification de cette couleur sur tous les éléments de la scène exemple la comportant.

Dans le cas du scénario Paris-Flux, la première phase de travail consisterait à créer ou charger dans la partie briques graphiques les modèles d'objet « vol » et « fond de secteur », puis à insérer ce fond de secteur et 6 copies d'un vol sur une nouvelle scène exemple. (cf. figure 5)

Propriétés graphiques : Une liste des couleurs présentes sur la scène ouverte est tenue à jour sur le côté droit (propriétés) de l'outil. Sur cette liste figurent les couleurs uniques de chacune des briques élémentaires faisant partie de la scène, dont celle du fond si existante. Par exemple pour une brique avec 3 éléments verts et 2 autres blancs, il y aura seulement deux couleurs dans la liste : du vert et du blanc. Si une autre brique contenant du blanc est ajoutée, une autre couleur blanche sera rajoutée sur la liste. Lors d'un clonage de brique au sein d'une même scène, et à cause de la relation de dépendance décrite ci-avant, aucune nouvelle couleur ne sera ajoutée à la liste des couleurs sur la droite. Si l'utilisateur veut ajouter une couleur à un sous élément d'une brique (qu'elle soit unique, une copie ou un clone d'une autre), il peut sélectionner ce sous élément et faire une action « new / split » sur sa couleur afin de faire apparaître une nouvelle couleur dans la liste (qui sera initialement équivalente à celle de l'élément sur lequel il a effectué le new/split).

Dans l'application au scénario, les couleurs présentes dans la liste seront celle du fond de scène (fond d'image radar), d'un fond de secteur et six fois la couleur de base de l'objet vol (en supposant que ce type de brique ne soit composé que d'une couleur).

Colorimétrie et profil ICC : Nous avons noté dans la partie 2.3, qu'il est important de prendre en compte les spécificités du média sur lequel le rendu sera affiché. Le rendu des couleurs ainsi que l'étendue des couleurs pouvant être restituée (gamut) par un périphérique d'affichage est spécifique à chacun d'entre eux. Ainsi, Il faut donc proposer pour chaque scène créée d'embarquer un profil ICC correspondant à l'écran de destination du rendu en cours de conception. Cette fonctionnalité, ajoutée au fait que les exemples soient réels donc exprimant les formes et surfaces du rendu réel, tend à répondre aux problèmes des interactions et des influences du média sur la perception visuelle. Le concepteur visualisera immédiatement sur la scène exemple les effets simulés du média ou de la surface des éléments qui la composent, ainsi que l'effet visuel de la modification des paramètres (feedback).

Pour le scénario Paris-Flux, nous devons intégrer le profil ICC des écrans cibles de l'application pour laquelle le concepteur conçoit le rendu. Dans notre exemple, ce profil à été mesuré en salle de contrôle pour l'écran radar principal d'affichage (écran de référence ODS en-route, LCD 30" Barco de type MDPW476), réglé avec les paramètres de l'OSD (On Screen Display) définis par défaut pour l'application.

Explorer les paramètres des propriétés graphiques

Les couleurs de la scène active, présentées sous forme de liste dans la partie propriétés de l'outil sont affichées sous forme de pastilles dans l'espace colorimétrique. Celui-ci utilise par défaut l'espace CIE LCH(ab), « compatible » avec la perception visuelle humaine et facilement contrôlable au travers de ses 3 dimensions (luminosité, saturation, teinte). Chacune des 3 dimensions de la couleur est matérialisé par un axe linéaire (pour L et C) ou radial (pour H) sur lesquels sont positionnées des « pastilles », trois par couleur présente dans l'outil de création d'exemples : une sur L, une sur C et une sur H (cf. figure 6). Lors d'un pointage d'une pastille colorée sur un des axes, les trois pastilles correspondant à cette couleur sont mises en évidence sur chacun des 3 axes. En déplaçant ces pastilles colorées sur leurs axes respectifs, l'utilisateur modifie les valeurs des paramètres de la couleur et donc de la couleur d'interface résultante (RGB) et cette modification est immédiatement répercutée sur les briques de la (ou des) scène(s) exemple(s) concernée(s). Ainsi, pendant l'exploration des valeurs de la couleur et par une interaction de type drag & drop dans l'espace des propriétés, le concepteur visualise et compare, en temps réel et en contexte sur la scène exemple, la modification du rendu de l'interface.

De la même manière qu'à partir de la scène exemple le concepteur peut vouloir créer une nouvelle couleur sur un élément graphique, il peut ici vouloir « splitter » une pastille pour créer une nouvelle couleur qu'il associera ensuite à un élément graphique ou à un sous ensemble d'éléments. A l'inverse, il est possible de merger/confondre/réunir deux pastilles colorées en une seule ce qui signifie qu'une couleur devient le clone d'une autre.

Après avoir disposé les six objets de représentation des vols, le concepteur les distingue les unes des autres en manipulant les pastilles de manière à leur donner une teinte correspondant à celle spécifiée dans les exigences : vert, rose, bleu... La demande proposait deux options de conception : colorisation des objets vols en totalité, ou uniquement les éléments de la « piste ». Afin de tester la deuxième option, il décide de créer une nouvelle scène en clonant la première scène, ce qui permet de maintenir un partage des couleurs entre chacun des six objets. Puis il sélectionne une sous partie des éléments de chaque brique élémentaire et effectue un « new color » (équivalent à un split) sur cette sélection. Il modifie cette nouvelle couleur et lui attribue la valeur correspondante aux vols standards. Il maintient ainsi le « lien » de couleur spécifique pour les seuls composants piste et affecte une couleur unique (blanc standard des vols) pour les étiquettes de tous les flux. Il pourra ainsi comparer de façon dynamique la différence de rendu des mêmes paramètres entre les 2 scènes (qui correspondent à 2 options de conception) ou choisir de modifier ces paramètres en fonction de l'étendue (surface de rendu) du codage.

Le fait de positionner ces pastilles sur un espace « perceptuel » permet au concepteur de visualiser directement certaines propriétés et de catégoriser ainsi les objets graphiques. Par exemple, il peut spécifier des hiérarchies et organiser les couleurs en ensembles distincts de pastilles sur l'axe de la luminosité ou sur l'axe de teinte, ce qui favorise une première idée de la répartition et des groupements dans ses choix de couleurs. D'autre part le fait de travailler sur des espaces « perceptuels » permet de s'assurer que les écarts de distance physiques selon les dimensions L, C ou H seront répercutés perceptuellement, et permettront aux concepteurs de matérialiser graphiquement les différents types de perceptions définies dans le paragraphe 2.2. La perception sélective sera traduite par un grand écart entre pastilles ou groupe de pastilles ; la perception ordonnée en ordonnant les pastilles sur un axe de l'outil ; et la perception quantitative en les ordonnant tout en prenant en compte un rapport dans l'écart entre les pastilles.

Pour l'exemple des 3 couleurs de flux, le designer cherchera à garantir la perception sélective de chaque flux en séparant les couleurs fortement et visuellement, et donc à positionner les teintes sans ambiguïté au regard des couleurs nommées et à répartir au maximum ces couleurs sur l'axe des teintes en tendant à égaliser leurs distances angulaires. Cette structure « géométrique » régulière favorise l'harmonie colorée. A l'inverse, pour maintenir un bon contraste avec les couleurs de fond et garantir une « égalité » perceptive entre les flux, il cherchera à rapprocher les valeurs de luminosité et de saturation et donc à regrouper les pastilles sur ces 2 axes.

En outre, plus la scène exemple est complexe et plus il est important d'avoir une vision globale de l'expression des couleurs (dominantes, harmonies) et de structurer les choix des couleurs. Ainsi la perception immédiate des pastilles sur chacune des axes de la couleur présentés sur l'outil permet de détecter les espaces « vides » ou les concentrations de pastilles, et plus finement de comparer visuellement les différents écarts qui peuvent se dégager et qui sont des indicateurs importants de l'organisation possible de ces couleurs. Ces écarts indiquent les possibilités d'exploration des couleurs auxquelles le concepteur n'avait pas forcément pensé, ou bien des zones à réserver pour de futurs objets applicatifs (zone de teinte des alarmes). La mise en place précise et la formalisation de ces propriétés entre pastilles est facilitée par la pose de contraintes.

Contraindre les propriétés graphiques

L'outil d'aide à la conception doit permettre de catégoriser et d'ordonner des objets graphiques mais aussi de conduire à l'expression de contraintes entre les propriétés de ces objets. Ces contraintes sont en fait la traduction d'exigences de « haut niveau » (activité), plus ou moins explicitement exprimées dans le cahier des charges ou d'exigences issues de règles de conception connues du concepteur, en contraintes de « bas niveau » (affichage). Les contraintes de « bas niveau » sont des relations exprimées formellement entre les propriétés graphiques des variables visuelles, par exemple des écarts chiffrés entre valeurs des propriétés graphiques d'éléments composant une scène.

Nous avons réifié ces contraintes en un ensemble d'objets interactifs, manipulables directement: une contrainte de « groupement » avec les opérations associées, une contrainte de « fixation » et une contrainte de « séparation ». A ces contraintes s'ajoute un objet particulier « repère » qui permet de faciliter l'exploration visuelle ou définir des contraintes de façon relative (figure 6). Opérations sur les groupes : Comme définit ci-dessus, l'utilisateur peut grouper des pastilles entre elles et effectuer des actions et opérations sur ces dernières. Parmi les actions possibles figurent des actions de positionnement, comme le déplacement simultané des pastilles sur un axe, une homothétie (étirement ou réduction), qui conserve le rapport des écarts internes entre pastilles, l'action d'alignement des pastilles, sur une des extrémités du groupe, ou sur le « barycentre », ou sur le centre du groupe, et l'action de répartition des pastilles de manière égale sur un espace donné, soit sur un axe en entier soit entre deux séparateurs. Le fait qu'une pastille colorée soit groupée avec d'autres n'empêche pas l'action sur un élément de ce groupe (interaction non modale), et la position, l'ordre interne des pastilles ou la taille du groupe restent dynamiquement mis à jour par la manipulation d'un ou plusieurs de ses éléments internes. Notion de séparateur : Le second type de contrainte correspond à la séparation de pastilles ou de groupe de pastilles par exemple afin de réifier une dissociation. Ces séparateurs sont des objets que l'on peut déplacer ou grouper comme les pastilles (un groupe peut inclure pastilles et séparateurs). La taille des séparateurs correspond à une valeur ou à un espace de valeurs, elle est variable en fonction du contexte.

Notion de fixateur : Le troisième type de contrainte, appelé fixateur, permet de fixer la position d'une pastille ou d'un groupe pour lequel il fixera alors tous les éléments du groupe, ou d'un séparateur pour lequel il fixera la position. Un interacteur « poignée » situé sur le fixateur permet de manipuler sa position et donc la position des pastilles, groupes ou séparateurs fixés à lui.

Notion de repère : Le repère est un guide visuel positionné par le concepteur pour construire et ordonner les propriétés. Il permet de structurer, visualiser ou exprimer des contraintes. Par exemple, un repère sur l'axe des luminosités définit un seuil au dessous duquel devraient être disposées toutes les couleurs de fond. Il permet aussi de visualiser des zones : par exemple, une succession de repères sur une des dimensions de la couleur délimitera des espaces de valeurs, ainsi une zone entre deux repères positionnés sur l'axe des teintes définira les valeurs acceptables pour une couleur nommée (« la zone des rouges »). Un ensemble de repères va définir un « gabarit » (structure de composition) qui peut être enregistré ou chargé sur demande. Enfin, un repère permet d'exprimer des contraintes en devenant une opérande d'une relation d'ordre avec des pastilles ou groupe de pastilles.

Comme défini précédemment, les flux et sous-flux devraient tendre vers des positions (valeurs) régulières : sur l'axe des teintes (H), égalité de valeurs pour les sous-flux et égalité de séparation entre flux (±120°), sur l'axe des luminosités (L) et des saturations (C), homogénéité des valeurs entre sous-flux principaux et entre sous-flux secondaires des 3 flux. Cependant, les solutions de conception sont en fait plus nuancées pour tenir compte des effets de la transformation LCH vers RGB et du gamut RGB, ainsi que des effets perceptifs de ces transformations sur la sensation colorée (luminosité différente des couleurs symboliques et dénaturation des couleurs modifiées en L et C). Ainsi, après avoir dupliqué les vols des sous-flux en 3 « groupes » de flux dans une scène et expérimenté visuellement l'arrangement des couleurs, le designer va utiliser des repères, des séparateurs et des fixateurs pour construire et conserver (tracer) une composition formelle, puis il explorera des configurations plus fines et plus pertinentes à partir de ces valeurs « idéales » pour finaliser des propositions « réalistes » de solutions à tester.

Notion de molécule harmonique : Le designer graphique peut vouloir utiliser ou définir une contrainte « harmonique » pour régler les propriétés de couleur des composants graphiques de la scène. Cette notion de contrainte harmonique est issue du domaine des Arts avec un usage très important par les peintres et plasticiens du cercle chromatique (Newton) et des théories de l'harmonie des couleurs (Chevreul, Goethe, Itten) qui définissent les propriétés de composition et d'harmonie de couleurs issues du cercle chromatique. Le designer graphique utilise habituellement ces concepts et techniques pour créer un nuancier de couleurs harmoniques qu'il met en oeuvre dans sa composition. Dans l'outil, cette harmonie des complémentaires correspond à placer des structures géométriques régulières particulières entre les pastilles présentes sur l'axe des teintes de l'outil. Comme nous l'avons déjà précisé, cet axe à la différence de ceux de la luminosité et de la saturation est radial. Les distances entre pastilles colorées sont dans ce cas des distances angulaires. A l'aide de fixateurs, de séparateurs et de groupes, le designer peut créer une structure autour du cercle des teintes rappelant les formes classiques d'harmonie. Ces structures harmoniques seront chargées, manipulées ou modifiées par le designer pour définir ses couleurs.

Evaluer et vérifier la conception graphique

Les précédentes sections décrivent les outils que nous avons réalisés (construction d'exemples, design des couleurs). La présente section décrit les concepts et les premières maquettes des outils instrumentant la partie "évaluation" (cf figure 7). L'instrumentation de l'évaluation dans l'outil de conception permet de générer facilement des expériences à effectuer en cours et fin de conception. La conception de l'évaluation comprend quatre aspects: le choix du paradigme expérimental, la conception des jeux de test, l'application du protocole expérimental, et le déroulement de l'expérimentation et l'analyse des résultats.

Choisir un paradigme expérimental : La psychologie expérimentale propose un certain nombre de paradigmes, autrement dit, des tâches expérimentales explicitement liées à des interprétations théoriques permettant d'explorer les propriétés des informations visuelles. Par exemple, on utilise des tâches de recherche visuelle sur un affichage dont on varie la complexité, le nombre de cibles et le nombre de distracteurs ; on peut aussi tester la ressemblance/différence entre deux objets en utilisant la technique de la comparaison par paire qui permet d'obtenir finalement une structure de la distance entre chacun des objets testés. Le choix du paradigme découle de la cohérence entre la question à résoudre et le comportement à observer pour répondre à cette question. Il est contraint par le niveau perceptif visé, tel qu'il a été déterminé dès le début de la conception. 7).

Générer le jeu de test à afficher : Les choix graphiques à évaluer sont ceux qui ont été conçus à l'aide de briques graphiques élémentaires, disposés dans des scènes exemple. Ces briques et ces exemples, créés à des fins d'exploration et de réglage peuvent aussi servir aux jeux de test. Il est par ailleurs possible d'utiliser l'outil de construction d'exemple dans le but exclusif de concevoir un jeu de test. La manière de les afficher pendant l'expérience est en grande partie guidée par le choix du paradigme. Par exemple, pour une recherche visuelle, il faut déterminer non seulement les objets à détecter, mais également des objets neutres et des objets distracteurs (proches des objets à détecter). Ces objets peuvent être construits avec l'interface de construction d'exemple, ou bien générés automatiquement par un outil spécialisé en fonction du paradigme. La quantité d'objets dans chaque catégorie (à détecter, neutre ou distracteur), leur position géographique et leur durée d'affichage sont paramétrables et font partie du protocole expérimental (voir ci-dessous).

Pour le scénario Paris-Flux, le jeu de test comprend les briques graphiques présentant les six couleurs des sous-flux, ainsi que les autres couleurs de vol présentes sur l'interface (neutres et intrus). Si la question porte sur la manière dont les briques élémentaires « portent » la couleur, il faut utiliser les objets « vol » en comparant éventuellement plusieurs versions possibles de ces objets (par exemple, la couleur portée par la piste seule, ou bien par la piste et l'étiquette). Afin de vérifier que l'interaction des couleurs ne gêne pas la perception des flux et sousflux, le concepteur peut ajouter une condition expérimentale à explorer et comparer la performance des sujets en fonction, non seulement de la couleur des objets, mais également de celle du fond (cf. figure 7) Appliquer le protocole expérimental : le protocole expérimental est l'ensemble des détails qui règle le déroulement de l'évaluation. Il s'agit de l'installation expérimentale (type et réglage de l'écran, distance du sujet à l'écran, dispositif de réponse du sujet -verbale, écran tactile, souris -), des consignes à donner au sujet (qui doivent être identiques d'un sujet à l'autre), et du déroulement temporel de l'expérience (ordre et durée d'affichage des images ; présence ou non et durée d'affichage d'un point de fixation entre les essais ; nombre, répartition en bloc ou non et présentation ordrée ou aléatoire des essais ; présence et durée des pauses).

Choisir, recueillir et comprendre les données comportementales : évaluer le rendu graphique revient essentiellement à évaluer l'efficacité perceptive de l'affichage. La perception n'étant pas directement mesurable, il faut nécessairement provoquer une réponse et observer le comportement. L'évaluation proposée par l'outil d'aide à la conception va donc s'attacher à mesurer des durées entre l'affichage d'un objet et une réponse de la part du sujet (temps de réaction, de décision, de recherche visuelle), ainsi que des taux et types d'erreurs. Le choix des données à recueillir dépend de la question posée, du paradigme choisi et du niveau perceptif visé. Par exemple, le temps de réaction est approprié pour évaluer la capacité d'un objet affiché à être simplement perçu, tandis qu'il faudra mesurer le temps de décision s'il s'agit de vérifier qu'un objet donné est perçu comme faisant partie de tel ou tel ensemble.

Dans le cas de Paris-Flux, nous voulons évaluer la capacité des couleurs choisies à faire la distinction entre les trois flux (rose, vert, bleu) tout en permettant la fusion volontaire des sous-flux deux à deux (rose clair et rose foncé, vert clair et vert foncé, bleu clair et bleu foncé). La tâche sera donc, lorsque la boîte bleue est indiquée par exemple, de sélectionner tous les vols bleu clair et bleu foncé qui se trouvent sur l'image radar. Les données à mesurer, aussi appelées traditionnellement variables dépendantes, seront le temps de réponse global pour sélectionner les vols, et les erreurs de sélection. A priori, on peut dire que le temps de réponse reflète la facilité à percevoir sélectivement un flux donné. Les erreurs de sélection sont à analyser en « vol omis » d'un côté et en « vol sélectionné à tort » de l'autre. Si les vols omis portent essentiellement sur une seule couleur (bleu clair, par exemple), cela veut probablement dire que cette couleur n'est pas assez bien perçue tout court (peut-être à cause d'un problème de contraste avec le fond), ou bien qu'elle n'est pas perçue en tant que bleu et donc faisant partie du flux bleu. De la même manière, si les vols sélectionnés à tort portent essentiellement sur une même couleur (par exemple, l'un des bleus déjà utilisés par ailleurs sur l'interface), cela veut dire que ce bleu est trop proche des bleus des sous-flux.

Pour cette dernière partie, nous nous baserons sur des fonctionnalités similaires à celles de Touchstone [START_REF] Mackay | Touchstone : exploratory design of experiments[END_REF], qui permet de réaliser un plan expérimental, et qui offre des outils permettant le déroulement une expérimentation, ainsi que d'en analyser les résultats.

Conclusion

Dans cet article, nous avons introduit la phase de conception du rendu graphique, qui comporte la conception, l'exploration et l'évaluation du rendu final des éléments graphiques d'une interface. Cette phase est indispensable pour les interfaces critiques ou instrumentant une activité à forte charge cognitive, pour laquelle la qualité de l'interface est dépendante de caractéristiques graphiques subtiles. Elle utilise des connaissances issues de plusieurs disciplines (infovis, design graphique, psychologie expérimentale, etc.). A partir de notre expérience en tant que concepteurs, nous avons défini les services qu'un outil instrumentant cette phase doit rendre. Nous avons réalisé la partie conception d'exemples et exploration des couleurs, et exposé les services et interactions nécessaires à la partie évaluation.

Durant nos projets de conception, nous avons remarqué que les échanges pluridisciplinaires ont nécessité un effort de formalisation par chacune des disciplines. En d'autres termes, chacun des membres d'une discipline a dû exercer une introspection pour identifier ses propres besoins et pour trouver une manière de les exprimer aux autres. Cet effort a permis une meilleure compréhension de sa propre discipline, et un approfondissement des connaissances sur l'articulation avec les autres disciplines.

En intégrant dès le départ la problématique pluri-disciplinaire, cet outil permet aux concepteurs de disposer en permanence des connaissances des autres disciplines, et de concevoir/explorer en connaissance de cause des potentiels impacts sur les autres disciplines. En revanche, nous n'avons pas cherché à disposer d'un « plus petit commun dénominateur », car un tel langage ne permettrait pas à chacune des disciplines de s'exprimer pleinement. De même, l'outil n'est pas destiné à rendre une discipline ou un seul concepteur omnipotent : les connaissances nécessaires à l'utilisation de chacune des parties sont spécifiques, et requièrent les compétences de chacune des disciplines. Il est bien destiné à une équipe pluri-disciplinaire, et est en lui-même le catalyseur des échanges pluri-disciplinaires, comme par exemple les échanges constants entre besoins issus du design, de l'infovis, et de l'expérimentation (« que dois-je faire ? comment le faire ? comment le vérifier ? de quel côté explorer ? »). Notre expérience nous a confirmé qu'il était indispensable de faire appel simultanément aux idées, concepts et méthodes de chacune de nos disciplines, et de créer une interaction entres elles. L'instrumentation de la conception du rendu permet donc de fournir un espace partagé de réflexion, de notation, de création (brainstorming) et de concrétisation, en évitant l'actuel asynchronisme des interventions pour favoriser un véritable travail interdisciplinaire.

Figure 1 :

 1 Figure 1 : Intégration de la conception graphique dans le cycle de développement actuel.

  Les contrôleurs des secteurs en-route doivent donc pouvoir faire une distinction globale entre des vols à destination de deux groupes d'aéroports différents (Roissy CDG et Orly), ainsi qu'une distinction plus fine entre les vols à destination d'un aéroport principal ou d'un terrain associé. En outre, certains vols dit « en transit » ne font que traverser le secteur et doivent être distingués des vols qui seront « livrés » aux secteurs d'approche. Actuellement, c'est l'utilisation de symboles attachés à chaque représentation de vol qui différencie les arrivées Roissy ou Orly (voir figure 3), mais ce codage visuel ne convient pas aux attentes des contrôleurs. En outre, ce codage ne prémuni pas contre l'erreur qui consiste à inclure un intrus dans un flux (par exemple un vol « Roissy » dans le flux « Orly »), notamment par les contrôleurs en formation. Pour pallier ces problèmes, la direction technique a commandé une étude visant à utiliser des couleurs pour différencier les différents flux. La demande est un compromis entre la volonté d'apporter des modifications visant à améliorer l'activité des contrôleurs et la volonté de ne pas bouleverser l'interface de façon telle qu'elle nécessiterait une validation et un effort de re-formation trop importants. Trois flux à différencier visuellement sont identifiés : Roissy CDG et terrains associés; Orly et terrains associés; vols en transit pouvant poser des problèmes d'interaction avec les vols des deux premiers flux. Au sein de chacun de ces 3 flux, il est également demandé de pouvoir discriminer 2 catégories d'avions, que nous appellerons sousflux.

Figure 3 :

 3 Figure 3 : Trafic terminal en-route vers les aéroports de Roissy et d'Orly, et détail de l'objet "vol"

Figure 4 :

 4 Figure 4 : Une brique graphique "vol" et son édition sous Inkscape

Figure 5 :

 5 Figure 5 : Création de 2 scènes exemples pour tester les couleurs des flux sur l'ensemble ou sur une partie de l'objet « vol »

Figure 6 :

 6 Figure 6 : ColorSlider, axes L, C et H, groupes de couleur et repères

Figure 7 :

 7 Figure 7 : premières maquettes de l'aide à l'évaluation du rendu, conception d'un test expérimental et génération assistée du protocole et d'un jeu de test.

  Pour le scénarioParis-Flux, il est possible d'utiliser le paradigme de la recherche visuelle et celui de la comparaison par paire. Dans le cadre du paradigme de la recherche visuelle, la tâche peut consister à rapporter verbalement la présence de flux sur l'affichage, ou bien de tracer le mouvement global d'un flux sur un écran tactile, ou bien encore d'en désigner un à un chacun des éléments. A l'inverse, il est également possible de rechercher et désigner les intrus pour un flux donné. Dans tous les cas, la recherche peut être rendue plus ou moins difficile en variant la complexité globale de l'affichage, le nombre d'intrus et la disposition géographique (alignement, proximité) des vols d'un même flux. Dans le cadre du paradigme de la comparaison par paire, la tâche peut être de reconnaître la couleur d'un vol parmi un ensemble de couleurs établi à l'avance. Les couleurs possibles sont affichées en permanence dans la partie inférieure de l'écran afin de favoriser la comparaison visuelle, ou bien ne figurent que nommément (par exemple, « rose clair » ou « rose foncé »). Le sujet doit cliquer sur la catégorie correspondant au vol apparaissant sur une image radar affichée à l'écran (cf figure

Revue. Volume X -n° x/année

Annick Lantenois, Colloque sur le Design Graphique, http://www.erba-valence.fr/dddaaa/

Revue. Volume X -n° x/année

Inkscape est un logiciel libre d'édition de graphismes vectoriels : http://www.inkscape.org/