Modals: Por que seu popup está matando conversão e como usá-los certo

Você lançou sua landing page. Um modal aparece no segundo que um visitante chega , "inscreva-se!" , cobrindo o hero. Eles fecham, scrollam e saem. Modal foi disparado, conversão não.

Modals são poderosos e usados demais. Feito certo, seguram a atenção do visitante em uma decisão e previnem erros custosos. Feito errado, parecem uma situação de refém. Este guia cobre como usá-los para ajudar em vez de prejudicar.

O que um modal realmente é

Um modal é uma janela que abre em cima da página. O background fica opaco, o resto da página fica inativo, e visitantes têm que interagir com o modal , completar uma tarefa ou fechá-lo , antes de voltar.

Modals são interrupções por design. É o ponto todo: foco total em uma coisa. Mas interrupções custam confiança se você as gasta em momentos errados.

"Design deveria servir para aproximar pessoas do que realmente importa para elas." , Don Norman

O princípio por trás de um modal é foco forçado. Deixe o background opaco, mate o ruído, deixe o visitante com uma decisão clara.

Por que modals importam (quando usados certo)

Parar um visitante no meio do fluxo soa ruim. Mas no momento certo, é a diferença entre uma ação salva e uma perdida.

1. Prevenção de erro. Antes de deletar uma conta, confirmar um pagamento ou perder trabalho não salvo, um modal força uma escolha deliberada.
2. Tarefas focadas. Para configurações rápidas , convidar um colega, mudar uma configuração , um modal mantém o visitante na mesma página.
3. Anúncios de alto valor. Nova feature grande? Um modal pode garantir que visitantes a vejam.

Usado com moderação, modals aumentam conversão. Usado como uma arma popup, matam confiança.

Como usar modals bem

Quatro regras. Acerte estas e modals parecem uma ferramenta, não um imposto.

1. Um trabalho por modal

Modals são para alertas, seleções rápidas e confirmações. O copy deveria ser direto , o que está acontecendo, qual é a escolha, qual é a consequência. Sem fluff de marketing dentro de um modal de confirmação.

2. Sempre dê uma saída

Visitantes querem sua tarefa original de volta. Cada modal precisa:

• Um "X" visível ou ícone de fechar (canto superior direito).
• Um botão "Cancelar".
• Um background opaco clicável.
• Suporte de tecla ESC em desktop.

Se qualquer um destes está faltando, você está prendendo visitantes. Eles vão deixar o site inteiro.

3. Deixe opaco, mas não preto

O escurecimento do background sinaliza "página principal está em pausa." Mas mantenha algum contexto visível. Visitantes precisam lembrar onde estavam para o retorno se sentir natural.

4. Máximo dois botões

Um modal com cinco botões é um formulário, não um modal. Fique com:

• Uma ação: Reconhecimentos , "Entendi", "OK".
• Duas ações: Decisões , ação primária preenchida e em negrito, secundária discreta.

Jeitos comuns que builders quebram

Avalanches de popup

• O erro: Modal ao carregar, depois um modal de chat, depois um modal de desconto, depois um modal de exit-intent.
• O conserto: Um modal, ligado a uma ação específica do usuário , não um pageview.

Sem pensamento em mobile

• O erro: Um modal de 600px que transborda em mobile, com o botão de fechar fora da tela.
• O conserto: Use sheets em tela cheia em mobile, ou desenhe o modal para caber em um viewport de 320px.

Labels vagos

• O erro: Botões "Sim" e "Não" para uma pergunta que visitantes não leram.
• O conserto: Botões nomeados por ação. "Deletar projeto" e "Continuar editando" dizem aos visitantes o que cada clique faz sem re-ler o body.

Como produtos reais fazem

ClickUp

ClickUp usa um modal durante onboarding com uma imagem de incentivo de $10. É ousado mas ligado a uma ação real , completar vídeos de onboarding. Visitantes ganham algo por se engajar, não um sentimento de culpa por tentar sair.

Trello , anúncios de feature

Trello anuncia features novas com um botão: "Explorar". Copy limpo, sem bagunça, fácil fechar. Visitantes recebem a mensagem e voltam ao trabalho.

Princípios relacionados

Modals interagem com tudo em volta. Estes moldam como os seus caem:

Recursos e leitura adicional

Material Design Dialogs

Referência abrangente do Google para padrões de design de modal e dialog.

Perguntas frequentes