Langage: HTML | XAML

Réponse aux interactions du pavé tactile (HTML)

Applies to Windows only

Concevez et générez des applications du Windows Store avec lesquelles les utilisateurs peuvent interagir par le biais d’un pavé tactile.

Astuce  Les informations fournies dans cette rubrique sont spécifiques au développement d’applications du Windows Store en JavaScript.

Pour les applications du Windows Store en C++, C# ou Visual Basic, voir Réponse à l’entrée du pavé tactile (XAML).

Conditions préalables:  Si vous débutez dans le développement d’applications du Windows Store en JavaScript, consultez les rubriques ci-dessous pour vous familiariser avec les technologies décrites ici.

Créer votre première application du Windows Store en JavaScript

Feuille de route pour les applications du Windows Store en JavaScript

Découvrir les événements avec Démarrage rapide : ajout de contrôles HTML et gestion des événements

Fonctionnalités d’application de A à Z:  Étudier cette fonctionnalité de façon plus approfondie dans le cadre de notre série Fonctionnalités d’application de A à Z

Interaction utilisateur de A à Z (HTML)

Personnalisation de l’interaction utilisateur de A à Z (HTML)

Recommandations en matière d’expérience utilisateur:  

Les bibliothèques de contrôles de plateforme (HTML et XAML) fournissent l’intégralité de l’expérience d’interaction utilisateur de Windows, y compris les interactions standard, les effets physiques animés et le retour visuel. Utilisez ces contrôles intégrés si vous n’avez pas besoin d’une prise en charge d’interaction personnalisée.

Si les contrôles de plateforme ne suffisent pas, les présentes recommandations peuvent vous aider à fournir une expérience d’interaction utilisateur à la fois immersive et cohérente entre les divers modes d’entrée. Ces recommandations sont axées principalement sur l’entrée tactile, mais elles s’appliquent également à l’entrée de pavé tactile, de souris, de clavier et de stylet.

Exemples:  Découvrez cette fonctionnalité en action dans nos exemples d’applications du Windows Store.

Exemple de personnalisation de l’interaction utilisateur de A à Z

Entrée : exemple de fonctionnalités de périphériques

Entrée : exemple de gestion d’événement de pointeur DOM

Exemple de zoom, de panoramique et de défilement HTML

Entrée : exemple de manipulations et de mouvements (JavaScript)

Entrée : exemple de mouvements instanciables

Vue d’ensemble

Un pavé tactile combine l’entrée tactile multipoint indirecte et l’entrée de précision d’un dispositif de pointage comme la souris. Fort de cette combinaison, le pavé tactile est adapté à l’interface utilisateur optimisée pour l’interaction tactile Windows 8.1 et aux plus petites cibles des applications de productivité ainsi qu’à l’environnement de bureau. Optimisez la conception de votre application du Windows Store pour l’entrée tactile et tirez parti de la prise en charge par défaut du pavé tactile.

Outre la prise en charge intégrée de l’entrée tactile, nous vous recommandons de fournir des commandes d’interface utilisateur accessibles à l’aide de la souris grâce à la convergence des expériences d’interaction prises en charge par les pavés tactiles. Par exemple, utilisez les boutons Précédent et Suivant pour permettre aux utilisateurs de tourner les pages de contenu ou d’effectuer un mouvement panoramique de ce contenu.

Windows 8.1 prend en charge un ensemble de mouvements familiers qui sont optimisés pour les entrées à l’aide du pavé tactile. Les mouvements et les instructions abordés ici permettent de vérifier que votre application prend en charge les entrées du pavé tactile de façon transparente et avec un minimum de code.

Recommandations relatives à l’expérience utilisateur pour la prise en charge des interactions avec le pavé tactile

Voici quelques recommandations pour la prise en charge des interactions avec le pavé tactile :

Langage propre aux pavés tactiles dans Windows 8.1

Windows 8.1 propose un ensemble concis d’interactions avec le pavé tactile qui sont utilisées de façon uniforme dans l’ensemble du système. Optimisez votre application pour les entrées tactiles et de la souris. Ce langage confère ainsi un aspect familier à votre application qui sera plus facile à appréhender. Les utilisateurs n’en seront que plus confiants.

TermeDescription

Pointer pour apprendre

Pointez sur un élément pour afficher des informations détaillées ou des éléments visuels didactiques (tels qu’une info-bulle) ne requérant aucune action. Pour plus d’informations sur les info-bulles, voir Ajout d’info-bulles.

Appuyer avec un seul doigt pour l’action principale

Appuyez avec un seul doigt sur un élément pour appeler son action principale (par exemple, le lancement d’une application ou l’exécution d’une commande).

Appuyer avec deux doigts pour effectuer un clic droit

Appuyez simultanément avec deux doigts pour afficher la barre des applications avec des commandes globales ou sur un élément pour le sélectionner et afficher la barre des applications avec des commandes contextuelles.

Remarque  Appuyez avec deux doigts pour afficher un menu contextuel si les commandes de la sélection ou de la barre des applications ne correspondent pas à des comportements d’interface utilisateur appropriés. Toutefois, nous vous recommandons vivement d’utiliser la barre des applications pour tous les comportements des commandes.

Faire glisser deux doigts pour effectuer un mouvement panoramique

Le glissement est principalement utilisé pour les interactions de type panoramique mais peut également l’être pour le déplacement, le dessin ou l’écriture.

Pincer et étirer pour agrandir

Les mouvements de pincement et d’étirement sont souvent utilisés pour le redimensionnement et le zoom sémantique.

Appuyer avec un seul doigt et faire glisser pour réorganiser

Faites glisser un élément.

Appuyer avec un seul doigt et faites-le glisser pour sélectionner du texte

Appuyez sur le texte à sélectionner et faites glisser le doigt pour le sélectionner. Appuyez deux fois pour sélectionner un mot.

Bords pour les commandes système

Un mouvement de balayage à partir du bord droit de l’écran (ou gauche sur les dispositions de droite à gauche) affiche les icônes qui exposent les commandes système.

Un mouvement de balayage à partir du bord gauche de l’écran (ou droit sur les dispositions de droite à gauche) affiche une liste d’applications en cours d’exécution.

Zone de clic avec les boutons gauche et droit

Émulez la fonctionnalité de boutons gauche et droit d’un dispositif de pointage.

 

Matériel

Interrogez les fonctionnalités de la souris (MouseCapabilities) pour identifier les aspects de l’interface utilisateur de votre application auxquels le pavé tactile peut accéder directement. Nous vous conseillons de fournir une interface utilisateur pour les entrées tactiles et de la souris.

Pour plus d’informations sur l’interrogation des fonctionnalités du périphérique, voir Démarrage rapide : identification des périphériques de pointage.

Retour visuel

  • Quand des événements de déplacement ou de pointage permettent de détecter un curseur de pavé tactile, affichez une interface utilisateur spécifique à la souris pour indiquer la fonctionnalité exposée par l’élément. Si le curseur de pavé tactile ne bouge pas pendant un certain temps ou si l’utilisateur commence une interaction tactile, estompez progressivement l’interface utilisateur du pavé tactile. Cela maintient l’interface utilisateur propre et aérée.
  • N’utilisez pas le curseur pour le retour de pointage, car le retour fourni par l’élément est suffisant (voir la section Curseurs, ci-dessous).
  • N’affichez pas de retour visuel si un élément ne prend pas en charge l’interaction (tel que le texte statique).
  • N’utilisez pas de rectangles de sélection avec les interactions de pavé tactile. Réservez ceux-ci aux interactions avec le clavier.
  • Affichez un retour visuel simultanément pour tous les éléments qui représentent la même cible d’entrée.

Pour obtenir des recommandations plus générales sur le retour visuel, voir Recommandations en matière de retour visuel.

Curseurs

Un ensemble de curseurs standard est disponible pour servir de pointeurs de pavé tactile. Ces derniers sont utilisés pour indiquer l’action principale d’un élément.

Chaque curseur standard possède une image par défaut correspondante qui lui est associée. L’utilisateur ou une application peut remplacer à tout moment l’image par défaut associée à n’importe quel curseur standard. Les applications du Windows Store spécifient une image de curseur par le biais de la fonction PointerCursor.

Si vous avez besoin de personnaliser le curseur du pavé tactile :

  • Utilisez toujours le curseur en forme de flèche (Curseur en forme de flèche) pour les éléments pouvant être activés par un clic. N’utilisez pas le curseur en forme de main (Curseur en forme de main) pour des liens ou d’autres éléments interactifs. À la place, utilisez les effets de pointage (décrits précédemment).
  • Utilisez le curseur texte (Curseur texte) pour du texte sélectionnable.
  • Utilisez le curseur de déplacement (Curseur de déplacement) lorsque l’action principale correspond à un déplacement (par exemple, un glisser-déplacer ou un rognage). N’utilisez pas le curseur de déplacement pour des éléments lorsque l’action principale correspond à une navigation (tels que les vignettes de l’écran d’accueil).
  • Utilisez les curseurs de redimensionnement horizontal, vertical et diagonal (Curseur de redimensionnement vertical, Curseur de redimensionnement horizontal, Curseur de redimensionnement diagonal (du coin inférieur gauche au coin supérieur droit), Curseur de redimensionnement diagonal (du coin supérieur gauche au coin inférieur droit)), lorsqu’un objet peut être redimensionné.
  • Utilisez les curseurs en forme de main de saisie (Curseur en forme de main de saisie (ouverte), Curseur en forme de main de saisie (fermée)) lors d’un mouvement panoramique de contenu au sein d’une zone de dessin fixe (telle qu’une carte).

Rubriques associées

Conceptuel
Réponse à l’interaction utilisateur

 

 

Afficher:
© 2014 Microsoft