Réponse aux interactions de la souris (HTML)
[ 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 ]
Répondez à l’entrée de souris dans vos applications du Windows Store en C++, C# ou Visual Basic en gérant les mêmes événements de pointeur de base que ceux utilisés pour l’entrée tactile et du stylo.
Ces événements courants vous permettent d’implémenter une fonctionnalité de base sans avoir à rédiger de code pour chaque périphérique d’entrée. Toutefois, vous pouvez toujours tirer parti des caractéristiques spéciales de chaque périphérique (telles que les événements de roulette de souris) si vous le souhaitez.
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 aux interactions de la souris (XAML).
Pour les applications du Windows Store utilisant DirectX avec C++, voir Développement de contrôles basés sur la souris (DirectX et C++).
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.
- Recommandations en matière d’interactions utilisateur courantes
- Recommandations en matière de zoom optique et de redimensionnement
- Recommandations en matière de mouvement panoramique
- Recommandations en matière de rotation
- Recommandations en matière de zoom sémantique
- Recommandations en matière de retour visuel
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 mouvements instanciables
Entrée : mouvements et manipulations avec GestureRecognizer
Vue d’ensemble
Les entrées de la souris conviennent mieux aux interactions utilisateur qui demandent de la précision comme le pointage et le clic. Cette précision inhérente est naturellement prise en charge par l’interface utilisateur de Windows 8 qui permet de gérer la nature imprécise de l’entrée tactile. 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 de la souris.
Les entrées tactiles et de la souris divergent en raison de la capacité de l’entrée tactile à émuler la manipulation directe des éléments de l’interface utilisateur sur l’écran par le biais de mouvements physiques effectués sur ces objets (comme le balayage, le glissement, la rotation, etc.).
Pour permettre la prise en charge des interactions avec la souris dans les scénarios qui impliquent une manipulation directe, utilisez une interface utilisateur spécifique à la souris afin de fournir des fonctionnalités équivalentes aux utilisateurs de votre application, indépendamment de l’appareil qu’ils utilisent. Par exemple, quand une souris est détectée, utilisez une barre de défilement pour émuler le mouvement panoramique ou les boutons Précédent et Suivant pour tourner les pages de contenu.
Recommandations en matière de prise en charge des interactions de la souris
Voici quelques recommandations pour la prise en charge des interactions avec la souris :
Langage propre aux souris dans Windows 8
Windows 8 propose un ensemble concis d’interactions avec la souris qui sont utilisées de façon uniforme dans l’ensemble du système. L’application uniforme de ce langage confère un aspect familier à votre application pour vos utilisateurs. Votre application sera plus facile à appréhender et utiliser, et l’utilisateur n’en sera que plus confiant.
| Terme | Description |
|---|---|
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. |
Cliquer avec le bouton gauche pour effectuer l’action principale |
Cliquez avec le bouton gauche sur un élément pour appeler son action principale (par exemple, le lancement d’une application ou l’exécution d’une commande). |
Faire défiler l’affichage pour changer de vue |
Affichez des barres de défilement pour monter, descendre, aller à gauche et à droite dans une zone de contenu. Les utilisateurs peuvent faire défiler l’affichage en cliquant sur les barres de défilement ou en actionnant la roulette de la souris. Les barres de défilement peuvent indiquer l’emplacement de la vue actuelle dans la zone de contenu (un mouvement panoramique avec interaction tactile affiche une interface utilisateur similaire). |
Cliquer avec le bouton droit pour sélectionner une commande |
Effectuez un clic droit pour afficher les barres d’application avec des commandes globales. Cliquez avec le bouton droit sur un élément pour le sélectionner et afficher la barre de l’application avec des commandes contextuelles pour l’élément sélectionné. Remarque Effectuez un clic droit pour afficher un menu contextuel si les commandes de la sélection ou de la barre de l’application ne correspondent pas à des comportements d’interface utilisateur appropriés. Toutefois, nous vous recommandons vivement d’utiliser la barre de l’application pour tous les comportements des commandes. |
Commandes d’interface utilisateur pour le zoom |
Affichez des commandes d’interface utilisateur dans la barre de l’application (telles que + et -) ou appuyez sur Ctrl et actionnez la roulette de la souris pour émuler des mouvements de pincement et d’étirement pour le zoom. |
Commandes d’interface utilisateur pour la rotation |
Affichez des commandes d’interface utilisateur dans la barre de l’application ou appuyez sur Ctrl+Maj et actionnez la roulette de la souris pour émuler un mouvement de rotation. Faites pivoter l’appareil lui-même pour faire pivoter l’écran tout entier. |
Cliquer avec le bouton gauche et faire glisser pour réorganiser |
Cliquez avec le bouton gauche sur un élément et faites-le glisser pour le déplacer. |
Cliquer avec le bouton gauche et faire glisser pour sélectionner du texte |
Cliquez avec le bouton gauche dans du texte sélectionnable et faites glisser le curseur pour sélectionner du texte. Double-cliquez pour sélectionner un mot. |
Coins et bords où placer la souris pour accéder à des commandes système |
Placez la souris dans l’angle supérieur droit ou inférieur droit sur les dispositions de gauche à droite (ou du bord gauche sur les dispositions de droite à gauche) de l’écran pour révéler les icônes qui exposent les commandes système. Placez la souris dans l’angle supérieur gauche dans les dispositions de gauche à droite (ou dans l’angle supérieur droit dans les dispositions de droite à gauche) pour afficher une miniature de l’application utilisée le plus récemment. Effectuez un clic gauche ou cliquez et faites glisser la souris pour faire défiler les applications en cours d’exécution et basculer vers l’une d’entre elles ou faites glisser la souris pour ancrer l’application (si la résolution de l’écran le permet). Placez la souris dans l’angle inférieur gauche dans les dispositions de gauche à droite (ou dans l’angle inférieur droit dans les dispositions de droite à gauche) pour afficher une miniature de l’écran d’accueil. Effectuez un clic gauche et faites glisser la souris du bord supérieur vers le bord inférieur de l’écran pour fermer l’application active. Effectuez un clic gauche et faites glisser la souris du bord supérieur vers le bord inférieur gauche ou droit pour ancrer l’application active au côté correspondant de l’écran. |
Matériel
Interrogez les fonctionnalités de la souris (MouseCapabilities) pour identifier les aspects de l’interface utilisateur de votre application auxquels la souris matérielle peut accéder directement. 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.
Certaines souris possèdent 5 boutons. Les quatrième et cinquième boutons, nommés boutons X, permettent en général de naviguer vers l’arrière et vers l’avant dans les navigateurs Web tels que Windows Internet Explorer. Associez ces boutons aux éléments d’interface utilisateur appropriés (boutons Précédent et Suivant) dans votre application.
Si une souris possède une roulette, associez la rotation avant et la rotation arrière au défilement vertical (vers le haut et le bas) dans la zone de contenu. Activez le défilement horizontal (vers la gauche et la droite) si la zone de contenu ne défile pas verticalement. Si la roulette peut être inclinée, l’inclinaison doit activer uniquement le défilement horizontal.
La roulette de défilement doit activer le zoom (s’il est exposé) lorsque l’utilisateur appuie sur la touche de modification Ctrl.
Retour visuel
- Quand des événements de déplacement ou de pointage permettent de détecter une souris, affichez une interface utilisateur spécifique à la souris pour indiquer la fonctionnalité exposée par l’élément. Si la souris ne bouge pas pendant un certain temps ou si l’utilisateur commence une interaction tactile, estompez progressivement l’interface utilisateur de la souris. 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 avec la souris. 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.
- Fournissez des boutons (tels que + et -) pour émuler des manipulations tactiles, telles que le mouvement panoramique, la rotation, le zoom, etc.
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 souris. 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 de la souris :
- Utilisez toujours le curseur en forme de flèche (
.png "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 (.png "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 (
.png "Curseur texte")
) pour du texte sélectionnable. - Utilisez le curseur de déplacement (
.png "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 (
.png "Curseur de redimensionnement vertical")
, .png "Curseur de redimensionnement horizontal")
, .png "Curseur de redimensionnement diagonal (du coin inférieur gauche au coin supérieur droit)")
, .png "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 (
.png "Curseur en forme de main de saisie (ouverte)")
, .png "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).
Commandes
Un clic droit doit activer la barre de l’application de votre application. Évitez les zones mortes dans l’interface utilisateur de votre application qui n’acceptent pas les clics droits. Pour plus d’informations sur les barres d’application, voir Ajout de barres d’application.