Interactions tactiles

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

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

Appuyer

Balayer (ou faire glisser et relâcher)

Appuyer brièvement et faire glisser

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

Traîner ou faire glisser pour aller en avant ou en arrière​

Balayer pour actualiser

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.

Évitez la navigation accidentelle

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.

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).

Optimisation pour l'écran tactile

Pour une interface utilisateur optimisée pour l'écran tactile, envisagez d’augmenter la taille de la cible à 44 x 44 epx avec au moins 4 epx d’espace visible entre les cibles.

Nous vous recommandons deux comportements par défaut : optimisation pour l'écran tactile ou transition en fonction des signaux de l’appareil.

Lorsqu'une application peut être optimisée pour le tactile sans pénaliser les utilisateurs de souris, en particulier si elle est principalement utilisée avec l'interaction tactile, il faut toujours l'optimiser en ce sens.

Si vous faites évoluer l'interface utilisateur en fonction des signaux de l'appareil, fournissez toujours des expériences cohérentes d'une position à l'autre.

Associer les images à la cible tactile

Envisagez de mettre à jour les visuels lorsque les dimensions de la cible tactile changent. Par exemple, si les cibles visées augmentent lorsque les utilisateurs passent à la position tablette, l’interface utilisateur représentant les cibles visées doit également être mise à jour pour aider les utilisateurs à comprendre le changement d’état et l’affordance mise à jour. Pour en savoir plus, consultez Notions de base de la conception de contenu pour les applications Windows, Instructions pour les cibles tactiles, Taille et densité du contrôle.

Optimisation de l'orientation portrait

Prendre en charge les dispositions réactives qui tiennent compte des fenêtres hautes et larges afin de garantir qu'une application est optimisée à la fois pour les orientations paysage et portrait.

Cela permet également de s'assurer que les fenêtres des applications affichent correctement les éléments visuels de base de l'interface utilisateur dans des scénarios multitâches (applications juxtaposées avec des proportions de portrait)​, quelles que soient l'orientation et la taille de l'écran.