Langage: HTML | XAML

Disposition de votre interface utilisateur (XAML)

Applies to Windows and Windows Phone

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.

Voir ces fonctionnalités en action dans le cadre de notre série Fonctionnalités d’application de A à Z:  Interface utilisateur des applications du Windows Store de A à Z

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.

Page d’application (ou canevas)

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.

  • Applies to Windows

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

Plein écran

L’application remplit l’écran dans son intégralité.

Redimensionnée, application étroite

Redimensionnée, application large

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 pour le redimensionnement.

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é.

Pour plus d’informations sur la prise en charge de ces modes d’entrée de texte, voir Recommandations en matière de clavier tactile.

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.

Barre de l’application sur le bord inférieur de l’écran

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

  • Applies to Windows

Windows : icônes

Les icônes sont un ensemble spécifique et cohérent de boutons disponibles pour les utilisateurs dans toutes les applications : Rechercher, Partager, Connecter, Paramètres et Accueil. Nous considérons ceux-ci comme des cas de figure clés auxquels tous les utilisateurs sont à même de vouloir recourir 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.
  • Accueil Les utilisateurs peuvent accéder directement à l’écran d’accueil.

Application avec icônes

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.

Menus contextuels

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.

Boîte de message

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 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.

Menu volant

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

Vignettes sur l’écran d’accueil

Les vignettes apparaissent dans l’écran d’accueil (dans Windows, elles remplacent les raccourcis d’applications autrefois affichées 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. Voir Recommandations en matière de boîtes de message.

Élément à afficher :Surface à utiliser :

Une erreur non critique spécifique à un élément de l’application. Votre application ne peut pas résoudre le problème, mais l’utilisateur le peut.

Interaction utilisateur : l’utilisateur peut continuer à interagir avec l’application, les composants système et d’autres applications sans fermer l’erreur.

Exemple : l’utilisateur entre une chaîne non valide dans une zone d’entrée de texte, puis la retape.

Texte inséré sur la zone de dessin

  • Texte uniquement
  • Fermé par l’application
  • Apparaît inséré près de la source de l’erreur

Une erreur non critique qui s’applique à l’ensemble de l’application. Votre application ne peut pas résoudre le problème, mais l’utilisateur le peut.

Interaction utilisateur : l’utilisateur peut continuer à interagir avec l’application, les composants système et d’autres applications sans fermer l’erreur.

Exemple : synchronisation du courrier impossible pour le moment.

Texte en haut de la page

  • Texte uniquement
  • Fermé par l’application
  • Apparaît en haut de la page

Une erreur significative mais non critique qui s’applique à l’ensemble de l’application, et votre application peut suggérer une solution.

Interaction utilisateur : l’utilisateur peut répondre à votre invite ou continuer à interagir avec l’application, les composants système et d’autres applications sans fermer l’erreur.

Erreur et barre d’avertissement

  • Texte, deux boutons
  • Fermée par l’utilisateur
  • Apparaît dans la zone supérieure de la page

Une erreur critique qui s’applique à l’ensemble de l’application et empêche l’utilisateur d’utiliser l’application.

Interaction utilisateur : l’utilisateur ne peut continuer à interagir avec l’application que s’il ferme l’erreur. L’utilisateur peut toujours interagir avec les composants système et utiliser d’autres applications.

Boîte de message

  • Texte, 1 à 3 boutons, titre (facultatif)
  • Fermée par l’utilisateur
  • Apparaît centré dans la largeur de l’application

 

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.

Pratiques conseilléesAligner le message avec le contrôle ou l’élément auquel il se se rapporte.
Disposer le message en laissant suffisamment d’espace autour afin d’augmenter sa force visuelle.

 

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

Message d’erreur inséré associé à une zone de texte spécifique

 

Pratiques déconseilléesInclure des actions ou des commandes dans le message.

 

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

Action préférable à une barre d’erreur ou d’avertissement

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.

Pratiques conseilléesPlacer la barre en haut de l’écran, ce qui incite l’utilisateur à en prendre note et à entreprendre une action.
Choisir pour la barre une couleur dans la palette de l’application.
Utiliser la même couleur et la même disposition pour toutes vos barres d’erreur et d’avertissement.

 

Barre d’erreur

Pratiques déconseilléesAfficher les barres avec des couleurs ou des glyphes différents (tels qu’un bouclier ou un point d’exclamation) en fonction de la gravité identifiée.
Utiliser un glyphe « X » pour fermer la barre ; utiliser un bouton étiqueté « Fermer » à la place.
Utiliser une barre d’erreur ou d’avertissement pour un message à caractère purement informatif.

 

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é.

Utilisation inappropriée d’une barre d’erreur ou d’avertissement

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.

Pratiques conseilléesUtiliser une boîte de message si l’utilisateur doit entreprendre une action avant de continuer à utiliser 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.

Utilisation appropriée d’une boîte de dialogue de message d’erreur

Pratiques déconseilléesUtiliser une boîte de dialogue si l’utilisateur peut ignorer le message.

 

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é.

Utilisation inappropriée d’une boîte de dialogue de message d’erreur

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

 

 

Afficher:
© 2015 Microsoft