Modais (modals)

Janela em overlay que aparece sobre o conteúdo e pede interação antes de voltar ao fluxo.

Hard

O que é

Modal é o elemento de interface que aparece como overlay sobre o conteúdo existente e exige interação antes de a pessoa voltar ao fluxo principal. Os usos comuns são login, confirmação, formulário e alerta crítico de sistema.

O modal é forte porque reduz distração e cria um ambiente focado pra uma ação que precisa de atenção. Uma confirmação de excluir, por exemplo, evita que a pessoa apague algo importante sem checar antes.

Mas, por natureza, o modal interrompe, então, usado demais ou na hora errada, como aquele pop-up de assinatura no meio da navegação, ele irrita e afasta, o que pede contenção. E pede acessibilidade também, com foco preso dentro do modal, navegação por teclado e saída clara, porque senão o leitor de tela deixa a pessoa perdida.

Em uma frase

Excluir conta merece um modal de confirmação, mas a oferta no meio da navegação não, isso só irrita.

A pergunta que ele responde

Quando vale parar a pessoa com uma janela e quando basta só avisar?

Quando usar

Use em momento que pede input ou confirmação explícita antes de a pessoa continuar.

Como não usar

O cuidado é não disparar modal de oferta no meio da navegação, nem empilhar pop-up sobre pop-up, porque isso destrói a experiência.

Na prática

Pense em alguém clicando em excluir conta. Abre um modal de confirmação que prende o foco naquela decisão, justamente pra evitar o apagar sem querer.

Não confunda com

Vale separar modal de notificação. O modal bloqueia e exige uma ação antes de seguir, então ele para a pessoa, enquanto a notificação avisa sem travar o fluxo, então ela apenas sinaliza. Um interrompe pra pedir decisão, o outro informa de leve.

D

Em inglês

Modals

Pronúncia

mó-dau

Também chamado de

modal, dialog, janela sobreposta

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre modais, overlays e quando interromper o usuário