8 exemplos de páginas de destino para dispositivos móveis para inspirar a sua

No terceiro trimestre de 2021, 30% da população mundial com acesso à Internet comprou bens usando um dispositivo móvel.

À medida que mais e mais pessoas optam por usar seus smartphones para compras on-line, é fundamental criar uma experiência móvel perfeita para que você possa transformar mais desse tráfego móvel em vendas.

Mas criar uma página de destino móvel de alta conversão requer uma abordagem, habilidades e táticas de design diferentes daquelas que você usaria para sua versão para desktop.

Então, como você otimiza uma página de destino para dispositivos móveis e o que você deve se lembrar ao criar a sua?

Para economizar seu tempo, analisamos centenas de sites para encontrar os melhores exemplos de páginas de destino para dispositivos móveis de alto desempenho. Você verá o que os torna ótimos e aprenderá o que pode fazer para replicar seu sucesso.

Vamos começar verificando alguns exemplos de ótimas páginas de destino para dispositivos móveis.

Você verá que incluímos a visualização para dispositivos móveis e, em alguns casos, adicionamos capturas de tela de suporte da versão para desktop para ilustrar diferenças importantes entre os designs.

1. Simplesmente Chocolate: desempenho de design impressionante

A Simply Chocolate é uma marca de comércio eletrônico que vende produtos de chocolate premium.

O que o torna ótimo:

• Um design complexo que funciona bem em dispositivos móveis: este projeto de design gráfico é uma obra-prima. Inclui animação, imagens de alta qualidade e alguns elementos interativos. Esses são os elementos que você esperaria para diminuir sua velocidade de carregamento, mas a Simply Chocolate conseguiu introduzir o design de uma maneira que mantém a velocidade de carregamento alta sem comprometer a qualidade.
• Um ponteiro visual : ao clicar, você vê uma visualização do produto. Você pode então ver o chocolate como se tivesse acabado de desembrulhar e dar uma mordida. Isso é o suficiente para convencê-lo a adicionar algumas barras ao seu carrinho de compras!
• A ideia de apresentar produtos para inspirar a compra: O principal objetivo desta página de destino é fazer com que você se interesse por uma variedade de produtos. Depois de clicar em “Comprar agora”, você é direcionado para uma loja online onde pode adicionar produtos ao seu carrinho. Apresentar os produtos primeiro para inspirar a compra é uma ótima maneira de se destacar quando milhares de outras marcas vendem produtos semelhantes.

2. Curologia: um CTA que cumpre seu papel

A Curology é uma marca que oferece cosméticos personalizados e consultas com dermatologistas. Esta marca utiliza questionários para recolher informação sobre as condições da pele e oferecer um produto personalizado.

O que o torna ótimo:

• Um CTA direto que comunica um benefício: você pode usar o Curology gratuitamente nos primeiros 30 dias e pagar apenas US$ 4,95 em custos de envio.
• Título dinâmico : O título comunica diferentes problemas que as pessoas têm: tom de pele irregular, espinhas, espinhas, rugas. Isso faz com que o título ressoe com todos.
• Cópia curta e sucinta: Eles mantêm sua cópia curta, reduzindo-a a algumas linhas de texto. Dessa forma, o visitante entende rapidamente quais serviços eles oferecem e qual é sua proposta de valor exclusiva.

3. Rover: substituindo filtros com um botão

Rover é um mercado que conecta donos de animais de estimação com babás de animais em busca de emprego.

O que o torna ótimo:

• Substituindo filtros com um botão: na versão desktop do site, você vê filtros que ajudam a definir seus critérios para uma babá de animais. Ao visualizar o site em uma tela pequena, os usuários enfrentariam sobrecarga de informações se vissem um layout semelhante. A Rover remove os filtros em sua versão móvel para focar a atenção do usuário em sua proposta de valor. Os filtros são exibidos após clicar no CTA principal.
• Movendo as opções de pesquisa para uma página separada : depois de clicar no CTA principal, você é redirecionado para uma página separada onde pode aplicar seus critérios. Esta é uma boa solução, pois o formulário ocupa bastante espaço.
• Um CTA claro : Seu CTA é muito específico, destacando o resultado exato que um usuário pode esperar depois de clicar no botão. Eles evitam usar linguagem genérica.

4. Canva: removendo elementos complexos

O Canva é uma ferramenta online que ajuda você a criar designs profissionais sem nenhum conhecimento de design gráfico.

O que o torna ótimo:

• Mantendo a versão mobile simples: se você comparar as versões desktop e mobile do site do Canva, você notará rapidamente que a versão mobile não tem o carrossel de templates e a barra de busca. Isso porque manter esses elementos em uma versão mobile deixaria a página confusa e distrairia os usuários do objetivo principal do Canva: fazer com que novos usuários criem uma conta.
• Destacando o CTA principal : Ao destacar o botão em uma cor diferente, ele se destaca do restante do conteúdo.
• Uso eficaz do espaço em branco: o Canva apresenta mais espaço em branco vertical, o que ajuda a focar a atenção dos usuários no CTA.

5. Mixpanel: estabelecendo confiança imediatamente

O Mixpanel é uma ferramenta de análise de produtos que ajuda as empresas a entender o comportamento do usuário rastreando as interações do usuário na web e em dispositivos móveis .

O que o torna ótimo:

• Movendo logotipos de clientes de alto perfil para cima na página: em sua versão móvel, o Mixpanel decidiu trazer esses logotipos para cima, para que os usuários que acabaram de entrar na página tenham um impulso instantâneo de confiança para continuar explorando o Mixpanel.
• Abandonando a animação complexa no celular : a versão desktop do Mixpanel é mais rica em animação. Alguns dos elementos animados são difíceis de transferir para a versão móvel e provavelmente aumentariam sua velocidade de carregamento, então eles foram reduzidos ao mínimo.

6. Ballsy: um uso criativo de pop-ups móveis

Ballsy é uma marca de comércio eletrônico que vende produtos de beleza para “peças masculinas”. Em sua loja online, você encontra sabonetes líquidos, aparadores, desodorantes e outros produtos para higiene masculina.

O que o torna ótimo:

• Usando pop-ups móveis: Ballsy usa pop-ups para coletar endereços de e-mail e números de telefone de visitantes de primeira viagem. São várias etapas: primeiro, o usuário recebe um desconto de 10% para inserir um endereço de e-mail e, em seguida, ele tem a opção de inserir um número de telefone dos EUA com um desconto ainda maior de 15%.
• Usando um incentivo : algumas marcas ainda pedem um endereço de e-mail sem oferecer nada em troca. Como você pode imaginar, a taxa de conversão desses pop-ups é relativamente baixa. Pelo contrário, ao oferecer descontos em produtos em troca de informações pessoais, a Ballsy garante que seus pop-ups terão uma melhor taxa de conversão.
• Obtendo acesso ao código imediatamente: você não precisa verificar seu e-mail ou confirmar sua assinatura para acessar seu código de desconto—Ballsy exibe o código imediatamente após inserir seu e-mail ou número de telefone para que você possa continuar comprando imediatamente.

7. MVMT: menu móvel visual

A MVMT é uma marca de comércio eletrônico que vende relógios, óculos e acessórios premium.

O que o torna ótimo:

• Menu visual: eles adicionam elementos visuais ao menu, o que significa que os usuários sabem em qual link clicar imediatamente, sem pensar.
• Geolocalização : os usuários podem ajustar seu país de envio com base na localização e comprar em sua moeda local.

8. RingCentral: telas de serviços intuitivas

O RingCentral é uma das soluções de comunicações unificadas mais conhecidas , ajudando as equipes a se comunicarem por meio de qualquer dispositivo, incluindo computadores e smartphones. É um substituto para telefones fixos tradicionais.

O que o torna ótimo:

• Simplificando as telas de serviços: eles trocaram os botões que mostram os serviços e passaram a usar um menu suspenso. Esse é um truque comum que ajuda a otimizar a experiência móvel para seus usuários . Dessa forma, os usuários podem navegar pelos serviços em seus dispositivos móveis com a mesma conveniência de um site para computador.
• Bom uso de links de rodapé : o menu de rodapé da área de trabalho contém muitos links que levam às principais páginas de produtos. No celular, incluir todos esses links de rodapé tornaria a página muito longa. Eles resolvem isso ocultando esses links em um menu suspenso nas categorias principais.

Agora que você viu alguns ótimos exemplos, é hora de começar a pensar em suas próprias páginas de destino para dispositivos móveis. Reunimos algumas dicas e práticas recomendadas para criar páginas de destino para dispositivos móveis que você pode começar a seguir hoje mesmo.

1. Aumente a velocidade de carregamento da página

Quanto tempo os usuários esperarão pelo carregamento de uma página? Aqui está uma dica: eles não vão ficar por mais de cinco segundos. Ninguém gosta de páginas lentas e elas prejudicam sua taxa de conversão. Então, como você pode melhorar a velocidade de carregamento no celular?

Primeiro, verifique a integridade geral da sua página de destino usando o Google PageSpeed ​​Insights .

Depois de adicionar seu URL, você receberá um relatório sobre todos os problemas críticos enfrentados pelos usuários de dispositivos móveis. Você vai querer trabalhar para eliminá-los e aumentar a pontuação de integridade da sua página.

Você também pode usar este scanner de domínio para ajudá-lo a identificar mais problemas técnicos relacionados a registros DMARC, SPF, DKIM e BIMI.

2. Seja sucinto

Em telas móveis menores, incluir muito texto pode tornar sua página muito longa.

Lembre-se de que o tempo de atenção dos usuários pode ser menor quando eles estão verificando seu site em trânsito, como durante o trajeto ou quando estão fora de casa. É por isso que é importante usar uma cópia sucinta.

E lembre-se, sua versão para desktop também pode se beneficiar de manter as coisas concisas!

Aqui estão alguns passos a seguir:

• Descreva sua proposta de valor no título da página.
• Escreva parágrafos curtos que sejam fáceis de entender. Abandone o jargão da indústria e escreva como se estivesse contando uma história para uma criança de dez anos.
• Seja específico.
• Escreva frases curtas ou divida frases mais longas em outras mais curtas.

3. Crie um design separado para celular

Ao trabalhar com um designer gráfico em seu UX e UI, certifique-se de adicionar uma cópia móvel ao brief. Criar um design responsivo não é tão demorado ou caro, mas requer conhecimento de UX e UI para dar conta de todos os detalhes.

As melhores ferramentas de design gráfico ajudam a ajustar as versões da Web às versões móveis e possuem os recursos necessários para alternar para a interface do usuário móvel.

Em alguns casos, sua versão móvel precisará de uma solução de design diferente. Em outros, você só precisa simplificar seus elementos de animação ou reduzir a complexidade dos gráficos quando necessário.

4. Evite linguagem genérica em seu CTA

Em qual botão você clicaria: “Cadastre-se” ou “Obtenha seu acesso gratuito”? Há uma grande chance de você clicar em um CTA que comunique algum valor porque (como todo mundo) você se pergunta: “O que eu ganho com isso?”

CTAs mais genéricos como “Cadastre-se” ou “Comece agora” não comunicam muito valor a um usuário e provavelmente terão uma taxa de conversão menor em comparação com o botão mais específico.

Evite linguagem genérica no texto do botão e, em vez disso, concentre-se em comunicar os benefícios que um usuário obterá se realizar a ação desejada. É exatamente isso que a Curology faz em sua landing page mobile:

5. Use pop-ups móveis

Se você já usa pop-ups para sua versão para desktop, confira como eles ficarão no celular. Verifique se eles são responsivos e fáceis de interagir em telas menores. Mantenha o texto no mínimo.

“Lembre-se de que você sempre pode criar duas opções diferentes de pop-ups – tanto para a versão web quanto para dispositivos móveis, para que possa levar em conta o tamanho das telas. Como resultado, os usuários da web e de dispositivos móveis não encontrarão problemas ao inserir informações em campos pop-up”, diz Farnam Elyasof, fundador da Flex Suits .

Por exemplo, no OptiMonk, você pode selecionar facilmente em quais dispositivos deseja que seus pop-ups sejam exibidos.

Além disso, todos os pop-ups do OptiMonk são compatíveis com dispositivos móveis. Confira este pop-up móvel do BlendJet que foi criado com o OptiMonk:

6. Use formulários curtos

Preencher informações em uma tela pequena pode se tornar bastante frustrante. É por isso que pedir muitas informações em seus formulários online é uma maneira segura de perder um cliente.

Se você já usa formulários de contato para gerar leads , talvez esteja procurando maneiras de aumentar a eficiência e a taxa de conversão deles. Comece diminuindo seus formulários e peça apenas as informações mais importantes.

Mas e se você precisar coletar mais informações sobre seu cliente e não puder evitar o uso de mais campos?

Em seguida, divida-os em telas pop-up separadas ou “etapas” e adicione uma barra de progresso.

Ao usar telas pop-up separadas, cada campo será grande o suficiente para inserir informações. E usando uma barra de progresso, seus usuários sempre saberão o quão perto estão de preencher o formulário. Como resultado, sua taxa de churn em cada estágio deve diminuir.

7. Não se esqueça do branding consistente

Se o seu logotipo parecer muito grande em um dispositivo móvel ou se for muito complexo, considere criar outra versão para uso em telas menores.

Existem várias maneiras de adaptar logotipos que ficam bem em uma área de trabalho para telas pequenas, mas é importante lembrar de usar imagens vetoriais porque elas são pequenas, escaláveis ​​e editáveis.

Na maioria dos casos, você desejará trabalhar com um designer que revisará o guia de estilo da sua empresa e usará suas habilidades para criar um logotipo apropriado para uso móvel.

No entanto, se isso não for uma opção, aqui estão algumas dicas que podem ajudar na hora de criar seu logotipo sem habilidades de design gráfico:

• Use logotipos horizontais: mova os elementos visuais acima do texto para a esquerda ou direita.
• Reduza os detalhes : aumente a legibilidade eliminando alguns elementos de logotipo menos importantes.
• Remover texto pequeno: remova o texto pequeno do logotipo que não ficará legível quando exibido em telas menores.

8. Use fontes compatíveis com dispositivos móveis

Quando se trata do conteúdo da página em dispositivos móveis, todas as fontes não são iguais . Se você estiver usando uma fonte difícil de ler, considere substituí-la por uma opção mais amigável para dispositivos móveis, como:

• Abrir Sans
• Roboto
• Montserrat
• Lato
• Adobe Garamond
• Baskerville
• Computador moderno
• Geórgia
• Catapulta

9. Escolha uma “zona de polegar” segura

Tentar clicar em pequenos botões em um iPhone mini pode se tornar um pesadelo. Você pode evitar transformar sua página de destino em uma fonte de frustração para os usuários se lembrar de incorporar uma “zona de polegar” segura nas áreas em que você espera que um usuário clique.

Qual é a zona do polegar e por que os designers móveis são tão obcecados com esse termo?

O termo “thumb zone” foi cunhado por Steven Hoober em seu livro de 2011, “Designing Mobile Interfaces”. A zona do polegar foi definida como a área mais confortável para o usuário clicar ao usar o telefone com um dedo.

Aqui está onde a zona do polegar está localizada para diferentes usuários:

Ao projetar sua experiência móvel, você deve ter em mente que os elementos nos quais você deseja que os usuários cliquem devem estar dentro da área “natural”.

10. Use espaço em branco

O espaço em branco é frequentemente percebido como a tela na qual texto, imagens e outros conteúdos podem ser colocados. No entanto, ele desempenha um papel importante na forma como os usuários consomem conteúdo, especialmente em dispositivos móveis.

Então, o que conta como espaço em branco?

Essas são as áreas que são deixadas vazias de propósito, como o espaço entre colunas, margens e preenchimentos.

Aqui estão algumas dicas a seguir ao incorporar espaços em branco:

• Adicione espaço em branco suficiente entre os alvos de clique (por exemplo, botões): o tamanho mínimo de um alvo de clique deve ser em torno de 30 a 40 pixels. Facilite a interação com eles adicionando uma quantidade suficiente de espaço em branco entre dois ou mais alvos de clique.
• Deslocar o espaço em branco verticalmente no celular: use o espaço em branco para separar os elementos que seguem um fluxo vertical. Isso é diferente do que no desktop, onde o espaço em branco é introduzido verticalmente e horizontalmente.

Ao otimizar a experiência móvel para seus usuários, você garante que os clientes gostem de usar seu website e aumente sua taxa de conversão em dispositivos móveis.

Facilite para os usuários atingirem seus objetivos, como navegar e comprar seus produtos, inscrever-se em suas ofertas ou realizar outras ações que os aproximem da conversão.

Esperamos que os exemplos e dicas que compartilhamos ajudem você a entender o que é uma boa experiência em dispositivos móveis e a acelerar seu progresso à medida que você introduz alterações. Agora, é hora de colocar todos esses novos insights para funcionar!