Recommandations en matière de conception du pavé tactile

Article
01/22/2024

Concevez votre application afin que les utilisateurs puissent interagir avec lui via un pavé tactile. Un pavé tactile combine les entrées tactiles multiples indirectes avec l’entrée de précision d’un appareil pointant, comme une souris. Cette combinaison rend le pavé tactile adapté à l’interface utilisateur optimisée tactile et aux plus petites cibles des applications de productivité.

pavé tactile

Les interactions avec le pavé tactile nécessitent trois éléments :

Pavé tactile standard ou pavé tactile de précision Windows.

Les pavés tactiles de précision sont optimisés pour les appareils utilisant. des applications Windows. Ils permettent au système de gérer certains aspects de l’expérience du pavé tactile en mode natif, tels que le suivi des doigts et la détection des paumes, pour une expérience plus cohérente entre les appareils.
Contact direct d’un ou plusieurs doigts sur le pavé tactile.
Déplacement des contacts tactiles (ou absence de ceux-ci, en fonction d’un seuil de temps).

Les données d’entrée fournies par le capteur du pavé tactile peuvent être les suivantes :

Interprété comme un mouvement physique pour la manipulation directe d’un ou plusieurs éléments d’IU (par exemple, panoramique, rotation, redimensionnement ou déplacement). En revanche, l’interaction avec un élément par le biais de sa fenêtre de propriétés ou d’une autre boîte de dialogue est considérée comme une manipulation indirecte.
Reconnu comme méthode d’entrée alternative, telle que la souris ou le stylet.
Utilisé pour compléter ou modifier des aspects d’autres méthodes d’entrée, telles que la suppression d’un trait d’encre dessiné avec un stylet.

Un pavé tactile combine des entrées tactiles multiples indirectes avec l’entrée de précision d’un appareil pointant, comme une souris. Cette combinaison rend le pavé tactile adapté à l’interface utilisateur optimisée tactile et aux cibles généralement plus petites des applications de productivité et de l’environnement de bureau. Optimisez la conception de votre application Windows pour l’entrée tactile et bénéficiez par défaut de la prise en charge du pavé tactile.

En raison de la convergence des expériences d’interaction prises en charge par les pavés tactiles, nous vous recommandons d’utiliser l’événement PointerEntered pour fournir des commandes d’interface utilisateur de style souris en plus de la prise en charge intégrée de l’entrée tactile. Par exemple, utilisez des boutons précédents et suivants pour permettre aux utilisateurs de parcourir les pages de contenu, ainsi que de parcourir le contenu.

Les mouvements et instructions abordés dans cette rubrique peuvent vous aider à vous assurer que votre application prend en charge l’entrée du pavé tactile de manière transparente et avec un code minimal.

Langue du pavé tactile

Windows fournit un ensemble concis d’interactions tactiles utilisées dans tout le système. Optimisez votre application pour l’entrée tactile et la souris et cette langue rend votre application familière instantanément pour vos utilisateurs, augmentant leur confiance et rendant votre application plus facile à apprendre et à utiliser.

Les utilisateurs peuvent définir beaucoup plus de mouvements de pavé tactile de précision et de comportements d’interaction que pour un pavé tactile standard. Ces deux images montrent les différentes pages de paramètres du pavé tactile de Paramètres > Devices > Mouse &touchpad pour un pavé tactile standard et un pavé tactile précision, respectivement.

Paramètres standard du pavé tactile

^{Paramètres standard\ pavé tactile\}

Paramètres du pavé tactile de précision windows

^{Paramètres Windows\ Precision\ Touchpad\}

Voici quelques exemples de mouvements optimisés pour les pavés tactiles pour effectuer des tâches courantes.

Terme	Description
Appui avec trois doigts	Préférence de l’utilisateur pour effectuer une recherche avec Cortana ou afficher le Centre de notifications.
Diapositive de trois doigts	Préférence utilisateur pour ouvrir l’affichage des tâches de bureau virtuel, afficher le bureau ou basculer entre les applications ouvertes.
Appuyez sur un doigt unique pour l’action principale	Utilisez un seul doigt pour appuyer sur un élément et appeler son action principale (par exemple, lancer une application ou exécuter une commande).
Appuyez deux doigts pour cliquer avec le bouton droit	Appuyez avec deux doigts simultanément sur un élément pour le sélectionner et afficher les commandes contextuelles.
Diapositive de deux doigts à panoramique	Le glissement est principalement utilisé pour les interactions panoramiques, mais peut également être utilisé pour le déplacement (où le mouvement panoramique est limité à une direction), le dessin ou l’écriture.
Pincer et étirer pour effectuer un zoom	Les mouvements de pincement et d’étirement sont couramment utilisés pour le redimensionnement et le zoom sémantique.
Appuyez sur un doigt unique et faites glisser pour réorganiser	Faites glisser un élément.
Appuyez sur un doigt unique et faites glisser pour sélectionner du texte	Appuyez sur le texte sélectionnable et la diapositive pour la sélectionner. Appuyez deux fois pour sélectionner un mot.
Zone de clic gauche et droit	Émulez la fonctionnalité de bouton gauche et droite d’un appareil de souris.

Matériel

Interrogez les fonctionnalités de l’appareil souris (MouseCapabilities) pour identifier les aspects de l’interface utilisateur de votre application que le matériel du pavé tactile peut accéder directement. Nous vous recommandons de fournir une interface utilisateur pour l’entrée tactile et la souris.

Pour plus d’informations sur l’interrogation des fonctionnalités d’appareil, consultez Identifier les appareils d’entrée.

Retour visuel

Lorsqu’un curseur tactile est détecté (par le biais d’événements de déplacement ou de pointage), affichez l’interface utilisateur spécifique à la souris pour indiquer les fonctionnalités exposées par l’élément. Si le curseur du pavé tactile ne se déplace pas pendant un certain temps ou si l’utilisateur lance une interaction tactile, faites disparaître progressivement l’interface utilisateur du pavé tactile. Cela permet de conserver l’interface utilisateur propre et non-totalisé.
N’utilisez pas le curseur pour les commentaires de pointage, les commentaires fournis par l’élément sont suffisants (voir la section Curseurs ci-dessous).
N’affichez pas de commentaires visuels si un élément ne prend pas en charge l’interaction (par exemple, du texte statique).
N’utilisez pas de rectangles de focus avec des interactions avec le pavé tactile. Réservez-les pour les interactions au clavier.
Affichez simultanément les commentaires visuels pour tous les éléments qui représentent la même cible d’entrée.

Pour obtenir des conseils plus généraux sur les commentaires visuels, consultez Recommandations en matière de commentaires visuels.

Curseurs

Un ensemble de curseurs standard est disponible pour un pointeur tactile. Elles sont utilisées pour indiquer l’action principale d’un élément.

Chaque curseur standard a une image par défaut correspondante associée. L’utilisateur ou une application peut remplacer l’image par défaut associée à n’importe quel curseur standard à tout moment. Les applications UWP spécifient une image de curseur via la fonction PointerCursor.

Si vous devez personnaliser le curseur de la souris :

Utilisez toujours le curseur de flèche () pour les éléments cliquables. n’utilisez pas le curseur pointant la main () pour les liens ou d’autres éléments interactifs. Utilisez plutôt des effets de pointage (décrits précédemment).
Utilisez le curseur de texte () pour le texte sélectionnable.
Utilisez le curseur de déplacement () lors du déplacement est l’action principale (par exemple, glisser ou rogner). N’utilisez pas le curseur de déplacement pour les éléments où l’action principale est la navigation (par exemple, les vignettes Démarrer).
Utilisez les curseurs de redimensionnement horizontal, vertical et diagonal (, , , ), lorsqu’un objet est redimensionnable.
Utilisez les curseurs de main saisis (, ) lors du panoramique du contenu dans un canevas fixe (par exemple, une carte).