Boîtes de dialogue et menus volants

Les boîtes de dialogue et les menus volants sont des éléments d’interface utilisateur temporaires qui s’affichent lorsque quelque chose se produit qui nécessite une notification, une approbation ou des informations supplémentaires de l’utilisateur.

Dialogs

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’elle soit explicitement ignorée. Elles exigent souvent une forme d’action de la part de l’utilisateur.

Menu volant

Un menu volant est une fenêtre contextuelle légère qui affiche l’interface utilisateur liée à ce que fait l’utilisateur. Il inclut la logique de placement et de dimensionnement, et peut être utilisé pour révéler un contrôle secondaire ou afficher plus de détails sur un élément.

Contrairement à une boîte de dialogue, un menu volant peut être rapidement ignoré en appuyant ou en cliquant quelque part en dehors du menu volant, en appuyant sur la touche d’échappement ou le bouton Précédent, en redimensionnant la fenêtre de l’application ou en modifiant l’orientation de l’appareil.

Est-ce le contrôle approprié ?

Les boîtes de dialogue et les menus volants s’assurent que les utilisateurs sont conscients des informations importantes, mais ils interrompent également l’expérience utilisateur. Étant donné que les dialogues sont modals (bloquants), ils interrompent les utilisateurs, ce qui les empêche de faire autre chose jusqu’à ce qu’ils interagissent avec la boîte de dialogue. Les menus volants offrent une expérience moins jarring, mais l’affichage d’un trop grand nombre de menus volants peut être distrait.

Une fois que vous avez déterminé que vous souhaitez utiliser une boîte de dialogue ou un menu volant, vous devez choisir celui à utiliser.

Étant donné que les dialogues bloquent les interactions et les menu volants ne le font pas, les dialogues doivent être réservés aux situations où vous souhaitez que l’utilisateur supprime tout ce qui doit se concentrer sur un peu spécifique d’informations ou répondre à une question. Les menus volants, d’autre part, peuvent être utilisés lorsque vous souhaitez attirer l’attention sur quelque chose, mais il est ok si l’utilisateur souhaite l’ignorer.

Utilisez une boîte de dialogue pour...

• Exprimer des informations importantes que l’utilisateur doit lire et reconnaître avant de continuer. Les exemples incluent :
  • Lorsque la sécurité de l’utilisateur peut être compromise
  • Lorsque l’utilisateur est sur le point de modifier définitivement une ressource précieuse
  • Lorsque l’utilisateur est sur le point de supprimer une ressource précieuse
  • Pour confirmer un achat dans l’application
• Messages d’erreur qui s’appliquent au contexte d’application global, comme une erreur de connectivité.
• Questions, lorsque l’application doit poser à l’utilisateur une question bloquante, par exemple lorsque l’application ne peut pas choisir au nom de l’utilisateur. Une question bloquante ne peut pas être ignorée ou reportée et doit offrir les choix bien définis par l’utilisateur.

Utilisez un menu volant pour...

• Collecte d’informations supplémentaires nécessaires avant la fin d’une action.
• Affichage d’informations qui ne concernent que certaines heures. Par exemple, dans une application de galerie de photos, lorsque l’utilisateur clique sur une miniature d’image, vous pouvez utiliser un menu volant pour afficher une grande version de l’image.
• Affichage d’informations supplémentaires, telles que des détails ou des descriptions plus longues d’un élément sur la page.

Façons d’éviter d’utiliser des dialogues et des menus volants

Considérez l’importance des informations que vous souhaitez partager : est-il suffisamment important d’interrompre l’utilisateur ? Réfléchissez également à la fréquence à laquelle les informations doivent être affichées ; Si vous affichez une boîte de dialogue ou une notification toutes les quelques minutes, vous souhaiterez peut-être allouer de l’espace pour ces informations dans l’interface utilisateur principale à la place. Par exemple, dans un client de conversation, plutôt que d’afficher un menu volant chaque fois qu’un ami se connecte, vous pouvez afficher une liste d’amis qui sont en ligne à l’instant et mettre en surbrillance 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 attendez que l’utilisateur effectue fréquemment une action particulière, envisagez de fournir un moyen à l’utilisateur d’annuler l’action s’il s’agissait d’une erreur, plutôt que de forcer les utilisateurs à confirmer l’action à chaque fois.

Examples

• Si l’application Galerie WinUI 3 est installée, cliquez ici pour ouvrir l’application et voir ContentDialog ou Flyout en action. Obtenez l’application à partir du Microsoft Store ou obtenez le code source sur GitHub.

Guide pratique pour créer une boîte de dialogue

Consultez l’article Dialogues.

Comment créer un menu volant

Consultez l’article Volant.