Interaction avec la souris

X.I.I. Boutons

Figure X.1 Pléthore de dispositifs de pointage : souris, boule de commande, souris contrôlée au pied, manette de jeu, pavé tactile et dispositif de pointage monté sur le doigt.

Pour la plupart des utilisateurs, la souris reste la façon la plus courante d'interagir avec les interfaces graphiques. Le terme « souris » est utilisé dans ce chapitre pour désigner tous les autres dispositifs de pointage qui peuvent être utilisés pour déplacer le pointeur à l'écran, comme les boules de commande, les pavés tactiles, boules 3-D, tablettes graphiques ou dispositifs de technologie d'assistance qui émulent la souris.

Pour les utilisateurs droitiers, le bouton gauche d'une souris conventionnelle est utilisé pour la majorité des actions de souris. Nous l'appelons par conséquent bouton gauche ici, même si ce n'est pas physiquement le cas. Pour cette même raison, vous pouvez parfois voir ce bouton nommé « bouton 1 » ou « bouton de sélection » dans les codes et documentations.

De même pour les utilisateurs droitiers, le bouton droite d'une souris conventionnelle est utilisé pour les opérations impliquant des menus contextuels. Nous l'appelons par conséquent bouton droit dans ce chapitre. Vous pouvez parfois voir ce bouton nommé « bouton 3 » ou « bouton de menu » dans les codes et documentations.

Une souris conventionnelle à trois boutons possède normalement son troisième bouton (ou une molette qui agit comme un bouton lorsqu'elle est pressée) entre les boutons gauche et droite. Nous l'appelons par conséquent bouton central dans ce chapitre. Vous pouvez parfois voir ce bouton nommé « bouton 2 » ou « bouton de transfert » dans les codes et documentations.

Conseils
  • Votre application utilise les mouvements du bouton gauche pour sélectionner, activer des composants, déplacer et afficher les menus déroulants.

  • Votre application utilise les mouvements du bouton droit pour afficher et sélectionner des actions dans un menu contextuel.

  • Votre application utilise le bouton central pour coller la sélection actuelle PRINCIPALE (habituellement la dernière mise en surbrillance) à la position du pointeur, comme suit :

    Tableau X.1 Effet des touches modificatrices sur une opération de transfert avec le bouton central
    Modificateur Fonction
    Sans modificateur Copier la sélection
    Ctrl Copier la sélection
    Shift Déplacer la sélection
    Shift+Ctrl Créer un lien, raccourci ou un alias de la sélection

    Dans votre interface, ne sur-définissez cette fonctionnalité nulle part où l'action de transfert pourrait être utilisée. Si vous avez l'intention d'utiliser quelque part le bouton central dans un but différent, ne le faites que comme raccourci pour utilisateurs expérimentés et seulement pour les opérations impossibles à réaliser à l'aide du bouton droit ou du bouton gauche.

  • If present on the mouse, the scrollwheel should scroll the window or control under the pointer, if it supports scrolling. Initiating scrolling in this way should not move keyboard focus to the window or control being scrolled.

  • Ctrl+molette vers le haut doit faire un zoom avant dans la fenêtre ou le contrôle sous le pointeur de la souris et Ctrl+molette vers le bas doit faire un zoom arrière. Faire un zoom de cette façon ne doit pas déplacer le focus clavier de la fenêtre ou du contrôle sous l'action du zoom.

  • Les entrées ne doivent pas dépendre du bouton central ou de droite. En plus d'être physiquement plus difficile à cliquer, certains dispositifs de pointage et de nombreux dispositifs de technologies d'assistance ne prennent en charge ou n'émulent que le bouton gauche de la souris. Certaines technologies d'assistance n'émulent même pas la souris du tout mais génèrent des évènements clavier à la place.

  • Assurez-vous que toutes les opérations de votre application pouvant être réalisées avec la souris peuvent être effectuées avec le clavier. Les seules exceptions à cela sont les actions où un contrôle moteur fin est une part essentielle de la tâche. Par exemple, le contrôle du mouvement dans certains types de jeux d'actions ou le dessin à main levée dans une application d'édition d'images.

  • Ne déformez pas le pointeur de la souris ou ne restreignez pas le mouvement de la souris à une partie de l'écran. Cela peut interférer avec les technologies d'assistance et est habituellement perturbant même pour les utilisateurs qui les n'utilisent pas.

  • N'exigez pas de l'utilisateur l'usage de combinaisons (enfoncement de plusieurs boutons de souris en même temps) pour une opération.

  • N'exigez pas de l'utilisateur l'usage d'actions à nombreux (triple ou quadruple) clics pour une opération à moins que vous ne fournissiez une méthode alternative pour réaliser la même action.

  • Permettez à toutes les opérations d'être annulées avant leur fin. Un appui sur la touche Échap doit annuler toute opération de la souris en cours telle qu'une action de glisser-déposer d'un fichier ou le dessin d'une forme dans une application de dessin.

  • N'attribuez aucune action exclusivement au bouton central d'une souris à trois boutons car toutes les souris n'en possèdent pas.

  • Ne codez pas de manière permanente les tailles des cibles de la souris ou ne les faites pas trop petites. Définissez toutes les cibles de souris pour qu'elles soient au moins aussi grande que le bouton flèche d'une zone de sélection numérique GtkSpinBox dans le thème gtk actuel. Gardez en tête qu'un utilisateur qui a des problèmes de dextérité ou de vision peut utiliser un thème dans lequel les composants sont beaucoup plus grands que dans le thème par défaut.

  • Ne faites pas référence à des boutons de souris précis dans votre interface à moins que cela ne soit absolument nécessaire. Tout le monde n'utilise pas une souris classique avec des boutons gauche, droite et milieu, donc un texte ou des diagrammes qui y font référence peuvent être perturbants.

X.I.II. Sélection d'objets

X.I.II.I. Équivalence souris et clavier

Pour les contrôles ou fenêtres contenant un certain nombre d'objets que l'utilisateur peut sélectionner, soit un par un, soit plusieurs simultanément, vérifiez que les mécanismes suivants ont été mis en œuvre pour permettre de faire les sélections en utilisant, soit la souris, soit le clavier.

Tableau X.2 Mécanismes standards de sélection avec la souris ou le clavier
Souris Clavier
Sélectionner l'élément, désélectionner tous les autres Clic Space
Ajouter/supprimer l'élément de la sélection Ctrl click (toggles item's selected state) Ctrl+Space (toggles focused item's selected state)
Étendre la sélection Shift click Shift+Space, Shift+Home, Shift+End, Shift+PageUp, or Shift+PageDown
Déplacer le focus Clic sur l'élément approprié pour le sélectionner Cursor keys, Home, End, PageUp, and PageDown move focus and selection simultaneously.

Ctrl+cursor keys, Ctrl+Home,Ctrl+End, Ctrl+PageUp, and Ctrl+PageDown move focus without affecting current selection.

Tout sélectionner Click first item, then Shift click last item Ctrl+A
Tout désélectionner Clic sur le conteneur en arrière-plan Shift+Ctrl+A
Activer la sélection Double-click to activate a single selection. Shift or Ctrl double-clicking extends or adds item to selection first before activating the entire selection. Return activates entire selection. If nothing is currently selected, selects currently-focused item first.
Inverser la sélection Pas d'équivalent avec la souris Ctrl+I

X.I.II.II. Sélection par encadrement

For a container whose objects may be arranged in two dimensions, for example the icon view in a file manager, allow multiple selection by dragging a bounding box (sometimes called a "rubber band") around one or more objects. Shift +left button drag should add all the objects within the bounding box to the existing selection. Ctrl +left button drag should toggle the selected state of all the objects within the bounding box.

Conseils
  • Allow a bounding box selection to begin only if the initial mouse button press is made:

    • à l'intérieur des limites de l'arrière-plan du conteneur et
    • à l'extérieur des limites de tout objet disposé dans le conteneur.

    Dans une application de dessin, par exemple, cela signifie que le clic initial du pointeur de souris et son déplacement pour définir l'encadrement de sélection peut débuter dans une zone vide du canevas ou dans une forme préalablement bloquée pour éviter une modification accidentelle, mais pas dans une forme active qui serait déplacée par le glissement du pointeur de souris.

  • Select any objects that lie wholly or partly within the bounding box when the mouse button is released.

  • Faites une mise en évidence dynamique pendant que vous faites glisser le pointeur de souris pour désigner les objets sélectionnés. N'attendez pas que le bouton de la souris soit relâché. Cela évite tout doute à propos des objets sélectionnés par l'encadrement.

  • Quand un encadrement est déplacé dans une fenêtre défilante, prenez en charge le défilement automatique de la fenêtre lorsque l'encadrement est déplacé à proximité du bord de la fenêtre.

Figure X.2 Exemples illustrant la mise en évidence dynamique de la sélection pendant la sélection par encadrement. Dans le premier exemple, la couleur du dossier et le surlignage de l'étiquette changent pour matérialiser la sélection. Dans le second, la sélection est indiquée par ajout de poignées de redimensionnement aux objets sélectionnés.

X.I.III. Glisser-déposer

Le glisser-déposer est une technique de manipulation directe dans laquelle vous réalisez des actions sur les objets sélectionnés en les déplaçant à l'écran avec la souris. Vous faites « glisser » un objet en cliquant dessus et en maintenant enfoncé le bouton pendant que vous déplacez le pointeur vers l'emplacement cible de l'objet. L'objet est « déposé » à cet emplacement en relâchant le bouton de la souris.

Conseils
  • N'utilisez le glisser-déposer que si l'utilisateur peut raisonnablement supposer qu'il est possible. Les utilisations les plus courantes sont :

    • pour déplacer ou copier des objets d'un endroit vers un autre,
    • pour lier un objet à un autre,
    • pour réaliser une action sur les objets en les déposant sur une icône représentant cette action, telles qu'une icône de corbeille ou d'imprimante.
  • Fournissez un retour visuel pendant toute la durée de l'opération de glisser-déposer. Mettez en évidence les cibles valides et modifiez le pointeur de la souris lorsqu'il passe au dessus d'elles. Utilisez le pointeur de souris « dépôt impossible » lorsque vous passez au dessus de cibles de dépôt non valides. Consultez également la Section X.I.III.II ― Pointeurs de la souris à utiliser pour un glisser-déposer.

  • Ajoutez au pointeur de la souris une représentation des objets en cours de déplacement. Conservez cette représentation petite et rendez la translucide afin de ne pas obscurcir les cibles de dépôts éventuelles en dessous d'elle. Consultez également la Section X.I.III.II ― Pointeurs de la souris à utiliser pour un glisser-déposer.

    Figure X.3 Exemple de pointeur copier agrémenté par une icône représentant le fichier en cours de copie
  • N'autorisez que la copie des objets entre applications et pas le déplacement. Vous évitez ainsi toute confusion pour savoir à quelle application appartient la fonction Annuler qui annule l'opération.

  • Autorisez l'utilisateur à annuler une opération de glisser-déposer par toutes ces méthodes :

    • appui sur la touche Échap avant le relâchement du bouton de la souris,
    • dépôt de l'objet sur sa propre position d'origine,
    • réalisation d'un dépôt avec requête et sélection de Annuler dans le menu contextuel (consultez la Section X.I.III.I.II ― Glisser avec requête),
    • dépôt de l'objet sur une cible de dépôt non valide.
  • Permettez à l'utilisateur d'annuler les effets d'une opération de glisser-déposer en sélectionnant Édition ▸ Annuler.

  • Autorisez le dépôt de plusieurs objets en appuyant sur Maj ou Ctrl pendant la sélection, puis le dépôt de tous les objets sélectionnés.

  • Assurez-vous que les utilisateurs de clavier puissent reproduire toutes les actions d'un glisser-déposer en utilisant seulement des éléments de menu ou des raccourcis clavier tels que Copier (Ctrl+C) et Coller (Ctrl+V).

  • Quand un élément est déplacé dans une fenêtre qui peut défiler, prenez en charge le défilement automatique de cette fenêtre lorsque le pointeur de souris est situé à proximité du bord de la fenêtre.

  • Faites apparaître un menu contextuel lorsque l'utilisateur tente de déposer plusieurs objets sur une cible qui n'en accepte qu'un seul. Dans le menu, faites la liste de tous les objets déplacés et ajoutez un élément Annuler.

X.I.III.I. Sur-définir le comportement du glisser-déposer

X.I.III.I.I. Modificateurs clavier

Permettez à l'utilisateur de modifier le comportement d'une opération de glisser-déposer en appuyant sur Ctrl, Maj ou les deux à la fois. Si l'utilisateur actionne les touches modificatrices au cours du glissement, modifiez le pointeur de la souris immédiatement et réalisez la nouvelle action lorsque le bouton de la souris est relâché.

Tableau X.3 Effet des touches de modification pendant une opération de glisser-déposer
Modificateur Fonction
Ctrl Copier
Shift Déplacer
Shift+Ctrl Créer un lien, un raccourci ou un alias

X.I.III.I.II. Glisser avec requête

Permettez à l'utilisateur de faire glisser les objets avec le bouton central ou avec Alt« bouton gauche ». Faîtes apparaître un menu contextuel lorsque le bouton de la souris est relâché, proposant un choix parmi Copier, Déplacer et Lier (ou n'importe quel sous-ensemble disponible de ces actions) et Annuler. Un glisser-déposer de la sorte est connu sous le nom de Glisser-déposer avec requête : il demande confirmation à l'utilisateur avant d'opérer la modification.

X.I.III.II. Pointeurs de la souris à utiliser pour un glisser-déposer

Utilisez les pointeurs GTK par défaut pour le glisser-déposer lors des opérations standards de transfert affichés ci-dessous. Grâce à cette cohérence, l'utilisateur sait exactement à quoi s'attendre lorsqu'il relâche le bouton de la souris. Si vous devez concevoir un pointeur pour une action de transfert non standard non affichée ici, conservez le style des pointeurs standards.

Tableau X.4 Pointeurs de la souris pour un glisser-déposer
Forme du pointeur Signification
Déplacer la sélection. La sélection que l'on fait glisser est déplacée à l'endroit du déposer ; elle est enlevée de son emplacement initial.
Copier la sélection. La sélection que l'on fait glisser est copiée à l'emplacement du dépôt ; l'original est laissé intact.
Lier la sélection. Un lien vers la sélection est inséré à l'emplacement du déposer. Cependant la façon dont le lien est matérialisé dépend de l'application ; par exemple, le lien peut être, soit un hyperlien, soit une icône, soit encore une copie de la sélection de l'original .
Faire glisser à l'aide du bouton central ou la combinaison Alt-bouton gauche. Un menu contextuel apparaît à l'endroit du dépôt pour vous demandez si vous désirez déplacer, copier ou lier la sélection ou annuler l'opération.
Impossible de déposer ici. Affichez ce pointeur lorsque le pointeur de souris passe sur une zone où la sélection ne peut pas être déposée.

X.I.IV. Interaction de la souris avec le tableau de bord des applications (applets)

Tous les objets sur le bureau doivent se comporter de manière cohérente. En dépit de leur nature particulière, les applets ne font pas exception.

Conseils
  • Le bouton gauche de la souris sans modificateur doit être suffisant pour agir sur tous les contrôles de l'applet. Les applets doivent être suffisamment simples pour que les clics avec modificateur ou les clics avec d'autres boutons (excepté le menu contextuel de l'applet) ne soient pas nécessaires.

  • Un clic avec le bouton droit n'importe où dans la fenêtre d'encadrement de l'applet doit afficher, soit le menu contextuel de tout l'applet, soit le menu contextuel du contrôle sous le pointeur de la souris. Ne laissez pas dans l'applet de « zones mortes » qui ne répondent pas au clic droit.

  • N'utilisez pas le bouton central pour autre chose que le déplacement de l'applet vers un autre emplacement. Un clic avec le bouton central et un glisser n'importe où dans la fenêtre de l'applet doit déplacer l'applet ; il n'est pas obligatoire d'avoir une barre de déplacement ou un dispositif similaire.

    Ctrl+left button drag should copy the applet, if moving to another panel; unmodified drag or Shift+left button drag should move the applet, if moving to another panel. If moving within same panel, Ctrl=switched movement, Shift=push movement, Alt=free movement.