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 dialogues : aspect et comportement




Ce que dit Apple :

Quand c'est nécessaire, les dialogues de votre application doivent afficher les valeurs par défaut des contrôles et des champs de texte, pour permettre à l'utilisateur de vérifier une information plutôt de la créer de toutes pièces.

Affichez une sélection, ou un point d'insertion dans le premier élément (champ d'entrée de texte ou liste par exemple), qui accepte une entrée de l'utilisateur.

S'il a un intérêt évident, un texte statique dans un dialogue doit être pouvoir être sélectionné. Par exemple, un utilisateur doit pouvoir copier un message d'erreur, un numéro de série, ou une adresse IP pour les coller ailleurs.

Dans les dialogues qui affichent des colonnes et peuvent être re-dimensionnés, comme un dialogue d'ouverture, si le dialogue est agrandi, les colonnes peuvent l'être aussi, et des nouvelles colonnes peuvent apparaître. Tous les autres éléments doivent conserver la même taille, et s'accrocher aux bordures droite ou gauche, ou au centre du dialogue.

1- Acceptation des modifications.

En général, tous les changements que fait un utilisateur dans un dialogue doivent apparaître et prendre effet immédiatement. Il y a trois possibilités de validation des données dans un dialogue :
• l'utilisateur entre des données.
• l'utilisateur sort d'un champ de données (en tapant Tab, par exemple)
• l'utilisateur clique un bouton qui applique les changements.

C'est à vous de rendre ces trois états aussi clairs que possible pour les utilisateurs. Par exemple, les cases à cocher et les boutons radio doivent se mettent à jour immédiatement, et afficher les résultats convenables.

Il vous faut décider quand l'application doit tester une erreur sur une entrée de l'utilisateur. Deux approches possibles :

• Evaluer l'entrée, et tester s'il y a erreur quand l'utilisateur passe au champ suivant. L'inconvénient, c'est qu'il n'est pas clair pour l'utilisateur à quel moment les modifications ont pris effet quand il passe avec Tab d'un champ à l'autre. Comme l'utilisateur ne clique pas un bouton, il n'est pas conscient d'accomplir une action.

• Sauvegarder les entrées de l'utilisateur dans une queue, et tester quand l'utilisateur clique un bouton, ou passe à une autre application. Si votre application attend, pour tester les erreurs d'entrée de l'utilisateur, qu'il sorte du dialogue, vous pouvez avoir à présenter une alerte, et forcer ainsi à re-parcourir le dialogue. Si vous faites le test d'erreur au moment de l'entrée, cela prend plus de temps, mais vous pouvez avertir l'utilisateur immédiatement en cas d'entrée invalide.

Dans la plupart des cas, il est ennuyeux et inutile de valider la frappe après chaque touche. Il vaut mieux concevoir votre interface pour corriger automatiquement une entrée invalide. Par exemple, vous pouvez convertir automatiquement une entrée de minuscule en majuscule si cela s'impose.

En plus des tests d'erreur, il vous faut savoir quand appliquer l'entrée de l'utilisateur. Dans certains cas, les modifications peuvent intervenir immédiatement, (par exemple, les options de présentation d'une fenêtre du Finder). Dans d'autres cas, il peut être préférable d'attendre que l'utilisateur accomplisse une action, comme cliquer sur un bouton "Appliquer".

Dans un dialogue avec des vitres multiples (qu'on sélectionne à l'aide de boutons, de tabulations, ou d'un menu pop-up), éviter de valider les données quand l'utilisateur passe d'une vitre à l'autre.

Et finalement, il vous faut décider si votre application doit accomplir automatiquement une opération quand l'utilisateur vient d'entrer une donnée, ou si c'est à l'utilisateur de déclencher l'opération, par exemple en cliquant un bouton. Il est possible d'accepter des opérations automatiques qui se terminent rapidement et redonnent le contrôle à l'utilisateur au bout d'une seconde ou deux. Pour une opération qui est plus longue à s'exécuter, il vaut mieux avertir l'utilisateur du temps estimé de l'opération, et attendre qu'il la déclenche lui-même.

2- Quitter les dialogues.

Les boutons, à droite d'un dialogue ont tous pour effet de quitter le dialogue. Le bouton qui déclenche une action est le plus à droite. Ce bouton action confirme toujours le texte du message d'alerte. Immédiatement à gauche, se trouve un bouton "Annuler" (Cancel).

S'il y a un troisième bouton, il vient à gauche du bouton "Annuler". S'il risque de provoquer une parte de données, (par exemple, "Ne pas Enregistrer"), éloignez-le d'au moins 24 pixels des boutons de sureté (Enregistrer et Annuler).

Un bouton qui affecte le contenu du dialogue lui-même, comme un bouton Reset (ré-initailiser) doit avoir sa marge gauche alignée avec le texte principal du dialogue, ou, s'il y a un bouton d'aide, il doit être à 12 pixels à droite de ce bouton (voir figure 1).

figure

Fig. 1 : position des boutons à la base d'un dialogue.

En général, le bouton le plus à droite, ou le bouton Annuler est le bouton par défaut. Le bouton par défaut est celui que l'utilisateur est le plus à même d'utiliser si l'action n'est pas dangereuse. Un bouton par défaut a une couleur et une animation qui informent l'utilisateur que c'est l'action par défaut. Si l'utilisateur tape sur la touche Entrée ou Retour, l'application doit répondre comme si le bouton par défaut avait été pressé.

N'utilisez pas de bouton par défaut si l'action peut être dangereuse, par exemple si elle peut provoquer une perte de données. S'il n'y a pas de bouton par défaut, la pression des touches Entrée ou Retour est sans effet ; l'utilisateur doit cliquer sur un bouton. Ces précautions empêchent un utilisateur d'endommager des données involontairement s'il utilise Entrée ou Retour. Vous pouvez aussi utiliser un bouton Annuler par défaut comme sur la figure 3 ci-dessus.

N'utilisez pas de bouton par défaut si vous utilisez la touche retour dans des entrées de texte. Deux comportements pour une même touche peuvent entraîner la confusion, et rendre l'interface moins facile à prévoir.

En plus du bouton d'action et d'autres, c'est une bonne idée de mettre un bouton d'annulation. Il renvoie l'ordinateur dans l'état où il était avant que le dialogue n'apparaisse. Il a pour signification "oublier ma dernière action". Faites toujours correspondre le raccourci-clavier Cmd-. ou Esc avec la touche Annuler. Ces équivalents clavier, comme Entrée ou Retour permettent à l'utilisateur de répondre rapidement à un dialogue ou à une alerte. En général, il ne vaut mieux pas associer d'autres boutons du dialogue à des raccourci-clavier. Mais si vous le trouvez utile, parce que quelques boutons sont utilisés très fréquemment, respectez les raccourcis réservés.

Parfois, il peut être utile de mettre un bouton "Appliquer", par exemple, pour permettre à l'utilisateur de voir l'effet de multiples attributs de texte avant de les conserver. Dans ces cas-là, le bouton annuler doit défaire ce qu'a fait Appliquer. Annuler ne soit jamais valider les changements que l'utilisateur a visualisés à l'aide d'Appliquer. Voyez le paragraphe suivant.

3- Un bouton "Appliquer" dans un dialogue.

Dans un dialogue, vous pouvez proposer un bouton Appliquer, qui affiche les multiples réglages affectant la présentation des données. Il permet à l'utilisateur de voir les effets de réglages, sans qu'ils soient définitifs. Ne l'utilisez pas pour des opérations qui peuvent être trop longues ou ne peuvent pas être défaites ; il n'est pas toujours évident pour l'utilisateur qu'il puisse interrompre ou inverser le processus. Les dialogues de sauvegarde, ou ceux qui permettent aux utilisateurs de changer ce qui n'a pas pu être pré-visualisé facilement ne doivent pas avoir de bouton Appliquer.

Cliquer sur le bouton Appliquer ne fait pas disparaître le dialogue, parce que l'utilisateur doit décider s'il accepte les modifications pré-visualisées (en cliquant sur le bouton OK), ou y renonce (en cliquant sur Annuler). N'utilisez pas le bouton Appliquer à la place d'un bouton OK : quand l'utilisateur sort du dialogue sans avoir appuyé sur OK, toutes les modifications pré-visualisées sont annulées.

4- Extension des dialogues.

Parfois, vous avez besoin de fournir à l'utilisateur une information supplémentaire dans un dialogue, mais vous ne voulez pas l'afficher tout le temps. Pour cela, utilisez un des contrôles d'extension disponibles pour étendre le dialogue, et affichez l'information ou les possibilités supplémentaires.

figure

Fig. 2 : Un triangle d'affichage, fermé et ouvert

Si vous voulez permettre à l'utilisateur de voir des détails résultants d'une première information dans le dialogue, utilisez un triangle d'affichage comme celui des listes hiérarchiques. Le triangle d'affichage étend le dialogue, révèle l'information supplémentaire, et si nécessaire, d'autres possibilités.

figure

Fig. 3 : Un bouton d'affichage, qui étend un dialogue d'enregistrement.

Si vous voulez permettre à l'utilisateur d'autres choix, proposés dans un pop-up ou une commande de menu pop-up dans un dialogue, utilisez le bouton d'affichage. Il étend le dialogue, pour révéler des sélections, en plus de celles listées dans un pop-up ou dans une commande de menu pop-up, comme dans la figure 3