Interface utilisateur des applications du Windows Store de A à Z (HTML)

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.

Page principale de l’application StumbleUpon

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’exemple Galerie de contrôles et de dispositions

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.

icône de début

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.

icône d’étape

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 canvas :
    • 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 canvas
    • 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.

icône d’étape

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.

icône d’étape

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.

icône d’étape

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.

icône d’étape

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.

icône d’étape

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

icône d’étape

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.

icône d’étape

Recommandations en matière de tailles de fenêtre et de mise à l’échelle à la taille des écrans

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.

icône d’étape

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.

icône d’étape

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.

icône d’étape

Recommandations en matière de mise à l’échelle d’après la densité en pixels

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

icône d’étape

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.

icône d’étape

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.

icône d’étape

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.

icône d’étape

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.

icône d’étape

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.

icône d’étape

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.

icône d’étape

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

icône de conditions requises du Windows Store

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.

icône stop

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.

 

 

Afficher:
© 2014 Microsoft