Personnalisation de l’interaction utilisateur de A à Z (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 ]

Périphériques d’entrée pris en charge par les applications du Windows Store

Vous pouvez créer des interactions utilisateur personnalisées intuitives et attrayantes, mais en même temps efficaces et cohérentes sur tous les appareils. Suivez les recommandations, les meilleures pratiques et les exemples décrits ici pour définir ces expériences utilisateur pour votre application du Windows Store.

Remarque Nous recommandons d’utiliser les bibliothèques de contrôles de plateforme (HTML et XAML) quand cela est possible. Les contrôles de ces bibliothèques fournissent l’intégralité de l’expérience d’interaction utilisateur de Windows 8.1, notamment pour les interactions standard, les effets physiques animés, le retour visuel et l’accessibilité. Utilisez ces contrôles intégrés si vous n’avez pas besoin d’une prise en charge d’interaction personnalisée.

Les applications du Windows Store peuvent gérer les entrées de plusieurs sources : interaction tactile, pavé tactile, souris, stylet/stylo et clavier. Elles peuvent également gérer les entrées en plusieurs modes : clavier tactile, roulette de souris et gomme de stylet. Alors que d’autres plateformes se concentrent principalement sur les entrées tactiles, vous pouvez créer le type d’application du Windows Store que vous voulez, sans contrainte : applications commerciales, applications de productivité, applications hybrides innovantes sur PC, ordinateurs portables, tablettes et la plupart des facteurs de forme existants (voire même ceux en développement).

Si vous recherchez des informations supplémentaires sur les contrôles de plateforme et leurs comportements d’interaction, voir Interaction utilisateur de A à Z (HTML).

Prérequis

Les recommandations, tâches et exemples de code présentés ici 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 Personnalisation de l’interaction utilisateur (XAML).

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.

Développement d’applications du Windows Store en JavaScript

Familiarisez-vous avec tous les éléments : écran de démarrage, disposition de l’interface utilisateur et contrôles, dans les applications du Windows Store en JavaScript.
Créer votre première application du Windows Store en JavaScript

Utilisez JavaScript avec HTML5 et des feuilles de style en cascade (CSS) pour créer une application du Windows Store de base.

Exemple d’interaction utilisateur

En plus des exemples et des extraits de code des rubriques référencées ci-dessous, nous utiliserons l’exemple d’interaction utilisateur personnalisée. Cet exemple montre comment utiliser ou adapter les différentes fonctionnalités d’interaction et concepts dans votre application du Windows Store. Cet exemple comprend les principes, recommandations et détails d’implémentation pour les contrôles personnalisés, l’accessibilité de l’interface utilisateur et les interactions personnalisées. Découvrez comment nous avons mis cela en pratique.

Voici une courte description de l’exemple

Dans cet exemple, nous créons un mélangeur de couleurs. Il se présente sous la forme d’un objet carré qui reçoit des entrées directes d’un écran tactile, d’un pavé tactile, d’une souris, d’un stylet/stylo ou d’un clavier. Il utilise ces données pour spécifier une couleur RGB et un angle de rotation, qui sont traduits en niveau de rouge, vert ou bleu.

L’exemple illustre les fonctionnalités suivantes :

Contrôle personnalisé
Prise en charge de la personnalisation de base (HTML et XAML) des comportements d’interaction utilisateur
Détection, reconnaissance et gestion des mouvements personnalisés

Voici un graphique qui vous donne une idée du fonctionnement de l’exemple et de la fonctionnalité d’interaction implémentée par l’exemple.

Cet exemple contient trois pages (de gauche à droite) : une page d’accueil, une deuxième page qui contient un contrôle personnalisé qui prend en charge une rotation DOM, et une troisième page avec un contrôle personnalisé qui implémente des fonctionnalités supplémentaires via les API GestureRecognizer Windows.UI.Input.

Voici un plan bref des tâches nécessaires pour créer une application qui utilise les meilleures pratiques relatives à la l’interaction utilisateur dans les applications du Windows Store. Chaque tâche comporte un lien vers les informations correspondantes dans le Centre de développement d’applications du Windows Store.

Si vous débutez dans le développement d’applications du Windows Store ou si vous ne maîtrisez pas l’interaction utilisateur, la facilité d’utilisation et l’accessibilité, il est important de passer en revue chaque étape. Les aspects liés au développement de l’interaction utilisateur sont regroupés.

Planifier votre application

Avant de commencer à concevoir et à développer votre application, planifiez votre application. Pensez au public ciblé et aux fonctionnalités et activités prises en charge par votre application.

Concevez l’interface utilisateur de votre application du Windows Store principalement pour les interactions tactiles. Les entrées tactiles sont moins précises (elles nécessitent une zone d’entrée) que les autres types d’entrée qui sont précis au pixel près. Les contrôles optimisés pour le tactile, et l’ensemble des API d’interaction de plateforme pour le traitement des événements de pointeur, fournissent des fonctionnalités équivalentes sur tous les appareils avec très peu de code supplémentaire.

	Choisissez le modèle de navigation qui convient le mieux à votre application et à son contenu. Pour plus d’informations, voir Modèles de navigation. Dans l’exemple d’interaction utilisateur qui prend en charge ce didacticiel, nous utilisons le modèle de navigation plate. Téléchargez le modèle et expérimentez en suivant les étapes ci-après, ou utilisez directement le modèle pour commencer à concevoir et à développer votre application.
	Interface utilisateur des applications du Windows Store de A à Z (HTML). Concevez et disposez les éléments d’interface utilisateur et le contenu, notamment la fenêtre de l’application, les menus volants, les boîtes de dialogue et les barres de l’application. Nous utilisons les recommandations, les meilleures pratiques et les exemples pour vous permettre de tirer tous les avantages des fonctionnalités d’interface utilisateur de Windows 8.1 et de créer une interface utilisateur intuitive et cohérente avec d’autres applications du Windows Store.
	Réponse à l’interaction utilisateur. Découvrez la plateforme d’interaction utilisateur, les sources d’entrées (tactile, pavé tactile, souris, stylo/stylet et clavier), les modes (clavier tactile, roulette de la souris, gomme du stylet, etc.) ainsi que les interactions prises en charge par les applications du Windows Store.
	Comment les utilisateurs interagissent avec des périphériques d’entrée. Comparez les interactions communes et les mouvements tactiles, du pavé tactile, de la souris et du clavier.

Périphériques d’entrée

Bien qu’elle soit optimisée pour l’interaction tactile, la plateforme prend en charge les autres périphériques d’entrée répertoriés ici.

	Réponse aux interactions de la souris. Utilisez les interactions de la souris pour les applications qui nécessitent un pointage et un clic précis.
	Réponse aux interactions du clavier. Le clavier est indispensable pour certaines personnes souffrant d’un handicap et les utilisateurs qui le considèrent simplement comme un moyen plus efficace d’interaction avec une application.
	Réponse aux interactions du stylo et du stylet. Un stylet ou un stylo peut être utilisé en tant que dispositif de pointage et dispositif de dessin. Il est associé à une fonctionnalité d’entrée manuscrite.
	Réponse aux interactions du pavé tactile. Un pavé tactile combine l’entrée tactile multipoint 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.

Conception de vos interactions

Laissez libre cours à votre créativité quand vous suivez les recommandations en matière d’expérience utilisateur Windows pour les interactions utilisateur. Identifiez les périphériques d’entrée pris en charge par votre application et la façon dont votre application répond aux entrées. L’expérience utilisateur doit être optimale quel que soit le périphérique utilisé, votre application doit prendre en charge le plus de fonctionnalités et de préférences possibles pour attirer le public le plus large dans le Windows Store. Votre application est ainsi plus facile à utiliser, plus portable et accessible.

Les recommandations suivantes peuvent vous aider à fournir une expérience d’interaction utilisateur à la fois immersive, engageante et cohérente entre les divers modes d’entrée :

Recommandations en matière d’interactions utilisateur courantes

Créez des expériences d’interaction utilisateur avec les mêmes fonctionnalités pour tous les appareils.
Recommandations en matière de glisser transversal

Prenez en charge la sélection avec le mouvement de balayage et les interactions de glisser (déplacer) avec le mouvement de glissement.
Recommandations en matière de zoom optique et de redimensionnement

Le zoom optique permet à l’utilisateur d’agrandir la vue du contenu au sein d’une zone de contenu (l’interaction s’effectue sur la zone de contenu elle-même), tandis que le redimensionnement lui permet de modifier la taille relative d’un ou de plusieurs objets sans modifier la vue dans la zone de contenu (dans ce cas, l’interaction s’effectue sur les objets figurant dans la zone de contenu).
Recommandations en matière de mouvement panoramique

Pensez à la façon dont le mouvement panoramique et le défilement aident les utilisateurs à naviguer dans une vue, par exemple dans la structure des dossiers sur un ordinateur, une bibliothèque de documents ou un album photo. Pensez également à la façon dont les utilisateurs peuvent explorer du contenu qui ne s’affiche pas dans le viewport (horizontalement ou verticalement).
Recommandations en matière de rotation

Faites pivoter les objets par un mouvement circulaire (dans le sens des aiguilles d’une montre ou dans le sens inverse) à l’aide d’une interaction tactile ou d’autres contrôles d’interface utilisateur pour la souris, le stylet/stylo ou le clavier.
Recommandations en matière de zoom sémantique

Présentez et naviguer dans des ensembles de données liés de grande taille ou du contenu au sein d’une vue (par exemple, album photo, liste d’applications ou carnet d’adresses).
Recommandations en matière de sélection de texte et d’images

Fournissez une interface utilisateur et des fonctionnalités de sélection de contenu.
Recommandations en matière de ciblage

En proposant une précision pour l’interaction tactile améliorée, vous améliorez la confiance et la satisfaction de vos utilisateurs.
Recommandations en matière de retour visuel

Aidez les utilisateurs à comprendre, découvrir et s’adapter à votre application, au système et au périphérique d’entrée. Pour ce faire, indiquez la réussite d’une interaction, améliorez le sens du contrôle des utilisateurs, encouragez les interactions, affichez l’état du système et limitez les erreurs. Le retour visuel (également appelé visualisations de contact ou interface utilisateur de retour) indique si une interaction avec votre application est détectée, interprétée et gérée comme prévu.

Gérer les interactions utilisateur

Ici, nous explorons les options disponibles pour gérer et répondre aux interactions utilisateur avec votre application. Nous décrivons également certains détails de l’interface utilisateur et des fonctionnalités proposées dans l’exemple d’interaction utilisateur.

	Démarrage rapide : pointeurs Personnalisez les interactions utilisateur avec des événements de pointeur.
	Démarrage rapide : manipulations et mouvements DOM Personnalisez les interactions utilisateur avec des événements DOM (via Document Object Model).
	Démarrage rapide : actions statiques Démarrage rapide : actions de manipulation Personnalisez les interactions utilisateur via GestureRecognizer.
	Animation de votre interface utilisateur Intégrez l’aspect de Windows 8 dans votre application du Windows Store en utilisant la suite d’animations de la bibliothèque d’animations de la plateforme (pour les événements de pointeur ou les mouvements de balayage) ou personnalisez les animations avec des transitions, des animations et des transformations CSS3 (Cascading Style Sheets, Level 3 ).
	Implémentation de l’accessibilité au clavier. Les utilisateurs qui souffrent d’un handicap visuel ou de mobilité utilisent uniquement le clavier pour naviguer dans l’interface utilisateur de votre application et accéder aux fonctionnalités. Si votre application ne fournit pas un accès approprié au moyen du clavier, ces utilisateurs rencontreront des difficultés à utiliser votre application, ou risquent de ne pas l’utiliser du tout.
	Rendre les événements tactiles accessibles. Rendez les entrées tactiles accessibles en liant les événements du pointeur aux événements de clic de la souris.
	Test de votre application en matière d’accessibilité. Utilisez les outils de test d’accessibilité fournis dans le Kit de développement logiciel Windows (SDK) pour Windows 8, Inspect et le vérificateur d’accessibilité de l’interface utilisateur pour vérifier l’accessibilité de votre application. Si vous prévoyez de déclarer votre application comme accessible dans le Windows Store, vous devez traiter toutes les erreurs de priorité 1 signalées par AccChecker avec les vérifications Web ARIA activées. Rappel: Le narrateur prend en charge un ensemble de mouvements tactiles personnalisés (décrits dans cette rubrique) pour la navigation et la lecture du contenu de votre application.

Conclusion

icône de conditions requises du Windows Store

Certifiez votre application avec le Kit de certification des applications Windows.

Exécutez le Kit de certification des applications Windows pour vérifier que votre application répond à toutes les exigences du Windows Store. Procédez ainsi quand vous ajoutez des fonctionnalités à votre application.