Il existe une différence importante entre "voir", action instantanée et basée sur une compréhension implicite de signes, et "lire", une action qui demande un effort conscient, et un investissement en temps.

Dans le cadre du cours, nous utiliserons ce document comme base de projection :

Communication visuelle à l'écran. Une approche en image introduisant les notions de signe, d’icône, de métaphore, d’idéogramme... Télécharger (PDF - 5,9 Mo).

Afin de classer et d’évaluer ces signes ou images selon des critères explicites, nous utiliserons quatre outils expérimentaux, issus de trois domaines différents :

	Norm: The things. Dans le domaine du design graphique : un système de classification extrait du livre "The Things" conçu par le duo de graphistes suisses NORM (Dimitri Bruni & Manuel Krebs). Télécharger (PDF hi res - 13,5 Mo).
	Classification de Ralph E. Wileman. Dans le domaine de la communication : une classification de Ralph E. Wileman allant de symboles concrets ("pictorial") vers des symboles abstraits ("verbal"). Télécharger (GIF - 756 Ko).
	Abraham Moles : échelle d'iconicité. Dans le domaine de la communication : une "échelle d’iconicité" élaborée par Abraham Moles, allant de l'objet lui-même à sa description en mots. Télécharger (PDF - 1,9 Mo).
	René Magritte: les mots et les images. Dans le domaine de l’art : le document "Les mots et les images" de René Magritte, extrait du livre du même nom, présentant des phénomènes et observations de l'artiste. Télécharger (PDF - 360 ko).

Après avoir analysé différents exemples et applications de signes graphiques, nous examinerons ces notions dans le cadre précis des interfaces graphiques. L'écran et les objets graphiques réactifs dont il est doté : sollicitations diverses (hypertexte, boutons, champs de saisie, etc), autorisant des actions (clic, drag and drop, saisie de texte, etc) exécutant à leur tour des processus (calculs, résultats).

Vers l'interface graphique (GUI : Graphic User Interface). Un cheminement en image vers ce que nous connaissons aujourd'hui. Télécharger (PDF - 2,0 Mo).

Dans un contexte numérique de compréhension rapide (voire intuitive), les icônes sont conçues pour être vues et comprises en même temps. Elles sont inductrices et magnétiques.

L'utilisation des icônes et des pictogrammes a pour but d'améliorer l'ergonomie et le confort de navigation,
en créant des raccourcis visuels, immédiatement perçus et déchiffrés, donc sécurisants.
Telle est du moins leur vocation incontournable: rien de plus problématique qu'une icône incompréhensible.
Une icône n'a pas droit à l'erreur. Son efficacité doit être évaluée strictement, sans complaisance.
Il s'agit ici de fonction de l'image, de mécanique de signe et forcément d'efficacité.

Deux exemples éloquents de créateurs "historiques":
- Susan Kare, créatrice (notamment) des icônes des premiers OS Macintosh de Apple.
- Icon Factory, créateurs des icônes et de l'environnement desktop de Mac OS X.

Exemples:

Dossier Suzan Kare Télécharger (PDF - 876 Ko).

La métaphore (du grec metaphorá, signifiant "transport") est une figure de style, initialement utilisée dans le domaine littéraire ou linguistique, qui consiste à présenter une idée sous le signe d'une autre idée plus frappante.

Il s'agit donc d'une transposition de sens. Le recours à la métaphore fait partie des moyens utilisés par les créateurs graphiques pour amplifier la compréhension d'un concept ou d'un point de vue. Dans les domaines de l'affiche, de l'illustration ou du dessin de presse, la métaphore est sans doute le véhicule de sens le plus utilisé en communication visuelle.

Quelques exemples connus :



Quelques images métaphoriques classiques : quel(s) concept(s) peuvent-elles exprimer ?




Dans le domaine des interfaces graphiques, la métaphore est utilisée pour favoriser la navigation, l'ergonomie, et la perception des contenus. L'interface graphique d'un logiciel ou d'un site est à la fois un mode d'emploi et une vitrine. Il s'agit donc de l'organiser afin d'induire une compréhension de la navigation, de l'arborescence ou des opérations possibles. La métaphore du bureau (desktop) utilisée par les premiers sytèmes Macintosh en est un excellent exemple.

Quelques icônes métaphoriques créées par Suzan Kare :



La métaphore dit beaucoup avec peu : l'arborescence devient un arbre, la navigation devient une carte, une loupe ou une boussole. Les lieux familiers (maison, bureau...), les lieux intimes (poches, tiroirs...), urbains (rue, autoroute, carrefour...), les objets (porte, boîte, panier...) sont également sollicités comme métaphores des fonctions de logiciels ou de programmes utilitaires.

La métaphore devient une icône, l'icône devient un bouton... L'interactivité n'étant pas née hier, les interfaces métaphorisent abondamment nos machines familières, grandes ressources de choix multiples: ascenceurs, téléphones, télévisions, claviers etc. Face à un contenu complexe, une métaphore simple reste un des plus puissants leviers pour hiérarchiser l'information. À contrario, l'originalité d'une métaphore peut cependant être un risque de confusion et nuire à la compréhension.

Les liens complexes qui relient le sens des mots et des images sont brillamment démontrés par Magritte dans son livre-culte "Les mots et les images" (Éditions labor).

Lire "Le mythe de la métaphore". Un article d’Alan Cooper (juin 1995).

Icône et écriture sont liées historiquement. L'engendrement de l'écrit par l'image semble une grande constante. Les formes les plus anciennes de l'écriture sont les pictogrammes, les glyphes (image, en grec). Les pictogrammes sont des réalisations graphiques à fort degré d'iconicité: ils figurent les objets du réel par analogie, mais ils se distinguent de l'icône proprement dite par leur fonction de communication. Si les pictogrammes ne sont pas vraiment de l' "écrit" au sens moderne du mot, ils sont du texte: ces dessins ou tableaux donnent lieu à la parole, transmettent socialement du sens. Le déchiffrement n'est pas celui du système de notation phonétique, mais celui d'un système iconique qui organise visuellement la signification.

Exemples:

Télécharger une collection de pictogrammes (PDF - 1,2 Mo).

L'apparition de l'idéogramme, forme plus abstraite et simplifiée, marque le passage à l'écriture phonétique, à l'alphabétisation de l'écrit. Le signe idéographique n'a pas de sens en lui-même (il ne représente pas un objet), il ne prend son sens que par rapport aux autres signes qui l'accompagnent, en s'associant et se combinant. Il n'a plus fonction d'unité représentative, mais "distinctive", au sein d'un système: c'est sa place dans l'espace (la ligne, le support) qui lui confère sa valeur grammaticale. On est devant une écriture au sens moderne du terme.

Exemples:

Lire également "Le mythe de la métaphore". Un article d’Alan Cooper (juin 1995).

L'écriture égyptienne permet de saisir le passage entre système pictographique et idéographique. Le hiéroglyphe (image sacrée) est utilisée du IVe siècle av. J-C jusqu'au IVe siècle. Scribes, sculpteurs couvrent d'un grouillement fabuleux de personnages, animaux et objets, les murs, les sculptures, et tous les supports: bandelettes de lin, papyrus, cuir, tablettes de bois (exercices scolaires), éclats et tessons de poteries (brouillons), récipients, mobilier, bijoux... Production qui témoigne des différents états de l'écriture où l'on voit se mêler peu à peu aux pictogrammes anciens l'écriture "hiératique", forme sociale de l'écriture des signes les plus usuels aux formes devenues conventionnelles : simplification graphique, mélange de signes idéographiques, syllabiques...

La chouette = M.
Ve dyn.	XIe dyn.	XVIIIe dyn.	XXIe dyn.	Époque romaine.

Cyberwork. Une usine.
Tiger sushi. Une ville futuriste.
Kid city. Une autre ville ludique et futuriste.
Solo pixel. Autre ville du même genre.
They might be giant. Un tir forain.
Les chinois. Un bureau très interactif.
Black mustache. Autre type de bureau.
Tsé-Tsé. Un atelier encombré.
Animal Logic. Tout se passe dans la boîte d'un jeu de chimie.
Julie Chloé. Un Viewmaster.
Eyezmaze. Interface graphique métaphorique d'un lieu par On.

MacPaint evolution. Un article sur le pionniers des logiciels graphiques, sur Folklore.
Apple Icons. Les icônes Mac OS X, Apple Human Interface Guidelines sur le site Developer Apple.
Creating Windows XP icons. Spécifications des icônes pour Windows sur Microsoft Developer Network.

Automatic icons organize files. Un article sur TRN.
VisualIDs: Scenery for Data Worlds.
Icon Factory. Société de conception d'icônes et d'interfaces.
FireWheel Design. Création d'icônes, d'identités visuelles, d'interfaces graphiques.
Bombia design. Création d'icônes.
Iconbase. Création d'icônes.
Iconbuffet. Création d'icônes.
Iconkits. Création d'icônes.
DV-graphics. Création d'icônes.
Luke W Icon system. Création d'icônes et d'interfaces graphiques.
Electriconland. Création d'icônes.
I heart NY. Création d'icônes, d'identités visuelles, d'interfaces graphiques.
Iconizer. Ressources sur le design d'icônes.
Ilicon. Icônes, webdesign.
Mac monkies. Infos sur les éléments graphiques du Mac.
Monsieur Merou. Icônes, illustrations.
Icontool. Outil dédié au traitement des icônes sous Windows.
Mac anatomy. Icônes.
Widget. Icônes.
Symbol signs. Une cinquantaine de pictogrammes téléchargeables (gif et eps) sur le site AIGA.
Media Streams. Un projet expérimental d'annotation video par Golan Levin et Marc Davis.
K10K. Portail graphique. L'art de l'interface, au pixel près ! Une réalisation de Cuban Council.
Icon Bazaar. Portail un peu foutraque.