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 interface do usuário modais que fornecem informações contextuais do aplicativo. As caixas de diálogo bloqueiam interações com a janela do aplicativo até serem explicitamente ignoradas. Elas muitas vezes solicitam algum tipo de ação do usuário.

Submenus

Um submenu é um pop-up contextual leve que exibe a interface do usuário 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 rapidamente ignorado tocando ou clicando em algum lugar fora do submenu, pressionando a tecla Escape ou o botão Voltar, redimensionando a janela do aplicativo ou alterando 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 os diálogos são modais (bloqueio), eles interrompem os usuários, impedindo-os de fazer qualquer outra coisa até interagirem com a caixa de diálogo. Submenus fornecem uma experiência menos chocante, mas exibir muitos submenus pode distrair.

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

Considerando que as caixas de diálogo bloqueiam interações e 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 se concentrar em um bit específico de informações ou responder a uma pergunta. Os submenus, por outro lado, podem ser usados quando você quiser chamar a atenção para algo, mas tudo bem se o usuário quiser 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 precisa fazer ao usuário uma pergunta de bloqueio, como quando o aplicativo não pode 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 um submenu sempre que um amigo fizer logon, você pode exibir uma lista de amigos que estão online no momento e realçar amigos enquanto fazem logon.

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

Como criar uma caixa de diálogo

Consulte o artigo Caixas de Diálogo.

Como criar um submenu

Consulte o artigo sobre o Submenu.