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 ser exibido em todos os dispositivos, a Klaviyo otimiza automaticamente alguns elementos, como tamanhos de fonte e imagens, para melhorar sua aparência para compradores em dispositivos móveis; no entanto, este guia abordará outras práticas recomendadas para ter em mente. Use o seletor de visualização no canto superior direito do construtor de formulários para alternar entre as visualizações para desktop e dispositivos móveis enquanto cria seu formulário. O ícone de desktop mostrará como o formulário aparece para compradores no desktop, enquanto o ícone de celular mostra o que os compradores no celular veem.

Este guia abordará as práticas recomendadas para criar formulários pop-up e flyout que aparecem em dispositivos móveis. Eles são úteis independentemente de seu formulário aparecer em todos os dispositivos ou apenas em dispositivos móveis. Para uma visão geral mais detalhada sobre formulário de registro especificamente em dispositivos móveis, acesse básico: 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 SMS, colete e-mail na primeira etapa e, em seguida, SMS na segunda etapa com Smart Opt-in, para que visitantes em dispositivos móveis possam inscrever-se pelo método mais fácil.
• 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 dá aos compradores a capacidade de fechar e reabrir o formulário quando quiserem.
• Se o seu formulário estiver configurado para ser exibido em todos os dispositivos (ou seja, compradores no desktop e no celular vão ver) e incluir uma imagem lateral, deixe a imagem lateral para aparecer apenas em dispositivos móveis.
  

• 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:

• Na aba Segmentação e comportamentos, defina o tempo do seu formulário como Com base em regras e, em seguida, defina um atraso maior (por exemplo, quando um visitante estiver saindo da página).
• Adicione um teaser que exiba Antes de exibir o formulário.

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.
   • Role até Dispositivos.
   • Em Clique fora do formulário para fechar, desative a opção Celular.
     

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.
   • Navegue até a aba Estilos.
   • Na seção Plano de Fundo do Formulário, defina a Cor da Sobreposição para usar uma sobreposição semitransparente para chamar a atenção para seu formulário e escurecer o conteúdo do seu site enquanto o formulário estiver aberto.
   • Configure uma Sombra projetada para adicionar 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. Na guia Estilos, role para baixo até Estilos do formulário.
   2. Aumente a margem esquerda/direita de acordo com a aparência na pré-visualização.

Otimizar flyouts

Quando um flyout aparece, os visitantes em dispositivos móveis ainda conseguem interagir com o seu site por trás do formulário, a menos que Mobile Overlay esteja ativado. Eles podem optar por 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.
   • Navegue até a seção Estilos.
   • Selecione Posição do flyout para dispositivos móveis e escolha Ancorar na parte inferior ou Ancorar na parte superior.
     Quando essa configuração estiver selecionada, o formulário vai aparecer como flyout a partir da parte superior ou inferior da tela e cobrir uma parte da tela, de uma borda a outra.
     

2. Separe visualmente seu formulário flyout do restante do seu site usando sobreposição para dispositivos móveis, uma sombra projetada ou ambos.
   • Navegue até a aba Estilos.
   • Role até as configurações de Plano de fundo do formulário.
   • Ative a Sobreposição para dispositivos móveis para que os compradores em dispositivos móveis não possam clicar em nenhum outro elemento do seu site até preencherem ou fecharem o formulário. Observe que a Sobreposição para dispositivos móveis não aparecerá quando o formulário flyout for visualizado em um desktop.
   • Ative Drop Shadow 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 para celular e desktop do seu formulário.
     

Próximas etapas

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 usar formulários pop-up para coletar o consentimento para SMS