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

Utilisez les comportements d’interaction intégrés de la plateforme des applications du Windows Store pour fournir des expériences utilisateur intuitives, attrayantes 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.

Les contrôles de la plateforme peuvent gérer et répondre aux 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 systèmes d’exploitation se concentrent principalement sur les entrées tactiles, Windows vous permet de créer le type d’application que vous voulez, quel que soit le périphérique d’entrée : 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).

Avec les contrôles de la plateforme, vous pouvez prendre en charge une gamme très étendue de fonctionnalités et de préférences, créer une application utilisable, portable et accessible, et attirer l’audience la plus large dans le Windows Store.

Si vous recherchez des informations supplémentaires sur les comportements d’interaction personnalisés, voir Personnalisation de l’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 Interaction utilisateur de A à Z (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. 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 le mouvement panoramique et le défilement, les dispositions de formulaire, les comportements de clavier tactile, 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 indirectes via le formulaire, et utilise les données pour indiquer une couleur RGB et un angle de rotation, qu’il traduit en niveau de rouge, vert ou bleu correspondant.

L’exemple illustre les fonctionnalités suivantes :

Traversée de formulaire
Comportements de panoramique/défilement incorporés
Comportements du clavier tactile
Contrôles de plateforme et prise en charge de l’interaction utilisateur intégrée

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.

L’exemple contient deux pages (de haut en bas) : une page d’accueil et une seconde page, qui contient un formulaire présentant les différents contrôles de plateforme et le mélangeur de couleurs.

Voici un plan bref des tâches nécessaires pour créer une application qui utilise les meilleures pratiques relatives à 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.

Nous vous conseillons de passer en revue chaque étape si vous débutez dans le développement d’applications du Windows Store, ou si vous ne connaissez pas certains aspects de l’interaction utilisateur, de la facilité d’utilisation et de l’accessibilité. 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.

Nous vous recommandons de concevoir l’interface utilisateur de vos applications Windows 8.1 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 de base. 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 et Windows 8.
	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. Les interactions avec la souris sont particulièrement adaptées pour les applications qui requièrent un mécanisme de pointage et de clic de précision.
	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

Nous décrivons ici certains détails de l’interface utilisateur et des fonctionnalités proposées dans l’exemple d’interaction utilisateur.

Certains de ces détails peuvent ne pas s’appliquer à votre application. Choisissez ceux dont vous avez besoin.

	Recommandations en matière de dispositions de formulaire. Concevez des formulaires qui fournissent la meilleure expérience d’interaction et un minimum de défilement. Pensez à la façon dont l’utilisateur remplira le formulaire, à la nécessité du défilement, et à la gestion de l’apparence du clavier tactile et des notifications d’erreur en ligne.
	Recommandations en matière de saisie de texte Choisissez le contrôle approprié : quand utiliser un contrôle de saisie de texte d’une ligne ou de plusieurs lignes (avec tous les avantages et les inconvénients qui les accompagnent).
	Recommandations en matière de clavier tactile et de volet d’écriture manuscrite Prenez en charge la saisie de texte pour des facteurs de forme qui ne possèdent pas de clavier matériel ni d’autres périphériques clavier. Le clavier tactile est appelé lorsqu’un utilisateur appuie sur un champ d’entrée modifiable et il disparaît lorsque ce champ ne correspond plus à la zone active.
	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).
	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.

Gérer les interactions utilisateur

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

	Démarrage rapide : ajout de contrôles HTML et gestion des événements La plupart des applications ont besoin de contrôles, tels que des boutons, des cases à cocher et des listes déroulantes. Cet exemple comporte un formulaire qui contient différents contrôles pour définir les propriétés du mélangeur de couleurs statique.
	Affichage et édition de texte Ajoutez des contrôles de saisie de texte dans votre application du Windows Store.
	Clavier tactile Apparition et disparition du clavier tactile
	Implémentation de l’accessibilité au clavier. Les utilisateurs aveugles ou qui souffrent d’un handicap 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 adéquat au moyen du clavier, ces utilisateurs rencontreront des difficultés à utiliser votre application, ou risquent de ne pas pouvoir l’utiliser du tout.

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.