As melhores dicas de design de página de destino para celular que você não encontrará em nenhum outro lugar

Existem muitos recursos online que abordam designs de página de destino pós-clique para celular, mas não há muitas instruções de design específicas sobre como construir uma página de alta conversão.

Qual layout de estrutura é recomendado para visualização em celular? Quantos pixels os botões devem ter? Quantos pixels devem separar os elementos? Você deve usar o efeito “pairar”? Os rótulos dos formulários devem ser internos ou externos?

Meu nome é Cosmin Serban, Diretor de Serviços de Design da Instapage. Você pode estar se perguntando: O que torna o Cosmin qualificado para escrever no design de página de destino pós-clique para celular?

Tenho ensinado os clientes sobre as melhores práticas de design e estruturação de suas landing pages pós-clique para melhorar suas taxas de conversão. Tambem tenho:

• Reviu mais de 1.000 páginas de destino pós-clique
• Estabeleceu parceria com clientes para garantir que sua mensagem seja transmitida e seus visitantes tenham uma boa experiência que eventualmente leva a uma conversão

Além disso, fiz parte da equipe que desenvolveu mais de 200 modelos otimizados usados ​​para criar e lançar mais de 200.000 landing pages pós-clique. Você pode encontrar os modelos aqui.

Design da página de destino pós-clique para celular: o que saber antes de começar

Alguns conceitos neste artigo foram desenvolvidos internamente durante a criação de nossa biblioteca de modelos. Isso não significa necessariamente que todas essas dicas devem se aplicar a cada página de destino pós-clique que você criar. Cada página de destino pós-clique tem seu próprio conjunto exclusivo de desafios, mas compreender essas noções básicas definitivamente deve ajudá-lo a fornecer uma experiência melhor para quem visita a partir de seu dispositivo móvel.

Vamos começar com as diferenças mais importantes entre a experiência de desktop e móvel.

Estrutura

Mesmo que não pareça no início do seu projeto, ter uma estrutura onde você entrega o grupo certo de elementos no momento certo é mais crítico do que você pensa.

A primeira coisa que vem à mente é a maneira completamente diferente como nossos visitantes irão escanear o conteúdo nas páginas móveis. Todos nós já ouvimos sobre o padrão F ou padrão Z em páginas de destino pós-clique em desktop, mas como é chamado o padrão para dispositivos móveis? Não necessariamente daremos um nome a ele, mas provavelmente é muito linear. Rolar para cima e para baixo é a única maneira de entender o que a página de destino pós-clique está oferecendo:

Uma vez que essa é uma das limitações mais importantes de como os visitantes interagem com uma página de destino pós-clique, sugerimos manter um layout de uma coluna em vez de tentar enfiar muito conteúdo horizontalmente. (Ninguém gosta de beliscar e aplicar zoom.)

No desktop, na maioria das vezes, os profissionais de marketing digital pensam na localização de cada elemento individual e no impacto que isso tem. No celular, é melhor fazer uma mudança e pensar em grupos de elementos e como você os empilha uns sobre os outros para obter o máximo impacto.

Esta comparação lado a lado mostra como uma página para computador é estruturada em relação a uma página para celular:

Recomendamos ir da esquerda para a direita e colocar cada grupo de elementos um embaixo do outro. Vamos pegar a área do cabeçalho (acima da dobra), por exemplo. Teremos o logotipo no topo, seguido pelo grupo formado a partir do título principal e do título de apoio, em seguida, teremos todo o grupo de caixas de formulário embaixo.

A capacidade de agrupar elementos cria um conjunto de objetos responsivos nativamente móveis. Como alternativa, os grupos podem ser configurados para bloquear a proporção de aspecto de arranjos complexos para manter suas proporções exatas quando são convertidos para a versão móvel da sua página.

O bloqueio de proporção de aspecto móvel mantém seus agrupamentos em camadas juntos e bloqueia a proporção de aspecto, estejam eles em um layout de desktop ou móvel.

Quaisquer dois ou mais elementos intimamente relacionados ou complementares entre si devem sempre permanecer juntos. Nessa situação, não faria sentido ter a caixa do formulário bem no topo da página, então o conceito de ter o formulário na área acima da dobra não é o ideal. Fornecer ao visitante o contexto do que ele está inscrevendo primeiro é mais importante do que apenas dar a ele uma maneira de agir o mais rápido possível.

Tempo de carregamento

Não importa o dispositivo que seus visitantes estão usando, a velocidade de carregamento da página é muito importante. Lembre-se de que a maioria dos visitantes usará as limitações de dados móveis e incorrerá em custos para ver sua página, portanto, tome cuidado com os tipos de gráficos ou elementos que adicionar às páginas. Imagine acessar uma página e ter um vídeo reproduzido automaticamente.

Se você precisa de muitas animações para conteúdo de suporte, sugerimos que use imagens simples para celular. Por simples, quero dizer que você precisará criar imagens de fundo personalizadas para uma seção específica. Usar um software de edição de fotos para ajustar o tamanho ou layout da foto pode valer o tempo extra necessário, pois significa que você pode acelerar suas páginas.

A mesma coisa com imagens de fundo, já que você não precisa de uma imagem com 2.000 pixels de largura e 300kb para carregar em sua seção, sugiro que um designer crie uma imagem personalizada que você pode definir como plano de fundo de seção:

Na maioria das vezes, manter a página móvel o mais simples possível é sempre uma boa ideia. Por exemplo, se você tiver vários elementos gráficos que transmitem a mesma mensagem, basta mostrar um no celular.

Como a maioria dos telefones celulares se adapta ao tamanho da área de conteúdo fornecida no construtor móvel, uma boa regra é ter uma imagem com pelo menos 400 pixels de largura para garantir que não haja espaços vazios nas laterais.

Crie uma página de destino AMP pós-clique

Criar uma página de destino pós-clique positiva no celular é essencial, pois a página de destino pós-clique é onde as conversões acontecem. Se sua página carrega muito lentamente ou cria uma experiência desarticulada do anúncio ao pós-clique, os visitantes irão rejeitar.

Em seguida, considere que o Google considera a experiência pós-clique na página de destino como um fator para determinar a classificação do anúncio, o que, em última análise, contribui para sua taxa de cliques. Some tudo isso e as marcas terão um grande problema em suas mãos. Felizmente, a estrutura AMP existe.

As páginas AMP, em particular, são atraentes para os anunciantes porque permitem experiências do usuário móvel mais atraentes por meio de tempos de carregamento quase instantâneos e rolagem suave, ao mesmo tempo em que oferecem suporte a alguns estilos e personalização de marca. Como as AMP restringem HTML / CSS e JavaScript, elas permitem uma renderização mais rápida da página de destino pós-clique. Ao contrário das páginas tradicionais para dispositivos móveis, as páginas AMP são automaticamente armazenadas em cache pelo Google AMP Cache para tempos de carregamento mais rápidos no Google.

Os benefícios da estrutura AMP realmente superam suas limitações:

• Velocidade de carregamento de página mais rápida em dispositivos móveis
• Melhor experiência do usuário para navegação móvel
• Usar páginas AMP pode ajudar a aumentar seu Índice de qualidade
• O Google favorecerá páginas que usam AMP

Desde junho de 2018, a Instapage oferece páginas de destino pós-clique em AMP, nas quais os profissionais de marketing digital podem criar páginas compatíveis com AMP no aplicativo sem um desenvolvedor. Porque, no final das contas, se o carregamento da página não é instantâneo, não é rápido o suficiente.

Projetando para o toque

Um dos seus maiores desafios com o design da página de destino pós-clique para celular é garantir que seja o mais fácil possível para os visitantes realizarem ações. Essa ação pode ser o envio de um formulário ou um simples toque em um botão. Você esperaria que a maioria das pessoas fizesse alguns ajustes, mas nem sempre é o caso.

Todos nós já experimentamos páginas em que é muito difícil tocar em algo ou a experiência não é adaptada para usuários móveis. Especialmente links de texto - ajustar o tamanho de qualquer elemento de texto com hiperlink é muito útil. Seu visitante não deve ter que aumentar o zoom para realizar a ação desejada.

Botões

Mas o maior problema que notamos é o tamanho dos botões nas páginas de destino pós-clique. Nossa equipe recomenda projetar botões com pelo menos 70 pixels de altura e não tenha medo de torná-los o mais largos possível, mas nunca estique-os na largura total (400 pixels), pois eles podem ser confundidos com uma seção pequena.

O efeito de foco é um toque agradável para páginas de desktop porque sinaliza ao visitante que ele pode executar uma ação naquele elemento específico. No celular, os efeitos de foco são redundantes.

Margens

Para as margens, recomendamos manter uma zona de segurança de pelo menos 20 pixels verticalmente livre em cada lado e evitar qualquer tensão visual que possa aparecer com elementos muito próximos às laterais da tela do telefone.

O espaço em branco é algo tão importante para as páginas para celular quanto para as páginas para desktop. Os conceitos básicos ainda se aplicam, apenas tente espaçar tudo e não ter elementos realmente próximos uns dos outros. Isso o ajudará a evitar a tensão visual.

Ter margens consistentes certamente levará a uma melhor experiência do usuário. Nossa equipe geralmente garante que haja pelo menos 20 a 40 pixels entre cada elemento. O quanto você decide fica por sua conta, já que cada bloco pode ter uma estrutura única de elementos.

É muito subjetivo, mas depois de estabelecer uma regra, tente replicá-la em toda a página e isso lhe dará uma aparência mais moderna:

Legibilidade

Você pensaria que ser capaz de ler claramente o conteúdo é um dado, mas muitas vezes vimos páginas de destino pós-clique em que o texto é muito pequeno ou muito grande. Encontrar um bom equilíbrio é muito fácil, uma boa regra para o tamanho da fonte usada para elementos específicos são:

• Título principal: 28 pixels
• Subtítulo: 22 pixels
• Parágrafos: 17 pixels
• Outros detalhes: 15 pixels

É claro que você pode ajustar esses tamanhos, pois não há um tamanho que atenda a todas as necessidades. No entanto, deve servir como uma boa linha de base no futuro com o design de uma página de destino pós-clique para celular.

Outro item que vale a pena mencionar é a altura da linha com elementos de texto.

Em certas situações na área de trabalho, faz sentido ter 1.0 ou mesmo 1.2. Ao criar sua página de destino pós-clique para celular, certifique-se de que a altura da linha para os elementos de texto seja de pelo menos 1,4.

Resumindo: quanto menor o tamanho da fonte, maior deve ser a altura da linha.

Formulários

Como os formulários são a parte mais importante da maioria das páginas de destino pós-clique, tornar mais fácil para as pessoas enviarem suas informações é fundamental.

Em nossas páginas móveis, normalmente estendemos os campos do formulário tanto quanto possível horizontalmente e evitamos situações como ter um campo de formulário e o botão na mesma linha. Essa é uma experiência ruim:

Outra coisa que sai com muita frequência é lidar com formulários que têm muitos campos.

A prática recomendada que nossa equipe descobriu é que sempre que uma página tem mais de 2 campos de formulário para definir a posição do rótulo para fora, tornando mais fácil para os visitantes saberem quais informações são necessárias em vez de tentar lembrar o que inserir:

Aumente suas conversões em celulares a partir de hoje

Assim como as páginas para desktop, o design da página de destino pós-clique para celular tem tudo a ver com a experiência do usuário em primeiro lugar e o que vai persuadir as pessoas a se envolver e converter. Sem levar em consideração as sugestões acima, sua taxa de conversão para celular provavelmente será prejudicada e as pessoas irão pular.

Considere a implementação das recomendações e veja como suas páginas de destino pós-clique se transformam em ativos de conversão altamente otimizados. Obtenha uma demonstração Instapage AMP hoje.