Interactions tactiles

Article
02/01/2024

Cette rubrique fournit des instructions de conception pour créer des expériences personnalisées et optimisées pour l'écran tactile dans les applications Windows.

Vue d’ensemble

L’interaction tactile est la forme principale d’entrée dans les applications Windows et dans Windows qui implique l’utilisation d’un ou plusieurs doigts (ou contacts tactiles). Ces contacts tactiles et leur mouvement sont interprétés comme des gestes tactiles et des manipulations qui prennent en charge différentes interactions utilisateur.

Les kits de développement logiciel (SDK) Windows et pour application Windows incluent des collections complètes de contrôles optimisés pour les écrans tactiles qui procurent des expériences robustes et cohérentes dans les applications Windows.

Utilisez ces instructions lors de la création de contrôles, d’expériences et de frameworks personnalisés pour vos applications Windows.

Principes de conception

Tenez compte de ce qui suit pour concevoir l'expérience tactile de votre application Windows.

Optimisation pour l'écran tactile

Les application Windows doivent inviter à l'interaction tactile, permettre une manipulation directe et prendre en charge des interactions peu précises. Envisagez des accélérateurs tactiles, y compris des gestes et l'intégration du stylo et de la voix.

Cohérence des positions

Votre application doit offrir une expérience cohérente, quelle que soit la méthode d’entrée ou la position dans laquelle se trouve l’utilisateur. Le passage de la position traditionnelle de bureau à la position tablette (consultez Paramètres recommandés pour une meilleure expérience sur la tablette), ainsi que les changements d'orientation, ne doivent pas être déstabilisants, mais plutôt subtils et uniquement si nécessaires. Votre application doit redisposer l’interface utilisateur de manière subtile pour créer une expérience familière et cohérente qui réponde aux besoins actuels des utilisateurs.

Réactive

Les applications et les interactions doivent fournir aux utilisateurs une rétroaction à chaque phase (pression, action, relâchement) d'une interaction à l'aide d'animations qui répondent à l'état présent de l'utilisateur tout en indiquant les actions possibles. Les animations doivent également proposer au moins 60 /s pour donner une impression de fluidité et de modernité.

Respect des conventions tactiles

Rétroaction dynamique

Une rétroaction visuelle appropriée pendant les interactions avec votre application aide les utilisateurs à reconnaître, à apprendre et à s’adapter à la façon dont leurs interactions sont interprétées à la fois par l’application et par la plateforme Windows. Fournissez une rétroaction immédiate et continue en réponse à l'interaction tactile de l'utilisateur, qui soit perceptible, compréhensible et qui ne soit pas perturbée par des distractions. C'est grâce à cette rétroaction immédiate que les utilisateurs découvriront et exploreront les éléments interactifs de votre application..

La rétroaction doit être instantanée lors de l'interaction tactile et les objets déplacés doivent rester fixés au doigt de l'utilisateur.
L'interface utilisateur doit répondre aux gestes en s'adaptant à la vitesse et aux mouvements de l'utilisateur, en évitant d'utiliser des animations d'images clés.
Les rétroactions visuelles doivent transmettre les résultats possibles avant que l'utilisateur ne s'engage dans une action.

À faire

À ne pas faire

GIF animé de l’objet collant au doigt de l’utilisateur sur balayer vers le haut.

GIF animé de l’objet qui ne colle pas au doigt de l’utilisateur sur le balayage vers le haut.

Pour plus d’informations, consultez Recommandations relatives aux rétroactions visuelles et Mouvement dans Windows 11

Modèles d’interaction tactile

Respectez ces modèles d’interaction et de gestes courants pour dote votre expérience de cohérence et prévisibilité.

Interactions courantes

Il existe un ensemble de comportements et de gestes tactiles courants que les utilisateurs connaissent bien et dont ils s'attendent à ce qu'ils fonctionnent de manière cohérente dans toutes les expériences Windows.

Appuyer pour activer ou sélectionner un élément
Appuyer brièvement et faire glisser pour déplacer un objet
Appuyez sans relâcher pour accéder à un menu de commandes secondaires et contextuelles
Balayez (ou faire glisser et relâcher) pour des commandes contextuelles
Faire pivoter dans le sens horaire ou antihoraire pour faire tourner

Interactions

GIF animé de l’utilisateur appuyant sur un objet pour le sélectionner ou l’activer. Appuyer

GIF animé de l’utilisateur faisant glisser un objet pour révéler des commandes contextuelles. Balayer (ou faire glisser et relâcher)

Gif animé de l’utilisateur appuyant et faisant glisser un objet pour le réorganiser. Appuyer brièvement et faire glisser

GIF animé d’un utilisateur appuyant avec deux doigts et pivotant un objet. Faire pivoter

Appuyer sans relâcher

Pour plus d’informations, consultez Recommandations relatives aux rétroactions visuelles et Mouvement dans Windows 11

Mouvements

Les gestes réduisent les efforts déployés par les utilisateurs pour naviguer et agir dans le cadre d'interactions courantes. Dans la mesure du possible, intégrez des gestes tactiles dans l'interface utilisateur pour faciliter la navigation et l'action des utilisateurs dans l'application.

Pour naviguer d'une vue à l'autre, utilisez des animations connectées afin que les états existants et les nouveaux états soient tous deux visibles à mi-course. Si vous interagissez avec l’interface utilisateur, les éléments doivent suivre le mouvement de l’utilisateur, fournir des rétroactions, et, lorsque la pression cesse, réagir par des actions supplémentaires basées sur des seuils de position de déplacement.

Les gestes doivent également être exploitables avec des glissements et des balayages basés sur l'inertie et situés dans une plage de mouvement confortable.

Traîner ou faire glisser pour aller en avant ou en arrière
Traîner pour ignorer
Balayer pour actualiser

Mouvements

GIF animé de l’utilisateur faisant glisser un carrousel d’objets de retour et d’arrière. Traîner ou faire glisser pour aller en avant ou en arrière

GIF animé de l’utilisateur tirant vers le bas sur une collection d’objets à actualiser [2]. Balayer pour actualiser

Gif animé de l’utilisateur faisant glisser un objet hors écran pour ignorer. Traîner pour ignorer

Pour plus d’informations, consultez Transitions de page et Balayer pour actualiser.

Gestes personnalisés

Utilisez des gestes personnalisés pour intégrer les touches de raccourci clavier et les gestes du pavé tactile très fréquents dans une interaction tactile. Facilitez la détectabilité et la réponse grâce à des affordances dédiées avec des animations et des états visuels (par exemple, en plaçant trois doigts sur l'écran, les fenêtres se réduisent pour fournir une rétroaction visuelle).

Ne remplacez pas les gestes courants, car cela peut provoquer de la confusion chez les utilisateurs.
Prévoyez des gestes avec plusieurs doigts pour effectuer des actions personnalisées, sans oublier que certains de ces gestes sont réservés au passage rapide d'une application à l'autre et d'un bureau à l'autre.
Faites attention aux gestes personnalisés effectués sur les bords de l'écran, car les gestes sur les bords sont destinés à des comportements au niveau du système d'exploitation, qui peuvent être invoqués accidentellement.

Si votre application ou votre jeu implique des interactions fréquentes près des bords de l'écran, envisagez de présenter votre expérience en en mode plein écran exclusif (FSE), afin d'éviter l'activation accidentelle des menus déroulants du système (les utilisateurs devront passer directement au-dessus de l'onglet temporaire pour faire apparaître le menu déroulant du système associé).

Remarque

Évitez de vous en servir sauf en cas d'absolue nécessité, car les utilisateurs auront plus mal à quitter votre application ou à l'utiliser en même temps que d'autres.

Expériences avec le clavier tactile

Le clavier tactile active l’entrée de texte pour les périphériques qui prennent en charge l’interaction tactile. Les contrôles d'entrée de texte de l'application Windows invoquent le clavier tactile par défaut lorsqu'un utilisateur appuie sur un champ d'entrée modifiable.

Clavier tactile en mode de disposition par défaut.

Invocation en cas de pression sur un champ de texte

Le clavier tactile doit surgir lorsque l'utilisateur touche un champ d'entrée de texte. Cela fonctionnera automatiquement en utilisant les API de notre système pour afficher et masquer le clavier. Consultez Répondre à la présence du clavier tactile.

Utilisez des contrôles d’entrée de texte standard

L'utilisation de contrôles communs permet de garantir un comportement attendu et de minimiser les surprises pour les utilisateurs.

Les contrôles de texte qui prennent en charge Text Services Framework (TSF) offrent des capacités de traçage de formes (clavier à balayage).

Signaux du clavier tactile

Prenez en compte l'entrée, la position, les signaux matériels qui font du clavier tactile le principal mode d'entrée (le clavier matériel est détaché, les points d'entrée sont invoqués avec le toucher, l'intention de l'utilisateur est clairement de taper).

Redisposition appropriée

N’oubliez pas que le clavier peut occuper jusqu’à 50 % de l’écran sur les appareils les plus petits.
Ne masquez pas le champ de texte actif avec le clavier tactile.
Si le clavier tactile masque le champ de texte actif, faites défiler le contenu de l’application vers le haut (avec animation) jusqu’à ce que le champ soit visible.
Si le clavier tactile masque le champ de texte actif, mais que le contenu de l’application ne peut pas défiler vers le haut, essayez de déplacer le conteneur de l’application (avec animation).

Cibles visées

Assurez-vous que les cibles visées sont faciles et attrayantes à toucher. Des cibles trop petites ou trop chargées obligent les utilisateurs à être plus précis, ce qui est difficile avec le tactile et peut entraîner une expérience médiocre.

Tactile

Nous définissons le caractère tactile comme un minimum de 40 x 40 epx, même si le visuel est plus petit, ou de 32 epx de haut si la largeur est d'au moins 120 epx.

Nos contrôles courants sont conformes à ce standard (ils sont optimisés pour les utilisateurs tactiles et avec souris).