Como otimizar formulários pop-up e flyout para dispositivos móveis

O que você vai aprender

Saiba como criar seus formulários de registro para dispositivos móveis seguindo as melhores práticas da Klaviyo, para garantir que seus formulários de popup e flyout estejam otimizados para visitantes em dispositivos móveis.

Os compradores online estão usando cada vez mais seus dispositivos móveis para descobrir novas lojas, navegar por produtos e fazer compras, então é mais importante do que nunca garantir que seu site fique tão bom no celular quanto no desktop — e isso inclui seus formulário de registro.

Antes de começar

No Klaviyo, você pode criar formulários que aparecem em todos os dispositivos (ou seja, ficam visíveis em desktop e dispositivos móveis) ou pode criar formulários apenas para dispositivos móveis, que só aparecem em dispositivos móveis.

Se o seu formulário estiver configurado para aparecer em todos os dispositivos, a Klaviyo otimiza automaticamente alguns elementos, como tamanhos de fonte e imagens, para melhorar a aparência para quem compra em dispositivos móveis. Este guia abordará outras boas práticas para você ter em mente. Use o seletor de visualização no canto superior direito do criador de formulários para alternar entre as visualizações de desktop e dispositivos móveis enquanto você cria seu formulário. O ícone de desktop mostra como o formulário aparece para quem compra no desktop, enquanto o ícone de dispositivos móveis mostra o que quem compra em dispositivos móveis vê.

Este guia vai abordar as melhores práticas para criar formulários de popup e flyout que aparecem em dispositivos móveis. Elas são úteis, independentemente de o seu formulário aparecer em todos os dispositivos ou apenas no celular. Para uma visão geral mais detalhada sobre formulários de registro especificamente em dispositivos móveis, acesse conceitos básicos: design de formulários para dispositivos móveis.

Práticas recomendadas gerais para formulários

Muitas das melhores práticas para formulários em desktop também se aplicam a dispositivos móveis:

• Mantenha tudo curto e direto: considere um formulário em várias etapas se você tiver muitos campos.
  • Se o seu formulário coleta consentimento de e-mail e SMS, colete o e-mail na primeira etapa e, em seguida, o SMS na segunda etapa. Use Smart Opt-in para facilitar a experiência de opt-in pelo celular. O Smart Opt-in exige que o SMS esteja ativado na sua conta e que você tenha um plano de SMS pago; consulte o guia no link para ver os requisitos de configuração.
• Garanta que seja fácil de fechar, para que os visitantes não fiquem frustrados e saiam do seu site.
  • Usar um teaser de formulário permite que os compradores reabram um formulário que fecharam. Defina o teaser como Mostrar depois que o formulário for fechado ou Mostrar antes de exibir o formulário e depois que o formulário for fechado.
• Se o seu formulário estiver configurado para ser exibido em todos os dispositivos (ou seja, clientes no desktop e no celular vão vê-lo) e incluir uma imagem lateral, mantenha a imagem definida como Desktop em Editar estilos > Imagem lateral. Isso oculta a imagem lateral em dispositivos móveis, deixando mais espaço para o conteúdo do seu formulário.
  

• Use rótulos concisos para cada um dos seus campos de dados (por exemplo, endereço de e-mail, número de telefone etc.) que caibam em uma única linha para que os compradores vejam facilmente quais informações você está solicitando.

SEO e formulários para dispositivos móveis

É importante considerar as melhores práticas de SEO para dispositivos móveis, principalmente ao criar formulários na sua página inicial ou em outras landing pages. Formulários que aparecem em landing pages comuns de pesquisa orgânica não devem encobrir o conteúdo do seu site nem atrapalhar a experiência de um visitante; caso contrário, a página pode ser penalizada por algoritmos de busca. Saiba mais sobre intersticiais intrusivos e SEO.

Para evitar isso:

• Abra Segmentação & comportamento > Exibição. Em Temporização, defina Exibir formulário como Com base em regras, ative Após atraso de tempo e insira o atraso em segundos. Se você ativar outras regras de temporização, ative Exibir somente se todas as condições selecionadas forem atendidas para que outra regra de temporização não exiba o formulário antes que o atraso termine.
• Adicione um teaser e defina a opção de exibição como Mostrar antes de exibir o formulário e depois que o formulário for fechado.

Otimizando pop-ups

Um formulário pop-up aparece no meio da tela de um comprador, muitas vezes cobrindo grande parte da página e dificultando a capacidade dele de interagir com outros elementos da página enquanto o formulário está aberto. Isso faz com que os pop-ups sejam mais disruptivos, mas também gerem mais conversões.

Para otimizar o funcionamento dos pop-ups em dispositivos móveis:

1. Desative o fechamento do formulário quando um comprador em um dispositivo móvel clicar fora da área do formulário, para reduzir fechamentos acidentais do formulário.
   • Acesse Segmentação e comportamento > Exibição.
   • Role a tela para baixo até Clique fora do formulário para fechar.
   • Desmarque No celular para evitar que toques fora do pop-up o fechem.
     

2. Garanta que o ícone de fechar do seu formulário (o botão X) seja grande o suficiente, mesmo em uma tela pequena, como a de um dispositivo móvel.
   • Clique no ícone de fechar na prévia do formulário para ajustar o tamanho dela.
   • Teste como o formulário aparece no seu próprio dispositivo móvel para garantir que ele seja fácil de encontrar e clicar.
     Por exemplo, o ícone de fechar no formulário à esquerda pode ser difícil de clicar em um dispositivo móvel. No entanto, o ícone de fechar no formulário à direita é maior e fácil de encontrar.
     

3. Separe visualmente seu popup do restante do site usando uma cor de sobreposição, uma sombra projetada ou ambos.
   • Selecione Editar estilos para abrir o painel Estilos.
   • Na seção Cor de sobreposição, escolha uma cor semitransparente para destacar seu formulário e escurecer o conteúdo do seu site enquanto o formulário estiver aberto.
   • Configure uma Sombra projetada para fornecer um sombreamento sutil ao redor do seu formulário e separá-lo do conteúdo ao redor.
4. Ajuste as margens do seu formulário para que ele pareça mais um formulário pop-up em dispositivos móveis e não fique de ponta a ponta.
   
   1. Selecione Editar estilos e role para baixo até Margem.
   2. Aumente as margens horizontais com base em como o formulário aparece na visualização para dispositivos móveis.

Otimizar flyouts

Quando um formulário flyout aparece, os visitantes em dispositivos móveis ainda conseguem interagir com o site por trás do formulário, a menos que a Sobreposição para dispositivos móveis esteja ativada. As pessoas podem escolher fechar o formulário, preenchê-lo ou deixá-lo aberto enquanto continuam navegando. Em geral, isso torna os flyouts menos intrusivos do que os pop-ups.

Para otimizar seu formulário flyout para um dispositivo móvel:

1. Configure seu formulário para sair na parte superior ou inferior da tela.
   • Selecione Editar estilos para abrir o painel Estilos.
   • Selecione Posição do flyout em dispositivos móveis e escolha Ancorar na parte inferior ou Ancorar na parte superior.
     Em dispositivos móveis na orientação retrato, seu formulário será exibido como flyout a partir da parte superior ou inferior da tela e cobrirá uma parte da tela, de ponta a ponta. Na orientação paisagem, ele usa a posição padrão do flyout.
     

2. Separe visualmente seu formulário flyout do restante do seu site usando sobreposição para dispositivos móveis, uma sombra projetada ou ambos.
   • Selecione Editar estilos para abrir o painel Estilos.
   • Role a tela até as configurações de Sobreposição para dispositivo móvel e Sombra projetada.
   • Ative a sobreposição móvel para bloquear a interação com o restante do seu site enquanto o formulário flyout permanecer aberto. A sobreposição não aparece quando o formulário flyout é visualizado em um desktop.
   • Ative Sombra projetada para adicionar um sombreamento sutil ao redor do seu formulário e separá-lo do conteúdo ao redor. Observe que as configurações de Sombra projetada afetam as versões móvel e para desktop do seu formulário.
     

Próximas etapas

Quando estiver tudo pronto para publicar suas alterações:

1. Clique em Publicar ou agendar no editor de formulários.
2. Resolva todos os alertas que estão bloqueando. Se aparecerem opções de agendamento, selecione Publicar agora. Clique em Publicar agora para publicar suas alterações.

Confira o formulário publicado no seu dispositivo móvel e verifique se você atende às condições de segmentação e exibição.

Depois de otimizar seus formulários para dispositivos móveis, teste Testes A/B dos designs dos seus formulários para entender melhor as preferências dos visitantes do seu site.

Recursos adicionais

• Introdução aos formulários de registro
• Entenda as configurações de fechamento do formulário
• Noções básicas: design de formulários para celular
• Como coletar consentimento por SMS com um formulário tap-to-text