Interface utilisateur des applications du Windows Store 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 ]

Comment créer une interface utilisateur irréprochable ? Quelle est la meilleure disposition pour votre application ? Qu’est-ce qui rend la navigation dans une application facile et intuitive ?

Posez-vous ces questions au début de la phase de conception du développement de votre application. Apprenez ensuite à implémenter votre conception.

À l’aide de recommandations, de meilleures pratiques et d’exemples, nous allons vous aider à tirer parti des fonctionnalités d’interface utilisateur de Windows 8.1. Vous pouvez concevoir l’interface utilisateur de votre application afin qu’elle soit intuitive, esthétiquement belle et cohérente avec d’autres applications du Windows Store.

Les sections ci-dessous présentent les tâches qui vous aideront à concevoir l’interface utilisateur pour votre application. Elles suivent les meilleures pratiques décrites dans les recommandations en matière d’expérience utilisateur.

Si vous débutez dans le développement d’applications du Windows Store ou si vous ne maîtrisez pas la disposition, la navigation, les contrôles et les commandes, il est utile de passer en revue chaque étape. Dans le cas contraire, parcourez les étapes comme vous le souhaitez. Nous avons regroupé les aspects connexes du développement de l’interface utilisateur d’une application. 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 et HTML. Pour la version C#/VB/C++ et XAML, voir Interface utilisateur des applications du Windows Store de A à Z (XAML).

L’exemple

L’exemple Galerie de contrôles et de dispositions comprend tous les éléments d’interface utilisateur présentés ici. Nous ferons souvent référence à cet exemple et vous indiquerons les emplacements où les fonctionnalités spécifiques sont implémentées.

L’application d’exemple est une galerie de contrôles d’une application du Windows Store. Avec cet exemple, vous pouvez parcourir les contrôles et le code d’implémentation de chaque contrôle. Vous pouvez également étudier comment nous avons implémenté chaque étape dans les sections ci-dessous.

Étape 1 : Préparation et emplacement des éléments

Avant de commencer la conception et le développement de votre application, vous devez la planifier. Pensez aux points forts de votre application, à votre public, aux scénarios que vous voulez implémenter et aux fonctionnalités à prendre en charge. Pour plus d’informations sur la façon de planifier votre application, voir Définition de la vision.

Décidez de la stratégie de navigation que votre application utilisera. Dans ce didacticiel, nous utilisons le modèle Hub. Pour concevoir et développer l’interface utilisateur de votre application, vous pouvez télécharger le modèle et expérimentez en suivant le plan. Pour plus d’informations, voir modèles de navigation et navigation hiérarchique (HTML). Si vous voulez explorer directement le code, passez à l’exemple Galerie de contrôles et de dispositions.

Disposition de votre interface utilisateur Comment disposer les éléments dans une application du Windows Store ? Découvrez l’aide relative à la disposition de l’interface utilisateur. Dans notre exemple, nous vous montrerons comment nous avons utilisé l’aide pour concevoir notre application. Dans la page principale, nous avons disposé les éléments suivants sur le canevas : Liste des groupes de contrôles. Les contrôles sont regroupés par fonction pour pouvoir naviguer plus rapidement dans les types de contrôles. Liste tous les contrôles. Les contrôles sont triés alphabétiquement par nom, pour faciliter la recherche d’un contrôle. Dans chaque page, nous avons ajouté un élément de navigation à la barre supérieure de l’application pour pouvoir revenir rapidement à la page d’accueil. Chaque page de section suit le modèle de navigation hiérarchique standard. Elle comprend une liste des éléments de contrôle et un lien vers la page de détail correspondante. Chaque page de section et chaque page de détail comprennent un bouton Précédent pour vous permettre de retourner à la page d’où vous arrivez. Sur chaque page de détail, nous avons indiqué le contenu principal dans l’écran principal de l’application : Description du contrôle Exemple du contrôle, s’il peut être affiché sur le canevas Extraits de code pour implémenter le contrôle

Étape 2 : Choix des contrôles à ajouter

L’ajout de contrôles et la disposition de votre application vont de paire. Vous devez savoir quels contrôles ajouter, et vous devez concevoir une disposition avant de choisir ces contrôles. Une bonne compréhension du fonctionnement des contrôles vous permet de prendre des décisions de disposition appropriées.

Dans ce didacticiel, nous allons nous intéresser tout d’abord aux contrôles individuels. À l’étape 3, vous apprendrez à les organiser dans une disposition. Si vous voulez savoir comment concevoir la disposition, passez à la section suivante et revenez à celle-ci plus tard.

Dans le code de l’exemple vous pouvez voir comment nous avons ajouté chaque contrôle à la galerie.

	Contrôles par fonction Liste des contrôles Familiarisez-vous avec la liste complète des contrôles disponibles et leur fonction, puis choisissez les contrôles pour votre application.
	Démarrage rapide : ajout de contrôles HTML et gestion des événements Utilisez des contrôles HTML, tels que des boutons, des cases à cocher et des listes déroulantes.
	Démarrage rapide : affichage du texte Utilisez des contrôles HTML tels que des étiquettes, des contrôles div, des paragraphes et des zones de texte pour afficher le texte.
	Démarrage rapide : saisie et modification de texte Utilisez des contrôles HTML tels que des zones de texte, des espaces de texte, des zones d’entrée de mot de passe et des zones d’édition enrichies/zones de texte enrichies pour entrer et modifier du texte.
	Démarrage rapide : ajout de contrôles et de styles WinJS Utilisez les contrôles de la bibliothèque Windows pour JavaScript, tels que des contrôles ListView, des contrôles d’évaluation et des contrôles de menu volant.

Étape 3 : Création de la disposition

	Disposition d’une page d’application Découvrez le système de grille, les en-têtes, les marges et les interlignes, et comment créer une expérience cohérente pour les utilisateurs à l’aide de ces éléments.
	Recommandations en matière d’expérience utilisateur pour la disposition et la mise à l’échelle Un utilisateur peut redimensionner une application (de la largeur minimale au plein écran) et peut l’afficher dans différentes tailles d’écrans, avec différentes résolutions et orientations. Vous pouvez concevoir votre application pour qu’elle s’affiche correctement quelle que soit la taille. Dans l’exemple, nous avons utilisé la largeur minimale par défaut de 500 pixels.
	Démarrage rapide : définition des dispositions d’application Créez une interface utilisateur fluide qui s’affiche et fonctionne correctement quelle que soit la taille utilisée.
	Démarrage rapide : conception d’applications pour différentes tailles de fenêtres Découvrez comment remplacer la largeur minimale de 500 pixels d’une application par 320 pixels et comment modifier votre conception pour que l’application ait un aspect agréable et qu’elle fonctionne correctement à des largeurs étroites. Apprenez également à concevoir une application panoramique horizontale pour qu’elle bascule vers une disposition verticale quand sa hauteur est supérieure à sa largeur.
	Recommandations en matière d’expérience utilisateur pour la disposition et la mise à l’échelle Plus la densité en pixels d’un appareil d’affichage augmente, plus la taille physique des objets à l’écran diminue. L’interface serait donc trop réduite pour l’interaction et le texte trop petit pour être lu, c’est pourquoi Windows met l’interface de l’application et l’interface système à l’échelle selon un pourcentage d’échelle. Découvrez comment vous assurer de l’aspect de votre application lors d’une mise à l’échelle.

Étape 4 : Choix de l’emplacement des commandes et utilisation des icônes

	Modèles de commandes Découvrez où placer les commandes, dans l’écran, dans des menus contextuels, dans des boîtes de dialogue ou dans les barres de l’application, et décidez où placer les commandes de l’application.
	Recommandations et liste de vérification sur les barres d’application Démarrage rapide : ajout d’une barre d’application avec des commandes Recommandations en matière de barres de navigation Démarrage rapide : ajout d’une barre de navigation Découvrez comment regrouper des commandes, utiliser des styles, des icônes et un placement cohérent, et d’autres conseils sur les barres d’application de commande et de navigation. Dans l’exemple, nous avons implémenté un bouton Accueil dans la barre supérieure de l’application pour faciliter la navigation.
	Recommandations et liste de vérification sur l’ajout de menus contextuels Utilisez les menus contextuels pour un accès immédiat aux actions, par exemple un couper-coller. Les menus contextuels doivent être courts et en relation avec la sélection.
	Recommandations et liste de vérification sur la recherche Démarrage rapide : ajout d’une fonctionnalité de recherche à une application Découvrez quand utiliser un contrôle de zone de recherche dans l’application et quand utiliser le contrat de recherche.
	Recommandations en matière de partage de contenu Démarrage rapide : partage de contenu Si votre application dispose d’un contenu à partager, elle représente une source de partage. Si votre application peut recevoir un contenu provenant d’autres applications, il s’agit d’une cible de partage.
	Recommandations en matière de paramètres de l’application Démarrage rapide : ajout de paramètres d’application Utilisez l’icône Paramètres intelligemment. Veillez à ce que vos paramètres restent simples et peu nombreux. Identifiez les paramètres appropriés pour le volet Paramètres.
	Recommandations en matière d’aide de l’application Recommandations en matière de conception de l’interface utilisateur d’instruction Démarrage rapide : ajouter de l’aide dans une application Découvrez quand et comment implémenter l’aide de l’application dans le volet Paramètres et apprenez quand utiliser d’autres méthodes pour fournir de l’aide, par exemple des conseils, des démonstrations ou une nouvelle interface utilisateur.

Étape 5 : Conclusion

	Exécuter le Kit de certification des applications Windows. Recommandé. L’exécution du kit de certification garantit que votre application répond aux exigences du Windows Store, il est donc conseillé de l’utiliser quand vous ajoutez des fonctionnalités à votre application.
	Vous avez terminé ! Vous avez pris en compte les recommandations en matière d’expérience utilisateur et conçu l’interface, votre application devrait donc refléter les meilleures pratiques afin de fournir la meilleure expérience possible aux utilisateurs.

Étapes suivantes

Maintenant que vous maîtrisez les bases, vous pouvez consulter les autres exemples de la série Fonctionnalités d’application de A à Z.

Vous voulez en savoir plus ?

Index des recommandations en matière d’expérience utilisateur

Parcourez la liste complète des recommandations en matière d’expérience utilisateur.

Interaction utilisateur : entrée tactile... et plus encore

Consultez la rubrique de A à Z pour concevoir une expérience d’interaction utilisateur pour votre application.

Créer votre première application du Windows Store

Suivez cette série de didacticiels si vous développez une application du Windows Store pour la première fois.