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

Principes de conception de l'interface utilisateur (1)




Rappelez-vous que ces instructions (guidelines) sont à l'usage des développeurs de logiciels pour le Mac. Comme elles ne sont disponibles à tous qu'en anglais, j'ai résolu de les mettre à la disposition d'un public francophone, car, à mon avis, même pour un simple utilisateur, elles sont dignes d'être connues. Elles vous permettront de mieux appréhender ce que vous faites, ou pouvez faire. Il ne s'agit pas ici d'une traduction littérale, mais d'un compte-rendu fidèle de l'essentiel du contenu. Vous pouvez toujours vous reporter au texte original, dont les liens sont indiqués chemin faisant, en cas de doute ou pour vérification. Je me suis efforcé de distinguer clairement ce qui est d'Apple (rendons à César ce qui est à César), et mes propres commentaires quand j'ai jugé qu'ils pouvaient être opportuns.


Ce que dit Apple :

Les principes définis il y a vingt cinq ans et toujours largement valables, assurent une interface utilisateur élégante, efficace, intuitive, et maintenant conforme à Aqua. En voici les plus importants :

1- Les métaphores

Tirez parti de la connaissance des gens en utilisant des métaphores pour véhiculer les concepts et les caractéristiques de l'application ; les métaphores sont les briques du modèle mental de l'utilisateur pour une tâche : des images concrètes et familières, qui doivent être une évidence ; par exemple, la métaphore de dossiers pour stocker des documents sur disque à la manière d'armoires de stockage. Les listes de lecture (playlists) d'iTunes ou les Albums de iPhoto sont d'autres métaphores du monde de la musique ou de la photo. Un widget de Dashboard peut aussi être une métaphore de la tâche qu'il exécute, parce qu'il la propose instantanément à l'utilisateur.

Les métaphores doivent suggérer l'utilisation d'un élément particulier, mais cette utilisation ne doit pas limiter l'implémentation de la métaphore : par exemple, le nombre d'items qu'on peut mettre dans la corbeille de l'ordinateur est illimité, comparé à la taille d'une corbeille matérielle.

2- Respecter le modèle mental de l'utilisateur

L'utilisateur a déjà un modèle mental de la tâche qu'il veut accomplir. Ce modèle résulte de son expérience avec le monde réel, avec d'autres logiciels, et avec les ordinateurs en général. Par exemple, les utilisateurs ont une expérience concrète de l'écriture et de l'envoi de courrier, et la plupart ont utilisé des logiciels de courriel pour le faire. D'après cette expérience, ils s'attendent à pouvoir créer une nouvelle lettre, à en fixer le destinataire, et à l'envoyer. Une application de courriel qui ignorerait ce modèle mental ne répondrait pas aux besoins de l'utilisateur, et serait difficile et désagréable à utiliser, parce qu'elle imposerait un modèle conceptuel non familier.

Avant de concevoir l'interface utilisateur d'une application, cherchez à découvrir le modèle mental qui en est sous-jacent ; identifiez les métaphores inhérentes au modèle qui constituent les composants conceptuels de la tâche. Dans l'écriture d'une lettre, les métaphores des composants comprennent les lettres, les boîtes à lettres, et les enveloppes. Dans le modèle mental de la photographie, les métaphores incluent les photos, les appareils photo, et les albums. Essayez de respecter les attentes de l'utilisateur pour les composants de la tâche, son organisation et son comportement dans l'organisation de la fenêtre, des menus et de la barre d'outils, et dans l'utilisation de panneaux.

Le modèle mental des utilisateurs doit guider la conception de l'interface utilisateur. Il doit déterminer la disposition des fenêtres de l'application, la sélection et l'organisation des icônes et des contrôles dans les barres d'outils, et la fonctionnalité des panneaux. Essayez aussi d'y associer les caractéristiques suivantes :
• La familiarité : le modèle mental de l'utilisateur repose sur son expérience ; quand c'est possible, renforcez les éléments de l'interface utilisateur avec les symboles utilisés dans le modèle : par exemple, l'application iTunes affiche les contrôles utilisés pour la lecture, la pause, et le re-bobinage ; un utilisateur sait spontanément utiliser ces composants standards quand il les rencontre comme composants de l'interface, quelle que soit l'application dans laquelle ils apparaissent.
Quand cela se justifie, utilisez les composants de l'interface standard pour fournir des fonctionnalités standards, comme la recherche et la navigation dans des ensembles de données.
• La simplicité : un modèle mental est typiquement linéaire, et se concentre sur les composants fondamentaux de la tâche. Il peut y avoir une myriade de détails associés à la tâche, mais ils ne doivent pas distraire l'attention des utilisateurs des composants de base.
Dans iTunes, par exemple, les composants de base (jouer une mélodie, choisir une liste de lecture, chercher) sont privilégiés ; mais ils sont complétés par des items de menus facilement accessibles, et des contrôles qui assurent des tâches complémentaires comme l'éjection d'un disque, le mélange d'une liste de lecture, ou l'affichage de la jaquette.
• La disponibilité : c'est un corolaire de la simplicité ; une interface dépouillée est importante, mais la disponibilité de réglages ou de caractéristiques essentielles dont l'utilisateur a besoin tout autant ; évitez de les cacher trop profondément dans des sous-menus, et rendez-les accessibles seulement dans des menus contextuels.
Par exemple, iCal a des commandes dans le menu pour publier un calendrier ou en créer un nouveau. Ces tâches sont facilement accessibles, mais leur fréquence ne justifie pas des contrôles spécifiques dans la fenêtre principale.
• La découverte : incitez vos utilisateurs à la découverte en fournissant des signaux clairs : si un élément est cliquable, il doit apparaître comme tel, ou l'utilisateur ne cliquera jamais dessus. Utiliser correctement les contrôles d'Aqua.
Par exemple, les contrôles d'Aqua sont tri-dimensionnels pour ressembler à des boutons réels ; des icônes dans une barre d'outils doivent rendre leur utilisation reconnaissable par les utilisateurs. Cette familiarité donne confiance pour explorer les fonctionnalités de l'application.
Ne pas décourager la découverte en provoquant des actions difficiles ou impossibles à annuler ou à défaire.

3- Actions explicites et implicites

Toute opération sous Mac OS X implique la manipulation d'un objet à l'aide d'une action. L'utilisateur repère d'abord l'objet sur l'écran, puis il le sélectionne, ou le désigne ; finalement, il accompli l'action, en utilisant une commande de menu, ou en manipulant directement l'objet avec la souris. Il y a deux paradigmes pour manipuler les objets :

• Les actions explicites définissent clairement le résultat de la manipulation de l'objet. Par exemple, les menus détaillent les commandes qui peuvent être effectuées sur l'objet sélectionné. Le nom de la commande de menu indique clairement l'action, et son mode de présentation (éclairé ou assombri) indique si l'action est valide pour l'objet en question. Les actions explicites n'obligent pas l'utilisateur à mémoriser les commandes disponibles pour un objet.

• Les actions implicites déclenchent l'action à l'aide de signaux visuels ou selon le contexte ; par exemple, une opération glisser-déposer : glisser un objet sur un autre établit une relation entre les deux objets, et déposer accomplit l'action impliquée par le dépôt. Ainsi, glisser l'icône d'un fichier dans la corbeille signifie la suppression du fichier correspondant du système de fichiers. Pour que les actions implicites soient claires, l'utilisateur doit pouvoir identifier les objets concernés, la manipulation à exécuter, et les conséquences de l'action.

Développeurs, gardez ces deux paradigmes à l'esprit en concevant votre interface. Considérez le modèle mental de l'utilisateur pour la tâche de votre application, pour déterminer l'action à accomplir. Par exemple, Automator accepte des actions implicites quand l'utilisateur glisse des actions dans le panneau des processus, et crée des relations entre elles ; Automator établit ces relations en affichant des points de connexion entre les actions, avertit de conséquences potentiellement indésirables et suggère des types d'entrée et de sortie. Cependant, quand il a besoin d'une information spécifique de la part de l'utilisateur, Automator utilise des actions explicites, en affichant des cases à cocher ou des champs de texte éditables.

4- Les manipulations directes

Une manipulation directe est un exemple d'action implicite qui donne aux utilisateurs le sentiment qu'ils contrôlent les objets représentés dans l'ordinateur. Un objet sur l'écran doit rester visible pendant qu'on accomplit une action dessus, et l'impact de l'action doit être visible immédiatement. Par exemple, lors une opération glisser-déposer (la plus courante des manipulations directes), l'utilisateur peut déplacer un fichier en glissant son icône d'un endroit à un autre, ou glisser une sélection de texte d'un document dans un autre. Le re-dimensionnement d'un objet graphique dans une application de dessin, ou le positionnement d'un objet ou d'un appareil photo dans une scène tri-dimensionnelle sont d'autres exemples.

Permettez la manipulation directe quand les utilisateurs comptent dessus ; évitez de les obliger à utiliser des contrôles pour manipuler les données. Par exemple, une application qui gère une bibliothèque virtuelle peut autoriser l'utilisateur à déplacer l'icône d'un livre sur le nom d'un éditeur pour l'identifier. Une telle manipulation est conforme au modèle mental de l'utilisateur, et beaucoup plus naturelle que d'ouvrir une fenêtre, sélectionner un titre de livre, sélectionner un nom d'éditeur, et appuyer sur un bouton pour tester la correspondance.

5- Le contrôle à l'utilisateur

C'est l'utilisateur, pas l'ordinateur, qui initie et contrôle les actions. Quelques applications cherchent à assister l'utilisateur, en ne lui proposant que les alternatives considérées comme bonnes, ou en l'empêchant de prendre certaines décisions. Cela met l'ordinateur, et pas l'utilisateur en position de contrôle, et ne doit être utilisé que pour l'interface dédiée à des utilisateurs débutants.

Proposez un niveau de contrôle par l'utilisateur adapté à votre public. La règle est de fournir aux utilisateurs les fonctionnalités dont ils ont besoin, en leur évitant des actions dangereuses et irréversibles. Par exemple, si une situation risque de détruite des données accidentellement, il faut toujours avertir l'utilisateur, mais lui permettre de le faire s'il en décide ainsi.


Quelques commentaires :

J'ai essayé de vérifier l'origine de ces recommandations en feuilletant les anciennes documentations d'Apple :

Le gros volume Inside Macintosh Vol VI (Avril 1991) détaille en une page les "Principes de conception de l'interface utilisateur". Je n'ai malheureusement pas le détail, le volume "Human Interface Guidelines, The Apple Desktop Interface" parmi les six volumes que je possède de "Inside Macintosh" publiés par Apple, ni les 14 volumes de la collection "New Inside Macintosh" publiés pas Addison Wesley à partir de 1992. Un trou regrettable dans ma collection !

Les "Principes de conception de l'interface utilisateur" de la page citée ci-dessus abordent les concepts suivants :
• Métaphores du monde réel.
• Manipulation directe
• Voir et pointer (pas se souvenir et taper)
• Cohérence (à l'intérieur d'une application, et d'une application à l'autre)
• WYSIWYG (What you see is What you get)
• Contrôle par l'utilisateur (pas par l'ordinateur)
• Rétroaction (feedback) et dialogue
• Pardon (forgiveness)
• Stabilité ressentie
• Intégrité esthétique.

Celles qui nous intéressent dans cette page (Métaphore, manipulation directe, contrôle par l'utilisateur) étaient déjà la clé de voûte de l'interface utilisateur au début des années 1990, quand ont été publiés ces volumes.


figure

Dans ma collection de CDs, je dispose aussi de "Aqua Human Interface Guidelines", du 1er octobre 2001. A gauche, vous en voyez le sommaire du chapitre 3, qui reprend visiblement le contenu des "Human Interface Guidelines, The Apple Desktop Interface" manquant à ma collection de livres, à quelques détails près (ajout du refus de comportement modal).

La conclusion évidente est que les principes de conception de l'interface utilisateur des premiers Macintosh ont été conservés au moment de la sortie de Mac Os X (en 2001) et qu'ils sont (heureusement) toujours d'actualité : Mac OS X a repris les principes fondamentaux qui ont fait le succès du Macintosh, et on ne peut que s'en féliciter. Mais dans la dernière version des AHUG nous aurons l'occasion de voir les modifications apportées depuis 10 ans, en comparant avec les "Aqua Human Interface Guidelines" dont j'ai conservé le CD.

Dans la page qui nous occupe, il n'y a pas de différence fondamentale entre la version actuelle et celle de 2001 ; ce sont souvent les mêmes termes repris d'une version à l'autre ; on trouve toutefois dans la version actuelle des exemples plus précis et plus nombreux, et deux concepts qui n'existaient pas en 2001 : le modèle mental de l'utilisateur, et les actions explicites et implicites. Apple a formalisé un peu plus certains concepts, mais l'héritage de Mac OS Classique est flagrant.