Personnalisation de l’interaction utilisateur de A à Z (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 ]
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 :
|
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.
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
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. |
|
Vous avez terminé ! Votre implémentation doit ressembler à l’exemple d’interaction utilisateur. Vous pouvez souffler et admirer votre travail. |
Vous voulez en savoir plus ?
Planification d’applications du Windows Store
Quel type d’expérience souhaitez-vous offrir à vos utilisateurs ?
Concevoir des applications pour l’accessibilité
Découvrez les aptitudes, les handicaps et les préférences de vos utilisateurs.
Concevoir des applications pour différents facteurs de forme
Découvrez comment gérer différents appareils, méthodes d’entrées et orientations d’écran.
Index des recommandations en matière d’expérience utilisateur
Parcourez la liste complète des recommandations en matière d’expérience utilisateur.
Exemples
DOM
- Entrée : exemple de gestion d’événement de pointeur DOM
- Entrée : exemple de mouvements instanciables
API des applications du Windows Store