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 menus (2)

Conception des éléments de menus




Mes commentaires :

Cette page aborde dans le détail la conception et l'organisation des menus. Vous allez pouvoir y prendre conscience de la variété des formes de menus disponibles, et des règles proposées par Apple pour rendre les menus plus clairs et plus faciles à utiliser.

Vous connaissez tous les raccourcis clavier associés aux items de menus, mais vous allez découvrir ici des détails auxquels on prête habituellement peu d'attention, comme les symboles associés aux items de menus, la signification de la présence d'icônes dans ceux-ci, ou les subtilités des menus à bascule.

Alors, bonne découverte...


Ce que dit Apple :

Les éléments de menus incluent des mots (et parfois des icônes) pour désigner les titres et les items de menus, et des symboles pour représenter les raccourcis-clavier, les sous-menus, des séparateurs, et l'état de certains items de menus. Ces éléments sont représentés sur la figure 1.

titre

Fig. 1 : Eléments des menus

1- Titrage des menus.

Les titres des menus (et des sous-menus) doivent représenter le contenu de façon adéquate. Par exemple, un menu Polices doit contenir le nom de familles de fontes, comme Helvética ou Genève, mais il ne doit pas inclure des commandes d'édition comme Couper ou Coller. Evitez d'utiliser des icônes comme titres des menus, et faites vos titres aussi courts que possible, sans sacrifier à la clarté.


2- Nommer les items de menus.

Les noms des items de menus peuvent être des actions exercées sur un objet, ou des attributs appliqués à l'objet.

• Les actions sont des verbes ou des phrases verbales qui déclarent l'action à appliquer à l'objet quand l'utilisateur choisit l'item. Par exemple, Enregistrer signifie Sauver mon fichier, et Copier veut dire Copier les données sélectionnées. Les commandes action de votre menu doivent commencez de la même façon, avec un verbe dans sa forme la plus simple.

• Les attributs sont des adjectifs ou des phrases qui décrivent la modification qu'une commande provoque. Des adjectifs dans un menu impliquent une action, et doivent pouvoir s'insérer dans une phrase du type " changer l'objet sélectionné en..." gras ou italique, par exemple.

Quand un menu n'est pas disponible (parce qu'il ne s'applique à l'objet sélectionné, ou à l'objet sélectionné dans son état courant, ou parce que rien n'est sélectionné), l'item est assombri (en gris) dans le menu, et ne s'éclaire pas quand l'utilisateur passe le pointeur dessus.

Utilisez la capitalisation de titre dans les mots du menu. En général, évitez des articles définis ou indéfinis dans un nom de menu. Un bon exemple est "Ajouter Compte" au lieu de "Ajouter un Compte", et "Cacher Barre Outils" au lieu de "Cacher la Barre d'Outils".

Des points de suspension (...) après un item de menu indiquent qu'une information complémentaire est nécessaire pour compléter la commande. Voir l'utilisation des deux points.

Il peut être souhaitable, dans certains cas, de fournir des items de menu dynamique, c'est à dire des commandes qui se modifient quand l'utilisateur appuie sur une touche modificatrice. Par exemple, si l'utilisateur ouvre le menu Fenêtres dans le Finder puis appuie sur la touche Opt, quelques items de menus peuvent changer, comme sur la figure 2. Le système définit la taille du menu pour l'item le plus long, y compris les commandes modifiées par Opt.

titre

Fig.2 : A gauche, sans la touche Opt ; à droite, avec la touche Opt.

Les items de menus dynamiques sont une façon satisfaisante pour fournir des raccourcis à des utilisateurs expérimentés. Mais comme ils sont cachés par défaut, il ne doivent jamais constituer la seule façon d'accomplir la tâche. Assurez-vous que vous n'exigez pas que les utilisateurs découvrent un menu dynamique avant d'avoir pratiqué l'application. Pour revenir à l'exemple des items minimisés dans la figure 2, notez que l'utilisateur qui n'a pas découvert le menu dynamique peut quand même minimiser toutes les fenêtres en les prenant l'une après l'autre.

Si vous décidez de fournir un item de menu dynamique, assurez-vous qu'il n'utilise qu'un seul modificateur pour être révélé. Dans le cas contraire, la procédure peut être physiquement difficile, et cela diminue considérablement les chances de découvrir le menu dynamique.

Vous pouvez utiliser Interface Builder pour définir des items de menus dynamique. Vous pouvez le faire aussi à l'aide des interfaces de programmation de l'Application Kit ; d'une façon précise, vous utilisez la méthode setAlternate: de NSMenuItem pour désigner un menu comme alternatif de l'autre.


3- Utilisation d'icônes dans les menus.

Vous devez utiliser du texte, non des icônes, pour les titres de menu de votre application. Le système d'exploitation fournit trois menus d'applications qui utilisent des icône à la place de texte pour leurs titres : Le menu Pomme, le champ de recherche de Spotlight, et le menu AppleScript qui est affiché si des scripts sont installés dans l'application. Les items de la barre de menu d'état sont aussi des icônes. Ces icônes (à l'exception du menu Applescript) sont toujours visibles dans la barre de menu quelle que soit l'application active, si bien que les utilisateurs peuvent s'habituer à leur signification. Cela constitue la seule utilisation de symboles comme titres de menus.

Vous pouvez utiliser des icônes dans les items de menus si l'icône peut être aisément associée à une fonctionnalité spécifique de votre application, ou si l'icône représente quelque chose d'unique. Par exemple, dans la figure 3 (à gauche), le Finder utilise des icônes pour le menu "Aller" parce que les utilisateurs peuvent les associer avec celles qu'ils qu'ils voient dans la barre latérale.

titre

Fig. 3 : A gauche, icônes dans le menus Aller du Finder ; à droite, icônes dans le menu historique de Safari.

Safari utilise aussi des icônes standard pour certaines pages Web, pour permettre aux utilisateurs de faire la liaison entre entre une page web et l'item de menu de cette page, comme sur la figure 3 (à droite).

Si vous incluez des icônes dans vos menus, mettez-en seulement pour les items pour lesquels cela a une valeur significative : n'en mettez pas pour chaque item de menu. Un menu qui comprend trop d'icônes peut être fouillis et difficile à lire.


4- Utilisation de symboles dans les menus.

Il y a quelques symboles standard que vous pouvez utiliser comme information additionnelle dans vos menus. Ils sont dans le tableau 1, et sont discutés dans le texte qui suit. N'utilisez pas d'autres symboles arbitraires dans les menus, parce qu'ils compliquent la vision et peuvent confondre les gens.

Tableau 1 : caractères acceptables dans les menus.
Symbole Signification
Le document actif dans le menu Fenêtre.Dans d'autres menus, s'applique à toute la sélection.
Réglage qui s'applique à une partie de la selection.
Une fenêtre avec des modifications non sauvegardées.
Dans un menu fenêtre, un document qui est minimisé dans le Dock.

Dans le menu Fenêtre, une coche doit signaler le nom du document actif. Les coches peuvent aussi être utilisées pour indiquer que les réglages s'appliquent à la sélection entière.Vous pouvez utiliser des coches pour des groupes d'attributs mutuellement exclusifs (l'utilisateur ne peut choisir qu'un seul item dans chaque groupe, comme la taille d'une police), ou pour des attributs cumulatifs dans des groupes (plus d'un item peut être sélectionné, comme gras et italique).

titre

N'utilisez pas de symboles arbitraires dans les menus.

Utilisez un boulet accolé au document pour les changements non sauvegardés, et un carreau pour un document que l'utilisateur a minimisé dans le Dock. Un document minimisé et non sauvegardé doit avoir un carreau seulement. Si la fenêtre active a des modifications non sauvegardées, la coche doit supplanter le boulet dans le menu Fenêtre.

Utilisez un tiret (dash) pour indiquer un attribut qui s'applique à une seule partie de la sélection. Par exemple, si le texte sélectionné a deux styles qui s'appliquent à lui, mettez un tiret à côté de chaque nom de style. Quand cela se justifie, vous pouvez combiner des coches et des tirets dans le même menu. Voyez le paragraphe suivant (menus à bascule).

Note : incluez une commande menu, comme "Simple" pour éliminer tout formatage dans un texte de style complexe.

titre

Quelques exemples de la façon d'utiliser des symboles dans les menus.

Si vous avez un menu Style, vous pouvez afficher les items de menu dans le style courant pour que les utilisateurs se rendent compte de l'effet que l'item de menu donnera. N'utilisez pas d'enrichissements de texte en dehors du menu Style.


5- Items de menus à bascule.

Un item de menu à bascule change d'un état à l'autre à chaque fois que l'utilisateur le choisit. Il y en a trois types :

• Un ensemble de deux items avec des états opposés ; par exemple, Grid On et Grid Off. L'état courant est marqué par une coche. Si vous avez de la place dans votre menu, c'est une bonne idée d'afficher les deux items, plutôt que de changer le nom en fonction de l'état ; il y a moins de chances de confusion au sujet de l'effet de chaque item.

• Un seul item de menu dont le nom change pour refléter l'état courant. Par exemple, Montrer la Règle, et Cacher la Règle. A utiliser s'il n'y a pas assez de place dans votre menu pour les deux états.
Utilisez deux verbes qui expriment des actions opposées. Assurez-vous que le nom de commande est sans ambiguité. Par exemple, Mettre la Grille, Supprimer la Grille, est sans ambiguité ; mais Utiliser la Grille pourrait la mettre (ce qui arrive quand on choisit la commande) ou la retirer (cela décrit l'état courant).

• Un item de menu avec une coche accolée quand il est en effet.Par exemple, un attribut de style comme Gras. N'utilisez pas cette forme pour indiquer la présence ou l'absence d'une caractéristique, comme une grille ou une règle : il n'est pas clair de savoir si la coche signifie que la caractéristique est en effet ou que le choix de cette cette commande va le mettre en effet.

titre

Evitez l'ambiguité dans les menus à bascule.




6- Groupement des items de menus.

Le regroupement logique des items de menus est un des aspects le plus important de leur organisation. Cela rend plus facile la localisation rapide des menus pour des tâches apparentées.

En général, mettez les items les plus souvent utilisés au sommet du menu, et créez des groupes d'items apparentés au lieu de les organiser strictement selon leur fréquence d'utilisation. Par exemple, bien que la commande Trouver encore, ou Trouver la suivante puisse être utilisée rarement, elle doit se trouver juste dessous la commande Trouver. Dans un menu qui contient à la fois des actions et des attributs, ne mettez pas les actions dans le même groupe que les attributs.

Si votre application permet la création de conteneurs ou de groupes de données intelligents (comme un dossier intelligent dans le Finder), regroupez toutes les commande qui sont associées à ce groupe intelligent (créer, modifier, supprimer) dans le même menu.

Les attributs d'un groupe peuvent être mutuellement exclusifs (l'utilisateur ne peut choisir qu'un item, comme la taille d'une police), ou cumulatifs (l'utilisateurs peut choisir de multiples items, comme Gras et Italique).

Si un menu répète un terme plus de deux fois, envisagez de consacrer un menu ou un menu hiérarchique à ce terme. Par exemple, si vous avez besoin de commandes comme Montrer l'information, Montrer les couleurs, Montrer les couches, Montrer la boîte d'outils, vous pouvez créer un menu Montrer, ou un sous menu Off de l'item Montrer.

Le nombre de séparateurs à utiliser dépend de considérations esthétiques et de facilité d'utilisation. Sur la figure ci-dessous, vous avec un menu avec un équilibre satisfaisant de groupement, et deux autres où le groupement est soit insuffisant, soit trop prononcé.

titre

Groupement satisfaisant (à gauche), trop de groupes (au centre), pas assez de groupes (à droite)




7- Menus hiérarchiques (sous-menus).

Vous pouvez utiliser des menus hiérarchiques (ou sous-menus) pour permettre un choix supplémentaire d'items de menus, sans prendre plus de place dans la barre de menu. Quand l'utilisateur pointe sur un item de menu qui a un indicateur de sous-menu, le sous-menu apparaît. Les sous-menus ont toutes les caractéristiques des menus, y compris les raccourcis clavier, les marqueurs d'état (comme une coche), et ainsi de suite.

Comme les sous-menu rajoutent de la complexité à l'interface, et sont physiquement plus difficiles à utiliser, vous ne devez les utiliser que quand vous avez trop de menus pour qu'ils puissent tenir dans la barre de menus, ou pour des commandes qui sont étroitement apparentées. N'utilisez qu'un seul niveau de sous-menus. Si un sous-menu contient plus de cinq items, envisagez d'en faire un menu.

Si vous utilisez des sous-menus, inscrivez-les dans un menu ayant une relation logique avec les choix qu'ils contiennent ; le titre du sous-menu doit clairement représenter les choix qu'il permet. Les menus hiérarchiques s'appliquent mieux à des sous-menus d'attributs qu'à des actions.

Utilisez des menus hiérarchiques au lieu d'indenter les menus. L'indentation n'exprime pas les interrelations entre les items de menus aussi clairement que le fait un sous-menu. Cependant, vous pouvez utiliser l'indentation en affichant une information personnalisée (comme une information d'état) dans le menu du Dock de votre application.

titre

Exemple de menu hiérarchisé

Comme pour les titres de menus, le titre d'un sous-menu s'affiche sans modification, même quand toutes les commandes du sous-menu sont invalidées (assombries). Les utilisateurs doivent toujours être capables de voir le contenu des sous-menus, que les choix soient disponibles ou non.