Caixas de diálogo e submenus

Caixas de diálogo e submenus são elementos transitórios da interface do usuário que aparecem quando ocorre algo que exige notificação, aprovação ou informações adicionais do usuário.

Dialogs

As caixas de diálogo são sobreposições de UI modais que fornecem informações contextuais da aplicação. As caixas de diálogo bloqueiam interações com a janela do aplicativo até que sejam explicitamente ignoradas. Elas muitas vezes solicitam algum tipo de ação do usuário.

Submenus

Um flyout é um pop-up contextual leve que exibe a UI relacionada ao que o usuário está fazendo. Ele inclui o posicionamento e a lógica de dimensionamento e pode ser usado para revelar um controle secundário ou mostrar mais detalhes sobre um item.

Ao contrário de uma caixa de diálogo, um submenu pode ser ignorado rapidamente tocando ou clicando em algum lugar fora do submenu, pressionando a tecla Escape ou botão Back, redimensionando a janela do aplicativo ou mudando a orientação do dispositivo.

Esse é o controle correto?

Caixas de diálogo e submenus garantem que os usuários estejam cientes de informações importantes, mas também interrompem a experiência do usuário. Como as caixas de diálogo são modais (bloqueantes), elas interrompem os usuários, impedindo que façam qualquer outra coisa até interagirem com a caixa de diálogo. Submenus fornecem uma experiência menos desagradável, mas exibir muitos submenus pode ser uma decisão traiçoeira.

Depois de determinar que deseja usar uma caixa de diálogo ou flyout, você precisará escolher qual delas usar.

Considerando que as caixas de diálogo bloqueiam interações e os submenus não, as caixas de diálogo devem ser reservadas para situações em que você deseja que o usuário solte tudo para focar em uma informação específica ou responder a uma pergunta. Submenus, por outro lado, podem ser usados quando você deseja chamar a atenção para algo, mas terá problemas se o usuário desejar ignorá-lo.

Use uma caixa de diálogo para...

• Expressando informações importantes que o usuário deve ler e reconhecer antes de continuar. Os exemplos incluem:
  • Quando a segurança do usuário pode ser comprometida
  • Quando o usuário está prestes a alterar permanentemente um ativo valioso
  • Quando o usuário está prestes a excluir um ativo valioso
  • Para confirmar uma compra no aplicativo
• Mensagens de erro que se aplicam ao contexto geral do aplicativo, como um erro de conectividade.
• Perguntas, quando o aplicativo precisar fazer uma pergunta de bloqueio ao usuário, por exemplo, quando o aplicativo não puder escolher em nome do usuário. Uma pergunta de bloqueio não pode ser ignorada ou adiada e deve oferecer ao usuário opções bem definidas.

Use um submenu para...

• Coletar informações adicionais necessárias antes que uma ação possa ser concluída.
• Exibindo informações relevantes apenas algumas vezes. Por exemplo, em um aplicativo de galeria de fotos, quando o usuário clica em uma miniatura de imagem, você pode usar um submenu para exibir uma versão grande da imagem.
• Exibindo mais informações, como detalhes ou descrições mais longas de um item na página.

Maneiras de evitar o uso de caixas de diálogo e submenus

Considere a importância das informações que você deseja compartilhar: é importante o suficiente para interromper o usuário? Considere também a frequência com que as informações precisam ser mostradas; se você estiver mostrando uma caixa de diálogo ou uma notificação a cada poucos minutos, convém alocar espaço para essas informações na interface do usuário primária. Por exemplo, em um cliente de chat, em vez de mostrar uma notificação sempre que um amigo entrar, você pode exibir uma lista de amigos que estão online no momento e destacar amigos à medida que entram.

As caixas de diálogo são frequentemente usadas para confirmar uma ação (como excluir um arquivo) antes de executá-la. Se você espera que o usuário execute uma ação específica com frequência, considere fornecer uma maneira para o usuário desfazer a ação se for um erro, em vez de forçar os usuários a confirmar a ação todas as vezes.

Exemplos

• Se você tiver o aplicativo Da Galeria do WinUI 3 instalado, clique aqui para abrir o aplicativo e ver o ContentDialog ou o Flyout em ação. Obtenha o aplicativo na Microsoft Store ou obtenha o código-fonte em GitHub.

Como criar uma caixa de diálogo

Consulte o artigo de Diálogos.

Como criar um submenu

Consulte o artigo sobre Flyout.