Les boutons poussoirs

Ce que dit Apple :

Les boutons entraînent une action immédiate. Si un bouton provoque un processus indéterminé, le bouton doit être atténué jusqu'à ce que le processus soit terminé, et une rétroaction d'état doit être fournie.

Si vous avez besoin de proposer deux fonctions opposées, comme Recharger ou Arrêter dans un butineur, envisagez l'utilisation de deux boutons au lieu d'un bouton à double effet qui change d'état. Un bouton à double état peut conduire à des situations où un utilisateur clique sur un bouton quand il est dans un état, mais où le clic est reçu et appliqué après que le bouton soit passé dans l'autre état.

Si vous devez proposer un seul bouton avec un double objectif, vous devez suivre les changements d'état du bouton, pour appliquer les clics correctement. Fournissez aussi une rétroaction immédiate et informative.

Important : Les contrôles décrits dans cette section s'appliquent au corps de la fenêtre. Il ne faut pas les utiliser dans le cadre. La seule exception est le bouton en icône, qui peut aussi être utilisé dans une barre d'outils. Voyez les contrôles du cadre , qui sont spécifiquement destinés à la barre d'outils et à la barre inférieure.

Les boutons poussoirs.

Un bouton poussoir provoque une action immédiate, comme l'enregistrement d'un document, l'exécution d'opérations définies par un dialogue, ou l'acceptation d'un message d'erreur. Les boutons poussoirs doivent être utilisés uniquement dans le corps d'une fenêtre, pas dans son cadre.

Fig. 1 : Trois exemples de boutons poussoirs dans des fenêtres variées.

1-Utilisation des boutons poussoirs.

Comme les utilisateurs s'attendent à une action immédiate quand ils actionnent un bouton poussoir, il ne faut pas les utiliser simplement pour afficher une information, ou pour imiter le comportement d'autres contrôles. En particulier :
• N'utilisez pas de bouton poussoir pour indiquer un état comme ON ou OFF. A la place, vous pouvez utiliser des cases à cocher.
• Pas de bouton poussoir comme étiquette. A la place, utilisez un texte statique pour étiqueter des éléments et fournir une information dans l'interface.
• Evitez d'associer un menu avec un bouton poussoir. A la place du bouton poussoir, utilisez un bouton à chanfrein.

2-Le contenu des boutons poussoirs, et leur étiquetage.

Un bouton poussoir contient toujours du texte ; il ne peut pas contenir une image. Si vous devez afficher une icône, ou toute autre image sur un bouton, utiliser à la place un bouton à chanfrein.

L'étiquette d'un bouton poussoir doit être un verbe ou une phrase verbale qui décrit l'action qu'il exerce : Enregistrer, Fermer, Imprimer, Effacer, Changer le mot de passe, et ainsi de suite. Si un bouton poussoir agit sur un seul réglage, étiquetez-le aussi précisément que possible : "Choisir une image", par exemple, au lieu de "Choisir" seulement.Comme ces boutons déclenchent une action immédiate, il est inutile d'utiliser "maintenant", comme par exemple "Scanner maintenant".

Les étiquettes des boutons poussoirs doivent avoir un titre capitalisé. Si un bouton poussoir ouvre immédiatement une autre fenêtre, un dialogue, ou une application pour accomplir son action, vous pouvez compléter l'étiquette avec des points de suspension (voir la figure 2).

Fig. 2 : un bouton poussoir avec des points de suspension ouvre une autre fenêtre.

Fig. 3 : bouton par défaut.

Tous les boutons poussoirs doivent être d'apparence uniforme, c'est à dire sans couleur, sauf le bouton par défaut. Le bouton par défaut est celui qui accomplit une action sans danger dans un dialogue, et qui est activé en pressant Retour ou Entrer. Quand l'utilisateur presse un bouton qui n'est pas celui par défaut, comme Annuler, ce bouton se colore, et le bouton par défaut perd sa couleur. Si vous utilisez des boutons poussoirs fournis pas le système, ce comportement est automatique.

3- Spécifications des boutons poussoirs.

Taille : les boutons poussoirs dont disponibles dans les tailles normale, réduite, et mini. La hauteur du bouton est fixée pour chaque taille, mais vous pouvez spécifier sa largeur, qui dépend de la longueur du texte de l'étiquette. Si vous ne spécifiez pas une largeur suffisante, le texte est coupé à la fin.

Espacement et fonte de l'étiquette : le texte de l'étiquette ne doit pas avoir d'ombre ou d'autre effet, et il doit être dans la fonte système appropriée à la taille du bouton (c'est automatiquement proposé par Interface Builder).
• Taille normale : fonte système.
• Taille réduite : fonte système réduite.
• Taille mini : fonte système mini.

Espacement des contrôles : Les boutons poussoirs doivent être assez éloignés les uns des autres pour permettre à l'utilisateur de cliquer facilement sur un seul. En particulier, quand le bouton poussoir peut entraîner une action potentiellement dangereuse ou destructive (comme Effacer), il doit être plus éloigné que les indications qui suivent du bouton qui accomplit une action sûre.
• Taille normale : laissez un espace de 12 pixels entre des boutons alignés horizontalement, ou empilés verticalement.
• Taille réduite : laissez au moins 10 pixels horizontalement ou verticalement.
• Taille mini : laissez au moins 8 pixels horizontalement ou verticalement.

4- Implantation des boutons poussoirs.

Ils sont disponibles dans Interface Builder. Pour créer un bouton poussoir à l'aide des interfaces de programmation du Kit d'Application, créez un objet NSButton, de type NSMomentaryPushInButton ou NSMomentaryLightButton.

Mes commentaires :

Les boutons poussoirs sont sans doute ceux que vous utilisez le plus souvent, et sans y penser. Mais vous pouvez constater que leur usage est strictement défini sous Mac OS X, et qu'il répond toujours à des règles précises.

Pour le programmeur, l'usage en est grandement simplifié par Interface Builder qui fournit un modèle de bouton poussoir (à droite) qu'il suffit de glisser-déposer dans la fenêtre ; on peut ensuite en changer l'étiquette très facilement (à gauche).

Traduction du commentaire de Push Button : la classe NSButton est une sous-classe de NSControl qui intercepte les évènement mouse-down (souris appuyée) et envoie un message d'action à l'objet cible quand le bouton est cliqué ou appuyé.

Mais si vous observez les vitres de l'inspecteur associées à ce même bouton (figure 6), vous verrez que la simplicité n'est qu'apparente... (NB : il m'a fallu repasser sous Léopard pour obtenir l'assemblage des vitres de la figure ci-dessous ; du point de vue de l'interface utilisateur, Snow Léopard est un veau, abominablement raté !).

Fig. 6 : 4 des 7 vitres de l'Inspecteur d'un simple bouton poussoir.