12 práticas recomendadas de design de pop-up que você precisa conhecer (para dispositivos móveis e desktops)

Apesar da crença popular, as pessoas hoje estão mais do que felizes em se envolver com pop-ups.

Concedido, se você estiver montando bons pop- ups.

E confie em nós - vimos em primeira mão como eles são eficazes para aumentar as conversões e aumentar sua lista de assinantes.

Mas as marcas precisam saber o que separa um pop-up estiloso e atraente de algo que vai incomodar os visitantes e afastá-los. É aí que podemos ajudar.

Neste guia, você aprenderá:

• Os fatores do que faz um “bom” desktop ou pop-up móvel (com treze exemplos)
• Três grandes erros que podem prejudicar o desempenho de um pop-up promissor
• Cinco exemplos de design pop-up de bônus para aumentar sua lista de e-mail

Com isso, vamos mergulhar!

Você gostaria de criar pop-ups eficazes que ressoem com seus visitantes? Baixe nossa lista de verificação de mensagens pop-up e 3X sua taxa de conversão de pop-ups!

Se seu objetivo é obter mais assinantes diretamente do seu site, um pop-up de e-mail pode fazer o truque.

Abaixo estão alguns princípios para aumentar as taxas de conversão de seus pop-ups no desktop. (Além disso, eles também trabalham com visitantes móveis.)

1. Chame a atenção de seus visitantes com combinações de cores de arregalar os olhos

Um esquema de cores cativante é a maneira mais fácil de tornar seus pop-ups imperdíveis.

Algo brilhante ou fora da parede pode parar os visitantes em suas trilhas. Por exemplo, este design pop-up de tela cheia do Visme.co é brilhante, em negrito e faz com que sua mensagem se destaque.

Suas cores pop -up não precisam necessariamente ser brilhantes ou mesmo “barulhentas”. Simplesmente um forte contraste de claro versus escuro pode ajudar seus pop-ups, bem, pop .

Por exemplo, este esquema de cores branco e preto da Thredup.com é simples, mas elegante e marcante.

2. Atraia visitantes colocando em negrito suas principais frases de benefício

Convenhamos: o tempo de atenção dos compradores está ficando cada vez mais curto.

Portanto, é melhor que suas mensagens de marketing sejam instantaneamente compreensíveis.

Faça questão de:

• Mantenha seus pop-ups breves: pense “menos é mais” e evite paredes de texto.
• Escreva títulos poderosos com frases contundentes como “grátis”, “agora” ou “salvar” para destacar imediatamente os benefícios de sua oferta.
• Separe seu texto pop-up em seções claras (pense: título → texto do corpo → botão Call-to-Action (CTA)) para orientar seus leitores a aceitarem.

Abaixo está um exemplo incrível de uma oferta da Trade Coffee que segue as práticas recomendadas de design pop-up mencionadas acima.

3. Apresente seus pop-ups como uma oferta personalizada (dica: não um anúncio)

Idealmente, seus pop-ups não devem parecer anúncios.

Nós entendemos: muitos consumidores não estão exatamente entusiasmados com pop-ups. Anos e anos de anúncios irritantes deixaram os pop-ups com má reputação.

O truque para difundir a tensão e construir confiança com os visitantes do seu site? Simplesmente apresente seus pop-ups como algo que existe para ajudar os clientes, não para vender para eles.

Considere ofertas que pedem a opinião e desejo de seus visitantes.

Os pop-ups baseados em preferências são ótimos para aumentar as conversões. Dado que 57% dos consumidores estão felizes em compartilhar informações pessoais em troca de ofertas personalizadas.

Por exemplo, este pop-up de inscrição de e-mail da Vuori permite que os opt-ins recebam e-mails personalizados com base nas preferências pessoais de identificação de gênero de um indivíduo.

Esse tipo de mensagem não apenas faz com que o assinante sinta que está fazendo um acordo, mas também significa que é mais provável que você envie ofertas relevantes no futuro.

Aqui está outro exemplo da Uniqlo. Observe como a mensagem se enquadra como uma ajuda (“ajude-nos a personalizar as mensagens para você”):

Mensagens personalizadas como essa funcionam como uma forma de incentivar os visitantes a passar mais tempo em seu site e interagir com sua marca. Isso é semelhante aos pop-ups gamificados .

Alguns segundos extras no site podem não parecer muito, mas representam um tempo valioso para construir uma conexão com novos leads.

4. Conecte-se a clientes em potencial por meio de uma cópia conversacional

Construir confiança é um fator decisivo para seus pop-ups.

É por isso que comunicar um tom amigável e positivo é tão importante em toda a sua cópia pop-up.

Os pop-ups de sites não devem ser abafados ou vendáveis ​​por padrão. Converse com seus clientes em potencial como um amigo em vez de um alvo de vendas.

Este pop-up do Quip é um ótimo exemplo do que estamos falando. Amigável e acolhedor, sem qualquer jargão ou “fala de negócios”.

5. Convide os visitantes a clicar sem interromper a experiência do usuário

Os pop-ups não precisam ser totalmente diretos para serem eficazes.

Na verdade, às vezes, a sutileza pode ajudar bastante na construção de sua lista.

Não procure mais do que a popularidade de sidemessages e barras adesivas como evidência.

Em vez de arriscar interromper seus visitantes enquanto eles navegam em seu site, esses formatos pop-up servem como um pequeno empurrão e convite para verificar sua oferta.

Confira o exemplo da Free People abaixo:

Os visitantes que optam por esses tipos de pop-ups o fazem sem pressão, o que significa que é mais provável que fiquem entusiasmados com o que você está oferecendo.

Além disso, esses pop-ups são menos propensos a interromper o fluxo ou a estética do seu site.

6. Certifique-se de que seu pop-up chegue às pessoas no momento certo

Essa é uma das práticas recomendadas de pop-up mais importantes quando se trata do que está acontecendo nos bastidores de suas ofertas.

Seus pop-ups não devem ser acionados aleatoriamente. Recomendamos aguardar alguns segundos (pelo menos cinco) antes de apresentar qualquer tipo de pop-up aos visitantes.

Você pode editar e personalizar facilmente os controles de tempo em pop-ups por meio do OptiMonk. A capacidade de alterar instantaneamente e testar o tempo de pop-up pode ajudá-lo a determinar o que funciona melhor para seus visitantes.

Os controles também facilitam o cumprimento das práticas recomendadas de pop-up de intenção de saída e impedem que seu tráfego perdido seja devolvido.

Um impressionante 63% do tráfego de comércio eletrônico vem de dispositivos móveis. Isso significa que você literalmente não pode ignorar assinantes vindos de smartphones.

Abaixo está um detalhamento das práticas recomendadas de pop-up para ajudá-lo a aumentar suas taxas de conversão em dispositivos móveis.

7. Incentive os visitantes a agir rapidamente, sendo breve com sua cópia

Ser econômico com suas palavras é uma aposta segura para pop-ups.

É especialmente importante quando você está tentando alcançar visitantes que usam telas menores.

Se você precisar incluir um aviso de isenção de responsabilidade, certifique-se de que ele não distraia a essência da sua mensagem. Portanto, não meça as palavras.

Por exemplo, este pop-up de assinatura de e-mail da Casetify vai direto ao ponto.

Confira o pop-up de Skullcandy abaixo. O slogan brilhante e ousado fala por si e não exige muitos esclarecimentos para os visitantes em cima do muro sobre a opção de participar.

8. Torne seus pop-ups o mais fáceis de tocar possível

O envolvimento com seu pop-up deve ser simples para usuários de dispositivos móveis.

Dito isso, você ficaria surpreso com a quantidade de pop-ups móveis que são um pesadelo para navegar.

Muitos lugares para tocar. Cores confusas. Rolagem desnecessária. A lista continua e continua.

Embora as ofertas móveis sejam geralmente minimalistas, você ainda precisa se atentar a algumas das melhores técnicas. Isso inclui:

• Botões definidos (para ativar e desativar , se necessário)
• Um título claro e uma cópia legível, idealmente cabendo em uma única página (sem necessidade de rolagem)
• Cores que separam os vários elementos do seu popup

Isso explica a popularidade dos pop-ups móveis em tela cheia que marcam as caixas acima.

Por exemplo, esta oferta da Skechers é clara e fácil de navegar, esteja alguém interessado ou não.

O mesmo para este pop-up móvel da Pura Vida:

9. Faça suas ofertas sem esforço e exija menos campos de formulário

Não é coincidência que todos os exemplos de pop-ups móveis ao longo deste post exigem apenas um endereço de e-mail para se inscrever.

Campos únicos significam menos esforço e menos distrações para os visitantes do seu site. Em última análise, isso torna o processo de adesão rápido e indolor.

Economizar alguns segundos preciosos com menos campos pode ser a diferença entre um novo assinante e um visitante rejeitado.

10. Escolha um CTA (frase de chamada para ação) poderoso que atraia seus visitantes

As frases de CTA são uma parte crucial da otimização de conversão.

Quanto mais atraente for o seu CTA, maior a probabilidade de você obter um opt-in.

O CTA do Nectar Sleep (“Economize $ 399”) promete economias enormes e faz com que sua oferta pareça mais valiosa.

Simplesmente pedir aos visitantes do site que “cliquem aqui” é uma oportunidade desperdiçada de destacar os benefícios.

11. Use números para destacar economias sérias o mais rápido possível

Você também pode pegar carona no exemplo acima. Os números são populares para espalhar em pop-ups para mostrar economias e comunicar valor imediato.

É mais fácil para o nosso cérebro processar números do que ler texto. Observe como tantos pop-ups móveis contam com “$10 OFF” ou “SAVE 10%” como a peça central de sua oferta?

Aqui está um título baseado em números que incentiva as pessoas a se inscreverem em um boletim informativo da Arctic Fox. Observe também o design atraente:

12. Verifique se seus pop-ups são compatíveis com o Google

Embora os pop-ups não afetem a posição do seu site diretamente no Google, o mecanismo de pesquisa adotou uma postura em relação ao conteúdo “intrusivo” .

Seus pop-ups não devem prejudicar a experiência do usuário ou impedi-los de acessar o conteúdo do seu site.

Isso explica por que você deve estar atento aos pop-ups de tela cheia, apresentando-os apenas depois que os visitantes tiverem a chance de navegar.

Imagine que alguém está visitando seu site pela primeira vez via celular. Você não quer sinalizar seu site como spam ou afastar novos visitantes imediatamente, certo? Fazer isso pode ser uma má notícia para sua taxa de rejeição.

Boa pergunta! Às vezes, a melhor maneira de seguir as práticas recomendadas de pop-up mais importantes é saber o que não fazer.

Vejamos os maiores erros que podem prejudicar o desempenho de seus pop-ups.

1. Comunicação de conteúdo irrelevante ou desnecessário

Os pop-ups “Ocupados” podem ser chocantes. Certifique-se de limitar seu texto e evitar várias mensagens. Atenha-se a uma ou duas frases com um único tema. É menos provável que sobrecarregue os visitantes do site.

2. Apresentando uma oferta abaixo do esperado

Pergunte a si mesmo: que valor você está fornecendo aos assinantes em potencial em troca de seus endereços de e-mail? Descontos acentuados, frete grátis e recompensas ao comprador pela primeira vez geralmente são necessários para impressionar os compradores e levá-los a se inscrever.

Obtenha incentivos criativos e de brainstorming que vão além das atualizações básicas ou de um desconto de 5%.

3. Baseando-se em designs pop-up antiquados e com spam

Aqui na OptiMonk, estamos em uma cruzada contra pop-ups ruins.

Ocupado. Spam. Vendedor. Você sabe de quem estamos falando.

As boas notícias? A criação de pop-ups elegantes e dignos de cliques é possível para qualquer marca, graças a ferramentas como o OptiMonk.

Quando se trata de design pop-up, um pouco de inspiração pode ajudar muito a criar ofertas incríveis.

Aqui estão cinco ótimos exemplos de design de pop-up que ajudam a aumentar sua lista de e-mail (e um detalhamento do que eles fazem bem).

1. Tentree

Esta mensagem lateral do Tentree é um exemplo brilhante de um pop-up não intrusivo.

Observe como o botão CTA da oferta se destaca do resto do esquema de cores do site? Enquanto a sutileza da sidemessage faz parecer que é realmente parte da página inicial.

2. PRETO e Negrito

Esta oferta é, apropriadamente, ousada com um título direto que é difícil de perder.

A possibilidade de escolher entre opções de bebidas também destaca como usar a personalização e as preferências para fechar o negócio com os visitantes de primeira viagem.

3. Fiança

Às vezes vale a pena mantê-lo simples. Este pop-up de e-mail da Bailly prova que um design de pop-up não precisa ser ciência de foguetes.

Uma oferta direta em troca do e-mail de seus visitantes é sempre um jogo justo.

4. Pegue a Casa Verde

Este é mais um exemplo de um pop-up simples, mas eficaz, que ajuda a aumentar sua lista de e-mail.

A linguagem de conversação (“Quer uma oferta especial no seu primeiro pedido?”) e o CTA (“SIM POR FAVOR”) mostram como as opções básicas de cópia podem convencer os visitantes a fornecer suas informações.

5. Colher Mágica

Idealmente, sua oferta pop-up deve ser capaz de falar por si mesma. Este anúncio da Magic Spoon promete algo grande com a chance de ganhar cereais grátis por um mês, usando linguagem clara e palavras poderosas (“grátis”, “ganhar”) para fazer uma declaração.

E com isso, encerramos nosso guia!

Quando se trata de fazer um “bom” pop-up, há toneladas de peças móveis para gerenciar.

Espero que nossa lista tenha dado dicas sobre o que você precisa focar. Essas dicas podem guiá-lo para mais inscritos e conversões, esteja você otimizando suas campanhas atuais ou começando totalmente do zero.

Para saber mais sobre como criar pop-ups de alta conversão, confira nosso Ultimate Guide to Pop-ups.