Boutons et menus pop-up.

Ce que dit Apple :

Boutons avec menus pop-up.

Un bouton à chanfrein ou un bouton en icône qui contiennent un menu pop-up ont un triangle avec la pointe en bas. Le bouton peut se comporter comme un menu pop-up standard, dans lequel l'image sur le bouton est la sélection courante, ou il peut représenter le titre du menu, et affiche alors toujours la même image.

Important : un bouton en icône avec un menu pop-up est l'un des trois contrôles du corps de la fenêtre qui peut aussi être utilisé dans le cadre de celle-ci.

Un bouton en icône ou à chanfrein avec un menu pop-up est facile à créer sous Interface Builder. D'abord, glissez un bouton pop-up (un objet NSPopUpButton object) dans votre fenêtre; Sélectionnez le bouton, et dans la vitre Attributs de l'Inspecteur, changez son type en Pull Down. Finalement, pour un bouton à cons arrondis ou un bouton carré à chanfrein, changez le style respectivement en Square ou Shadowless Square. Pour un bouton à icône, peu importe le style que vous choisissez, mais vous devez décocher la case à cocher Bordered. Re-dimensionnez le bouton selon vos besoins.

Voyez les boutons à chanfrein et les boutons en icônes pour les spécifications des boutons, et la figure 1 pour des exemples de ces types de boutons avec des menus pop-up.

Fig. 1 : boutons à chanfrein et boutons en icônes avec menus pop-up

Les menus pop-up.

Un menu pop-up présente une liste de choix mutuellement exclusifs dans un dialogue ou une fenêtre. Le menu pop-up décrit ici peut être utilisé dans le corps de la fenêtre. Si vous avez besoin de fournir une fonctionnalité de menu pop-up dans le cadre de la fenêtre, (barre d'outils ou barre inférieure), voyez les contrôles du cadre pour ceux que vous pouvez utiliser. Si vous voulez rajouter une fonctionnalité de menu pop-up à un bouton à chanfrein ou en icône, voyez le début de cette page.

Fig. 2 : les menus pop-up (encadrés en rouge) fournissent une fonctionnalité de menu (voir à gauche) dans un contrôle.

Un menu pop-up se comporte comme les autres menus : les utilisateurs appuient dessus pour ouvrir le menu, puis se déplacent pour choisir un item. L'item choisi s'éclaire et est affiché dans le menu. Si l'utilisateur déplace le pointeur en dehors du menu pop-up sans relâcher le bouton de la souris, la valeur courante reste active. Une pression exploratoire dans le menu pour voir ce qui est disponible ne sélectionne pas de valeur nouvelle.

Utilisation du menu pop-up.

Vous pouvez utiliser un menu pop-up pour proposer jusqu'à douze choix à l'utilisateur, quand il n'est pas nécessaire qu'ils les voie en permanence. Parfois, un menu pop-up peut être une bonne alternative à d'autres types de contrôles de sélection. Par exemple, si vous avez un dialogue, qui contient un ensemble de six boutons radio ou plus, vous pouvez envisager de les remplacer par un menu pop-up pour gagner de la place.

Evitez de rajouter des sous-menus à un item de menu pop-up car cela cache les choix possibles et rend leur accès plus difficile.

Evitez aussi d'utiliser les menus pop-up :
• pour plus de 12 items ; utilisez alors une liste défilante, à moins que l'espace ne soit restreint.
• quand le nombre d'items dans la liste peut changer.
• quand plus d'une sélection est possible, comme dans une liste de styles de texte (on peut choisir à la fois gras et italique). Dans ces cas là, utilisez des cases à cocher ou des menus défilants (pull down menus) dans laquelle apparaît une case à cocher.

Contenu et étiquetage du menu pop-up.

Un menu pop-up :
• a normalement une étiquette à gauche (dans les systèmes d'écriture de gauche à droite). L'étiquette doit être une phrase capitalisée. La seule exception est quand le contrôle est utilisé comme titre pour une boîte de groupage, ce qui n'est pas fréquent.
• a un double triangle.
• contient des noms (des choses) et des adjectifs (états ou attributs), mais pas de verbes (commandes). Si vous devez afficher des commandes utilisez un menu défilant. Capitalisez les étiquettes des items.
• affiche une coche à gauche de la valeur actuellement sélectionnée quand il est ouvert (figure 3).

Fig. 3 : Un menu pop-op ouvert

Dans des cas particuliers, vous pouvez inclure une commande qui affecte le contenu du menu pop-up. Par exemple, dans le dialogue d'impression, le menu pop-up Imprimante contient un item "Ajouter une imprimante...". La nouvelle imprimante devient la sélection par défaut du menu. Mettez des commandes de ce genre en bas du menu pop-up, sous un séparateur.

Spécifications du menu pop-up.

Taille du contrôle : La hauteur du menu pop-up est fixée pour chaque taille. La largeur doit être suffisante pour recevoir l'item le plus long. Si vous affichez de multiples menus pop-up dans une pile, la largeur de chaque contrôle doit être la même.

Police et espacement des étiquettes : le texte d'un item de menu dans un menu pop-up doit être dans une fonte proportionnelle à la taille du contrôle. Le texte de l'étiquette d'introduction doit être une version mise en valeur de la même fonte. Utilisez les règles suivantes :

Fig. 4 : menu pop-up avec étiquette introductive et item de menu sous forme de texte.

Taille normale :
- texte d'un item de menu : fonte système ; laissez 9 pixels depuis la marge gauche du contrôle, et au moins 9 pixels jusqu'au double triangle.
- texte d'introduction : fonte système mise en valeur (en gras). Laissez 8 pixels entre la fin du texte (les deux points), et la bordure gauche du contrôle.

Taille réduite :
- texte d'un item de menu : fonte système réduite ; laissez 7 pixels depuis la marge gauche du contrôle, et au moins 7 pixels jusqu'au double triangle.
- texte d'introduction : fonte système réduite mise en valeur (en gras). Laissez 6 pixels entre la fin du texte (les deux points), et la bordure gauche du contrôle.

Taille mini :
- texte d'un item de menu : fonte système mini ; laissez 5 pixels depuis la marge gauche du contrôle, et au moins 5 pixels jusqu'au double triangle.
- texte d'introduction : fonte système réduite mise en valeur (en gras). Laissez 5 pixels entre la fin du texte (les deux points), et la bordure gauche du contrôle.

Espacement des contrôles.

Fig. 5 : Menus pop-up empilés verticalement

Si vous affichez de multiples menus pop-up empilés verticalement, laissez entre eux les espaces suivants :
• taille normale : au moins 10 pixels entre les contrôles
• taille réduite : au moins 8 pixels
• taille mini : au moins 6 pixels.

Implémentation des menus pop-up.

Les menus pop-up sont disponibles sous Interface Builder. Pour utiliser les interfaces de programmation de l'Application Kit, utilisez la classe NSPopUpButton.

Mes commentaires :

Distinguer les menus pop-up (deux triangles tête bèche), et les boutons avec menu pop-down (un seul triangle tête en bas).

Les boutons avec menu pop-up sont largement utilisés dans les applications d'iWork, comme le montre la figure 6. Les menus pop-up eux-mêmes peuvent être très variés.

Fig. Exemples de boutons avec menu pop Up dans Page.