Disposition de votre interface utilisateur (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 ]

Découvrez la disposition des applications Windows Runtime et les différences par rapport aux applications traditionnelles. Vous disposez d’une série de surfaces exploitables dans votre application Windows Runtime, par exemple la fenêtre d’application, les menus volants, les boîtes de dialogue et les barres de l’application. Le choix de la surface qui convient au moment approprié peut faire la différence entre une application fluide ou lourde à l’utilisation.

Page d’application ou canevas

La page d’application, parfois appelée canevas, constitue la base de votre interface utilisateur. Le canevas contient l’intégralité de votre contenu et de vos contrôles. Chaque fois que ceci est possible, vous devez intégrer vos éléments de l’interface utilisateur sur cette aire de base. Par exemple, au lieu de faire appel à un menu contextuel pour afficher une erreur, vous pouvez afficher, masquer ou faire se décaler le message d’erreur de façon fluide sur la fenêtre à l’aide des animations intégrées. Présenter votre interface utilisateur insérée permet aux utilisateurs de « s’immerger » complètement dans votre application et de rester dans le contexte.

Vous pouvez créer autant de pages d’application qu’il le faut pour prendre en charge vos scénarios utilisateur. Pour en savoir plus sur la disposition des pages d’application de façon à prendre en charge les scénarios utilisateur, voir Planification d’applications du Windows Store et Conception de la navigation.

Fenêtres : redimensionnement de votre interface utilisateur

Un utilisateur peut redimensionner votre application pour en utiliser une autre ou redimensionner une autre application pour utiliser la vôtre. Vous pouvez concevoir votre application pour que le contenu soit délivré de manière dynamique, afin d’optimiser l’expérience quand un utilisateur redimensionne votre application.

	Plein écran L’application remplit l’écran dans son intégralité.
	Redimensionnée L’application est redimensionnée sur une partie de l’écran. Les autres applications peuvent remplir l’espace de l’écran restant.

Pour plus d’informations, voir Recommandations en matière d’expérience utilisateur pour la disposition et la mise à l’échelle.

Clavier tactile et volet d’écriture manuscrite

Le clavier tactile (et le volet d’écriture manuscrite dans Windows) fournit une interface utilisateur de commande secondaire pour l’entrée de texte. Ce volet s’affiche lorsqu’un utilisateur touche un champ d’entrée modifiable (ou quand il clique sur l’icône de clavier dans la barre des tâches du Bureau dans Windows). Le volet se referme lorsque le champ d’entrée perd le focus.

Le clavier tactile permet l’entrée et l’édition de texte pour les tablettes et les téléphones, —autrement dit pour les facteurs de forme qui ne possèdent pas de clavier matériel ou autre périphérique clavier. Le volet d’écriture manuscrite dans Windows permet l’entrée et l’édition de texte pour les facteurs de forme basés sur le stylet.

De façon similaire aux états d’affichage mentionnés précédemment, vous pouvez concevoir votre application pour que le contenu soit délivré de manière dynamique, afin d’optimiser l’expérience utilisateur lorsque le clavier tactile ou le volet d’écriture manuscrite est affiché.

Voir Recommandations en matière de clavier tactile et de volet d’écriture manuscrite pour plus d’informations sur la prise en charge de ces modes d’entrée de texte.

Barres d’application

Hormis la page d’application, la barre de l’application représente l’interface de commande principale pour votre application. Utilisez la barre pour présenter aux utilisateurs les éléments de navigation, les commandes et les outils. Sur Windows Phone, le menu est masqué par défaut et il apparaît en cas d’appui sur l’ellipse. Sur Windows, la barre de l’application entière est masquée par défaut et s’affiche lorsque l’utilisateur effectue un balayage à partir du bord inférieur ou supérieur de l’écran. La barre de l’application masque le contenu de l’application et l’utilisateur peut la faire disparaître comme il l’a fait apparaître, ou en interagissant avec l’application.

Pour plus d’informations sur la conception des commandes, voir Conception des commandes. Pour obtenir des recommandations en matière d’expérience utilisateur, voir Recommandations en matière de barres de l’application.

Windows : icônes

Les icônes sont un ensemble spécifique et cohérent de boutons disponibles dans toutes les applications : Rechercher, Partager, Périphériques, Paramètres et Accueil. Nous considérons ceux-ci comme des cas de figure clés que tous les utilisateurs veulent utiliser dans pratiquement toutes les applications.

• Rechercher Les utilisateurs peuvent rechercher du contenu de votre application ou du contenu Web à partir de n’importe quel emplacement sur le système.
• Partager Les utilisateurs peuvent partager du contenu de votre application avec des personnes ou des services.
• Périphériques Les utilisateurs peuvent se connecter à des appareils et envoyer du contenu, diffuser des données multimédias en continu et imprimer.
• Paramètres Les utilisateurs peuvent configurer votre application selon leurs préférences et accéder à l’aide utilisateur.
• Démarrer Les utilisateurs peuvent accéder directement à l’écran de démarrage.

Pour plus d’informations, voir les recommandations suivantes : recherche, partage, paramètres de l’application et aide de l’application

Menus contextuels

Le menu contextuel indique les actions que l’utilisateur peut effectuer sur du texte ou des éléments de l’interface utilisateur dans une application. Vous pouvez utiliser jusqu’à cinq commandes sur chaque menu de contenu, telles que Couper, Copier ou Ouvrir avec. Cela permet de limiter la surcharge du menu contextuel, d’améliorer la lisibilité et de ne conserver que le texte ou l’objet important sur lequel les commandes agissent.

Ne faites pas appel à des menus contextuels comme interface de commande principale pour une application. La barre de l’application est conçue pour remplir ce rôle. Pour plus d’informations, voir Recommandations en matière de menus contextuels.

Boîtes de message

Les boîtes de message constituent des boîtes de dialogue nécessitant une action de la part de l’utilisateur. Elles estompent l’affichage de la fenêtre d’application et demandent une réponse de la part de l’utilisateur avant de continuer. Faites appel aux boîtes de message uniquement si vous comptez interrompre l’utilisateur et lui demander une réponse.

Dans l’exemple Windows mentionné ci-dessus, la fenêtre d’application est estompée et l’utilisateur doit appuyer sur l’un des deux boutons pour fermer la boîte de dialogue. Autrement dit, il est impossible d’ignorer le message affiché dans la boîte de dialogue.

Pour plus d’informations, voir Recommandations en matière de boîtes de message.

Menus volants

Les menus volants correspondent à des éléments d’interface utilisateur temporaires, pouvant être fermés et en relation avec l’opération que l’utilisateur exécute. Par exemple, vous pouvez utiliser des menus volants pour demander à l’utilisateur de confirmer une action, pour afficher un menu déroulant depuis un bouton situé dans la barre de l’application ou pour afficher plus de détails sur un élément. Les menus volants diffèrent des boîtes de message car vous ne devez les afficher qu’en réponse à l’appui sur l’écran tactile ou à un clic par un utilisateur. De plus, vous devez toujours fermer le menu volant si l’utilisateur appuie ou clique en dehors des limites du menu. N’utilisez une boîte de message que si vous devez interrompre l’utilisateur pour lui demander d’effectuer une opération particulière.

Dans l’exemple Windows ci-dessus, l’application reste active. L’utilisateur peut ainsi appuyer sur le bouton ou à l’extérieur du menu volant pour le fermer. Autrement dit, il est possible d’ignorer le message du menu volant. Pour plus d’informations, voir Recommandations en matière de menus volants.

Toasts (ou bannières)

Un toast (également appelé bannière sur Windows Phone) est une notification que vous présentez aux utilisateurs quand votre application est en arrière-plan. Un toast est particulièrement adapté pour donner aux utilisateurs des informations en temps réel, mais il est cependant acceptable de ne pas les afficher. L’utilisateur peut appuyer sur le toast pour basculer vers votre application et en savoir plus.

Sachez que certains utilisateurs peuvent être trouver gênant et irritant l’affichage des notifications toast. Il convient donc d’être parcimonieux dans leur utilisation. Pour plus d’informations, voir Recommandations concernant les notifications toast.

Vignettes

Les vignettes apparaissent dans l’écran de démarrage (dans Windows, elles remplacent les raccourcis d’applications autrefois affichés sur le Bureau et dans le menu Démarrer). Les utilisateurs appuient sur la vignette de votre application pour la lancer. Pour plus d’informations, voir Recommandations en matière de vignettes.

Erreurs

Les erreurs qui se produisent dans votre application peuvent être communiquées à l’utilisateur par le biais de trois surfaces principales. Le développeur de l’application choisit la surface correcte pour une erreur en fonction du contenu et des conséquences de l’erreur.

N’utilisez aucun menu volant, aucun toast ni aucune aire d’interface utilisateur personnalisée pour afficher les erreurs.

Erreurs : texte intraligne

En général, l’erreur insérée est le premier choix d’aire. Le texte d’une erreur insérée présente le message dans le contexte des actions en cours de l’utilisateur ou de la page active de l’application. Une erreur insérée ne requiert pas une action explicite de l’utilisateur pour fermer le message. Le message disparaît automatiquement lorsqu’il n’est plus applicable.

L’exemple Windows suivant montre un message d’erreur inséré associé à une zone d’entrée de texte spécifique.

Dans l’exemple Windows suivant, une barre d’erreur et d’avertissement serait un meilleur choix.

Erreurs : barre d’erreur ou d’avertissement

Faites appel à une barre d’erreur ou d’avertissement pour informer l’utilisateur d’erreurs et d’avertissements importants et pour l’inciter à agir. Les messages d’erreur informent l’utilisateur qu’un problème s’est produit, expliquent ce qui s’est passé et fournissent une solution pour qu’il puisse résoudre le problème. Les messages d’avertissement informent l’utilisateur d’une condition qui risque de provoquer un problème dans le futur.

Le message dans l’exemple Windows ci-dessous est purement informatif et aucune action n’est nécessaire. Dans ce cas, un message inséré en haut de l’écran aurait dû être utilisé.

Erreurs : boîtes de message

N’utilisez une boîte de message que si un message modal est nécessaire, empêchant ainsi l’utilisateur d’interagir avec l’application.

L’exemple Windows suivant est une utilisation appropriée d’une boîte de dialogue de message d’erreur, car l’utilisateur ne peut utiliser l’application que s’il a un compte actif.

Dans l’exemple suivant, rien dans l’erreur ne justifie que vous bloquiez l’utilisateur jusqu’à ce qu’il l’ait résolue. Une barre d’erreur ou d’avertissement aurait été un choix plus approprié.

Rubriques associées

Recommandations en matière de barres d’application

Recommandations en matière de paramètres de l’application

Recommandations en matière de recherche

Recommandations en matière de partage de contenu

Recommandations en matière de menus volants

Recommandations en matière de boîtes de message

Recommandations en matière de menus contextuels

Recommandations en matière d’écran de démarrage

Recommandations en matière d’aide de l’application