1. Mode Graphique
    1. 1- Principes fondamentaux
      1. Processus de conception
      2. Caractéristiques d'un grand logiciel
        1. Haute performance
        2. Facilité d'utilisation
        3. Aspect attractif
        4. Fiabilité
        5. Adaptabilité
        6. Interoperabilité
        7. Mobilité
      3. Principes de conception
        1. Principes (1)
        2. Principes (2)
        3. Principes (3)
      4. Pensez aux utilisateurs
        1. Compatibilité internationale
        2. Accessibilité aux handicapés
        3. Etendre l'interface
      5. Priorités
    2. 2- L'expérience du Mac
      1. L'environnement
        1. L'environnement (1)
        2. L'environnement (2)
      2. Les technologies
        1. Les technologies (1)
        2. Les technologies (2)
        3. Les technologies (3)
        4. Les technologies (4)
      3. Installation et mises à jour
        1. Packaging, installation
        2. Les assistants
    3. 3- L'interface Aqua
      1. Entrées utilisateur
        1. La souris
        2. le clavier
          1. Fonction des touches
          2. Raccourcis-clavier
          3. Navigation au clavier
        3. Sélection
        4. Edition de texte
      2. Glisser-déposer
        1. Glisser-Déposer (1)
        2. Glisser-Déposer (2)
      3. Le texte
        1. Les fontes
        2. Le style
      4. Les icônes
        1. Genres et familles d'icônes
        2. Création des icônes
        3. Icônes des barres d'outils
        4. Images propres au système
      5. Les pointeurs
      6. Les menus
        1. Comportement des menus
        2. Conception des menus
        3. La barre de menus
          1. Les menus (1)
          2. Les menus (2)
          3. Les menus (3)
        4. Menus contextuels et du Dock
      7. Les fenêtres
        1. Type et apparence
        2. Eléments
          1. Barre de titre
          2. Barre d'outils
          3. Barre de recherche
          4. Barre latérale
          5. Barre inférieure
          6. Les Tiroirs
        3. Comportement des fenêtres
          1. Comportement (1)
          2. Comportement (2)
          3. Superposition
          4. Défilement
        4. Les panneaux
          1. Les panneaux
          2. Panneaux transparents
          3. Autres panneaux
      8. Les dialogues
        1. Types de dialogues
        2. Aspect et comportement
      9. Fenêtres de dialogues
        1. Recherche, Préférences, Ouverture
        2. Enregistrement
        3. Choix, Impression
      10. Les contrôles
        1. Contrôles du cadre
          1. Contrôles en capsule
          2. Contrôles hérités
        2. Les boutons
          1. Boutons poussoirs
          2. Boutons en icônes
          3. Boutons de recherche
          4. Boutons de gradient, et d'aide
          5. Boutons à champfrein
          6. Boutons ronds
        3. Contrôles de sélection
          1. Boutons radio
          2. Cases à cocher
          3. Contrôles segmentés
          4. Boutons et menus pop-Up
          5. Menus Action
          6. Boîtes de combinaison
          7. Contrôles de chemin
          8. Puits, sélection de date
          9. Menus pop-down
          10. Glissières
          11. Contrôles pas-à-pas et placards
        4. Indicateurs
          1. Indicateurs de progression
          2. De niveau, de capacité
          3. D'estimation, de pertinence
        5. Contrôles de texte
          1. Champs d'entrée
          2. Champs à jeton
          3. Champs de recherche
          4. Listes de défilement
        6. Contrôles de visualisation
          1. Triangles d'affichage
          2. Boutons d'affichage
          3. Vues en liste
          4. Vues en colonnes
          5. Vues éclatées
          6. Vues à onglets
        7. Contrôles de groupage
          1. Séparateurs
          2. Boîtes de groupage
        8. Règles de disposition
          1. Dans le corps de la fenêtre
            1. Fenêtre de préférences
            2. Fenêtre à onglets
            3. Alerte, Dialogue
          2. Contrôles réduits et mini
            1. Contrôles réduits
            2. Mini contrôles
          3. Groupement des contrôles
          4. Positionnement dans la barre inférieure
      11. Glossaire
        1. Entrées en anglais
          1. 1- A à C
          2. 2- D à H
          3. 3- I à R
          4. 4- S à Z
        2. Entrées en français
          1. 1- A à C
          2. 2- C à G
          3. 3- I à P
          4. 4- P à Z
        3. `
    4. 4- Les leçons de Lion
      1. L'environnement de Mac OS X
      2. Principes fondamentaux
      3. L'expérience utilisateur
        1. Règles de conduite (1)
        2. Règles de conduite (2)
        3. Règles de conduite (3)
        4. Règles de conduite (4)
        5. Règles de conduite (5)
        6. Règles de conduite (6)
      4. Les technologies d'Apple
        1. Les technologies (1)
      5. -->
  2. Mode Commande

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.

figure figure

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

figure
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.

figure

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

figure

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.


figure

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...)


figure








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.


figure



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

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 figure


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. figure


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. figure

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) ?