Boîtes de dialogue et menus volants

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 la part de l’utilisateur.

Dialogues

Les boîtes de dialogue sont des superpositions d’interface utilisateur modales qui fournissent des informations contextuelles sur l’application. Les boîtes de dialogue bloquent les interactions avec la fenêtre de l’application jusqu’à ce qu’elles soient masquées explicitement. Elles exigent souvent une forme d’action de la part de l’utilisateur.

Menus volants

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

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.

Est-ce le contrôle approprié ?

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. 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. Les menus volants sont moins dérangeants, mais si vous en affichez trop, vous perturbez également l’utilisateur.

Si vous êtes sûr de vouloir utiliser une boîte de dialogue ou un menu volant, il vous reste à choisir lequel utiliser.

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

Utilisez une boîte de dialogue pour...

• Afficher des informations importantes que l’utilisateur doit lire et accepter avant de poursuivre. Exemples :
  • Utilisez ce type de contrôle pour indiquer à l’utilisateur toute situation d’atteinte possible à la sécurité.
  • 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
  • Utilisez ce type de contrôle pour signaler à l’utilisateur qu’il s’apprête à supprimer un élément utile
  • Pour confirmer un achat dans l’application
• Les messages d’erreur qui s’appliquent au contexte global de l’application, liés par exemple à une erreur de connectivité.
• 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. Une question bloquante ne peut pas être ignorée ni reportée, et doit offrir à l’utilisateur des options clairement définies.

Utilisez un menu volant pour...

• Collecter des informations supplémentaires nécessaires pour pouvoir effectuer une action.
• Afficher des informations qui ne sont pas pertinentes le reste du temps. 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.
• Affichage d’informations supplémentaires, comme des détails ou des descriptions plus longues sur un élément de la page.

Moyens d’éviter d’utiliser les boîtes de dialogue et menus volants

Mesurez l’importance des informations à partager : sont-elles suffisamment importantes pour interrompre l’utilisateur ? É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. Par exemple, dans un client de conversation instantanée, 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.

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. Si vous voulez que l’utilisateur effectue souvent une action particulière, donnez-lui la possibilité d’annuler l’action quand il fait une erreur plutôt que de le forcer à confirmer l’action chaque fois.

Examples

• API importantes : Classe ContentDialog, Classe Flyout

• Si vous avez l’application WinUI 3 Gallery, cliquez ici pour ouvrir l’application et voir l’objet ContentDialog ou Flyout en action. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Procédure pour créer une boîte de dialogue

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

Procédure pour créer un menu volant

Consultez l’article sur les menus volants.