Caixas de diálogo e janelas deslizantes

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

Diálogos

As caixas de diálogo são sobreposições modais da interface do usuário que fornecem informações contextuais do aplicativo. As caixas de diálogo bloqueiam as interações com a janela do aplicativo até serem explicitamente descartadas. Eles geralmente solicitam algum tipo de ação do usuário.

Flyouts

Um flyout é um pop-up contextual leve que exibe a interface do utilizador relacionada ao que o utilizador está a fazer. Ele inclui lógica de posicionamento e 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 flyout pode ser rapidamente descartado tocando ou clicando em algum lugar fora do flyout, pressionando a tecla Escape ou o botão Voltar, redimensionando a janela do aplicativo ou alterando a orientação do dispositivo.

Será este o controlo correto?

As caixas de diálogo e os 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 (bloqueadoras), interrompem os utilizadores, impedindo-os de fazer qualquer outra coisa até que interajam com o diálogo. Os submenus fornecem uma experiência menos chocante, mas exibir muitos submenus pode ser perturbador.

Depois de determinar que deseja usar uma caixa de diálogo ou menu deslizante, precisa escolher qual usar.

Dado 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 se concentrar em um pedaço específico de informação 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 prosseguir. 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 uma pergunta de bloqueio ao usuário, 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 painel deslizante para...

• Recolha de informações adicionais necessárias antes de uma ação poder ser concluída.
• Exibindo informações que só são relevantes 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.
• Exibição de 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 da informação que pretende partilhar: é suficientemente importante interromper o utilizador? Considere também a frequência com que as informações precisam ser mostradas; se você estiver mostrando uma caixa de diálogo ou notificação a cada poucos minutos, convém alocar espaço para essas informações na interface do usuário principal. Por exemplo, num cliente de chat, em vez de mostrar uma notificação toda vez que um amigo inicia sessão, pode exibir uma lista de amigos que estão online no momento e destacar amigos quando iniciam sessão.

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 determinada ação com frequência, considere fornecer uma maneira para o usuário desfazer a ação se foi um erro, em vez de forçar os usuários a confirmar a ação sempre.

Examples

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

Como criar uma caixa de diálogo

Consulte o artigo Diálogos.

Como criar um menu flutuante

Consulte o artigo Flyout.