Mouvements, manipulations et interactions (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Les interactions tactiles permettent à votre application de traduire et d’utiliser des mouvements physiques pour émuler la manipulation directe d’éléments d’interface utilisateur.

Elles offrent une expérience réaliste plus naturelle quand les utilisateurs interagissent avec les éléments à l’écran. En revanche, l’interaction avec un objet par le biais de sa fenêtre de propriétés ou d’une autre boîte de dialogue est considérée comme étant une manipulation indirecte. Windows prend aussi en charge les interactions tactiles sur les différents modes d’entrée et sur des périphériques différents, par exemple les appareils tactiles, la souris et le stylet.

Les API de la plateforme Windows Runtime prennent en charge les interactions de l’utilisateur par le biais de trois types d’événement d’interaction : pointeur, mouvement et manipulation.

Les événements de pointeur permettent d’obtenir des informations de contact de base telles que l’emplacement et le type de périphérique et des informations étendues telles que la pression et la géométrie du contact, ainsi que de prendre en charge des interactions plus complexes.
Les événements de mouvement permettent de gérer les interactions statiques effectuées à l’aide d’un seul doigt, telles que l’appui et l’appui prolongé (le double appui et l’appui droit sont dérivés de ces mouvements élémentaires).
Les événements de manipulation sont utilisés pour les interactions multipoint dynamiques, telles que le pincement et l’étirement, et des interactions qui utilisent des données d’inertie et de vitesse, telles que les mouvements panoramiques, le défilement, le zoom et la rotation. Remarque Les informations fournies par les événements de manipulation n’identifient pas l’interaction. Elles spécifient les données d’entrée telles que la position, le delta de translation et la vitesse. Ces données sont ensuite utilisées pour déterminer la manipulation et effectuer l’interaction.

Reportez-vous aux rubriques de démarrage rapide suivantes pour plus d’informations :

À présent, nous allons décrire les relations entre les mouvements, les manipulations et les interactions.

Mouvements

Un mouvement est l’acte physique ou le déplacement effectué sur ou par le périphérique d’entrée (un doigt, plusieurs doigts, stylet, souris, etc.). Par exemple, pour démarrer, activer ou appeler une commande, vous appuyez avec un seul doigt pour une entrée tactile ou un pavé tactile (ce qui revient à cliquer à l’aide du bouton gauche de la souris, à appuyer avec un stylo ou à appuyer sur Entrée sur un clavier).

Voici l’ensemble des mouvements de base qui permettent de manipuler l’interface utilisateur et d’effectuer une interaction.

Nom	Type	Description
Appuyer	Action statique	Brève pression de l’écran avec un doigt.
Appuyer longuement	Action statique	Pression prolongée de l’écran avec un doigt.
Faire glisser	Action de manipulation	Pression de l’écran avec un ou plusieurs doigts et déplacement dans une même direction.
Balayer	Action de manipulation	Pression de l’écran avec un ou plusieurs doigts et déplacement sur une courte distance dans une même direction.
Tourner	Action de manipulation	Pression de l’écran avec deux doigts ou plus et mouvement en arc de cercle de haut en bas ou de bas en haut.
Pincer	Action de manipulation	Pression de l’écran avec deux doigts ou plus, puis rapprochement des doigts.
Étirer	Action de manipulation	Pression de l’écran avec deux doigts ou plus, puis étirement des doigts.

Manipulations

Une manipulation est la réaction ou la réponse immédiate d’un objet ou de l’interface utilisateur à un mouvement. Par exemple, les mouvements de glissement et de balayage entraînent généralement un déplacement identique d’un élément ou de l’interface utilisateur.

Le résultat final d’une manipulation et comment elle est représentée par l’objet sur l’écran et via l’interface utilisateur constituent l’interaction.

Interactions

Les interactions dépendent de la façon dont une manipulation est interprétée ainsi que de la commande ou de l’action qui résulte de cette manipulation. Par exemple, des objets peuvent être déplacés par glissement ou par balayage, mais les résultats diffèrent selon qu’un seuil de distance est dépassé ou non. Le glissement peut être utilisé pour faire glisser un objet ou faire défiler une vue en panoramique, tandis que le balayage peut être utilisé pour sélectionner un élément ou afficher l’objet AppBar.

Cette section décrit certaines interactions courantes.

Apprentissage

L’appui prolongé affiche des informations détaillées ou des éléments visuels didactiques (par exemple, une info-bulle ou un menu contextuel) sans avoir recours à l’exécution d’une action ou d’une commande. Le mouvement panoramique est toujours possible si un mouvement de glissement est commencé alors que l’élément visuel est affiché. Pour plus d’informations, voir Recommandations en matière de retour visuel.

Découvrir l’interaction

Commande

L’action d’appuyer appelle une action primaire, telle que le lancement d’une application ou l’exécution d’une commande.

Interaction de commande

Panoramique

Le glissement est un mouvement principalement utilisé pour les interactions de type panoramique mais qui peut également l’être pour le déplacement, le dessin ou l’écriture. Le mouvement panoramique est une technique optimisée pour l’entrée tactile, utilisée pour la navigation sur de courtes distances dans du contenu restreint au sein d’une seule et même vue (comme la structure de dossiers d’un ordinateur, une bibliothèque de documents ou un album photo). Le mouvement panoramique est équivalent au défilement à l’aide de la souris ou du clavier, et n’est nécessaire que lorsque la quantité de contenu présente dans la vue est telle que la zone de contenu déborde de la zone d’affichage. Pour plus d’informations, voir Recommandations en matière de mouvement panoramique.

Interaction de mouvement panoramique

Zoom

Les mouvements de pincement et d’étirement sont utilisés pour trois types d’interaction : zoom optique, redimensionnement et zoom sémantique.

Zoom optique et redimensionnement

Le zoom optique modifie le facteur de grossissement de la totalité de la zone de contenu en vue d’obtenir une vue plus détaillée du contenu. En revanche, le redimensionnement est une technique d’ajustement de la taille relative d’un ou plusieurs objets dans une zone de contenu, sans modification de la vue dans cette zone de contenu. Les deux images du haut montrent un zoom optique, tandis que les deux images du bas illustrent le redimensionnement d’un rectangle sur l’écran, sans modification de la taille de tout autre objet. Pour plus d’informations, voir Recommandations en matière de zoom optique et de redimensionnement.

Interaction de zoom optique

Interaction de redimensionnement

zoom sémantique

Le zoom sémantique est une technique optimisée pour l’entrée tactile, utilisée pour la présentation de données ou de contenu structurés au sein d’une seule et même vue (comme la structure de dossiers d’un ordinateur, une bibliothèque de documents ou un album photo), sans qu’il soit nécessaire d’utiliser des contrôles de mouvement panoramique, de défilement ou arborescence. Le zoom sémantique offre deux vues différentes du même contenu en vous permettant de voir plus de détails lorsque vous effectuez un zoom avant et moins de détails lorsque vous effectuez un zoom arrière. Pour plus d’informations, voir Recommandations en matière de zoom sémantique.

Interaction de zoom sémantique

Rotation

Le mouvement de rotation simule l’expérience de la rotation d’un morceau de papier sur une surface plane. L’interaction est réalisée en plaçant deux doigts sur l’objet et en faisant pivoter un doigt autour de l’autre ou les deux doigts autour d’un point central, puis en orientant la main dans la direction souhaitée. Vous pouvez utiliser deux doigts de la même main ou un doigt de chaque main. Pour plus d’informations, voir Recommandations en matière de rotation.

Interaction de rotation

Sélection et déplacement

L’action de faire glisser et le mouvement de balayage sont utilisés dans une manipulation de glisser transversal, à savoir un mouvement perpendiculaire au mouvement panoramique de la zone de contenu. Cette manipulation est interprétée comme une sélection ou, si un seuil de distance est dépassé, comme une interaction de déplacement (par glissement). Ce diagramme décrit ces processus. Pour plus d’informations, voir Recommandations en matière de glisser transversal.

Interactions de sélection et de glissement-déplacement

Affichage des barres de commandes

Le mouvement de balayage dévoile différentes barres de commandes ou l’écran de connexion.

Les commandes d’application sont affichées en faisant un mouvement de balayage à partir du bas ou du haut de l’écran. Utilisez le contrôle AppBar pour afficher les commandes d’application.

Afficher les commandes d’application

Les commandes système sont révélées par un mouvement de balayage effectué à partir du bord droit, les applications récemment utilisées le sont par un mouvement de balayage effectué à partir du bord gauche, tandis qu’un mouvement de balayage effectué du bord supérieur vers le bord inférieur fait apparaître les commandes d’ancrage ou de fermeture.

Afficher les commandes système