Les icônes (1) : Genres et famille d'icônes

Ce que dit Apple :

Ce chapitre décrit la philosophie d'ensemble qui se cache derrière les icônes, et comment concevoir des icônes pour une application, un document, une barre d'outils, ou d'autres choses sous Mac OS X.

Aqua propose un style d'icônes photo-illustratif : il se rapproche du réalisme d'une photographie, mais il utilise les caractéristiques d'une illustration pour fournir beaucoup d'information dans un petit espace. Les icônes peuvent êtres en 512 x 512 pixels pour permettre beaucoup de détail. L'anti-crénelage rend possible les courbes et les lignes non rectilignes. Le canal alpha et la semi-transparence permet un ombrage complexe et une sensation de dimension. Tout cela permet de créer des icônes attractives, brillantes, qui attirent l'attention de l'utilisateur.

Pour représenter votre application, il est important de créer pour elle des icônes de haute qualité, qui s'insèrent correctement dans les endroits où des icônes apparaissent : le Dock, le Finder, les vues de Coup d'œil (Quick Look), les dialogues d'alerte, et ainsi de suite.

1- Genres et famille d'icônes

Les genres d'icônes renseignent l'utilisateur sur ce qu'il peut faire avec une application avant même de l'avoir ouverte. Les applications se différencient en applications, utilitaires (et d'autres), et chaque catégorie, ou genre, a son propre style d'icône. La création d'icônes qui exprime ces différences aide l'utilisateur à distinguer les différents types d'icônes dans le Dock.

titre

Des icônes de genres différents (icônes d'applications et d'utilitaires) comme elles peuvent apparaître dans le Dock.

Par exemple, les icônes des applications sont colorées et attrayantes, alors que les icônes des utilitaires ont un aspect plus sévère. Sur la figure ci-dessus (à gauche), les icônes d'applications sont sur la première ligne, et celles des utilitaires sur la seconde.

La flexibilité graphique des icônes d'Aqua peut aussi aider les utilisateurs à différencier les fichiers associés à une application. Dans iTunes, par exemple, -figure ci-dessus (à droite)- un motif semblable est présent sur toutes les icônes associées à iTunes pour former la famille.

a- Les icônes d'applications

Les icônes d'applications sont les plus visibles pour les utilisateurs. Comme on les voit dans le Finder et le Dock, même si l'application ne tourne pas, elles concourent à une part importante des premières impressions de l'utilisateur.

• Icônes des applications proprement dites

figures

Icônes d'applications : Text Edit, Aperçu, Aide-mémoire.

Elles doivent être attirantes et visibles, et doivent immédiatement suggérer l'objet de l'application. Par exemple, l'icône de Text Edit indique clairement que c'est une application pour créer des documents de texte.

Si le but principal d'une application est de créer ou de gérer des média, son icône doit indiquer le type de média que l'application crée ou visualise. au besoin, l'icône doit aussi contenir un outil qui indique le type de tâche que l'application permet. Par exemple, l'icône d'Aperçu utilise une loupe pour suggérer que l'application permet de voir des images. Si vous utilisez un outil de ce genre, il doit être étroitement associé à l'objet de base sur lequel il repose.

Dans l'application Aide-mémoire, les rectangles jaunes identifient clairement des post-it, et l'icône n'a pas besoin d'autre chose pour indiquer à quoi sert l'application. Notez que le texte de ces post-it est du texte authentique, pas de simples lignes censées représenter du texte. Si vous voulez cacher du texte dans une icône, utilisez du texte normal, et rendez-le illisible en le rétrécissant ou en doublant les couches.

En général, les icônes des applications de Mac OS X sont conçues pour apparaître comme si elles étaient sur le bureau en face de vous. Elles présentent une perspective légèrement fuyante (elles sont plus larges à la base).

• Icônes des visualiseurs et des accessoires

Certaines applications qui représentent des objets ou des produits bien connus, comme une calculette ou QuickTime Player sont plus facilement reconnues par les objets ou les symboles eux-mêmes. Les icônes pour ces applications sont plus esthétiques si elles constituent une représentation simplifiée, idéalisée de l'objet ou du symbole au lieu de correspondre à une copie d'écran. Il est important de recréer ces objets quand l'utilisateur pourrait confondre une icône avec l'interface de l'application.

titre

Les icônes de QuickTime Player, de DVD Player, et de la calculette.

Ces icônes utilisent une perspective droite plutôt que la perspective fuyante des icônes d'applications ; vous ne voyez jamais la calculette en trois dimensions sur l'écran, et son icône reflète cette situation.

• Icônes des utilitaires

titre

Utilisation discriminante de la couleur dans le Moniteur d'activité et les Informations Système

Les icônes pour les utilitaires (qu'on utilise moins souvent, et pas pour s'amuser ou pour des activités créatives) ont un aspect plus sérieux que celui des applications. Elles sont principalement grises, et une couleur non saturée n'est ajoutée que quand elle est nécessaire pour indiquer clairement ce que fait l'application.

Comme ces applications sont normalement ciblées sur un ensemble limité de tâches, il est préférable de limiter au minimum le nombre des éléments de l'icône. Le foyer doit être un seul objet qui représente l'utilitaires. La perspective est droite, comme si l'icône était sur l'étagère, en face de vous.

b- Les icônes des documents

Traditionnellement, l'icône d'un document ressemble à une feuille de papier, avec le coin supérieur droit replié. Comme cela a été suggéré, l'icône doit indiquer quelle application est utilisée. Par exemple un document d'Aperçu comprend l'image utilisée dans l'icône de l'application. Pour simplifier et éviter la confusion avec l'application elle-même, la loupe n'est pas reproduite.

Les icônes de documents sont présentées comme si elles survolaient le bureau, avec une ombre derrière le document.
Si vous voulez mettre un badge d'identification sur l'icône d'un document, traitez ce badge comme un élément intégré au document mais ne le superposez pas à l'image, et n'altérez pas la forme du document

c- Les icônes des barres d'outils

titre

Les icônes de la barre d'outils de Keynote décrivent les objets et les tâches d'une façon simple et directe.

Elles représentent fréquemment des commandes de l'application. Normalement, elles ne sont pas aussi riches en détails et en photo-réalisme que les autres types d'icônes, parce qu'elles ne représentent que des figurations de petite taille d'objets ou de tâches spécifiques à l'application. Par exemple, les icônes de la barre d'outils de Keynote sont plus apparentées à des dessins qu'à des photos, utilisent des formes simples, évitent l'ombrage, et comportent les détails minimum pour suggérer chaque item.

d- Icônes des greffons, du matériel, et des média amovibles

L'icône d'un greffon

Les icônes de greffons sont des composants empilables avec un identifiant de l'application qui leur est appliqué sur le côté gauche, et une image spécifique au greffon à droite.

Les icônes représentant le matériel sont souvent sur le bureau. Comme ils sont souvent manipulés et transportés, les gens sont habitués à y voir des objets tri-dimensionnels, qui ont leur poids. La représentation tri-dimensionnelle de ces icônes renforce l'association avec les objets réels.

Pour faciliter l'identification des périphériques externes, ils sont associés au symbole de l'interface utilisée (Firewire, USB, etc...)

Les média amovibles, comme les CD, les disquettes, les cartes PC sont figurés de la façon dont ils se présentent quand vous les tenez en face de vous, avec une perspective directe.

e- La perspective et les matériaux des icônes

Les angles et les ombrages utilisés pour décrire les icônes sont censés refléter la façon dont les objets apparaissent dans la réalité. Tous les éléments d'interface ont une source d'éclairage commune, directement au dessus. Les différentes perspectives sont obtenues en modifiant la position d'un appareil photo imaginaire qui enregistrerait l'icône.

Les icônes des applications apparaissent comme posées sur le bureau en face de vous.

Les icônes des utilitaires sont représentées comme si elles étaient sur une étagère, en face de vous. Les objets plats apparaissent comme s'il y avait un mur derrière eux, avec un ombrage derrière l'objet

Des objets réels en trois dimensions comme une fusée sont normalement vus reposant sur le sol. L'icône correspondant repose sur une étagère, avec un ombrage derrière.

Pour les icônes des barres d'outils, la perspective est directe, comme si l'objet était sur une étagère en face de vous, avec une ombre dessous.

Les icônes qui représentent des objets réels doivent être représentés avec des matériaux réels. Examinez divers objets, étudiez les caractéristiques du plastique, du verre, du papier, du métal. Votre icône sera plus réaliste si vous y ajoutez une sensation de poids et de toucher.

N'utilisez la transparence que si elle est convaincante, et aide à l'interprétation de l'icône. Vous ne verrez jamais une sneaker transparente ; n'en utilisez donc pas dans vos icônes.

Mes commentaires :

Le raisonnement d'Apple est visiblement en défaut à propos de l'application Aperçu : l'icône indique clairement que c'est un visualiseur d'images, mais Aperçu est aussi une application qui affiche (et peut en partie gérer) des fichiers PDF, et cela passe complètement inaperçu. La faute incombe plutôt à la nature hybride de l'application, qui fait deux choses fort différentes à la fois, et Apple s'est faite attraper à son propre piège !

Avant d'avoir lu ce qui précède, vous ne soupçonniez sans doute pas toutes les subtilités qu'Apple a voulu cacher dans ses icônes. Les choses nous paraissent si naturelles que nous ne songeons pas à leur complexité. Voilà encore un exemple du soin extrême apporté à l'interface utilisateur, et en tant qu'utilisateurs, nous ne pouvons que nous en féliciter.

Alors, la question reste posée avec insistance : pourquoi les dérives récentes observées dans Snow Léopard (et avant) ?