Precisa ser modal?

A gente usa modal demais.

Vamos parar com isso.

Socorro
A má notícia

Modal é a muleta de designers e devs que não sabem se expressar.

Existem usos bons e legítimos, mas muitos modais…

  • interrompem, invadem e confundem
  • viram a gaveta de tralhas da interação
  • são usados demais :)
  • são difíceis de fechar
  • têm acessibilidade ruim
  • frustram quem usa tela pequena
  • bloqueiam a interação com a “janela-mãe”
  • aumentam a carga cognitiva com conteúdo ou interação dispensável
  • podem ser trocados facilmente por padrões menos bruscos
A boa notícia

Não precisa ser modal!

Já pensou em usar uma destas opções?

  • Dialogs não modais

    Use para interações não críticas, que não bloqueiam a pessoa (como os toasts).

  • Direto na página

    Apresente o conteúdo inline, no fluxo da página, para interromper menos.

  • Elementos expansíveis

    Use elementos que se expandem, como acordeões, barras de ferramentas, tooltips ou painéis laterais deslizantes (ou outros elementos não modais).

  • Página nova

    Leve a pessoa para outra página e isole a interação sem tirar dela o acesso a recursos como a navegação.

  • Padrões de desfazer

    No lugar de um modal de confirmação, por exemplo, ofereça a opção “Desfazer” inline e agilize a interação.

Quando nada mais funcionar

Modal do jeito certo

Se não tiver mesmo outro jeito, garanta que o seu modal seja dos bons!

  • Faça: Fácil de fechar

    Facilite a saída: tecla Esc, clique fora da janela do modal e um botão de fechar bem identificado.

  • Faça: Um propósito só

    Limite a interação a uma tarefa simples e direta.

  • Faça: Curto

    Seja breve e conciso no conteúdo.

  • Faça: Acessível acessível acessível

    Esse se explica sozinho: se não dá para deixar acessível, não use modal.

  • Não faça: Modal dentro de modal

    Evite abrir um modal a partir de outro modal.

  • Não faça: Modal em tela cheia

    Aí é melhor navegar para uma página nova.

  • Não faça: Modal com várias etapas

    Nunca crie um modal com várias etapas. Esse caminho leva à loucura.

  • Não faça: Modal que aparece sozinho

    Nunca mostre um modal que a pessoa não pediu.

  • Não faça: Modal de marketing

    Sério, ninguém quer essa porcaria, muito menos a sua newsletter.

Na hora de fazer, use o HTML nativo: veja como usar e estilizar o elemento dialog.

E nunca se esqueçam de perguntar, crianças:

“Por que isso precisa ser um modal?”