Landing page mobile: descubra os elementos que mais convertem

Você sabe qual é a taxa de conversão das sua landing page mobile? Não é regra, mas a tendência é que essa métrica seja sempre um pouco (ou muito) melhor na versão desktop. Isso pode acontecer, por exemplo, porque no celular há muitas distrações ou a decisão é complexa demais para ser tomada em uma tela tão pequena. 

Mesmo com esses obstáculos intrínsecos, a verdade é que, se você não está se preocupando com a otimização da versão mobile, está perdendo muitas vendas. Você precisa proporcionar um ambiente favorável para a compra no mobile porque as pessoas estão usando mais o celular do que o computador.

Para se ter uma ideia, 69% de todo o tempo do usuário consumindo conteúdo é gasto no smartphone. Além disso, 89% dos consumidores dizem que recomendam uma marca depois de uma experiência mobile positiva. Por fim, 71% do tráfego global de sites de varejo vem do mobile. No Brasil, 71 milhões de pessoas acessam a internet somente pelo celular, o que representa 56% da população internauta.

Então, como preparar sua landing page mobile para uma taxa de conversão incrível? Confira, a seguir, alguns elementos principais e como criá-los de uma forma mobile-friendly e conversion-friendly.

Títulos

Todos os elementos da sua landing page são importantes. Mas o texto é o que faz diferença real na hora da decisão. Por isso, deve ser muito bem construído.

O título é (ou pelo menos deveria ser) o primeiro item que o usuário vê na sua página. Deve capturar sua atenção e demonstrar o benefício da solução, convencendo-o a ficar por ali. Além disso, você precisa encontrar um jeito de indicar para o visitante que há mais conteúdo abaixo do título, evitando o “false bottom”, ou fundo falso. Você pode verificar se isso está acontecendo fazendo uma análise de heat maps.

Imagine que a landing page é uma história e o título é apenas a primeira parte e não precisa entregar o final. No entanto, evite palavras que não dizem muita coisa e seja sempre muito objetivo.

Além disso, é preciso que o texto caiba na primeira dobra, que no mobile é bastante limitada. O Google recomenda que o tamanho da fonte do corpo do texto seja pelo menos 16 para o texto corrido, com o título maior proporcionalmente. Ou seja, não funciona muito bem reduzir o tamanho para encaixar tudo, arriscando perder em visibilidade.

Veja o exemplo a seguir, de um cliente nosso do Canadá, que consegue passar o que é a solução e seus benefícios logo no início:

Pense da seguinte forma: se o público-alvo ler o título principal, subtítulo e alguns outros destaques, vai conseguir entender do que se trata? Ainda mais crítico, se ela clicou em um anúncio, quando chegar à página, vai se sentir contemplada pelo que foi prometido no texto do anúncio, logo no título? 

Não se esqueça das tags (H1, H2). Elas dizem para o Google qual é o assunto da página e conseguem levá-la para o usuário que esteja procurando por aquilo – aqui as palavras-chave têm papel fundamental. Dessa forma, você encontra as pessoas que realmente possam estar interessadas na solução.

Veja mais sobre como criar títulos para landing pages que convertem.

CTAs

Ao mostrar os benefícios da sua solução para o usuário, você precisa indicar o próximo passo. Aqui, entram os CTAs, que merecem um cuidado especial no mobile. Sempre que você apresentar um motivo para a conversão, indique a ação que a pessoa deve executar a fim de conquistar aquele objetivo. Ou seja, perto do título, deve haver um CTA, também na primeira dobra ou muito perto dela.

O ideal é oferecer apenas um direcionamento, um tipo de CTA. Se o desktop já abre para confusões quando há muitas ações a serem executadas, imagine que no mobile esse problema aumenta exponencialmente. Cuidado para não deixar o usuário se perder no caminho para a conversão.

Contextualize

Além disso, a ação deve estar de acordo com o contexto do usuário. Assim, se a intenção principal é gerar leads, você não vai incluir um formulário longo e complicado, certo? Agora, se o negócio é local, é essencial colocar um telefone clicável ou hiperlink para um mapa. Pense sobre o que seu usuário está fazendo quando abre sua landing page mobile.

Para alguns tipos de solução, não é apenas o contexto que importa. O conhecimento do usuário sobre aquilo deve ser levado em conta. Assim, quando se trata de algo complexo demais e você precisa convencer com mais esforço, colocar o CTA logo no início pode não ser uma boa ideia. Afinal, o usuário precisa estar preparado para tomar aquela decisão. 

Nesse caso, o mais aconselhável é realizar testes para determinar qual posicionamento e texto de CTA têm mais chance de gerar conversões.

Design

Você já deve saber que toda landing page mobile deve ser responsiva. Essa é a regra básica: se não trabalhar a responsividade, é difícil trazer pessoas para a página e mantê-las por lá. Mas o que responsividade significa, de verdade?

Significa que a página se altera de acordo com um registro vindo do usuário. Nesse caso, o registro é o tamanho de sua tela. Assim, a cada mudança, os elementos se reorganizam completamente. 

Não se pode personalizar a página manualmente para cada tamanho de tela, é algo automático, o que pode dar muito mais trabalho aos profissionais de otimização da conversão. Por isso, priorize o design da landing page mobile e teste suas escolhas para melhorar resultados.

CONFIRA 30 DICAS PRÁTICAS DE CRO

Organize para converter

A disposição de todos os elementos que citei aqui cumpre um papel essencial nas taxas de conversão. As informações a serem colocadas na primeira dobra devem ser pensadas com muito cuidado, como falamos acima sobre os títulos. Além disso, é preciso deixar indicativos para o usuário sobre as ações que ele deve executar. 

Pense pelo lado de quem abre a página. Dificilmente o objetivo da pessoa será entender mais sobre a empresa – na verdade, ela deseja saber o que você tem a oferecer em seu benefício. Por isso, o ideal é destacar o que a sua solução vai trazer de bom para a vida do usuário em primeiro lugar.

Claro, você também pode citar as funcionalidades da solução. Mas, primeiro, vem “o que” e depois o “como”. Inclusive, para falar do funcionamento da solução, ao invés de listar as funcionalidades, você pode demonstrá-las por meio de uma ilustração, vídeo ou outros recursos. Fica mais fácil de digerir e informação e entender do que se trata.

Por falar em digerir informações, para facilitar ainda mais, procure destacar as partes importantes dos benefícios e funcionalidades. No entanto, evite poluir a página. Os espaços brancos são seus amigos e ajudam o conteúdo a brilhar. Mantenha sua landing page mobile simples e clara.

Os segmentos da sua página também não podem interromper o usuário. Pop-ups muito grandes, que ocupam toda a tela, além de irritar o usuário, podem significar menor tráfego orgânico via Google. No entanto, se você precisa avisar sobre o uso de cookies, por exemplo, um banner fechável que não ocupe a tela inteira é totalmente aceitável.

Isso também vale para o tamanho dos botões. Eles são essenciais para indicar ações e clicar neles deve ser fácil – não podem ser pequenos demais ou perto de outros elementos clicáveis.

Uma pesquisa interessante do designer Steven Holder, publicada em sua coluna na UXMatters, descobriu que a maioria dos usuários controla seus smartphones com o polegar – sendo 67% com o polegar direito. Assim, se o seu botão ficar “escondido” atrás do dedo, especialmente à direita, o clique nele se torna mais difícil. Procure também manter os elementos em uma área fácil de clicar ao segurar o aparelho com a mão direita e utilizar somente um dedo. Faça o teste você mesmo: o CTA requer esforço demais? Talvez seja melhor mudar de lugar.

Mais sobre a anatomia de landing pages que convertem aqui.

Velocidade

Esse é um ponto muito importante para a conversão da sua landing page, frequentemente deixado de lado. Em especial na versão mobile, é quase impossível alcançar boas taxas com um tempo de carregamento alto – e não estou falando apenas de conversão, o tráfego orgânico via Google também é impactado.

Reduzir apenas 1 segundo do tempo de carregamento pode aumentar em até 27% a taxa de conversão, segundo este estudo de caso.

Ou seja, não adianta muito trabalhar bem os elementos que descrevemos aqui se as pessoas não conseguem receber o conteúdo em tempo hábil, aumentando a chance de fechar a página. Lembre-se também que os usuários vão acessar sua landing page de dispositivos diferentes, com velocidades de conexão diferentes.

Por isso, alguns itens para você checar:

• Prefira imagens em formato .jpg e, se puder, escolha codificar a página em HTML5 e jQuery, que melhoram o tempo de carregamento.
• Mantenha o número de requisições HTTP no mínimo possível, eliminando scripts desnecessários. 
• Recomenda-se também utilizar CSS sprites nas imagens, que combinam várias imagens em uma só para reduzir o tempo de carregamento.
• Siga o checklist oferecido pelo Google na ferramenta PageSpeed Insights.

Segundo a Episerver, este é o comportamento do usuário frente a uma página mobile difícil de navegar:

Testes A/B

Os testes A/B devem ser a sua principal atividade na hora de otimizar qualquer interface. No mobile, são uma ajuda ainda maior, devido ao espaço reduzido das telas. O único jeito de descobrir se as dicas presentes nesse texto se encaixam para o seu caso é aplicando testes.

Crie hipóteses e aplique-as por meio de uma ferramenta de testes. Pode ser, por exemplo, alterar o posicionamento de um CTA. Ou mudar o título. Isso vai guiar futuras mudanças na página e ainda pode ajudar a conhecer melhor seu usuário.

Nem sempre é fácil chegar na melhor versão. Você pode seguir as melhores práticas e elas não servirem exatamente para o seu cliente. Veja aqui, por exemplo, quais mitos da otimização da conversão são desbancados por testes A/B.Acompanhe também nosso guia definitivo sobre como criar landing pages que convertem. Boa leitura!

E antes de ir embora, que tal fazer um teste para descobrir se o CRO é a estratégia certa para você? Descubra em 1 minuto: