No passado, os sites tinham muitos elementos desnecessários, ou seja, páginas cheias de esquemas de cores chamativos e feios, muito texto preso em pequenos espaços e pop-ups que pipocam e incomodam os visitantes.

Mas os designers não sabiam mais naquela época, ou melhor, eles estavam apenas trabalhando com as únicas tendências de design e melhores práticas que conheciam.

Os tempos mudaram muito desde então.

Os desenvolvedores e designers da Web não são mais limitados pela tecnologia ou técnica, o que significa que não há mais desculpas para um design ruim. Isso diz respeito a todos os elementos encontrados em um site WordPress, desde a imagem do cabeçalho da página inicial até formas contatos, bem como de tipografia a pop-ups. Tudo importa agora ao projetar para a experiência do usuário.

Hoje quero focar no que torna um pop-up eficaz, algo que vejo como uma parte essencial no processo de conversão. Especificamente, gostaria de dar uma olhada na anatomia de um pop-up WordPress eficaz e como esse elemento empolgante pode aumentar sua taxa de conversão.

O argumento para usar pop-ups no WordPress

Os pop-ups são um elemento de design interessante. Embora interrompam temporariamente a experiência do usuário (o que geralmente não é muito apreciado), aqueles que são feitos da maneira certa oferecem algo tão atraente ou emocionante que os visitantes não se importam em perder um minuto para prestar atenção.

Claro, neste caso estamos falando de pop-ups geradores de conversão que servem para coletar assinantes para o newsletter ou atrair visitantes para fazer compras. No entanto, os pop-ups podem ser usados ​​para várias finalidades. Por exemplo, você pode compartilhar seus cookies ou política de privacidade, recomendar itens relacionados depois que os visitantes adicionarem algo ao carrinho ou até mesmo pedir que respondam a uma pesquisa rápida.

Pop-up Anatomy - Pop-up of Target Recommendations

Na maioria das vezes, se você estiver usando uma janela pop-up, provavelmente deseja que os visitantes ajam. Afinal, por que interromper sua experiência se a perturbação não é um uso útil de seu tempo? De acordo com um estudo de quase dois bilhões de pop-ups, eles descobriram que a taxa de conversão média para esses tipos de pop-ups é de 3,09%.

Isso levanta a questão: os pop-ups ainda são relevantes e eficazes? Se o mercado está super saturado com pop-ups de saída, barras de saudação, sobreposições de página inteira e muito mais, vale a pena usar esta ferramenta de gerador de conversão em seu site WordPress?

Claro !!!

Existem muitas boas práticas de design de web que os pop-ups levam em consideração. Por exemplo:

  • Os pop-ups removem a desordem desnecessária das páginas do seu site.
  • Eles geralmente são compostos de recursos visuais limpos e texto mínimo.
  • Os apelos à ação são bem concebidos e apresentados de forma simples em termos de formulação.
  • Há uma pequena curva de aprendizado para seus visitantes, pois a maioria das pessoas está familiarizada com pop-ups e sabe como interagir com eles.
  • Os pop-ups oferecem uma oportunidade divertida de infundir animações, vídeos ou prova social em seu site.
  • Você pode facilmente criá-los com WordPress plugins alta qualidade como Hustle ou OptinMonster.

Pop-up de anatomia - prova social HubSpot

Em geral, um pop-up bem projetado é ideal para chamar a atenção dos visitantes quando você mais precisa. Você pode usá-los para enviar notificações ou solicitações oportunas. Você também pode usar os dados do visitante para induzi-los a fazer uma compra.

A anatomia de um pop-up WordPress eficaz

Obviamente, o sucesso dos pop-ups do seu site WordPress depende daqueles que são perfeitamente projetados e têm ofertas tão atraentes que os visitantes não podem deixar de interagir. Então, vamos dar uma olhada em como é uma fórmula vencedora para um pop-up eficaz.

1. estilo

Os diferentes tipos de pop-ups tendem a ser mais eficientes na conversão de visitantes em assinantes:

  • Os pop-ups de assinatura de e-mail têm uma taxa de conversão de 2,9%.
  • Os pop-ups de boas-vindas (aqueles que preenchem a página inteira após a entrada) convertem em 2,6%.
  • Os pop-ups acionados por rolagem convertem 1,9%.
  • Os pop-ups inteligentes ou Olá exibem uma conversão de 0,5%.

Isso não significa que você sempre terá que usar um pop-up de assinatura de e-mail tradicional. Aqui está um exemplo do site de Neil Patel.

Pop-up Anatomy - Neil Patel's Bar Olá

Este é bem feito, porque é simples, não intrusivo, et usa animação divertida para chamar a atenção, caso sua pegada mínima passe despercebida. Lembre-se de que escolher um estilo não é usar aquele que é mais popular ou mais conhecido para taxas de conversão mais altas. Trata-se de encontrar um estilo que funcione para seu site, seus visitantes, e que seja projetado para complementar a experiência intermediária.

2. cor

A cor, é claro, sempre desempenhará um papel importante no design do site. Ao compreender a psicologia por trás das cores escolhidas, você pode criar pop-ups mais eficazes que convertem. Claro, você também não pode esquecer o esquema de cores estabelecido para sua marca, então é tudo sobre como encontrar um equilíbrio entre criar uma janela pop-up que fique bem no site, mas que também obriga os visitantes a agir.

3. composição

É importante dar um passo para trás e ver o pop-up como um todo. Embora o design de cada parte móvel do pop-up seja importante, o mesmo acontece com a composição geral do pop-up.

Sua janela pop-up deve:

  • seja simples e fácil de seguir.
  • Projetado com linhas limpas e bem equilibrado.
  • Incluir imagens relevantes e de alta resolução; idealmente, uma única imagem que resuma o assunto da oferta.
  • Parecem ser uma extensão do seu site e obviamente não são feitos de um pop-up com opções de personalização limitadas.
  • Use uma tipografia grande e fácil de ler.

4. texto

Então temos a mensagem pop-up. Embora você não esteja desenvolvendo a linguagem para essas coisas, há uma série de práticas recomendadas que você ainda deve conhecer quando se trata de preencher pop-ups com texto.

Lembre-se do seguinte:

  • Sempre inclua um título, uma mensagem curta (uma frase basta) e uma frase de chamariz.
  • Use uma linguagem forte que apele às emoções dos visitantes.
  • Seja breve. Se você não conseguir escrever em menos de 30 palavras, essa mensagem não pertence a uma janela pop-up.
  • Use o mesmo tom e personalidade que você usa no seu site.
  • Ofereça algo valioso que seus visitantes não encontrarão em nenhum outro lugar do site.
  • Use urgência, se possível. Se você não consegue fazer isso com palavras, faça com cores.

Pop-up de anatomia - sobreposição de tela Wishpond

5. CTA

Atualmente, há uma tendência estranha de crescimento em que os sites oferecem aos visitantes duas opções de call to action. Eu entendo por que essa tendência está crescendo, mas tenho visto ela ser mal aplicada em tantos sites que espero que a tendência desapareça eventualmente.

Você provavelmente já viu esse aplicativo ruim:

  1. A opção positiva : Este diz: “Oh, obrigado, obrigado! Sei que esta oferta está prestes a mudar minha vida para melhor! " 
  2. A opção negativa : Este diz: "Gosto de fazer escolhas erradas na vida e agradeço por você esfregar meu rosto". Deixe-me clicar nesta opção de reprovação automática apenas para receber outra janela que me pergunta novamente se eu quero tomar essa decisão terrível. " 

Isso não quer dizer que todos os pop-ups com duas opções de CTA sejam mal projetados ou tenham a intenção de envergonhar o visitante. Tim Ferris tem um bom exemplo de um CTA de opção dupla bem feito:

Anatomia pop-up - Tim Ferris Positivo Negativo

No geral, entretanto, eu diria que se você está tentando ser sarcástico ou intimidar seus visitantes em sua decisão, saia do seu site e coloque-o no Twitter. Seu site não é um lugar para isso e o Twitter provavelmente irá engoli-lo completamente.

Além dessa implicância, também sugiro manter o apelo à ação simples. Use uma linguagem simples que deixe claro o que os visitantes receberão ao inserir seu e-mail ou clicar no botão. Além disso, reduza o trabalho ao mínimo: não mais do que dois campos para preencher (ou seja, e-mail e talvez um nome) e um botão para clicar.

É isso para este tutorial, espero que ele permita que você projete bem seus botões de call to action.