Réponse à l’interaction utilisateur (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 ]
Découvrez la plateforme d’interaction utilisateur, les sources d’entrée (tactile, pavé tactile, souris, stylo/stylet et clavier), les modes (clavier tactile, roulette de la souris, gomme du stylet, etc.) ainsi que les interactions utilisateur prises en charge par Windows, les applications du Windows Store et les applications du Windows Phone Store.
Mises à jour pour Windows 8.1: Dans Windows 8.1, les API d’entrée de pointeur ont fait l’objet de plusieurs mises à jour et améliorations. Pour plus d’informations, voir Modifications apportées aux API pour Windows 8.1.
Nous expliquons dans quelle mesure des fonctionnalités d’interaction et d’entrée de base sont fournies gratuitement avec les contrôles intégrés à l’infrastructure de langage (applications en JavaScript, applications en C++, C# ou Visual Basic et applications en C++ avec DirectX), comment les modèles d’interaction sont partagés entre les infrastructures de langage et comment personnaliser l’expérience d’interaction utilisateur.
À l’aide d’instructions, de meilleures pratiques et d’exemples, nous allons vous montrer comment exploiter pleinement les fonctionnalités d’interaction de Windows pour créer des applications avec des expériences utilisateur intuitives, attirantes et immersives.
Astuce Les informations fournies dans cette rubrique sont spécifiques au développement d’applications en JavaScript.
Pour les applications en C++, C# ou Visual Basic, voir Réponse à l’interaction utilisateur (XAML).
Pour les applications utilisant DirectX avec C++, voir Réponse à l’interaction utilisateur (DirectX et C++).
Conditions préalables: Si vous débutez dans le développement d’applications 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 et Capture et propagation d’événements DOM
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 glisser transversal
- 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 sélection de texte et d’images
- Recommandations en matière de ciblage
- Recommandations en matière de retour visuel
Exemples: Découvrez cette fonctionnalité en action dans nos exemples d’applications.
Exemple de personnalisation de l’interaction utilisateur de A à Z
Entrée : exemple de fonctionnalités de périphériques
Exemple de zoom, de panoramique et de défilement HTML
Entrée : exemple de gestion d’événement de pointeur DOM
Entrée : exemple de mouvements instanciables
Entrée : mouvements et manipulations avec GestureRecognizer
Entrée : exemple d’entrée manuscrite simplifiée
Entrée : exemple d’entrée manuscrite
Vue d’ensemble de la plateforme d’interaction utilisateur Windows 8
Conception d’applications avec les interactions tactiles à l’esprit L’entrée tactile est prise en charge par un nombre important et croissant de périphériques divers et les interactions tactiles représentent un aspect fondamental de l’expérience de Windows.
L’aspect tactile étant un mode d’interaction primordial pour les utilisateurs de Windows et de Windows Phone, les plateformes sont optimisées pour l’entrée tactile afin de rendre vos applications plus réactives, précises et faciles à utiliser. Rassurez-vous, les modes d’entrée qui ont déjà fait leurs preuves (la souris, le stylet et le clavier) sont entièrement pris en charge et cohérents avec les entrées tactiles du point de vue fonctionnement (voir Mouvements, manipulations et interactions). La vitesse, la précision et le retour tactile fournis par les modes d’entrée traditionnels sont familiers et accrocheurs pour de nombreux utilisateurs. Ces expériences d’interaction uniques et distinctives n’ont pas été remises en question.
Faites preuve de créativité lors de la conception de l’expérience d’interaction utilisateur. Faites en sorte que votre application prenne en charge le plus de fonctionnalités et de préférences possibles pour toucher le plus large public possible. Vous attirerez ainsi davantage de clients vers votre application.
Entre les contrôles intégrés et une personnalisation complète, la plateforme d’interaction utilisateur repose sur des couches de fonctionnalités qui ajoutent de la flexibilité et de la puissance progressivement.
Contrôles intégrés
Tirez parti des contrôles intégrés pour offrir une expérience d’interaction utilisateur courante qui fonctionne bien sur la majorité des applications Windows et Windows Phone.
Les contrôles intégrés sont conçus pour être optimisés pour l’expérience tactile tout en fournissant des expériences d’interaction cohérentes et attrayantes dans tous les modes d’entrée. Ils prennent en charge un ensemble complet de mouvements (appui prolongé, appui, glissement, balayage, pincement, étirement et rotation). Couplés avec des manipulations directes (mouvement panoramique, zoom, rotation, glissement) et un comportement inertiel réaliste, ils fournissent une expérience d’interaction à la fois attrayante, immersive et cohérente sur toute la plateforme Windows, et conforme aux meilleures pratiques.
Pour plus d’informations sur les bibliothèques de contrôles, voir Ajout de contrôles et de contenu.
Vues
Ajustez l’expérience d’interaction utilisateur par le biais des paramètres de panoramique/défilement et zoom de vos vues d’applications. La vue d’une application régit la manière dont un utilisateur accède à cette dernière et manipule votre application et son contenu. Les vues fournissent également des comportements tels que l’inertie, le rebond de limite de zone de contenu et les points d’ancrage.
Les paramètres de panoramique et de défilement déterminent la façon dont les utilisateurs naviguent au sein d’une vue unique quand le contenu de la vue est trop grand pour la fenêtre d’affichage. Une vue unique est par exemple la page d’un magazine ou d’un livre, la structure de dossiers d’un ordinateur, une bibliothèque de documents ou un album photo.
Les paramètres de zoom s’appliquent au zoom optique et au contrôle SemanticZoom. Le zoom sémantique est une technique optimisée pour l’interaction tactile applicable à la présentation et à la navigation de grands ensembles de contenus ou de données associés dans une même vue. Il fonctionne à l’aide de deux modes de classification (ou niveaux de zoom) distincts. Cette fonctionnalité est identique au mouvement panoramique et au défilement simple au sein d’une même vue. Ces types de défilements peuvent être utilisés en association avec le zoom sémantique.
Utilisez les affichages d’application et les propriétés CSS (Cascading Style Sheets), les attributs DOM (Document Object Model) et les événements DOM suivants pour modifier les comportements de panoramique/défilement et de zoom. Vous pouvez ainsi offrir une expérience d’interaction aussi fluide que possible via la gestion de pointeur et les événements de mouvement.
| Surface de l’API | Propriétés CSS | Attributs DOM | Événements DOM |
|---|---|---|---|
| touch-action spécifie si une région donnée peut être manipulée via le mouvement panoramique ou le zoom. | |||
| Mouvement panoramique/Défilement | |||
| Zoom | msContentZoomFactor | onmscontentzoom | |
| Les deux | onmsmanipulationstatechanged | ||
Pour plus d’informations sur les vues d’une application, voir Définition de dispositions et d’affichages.
Pour plus d’informations sur le zoom, voir Recommandations en matière de zoom optique et de redimensionnement ou Recommandations en matière de zoom sémantique.
Pour plus d’informations sur le mouvement panoramique/défilement, voir Recommandations en matière de mouvement panoramique.
Événements de mouvement et de pointeur DOM
Un pointeur est un type d’entrée générique avec un mécanisme d’événements unifiés. Il expose les informations de base (telles que la position de l’écran) sur la source d’entrée active (entrée tactile, pavé tactile, souris ou stylet). Les mouvements vont de simples interactions statiques telles qu’un appui à des manipulations plus complexes telles que le zoom, le mouvement panoramique et la rotation. Pour plus d’informations, voir Mouvements, manipulations et interactions.
Remarque
Les événements d’action statique sont déclenchés une fois que l’interaction se termine. Les événements d’action de manipulation indiquent une interaction en cours. L’utilisateur déclenche les événements d’action de manipulation en touchant l’élément. Ils se poursuivent jusqu’à ce que l’utilisateur mette fin au contact ou que la manipulation soit annulée.
L’accès aux événements de mouvement et de pointeur vous permet d’utiliser le langage de conception d’interaction tactile de Windows 8 pour :
- Les jeux
- Les contrôles personnalisés et les éléments de retour visuel
- Les interactions personnalisées
Tirez profit de la reconnaissance de mouvement intégrée, fournie par le biais des événements de mouvement DOM suivants :
| Type | Événements de mouvement DOM |
|---|---|
| Événements généraux | MSManipulationStateChanged |
| Événements de pointeur | |
| Événements d’action statique | |
| Événements d’action de manipulation |
Pour plus d’informations sur la gestion des événements de pointeur et de mouvement, voir Démarrage rapide : gestion des pointeurs et Démarrage rapide : gestion des mouvements DOM de base.
Personnaliser l’expérience utilisateur
Pour personnaliser et contrôler intégralement l’expérience d’interaction de votre application, utilisez les API Windows Runtime. Avec ces API, vous pouvez activer les interactions utilisateur personnalisées. Vous pouvez également gérer des options de configuration et des fonctionnalités matérielles supplémentaires, telles que des souris dotées d’un bouton droit, d’une roulette, d’une roulette inclinable ou de boutons X, et des stylets dotés de boutons et de pointes de gomme.
La plupart des API d’interaction sont fournies par les types Windows.UI.Core, Windows.UI.Input et Windows.UI.Input.Inking, avec des données de périphériques d’entrée exposées via Windows.Devices.Input.
Vous constaterez que les classes GestureRecognizer, PointerPoint et PointerPointProperties sont utiles pour la gestion des mouvements et des manipulations.
Avant de permettre des expériences d’interaction personnalisées par le biais de manipulations ou de mouvements nouveaux ou modifiés, posez-vous les questions suivantes :
- Un mouvement existant fournit-il l’expérience nécessaire à votre application ? Ne fournissez pas un mouvement personnalisé pour zoomer ou effectuer un mouvement panoramique quand vous pouvez simplement adapter votre application pour prendre en charge ou interpréter un mouvement existant.
- Le mouvement personnalisé justifie-t-il une éventuelle incohérence entre les applications ?
- Le mouvement nécessite-t-il une prise en charge matérielle spécifique, telle qu’un nombre de contacts ?
- Existe-t-il un contrôle (comme SemanticZoom) qui fournisse l’expérience d’interaction dont vous avez besoin ? Si un contrôle peut intrinsèquement gérer l’entrée utilisateur, une manipulation ou un mouvement personnalisé est-il nécessaire ?
- Votre manipulation ou mouvement personnalisé entraîne-t-il une expérience d’interaction fluide et naturelle ?
- L’expérience d’interaction a-t-elle un sens ? Si l’interaction repose sur des éléments tels que le nombre de contacts, la rapidité, le temps (pas recommandé) et l’inertie, vérifiez que ces contraintes et dépendances sont cohérentes et détectables. Par exemple, la vitesse (lente ou rapide) d’interprétation des utilisateurs peut avoir une influence directe sur la fonctionnalité de votre application et la satisfaction des utilisateurs à l’égard de leur expérience.
- La manipulation ou le mouvement sont-ils affectés par les capacités physiques de votre utilisateur ? Est-il accessible ?
- Une commande de barre de l’application ou une autre commande d’interface utilisateur suffira-t-elle ?
En résumé, ne créez des manipulations ou mouvements personnalisés que pour répondre à des exigences claires et bien définies, notamment en l’absence de mouvements de base pouvant prendre en charge votre scénario.
Pour plus d’informations sur les interactions personnalisées, voir Démarrage rapide : actions statiques et Démarrage rapide : actions de manipulation.
Rubriques associées
Conceptuel
Développement d’applications du Windows Store (JavaScript et HTML)