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

O que você vai aprender

Saiba como projetar seus formulários de inscrição para celular com as práticas recomendadas da Klaviyo em mente para garantir que seus formulários pop-up e flyout sejam otimizados para visitantes móveis. 

Os compradores on-line estão usando cada vez mais seus dispositivos móveis para descobrir novas lojas, pesquisar produtos e fazer compras, portanto, é mais importante do que nunca garantir que seu site tenha uma aparência tão boa em dispositivos móveis quanto em desktops, e isso inclui seus formulários de inscrição. 

Antes de começar

No Klaviyo, o senhor pode criar formulários que são exibidos em todos os dispositivos (ou seja, são visíveis no desktop e em dispositivos móveis) ou pode criar formulários somente para dispositivos móveis, que são exibidos apenas em dispositivos móveis.

Se o seu formulário estiver configurado para ser exibido em todos os dispositivos, o Klaviyo otimizará automaticamente alguns elementos, como tamanhos de fonte e imagens, para melhorar a aparência para os compradores em dispositivos móveis; no entanto, este guia abordará as práticas recomendadas adicionais que devem ser lembradas. Use o seletor de visualização no canto superior direito do construtor de formulários para alternar entre as visualizações para desktop e celular à medida que o formulário é criado. O ícone para desktop mostrará a aparência do formulário para os compradores de desktop, enquanto o ícone para celular mostra o que os compradores de celular veem.

Este guia abordará as práticas recomendadas para a criação de formulários pop-up e flyout que aparecem em dispositivos móveis. Há ajuda, independentemente de seu formulário ser exibido em todos os dispositivos ou somente em dispositivos móveis. Para obter uma visão geral mais aprofundada sobre formulários de inscrição especificamente em dispositivos móveis, consulte Noções básicas: design de formulários móveis.

Práticas recomendadas para formulários gerais

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

• Mantenha-o curto e agradável: considere um formulário de várias etapas se o senhor tiver muitos campos.
  • Se o seu formulário coletar consentimento por SMS, colete o e-mail na primeira etapa, seguido pelo SMS na segunda etapa com o Smart Opt-in para que os visitantes em dispositivos móveis possam se inscrever pelo método mais fácil.
• Certifique-se de que seja fácil de fechar, para que os visitantes não fiquem frustrados e saiam do site. 
  • O uso de um teaser de formulário oferece aos compradores a possibilidade de fechar e reabrir o formulário conforme desejado.
• Se o formulário estiver configurado para ser exibido em todos os dispositivos (ou seja, os compradores de desktop e de celular o verão) e incluir uma imagem lateral, deixe a imagem lateral para ser exibida somente no celular. 
  
• Use rótulos concisos para cada um dos campos de entrada (por exemplo, endereço de e-mail, número de telefone etc.) que caibam em uma única linha para que os compradores possam ver facilmente quais informações o senhor está solicitando.

SEO e formulários móveis 

É importante considerar as práticas recomendadas de SEO para dispositivos móveis, principalmente ao criar formulários em sua página inicial ou em outras páginas de destino. Os formulários que aparecem em páginas de destino comuns de pesquisa orgânica não devem cobrir o conteúdo do seu site nem atrapalhar a experiência do visitante; caso contrário, a página poderá ser penalizada pelos algoritmos de pesquisa. Saiba mais sobre intersticiais intrusivos e SEO.

Para evitar isso:

• Na guia Targeting and behaviors (Direcionamento e comportamentos ), defina o tempo do formulário como Based on rules (Baseado em regras) e, em seguida, defina um atraso maior (por exemplo, quando um visitante estiver saindo da página).
• Adicione um teaser que é exibido antes de exibir o formulário.

Otimização de popups

Um formulário pop-up aparece no meio da tela do comprador, geralmente cobrindo grande parte da página e impedindo a capacidade de interagir com outros elementos da página enquanto o formulário está aberto. Isso torna os pop-ups mais perturbadores, mas também com maior conversão. 

Para otimizar o funcionamento dos popups em dispositivos móveis:

1. Desabilite o fechamento do formulário quando um comprador móvel clicar fora da área do formulário para diminuir o fechamento acidental do formulário.
   • Navegue até Targeting and Behaviors.
   • Role para baixo até Devices (Dispositivos).
   • Em Clique fora do formulário para fechar, desative a opção Mobile.
     
2. Certifique-se de que o ícone de fechamento do 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 fechamento na visualização do formulário para ajustar seu tamanho.
   • Teste a aparência do formulário em 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 fechamento no formulário à direita é maior e fácil de encontrar. 
     
3. Separe visualmente o pop-up do restante do site, usando uma cor de sobreposição, uma sombra projetada ou ambos.
   • Navegue até a guia Styles (Estilos ).
   • Na seção Form Background (Plano de fundo do formulário ), defina a Overlay Color (Cor de sobreposição ) para usar uma sobreposição semi-opaca para atrair o foco para o formulário e escurecer o conteúdo do site enquanto o formulário estiver aberto.
   • Configure um Drop Shadow para fornecer um sombreamento sutil ao redor do formulário, separando-o do conteúdo ao redor.
4. Ajuste as margens do seu formulário para que ele se pareça mais com um formulário pop-up em dispositivos móveis e não fique de ponta a ponta.
   
   1. Na guia Styles (Estilos ), role para baixo até Form Styles (Estilos de formulário).
   2. Aumente a margem esquerda/direita com base na aparência da visualização.

Otimização de flyouts 

Quando um formulário flyout é exibido, os visitantes móveis ainda podem interagir com seu site por trás do formulário, a menos que a Sobreposição móvel esteja ativada. O usuário pode optar por fechar o formulário, preenchê-lo ou deixá-lo aberto enquanto continua a navegar. Em geral, isso torna os flyouts menos intrusivos do que os popups. 

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

1. Defina o formulário para sair da parte superior ou inferior da tela.
   • Navegue até a seção Styles (Estilos).
   • Selecione Mobile Flyout Position e, em seguida, escolha Dock to Bot tom ou Dock to Top.
     Quando essa configuração for selecionada, o formulário sairá da parte superior ou inferior da tela e cobrirá uma parte da tela de ponta a ponta.
     
2. Separe visualmente o formulário flyout do restante do site usando uma sobreposição móvel, uma sombra projetada ou ambos.
   • Navegue até a guia Styles (Estilos ).
   • Role até as configurações de Form Background (Plano de fundo do formulário ).
   • Ative a Sobreposição móvel para que os compradores móveis não possam clicar em nenhum outro elemento do seu site até que preencham ou fechem o formulário. Observe que a sobreposição móvel não aparecerá quando o formulário flyout for visualizado em um desktop.
   • Ative o Drop Shadow para fornecer um sombreamento sutil ao redor do formulário, separando-o do conteúdo ao redor. Observe que as configurações de sombra projetada afetam tanto a versão móvel quanto a versão desktop do formulário.
     

Próximas etapas

Depois de otimizar os formulários para dispositivos móveis, experimente fazer testes A/B nos designs dos formulários para entender melhor as preferências dos visitantes do site. 

Recursos adicionais 

• Introdução aos formulários de inscrição
• Compreensão das configurações de dispensa de formulários 
• Noções básicas: design de formulários para dispositivos móveis
• Como usar formulários pop-up para coletar consentimento de SMS