Contexto
Uma modal cobre a página atual e impede a interação com o conteúdo ao fundo. Essa interrupção pode ajudar em decisões importantes, mas também pode fazer a pessoa perder contexto e dificultar a navegação.
Use uma modal quando a pessoa precisar tomar uma decisão breve, confirmar uma ação importante ou concluir uma tarefa curta sem sair da tela atual.
Escreva um título claro, explique o que está acontecendo e use botões com ações específicas, como “Excluir” e “Manter”. Antes de usar uma modal, verifique se uma página, mensagem contextual ou painel lateral resolveria o problema com menos interrupção.
Porque isso importa?
Modais interrompem o fluxo e bloqueiam o conteúdo da página. O uso excessivo aumenta a carga cognitiva e pode dificultar a compreensão, especialmente em telas pequenas, com teclado e com tecnologias assistivas.
Quando usada, a modal precisa controlar corretamente o foco, impedir interações acidentais com o conteúdo ao fundo e permitir um fechamento previsível.
Quando usar?
- Confirmação de uma ação importante.
- Decisão difícil de desfazer.
- Mensagem crítica que exige reconhecimento.
- Tarefa curta sem perda de contexto.
- Informação complementar e pontual.
- Escolha que bloqueia o próximo passo.
Quando evitar?
- Formulários longos ou complexos.
- Fluxos com várias etapas.
- Mensagens comuns de erro ou sucesso.
- Conteúdo principal da página.
- Links externos que não exigem confirmação.
- Interrupções automáticas e frequentes.
Recomendações
Faça
- Use modais com moderação.
- Abra após uma ação clara.
- Escreva um título específico.
- Use botões com ações explícitas.
- Mantenha o conteúdo curto.
- Ofereça uma saída clara.
Evite
- Não abra sem contexto.
- Não use “Sim” e “Não” isolados.
- Não coloque páginas inteiras em modais.
- Não esconda o botão de fechar.
- Não use modal para toda mensagem.
- Não bloqueie o usuário sem explicar.
