Boîtes de dialogue et menus volantsDialogs and flyouts

Les boîtes de dialogue et les menus volants sont des éléments temporaires d’interface utilisateur qui s’affichent quand un événement se produit qui nécessite une notification, une approbation ou d’autres informations de l’utilisateur.Dialogs and flyouts are transient UI elements that appear when something happens that requires notification, approval, or additional information from the user.

API de plateforme : classe ContentDialog, classe FlyoutPlatform APIs: ContentDialog class, Flyout class

DialoguesDialogs

Exemple de boîte de dialogue

Les boîtes de dialogue sont des superpositions d’interface utilisateur modales qui fournissent des informations contextuelles sur l’application.Dialogs are modal UI overlays that provide contextual app information. Les boîtes de dialogue bloquent les interactions avec la fenêtre de l’application jusqu’à ce qu’elles soient masquées explicitement.Dialogs block interactions with the app window until being explicitly dismissed. Elles exigent souvent une forme d’action de la part de l’utilisateur.They often request some kind of action from the user.

Menus volantsFlyouts

Exemple de menu volant

Un menu volant est une fenêtre contextuelle légère qui affiche l’interface utilisateur liée aux opérations qu’effectue l’utilisateur.A flyout is a lightweight contextual popup that displays UI related to what the user is doing. Il comprend une logique de placement et de dimensionnement, et peut être utilisé pour afficher un contrôle secondaire ou des détails supplémentaires sur un élément.It includes placement and sizing logic, and can be used to reveal a secondary control or show more detail about an item.

Contrairement à une boîte de dialogue, un menu volant peut être fermé rapidement en appuyant ou en cliquant en dehors du menu volant, en appuyant sur la touche ÉCHAP ou le bouton Précédent, en redimensionnant la fenêtre d’application ou en modifiant l’orientation de l’appareil.Unlike a dialog, a flyout can be quickly dismissed by tapping or clicking somewhere outside the flyout, pressing the Escape key or Back button, resizing the app window, or changing the device's orientation.

Est-ce le contrôle approprié ?Is this the right control?

Les boîtes de dialogue et les menus volants permettent aux utilisateurs de prendre connaissance d’informations importantes, mais elles perturbent également l’expérience utilisateur.Dialogs and flyouts make sure that users are aware of important information, but they also disrupt the user experience. Les boîtes de dialogue étant modales (bloquantes), elles interrompent les utilisateurs et les empêchent de faire autre chose tant qu’ils n’interagissent pas avec la boîte de dialogue.Because dialogs are modal (blocking), they interrupt users, preventing them from doing anything else until they interact with the dialog. Les menus volants sont moins dérangeants, mais si vous en affichez trop, vous perturbez également l’utilisateur.Flyouts provide a less jarring experience, but displaying too many flyouts can be distracting.

Une fois que vous avez déterminé que vous voulez utiliser une boîte de dialogue ou un menu volant, vous devez choisir lequel utiliser.Once you've determined that you want to use a dialog or flyout, you need to choose which one to use.

Étant donné que les boîtes de dialogue bloquent les interactions contrairement aux menus volants, elles doivent être réservées aux situations dans lesquelles vous voulez que l’utilisateur interrompe tout ce qu’il est en train de faire pour se concentrer sur une information particulière ou répondre à une question.Given that dialogs block interactions and flyouts do not, dialogs should be reserved for situations where you want the user to drop everything to focus on a specific bit of information or answer a question. Les menus volants, quant à eux, peuvent être utilisés quand vous voulez attirer l’attention de l’utilisateur sur quelque chose, mais qu’il a la possibilité de l’ignorer.Flyouts, on the other hand, can be used when you want to call attention to something, but it's ok if the user wants to ignore it.

Utilisez une boîte de dialogue pour... Use a dialog for...

  • Afficher des informations importantes que l’utilisateur doit lire et accepter avant de poursuivre.Expressing important information that the user must read and acknowledge before proceeding. Voici quelques exemples :Examples include:
    • Utilisez ce type de contrôle pour indiquer à l’utilisateur toute situation d’atteinte possible à la sécurité.When the user's security might be compromised
    • Utilisez ce type de contrôle pour signaler à l’utilisateur qu’il s’apprête à modifier de manière irrémédiable un élément utile.When the user is about to permanently alter a valuable asset
    • Utilisez ce type de contrôle pour signaler à l’utilisateur qu’il s’apprête à supprimer un élément utile.When the user is about to delete a valuable asset
    • Pour confirmer un achat dans l’applicationTo confirm an in-app purchase
  • Les messages d’erreur qui s’appliquent au contexte global de l’application, liés par exemple à une erreur de connectivité.Error messages that apply to the overall app context, such as a connectivity error.
  • Utilisez une boîte de dialogue à question pour indiquer que l’application doit poser à l’utilisateur une question bloquante, parce qu’elle ne peut pas choisir telle ou telle option à la place de l’utilisateur, par exemple.Questions, when the app needs to ask the user a blocking question, such as when the app can't choose on the user's behalf. Une question bloquante ne peut pas être ignorée ni reportée, et doit offrir à l’utilisateur des options clairement définies.A blocking question can't be ignored or postponed, and should offer the user well-defined choices.

Utilisez un menu volant pour... Use a flyout for...

  • Collecter des informations supplémentaires nécessaires pour pouvoir effectuer une action.Collecting additional information needed before an action can be completed.
  • Afficher des informations qui ne sont pas pertinentes le reste du temps.Displaying info that's only relevant some of the time. Par exemple, dans une application de galerie de photos, quand l’utilisateur clique sur une vignette d’image, vous pouvez utiliser un menu volant pour afficher une version agrandie de l’image.For example, in a photo gallery app, when the user clicks an image thumbnail, you might use a flyout to display a large version of the image.
  • Affichage d’informations supplémentaires, comme des détails ou des descriptions plus longues sur un élément de la page.Displaying more information, such as details or longer descriptions of an item on the page.

Moyens d’éviter d’utiliser les boîtes de dialogue et menus volantsWays to avoid using dialogs and flyouts

Mesurez l’importance des informations à partager : sont-elles suffisamment importantes pour interrompre l’utilisateur ?Consider the importance of the information you want to share: is it important enough to interrupt the user? Évaluez également la fréquence à laquelle les informations doivent être affichées. Si vous affichez une boîte de dialogue ou une notification toutes les 5 minutes, vous pouvez peut-être plutôt leur allouer un emplacement dans l’interface utilisateur principale.Also consider how frequently the information needs to be shown; if you're showing a dialog or notification every few minutes, you might want to allocate space for this info in the primary UI instead. Par exemple, dans un client de chat, au lieu d’afficher un menu volant chaque fois qu’un ami se connecte, vous pouvez afficher la liste des amis en ligne sur le moment et mettre en évidence les amis quand ils se connectent.For example, in a chat client, rather than showing a flyout every time a friend logs in, you might display a list of friends who are online at the moment and highlight friends as they log on.

Les boîtes de dialogue sont fréquemment utilisées pour confirmer une action (par exemple, la suppression d’un fichier) avant de l’exécuter.Dialogs are frequently used to confirm an action (such as deleting a file) before executing it. Si vous voulez que l’utilisateur effectue souvent une action particulière, fournissez un moyen d’annuler l’action quand il fait une erreur plutôt que de forcer l’utilisateur à confirmer l’action chaque fois.If you expect the user to perform a particular action frequently, consider providing a way for the user to undo the action if it was a mistake, rather than forcing users to confirm the action every time.

Procédure pour créer une boîte de dialogueHow to create a dialog

Consultez l’article sur les boîtes de dialogue.See the Dialogs article.

Procédure pour créer un menu volantHow to create a flyout

Consultez l’article sur les menus volants.See the Flyout article.

ExemplesExamples

Galerie de contrôles XAMLXAML Controls Gallery
XAML controls gallery

Si vous disposez de l’application Galerie de contrôles XAML, cliquez ici pour ouvrir l’application et voir l’objet ContentDialog ou Flyout en action.If you have the XAML Controls Gallery app installed, click here to open the app and see the ContentDialog or Flyout in action.