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

existem muitos recursos on-line que abordam os designs de página de destino pós-clique móvel, mas não há muitas instruções de design específicas como realmente construir uma página de alta conversão.

qual layout de estrutura é recomendado para visualização móvel? Quantos pixels devem ser botões? Quantos pixels devem separar elementos? Você deve usar o efeito “hover”? Os rótulos dos formulários devem estar dentro ou fora?

meu nome é Cosmin Serban, Diretor de Serviços de Design da Instapage. Você pode estar se perguntando, o que torna a Cosmin qualificada para escrever no design de página de destino pós-clique móvel?Tenho educado os clientes sobre as melhores práticas na concepção e estruturação de suas páginas de destino pós-clique para melhorar suas taxas de conversão. Além disso, eu tenho:

  • Analisou mais de 1.000 pós-clique em páginas de destino
  • Parceria com os clientes para garantir sua mensagem está ficando de lado, e seus visitantes tenham uma boa experiência que, eventualmente, leva a uma conversão

Além disso, eu fazia parte da equipe que desenvolveu mais de 200 otimizado modelos utilizados para criar e lançar mais de 200.000 pós-clique em páginas de destino, você pode encontrar os modelos aqui.

design de página de destino pós-clique móvel: O que saber antes de começar

alguns conceitos neste artigo foram desenvolvidos internamente ao criar 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 único de desafios, mas entender essas noções básicas definitivamente deve ajudá-lo a fornecer uma experiência melhor para quem visita 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 no lugar 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 de nossos visitantes digitalizarem o conteúdo em páginas móveis. Todos nós já ouvimos falar sobre o padrão F ou padrão Z nas páginas de destino pós-clique da área de trabalho, mas qual é o padrão para celular chamado? Não lhe daremos necessariamente um nome, mas provavelmente é muito linear. A rolagem para cima e para baixo é a única maneira de entender o que o pós-clique em página de destino está oferecendo:

Desde que é uma das mais importantes limitações como os visitantes interagem com um post-clique em página de destino, sugerimos que adere a um layout de coluna em vez de tentar enfiar em um monte de conteúdo horizontalmente. (Ninguém gosta de apertar e ampliar.)

na área de trabalho, na maioria das vezes os profissionais de marketing digital pensam sobre a colocação de cada elemento individual e o impacto que ele tem. No celular, é melhor fazer uma mudança e pensar em grupos de elementos e em como os empilhamos uns sobre os outros para obter o máximo impacto.

esta comparação lado a lado mostra como uma página de desktop é estruturada em relação a uma página móvel:

mobile post-click landing Page Design comparison

recomendamos ir da esquerda para a direita e colocar cada grupo de elementos Debaixo um do outro. Vamos pegar a área do cabeçalho (acima da dobra), por exemplo. Teremos o logotipo na parte superior, seguido pelo grupo feito com o título principal e o título de suporte, em seguida, temos todo o grupo de caixas de formulários por baixo.

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

Mobile Aspect Ratio Lock mantém seus agrupamentos em camadas juntos e bloqueia a proporção, se eles estão em um desktop ou layout móvel.

quaisquer dois ou mais elementos intimamente relacionados ou complementares entre si devem sempre ficar juntos. Nessa situação, não faria sentido ter a caixa de formulário no topo da Página, portanto, o conceito de ter o formulário na área acima da dobra não é o ideal. Dar ao Visitante o contexto do que ele está se 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 de seus visitantes usará suas limitações de dados móveis e incorrerá em custos para ver sua página, portanto, tenha cuidado com o tipo de gráficos ou elementos que você adiciona às páginas. Imagine acessar uma página e reproduzir um vídeo automaticamente.

se você precisar de muitas animações para oferecer suporte a conteúdo, sugerimos ficar com imagens simples para celular. Por simples, quero dizer, 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 a pena o tempo extra necessário quando isso significa que você pode acelerar suas páginas.

Mesma coisa com as imagens de fundo, desde que você não precisa de uma imagem que é de 2.000 pixels de largura, que é de 300kb para carregar em sua seção, sugiro a obtenção de um designer para criar um personalizadas de imagem que você pode definir como fundo de seção:

móvel pós-clique em design da página de destino imagens

a Maior parte do tempo, mantendo a página móvel de forma mais simples possível é sempre uma boa idéia. 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 Mobile builder, 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 positiva pós-clique no celular é essencial, pois a página de destino pós-clique é onde as conversões acontecem. Se a sua página carregar muito lentamente ou criar uma experiência desarticulada do anúncio ao pós-clique, os visitantes irão saltar.

em seguida, considere que o Google analisa a experiência da página de destino pós-clique como um fator para determinar a classificação do anúncio, o que acaba contribuindo para sua taxa de cliques. Adicione tudo isso e as marcas têm 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 de usuário móvel mais atraentes por meio de tempos de carregamento quase instantâneos e rolagem suave, enquanto ainda suportam alguma personalização de estilo e marca. Como o AMP restringe HTML / CSS e JavaScript, ele permite uma renderização mais rápida da página de destino pós-clique. Ao contrário das páginas móveis tradicionais, as páginas AMP são automaticamente armazenadas em cache pelo cache do Google AMP para tempos de carregamento mais rápidos no Google.

os benefícios do amp framework realmente superam suas limitações:

  • mais Rápida velocidade de carregamento da página em dispositivos móveis
  • Melhor experiência de usuário para navegação por dispositivo móvel
  • Usando o AMP páginas pode ajudar a aumentar o seu índice de Qualidade
  • Google Vai favorecer as páginas que usam AMP

em junho de 2018, Instapage oferece AMP pós-clique em páginas de destino, onde profissionais de marketing digital pode construir AMP compatível com páginas de dentro do aplicativo sem um desenvolvedor. Porque, no final, se o carregamento da página não for instantâneo, não é rápido o suficiente.

14-day trial Instapage crie uma nova página

projetando para toque

um dos seus maiores desafios com o design de página de destino pós-clique móvel é garantir que seja o mais fácil possível para os visitantes agirem. Essa ação pode ser um envio de 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 onde é 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 hiperlink é muito útil. Seu visitante não deve ter que aumentar o zoom para tomar 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 a largura total (400 pixels), pois podem ser confundidos com uma pequena seção.

o efeito hover é um toque agradável para as páginas da área de trabalho porque sinaliza para o visitante que eles podem agir sobre esse elemento específico. No celular, através, os efeitos de foco são redundantes.

margens

para margens recomendamos manter uma zona segura de pelo menos 20 pixels verticalmente livre de cada lado e evitar qualquer tensão visual que possa aparecer com elementos muito próximos dos lados da tela do telefone.

o espaço em branco é algo tão importante para as páginas móveis quanto para as páginas de desktop. Os conceitos básicos ainda se aplicam, basta tentar espaçar tudo e não ter elementos realmente próximos um do outro. Fazer isso ajudará você a evitar a tensão visual.

ter margens consistentes definitivamente levará a uma melhor experiência do Usuário. Nossa equipe geralmente garante ter pelo menos 20 a 40 pixels entre cada elemento. O quanto você decide depende de você, pois cada bloco pode ter uma estrutura única de elementos.

é bastante 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 onde o texto é muito pequeno ou muito grande. Encontrar um bom equilíbrio, é muito fácil, uma boa regra de polegar para o tamanho de tipo de letra usado para elementos específicos são:

  • Principal título: 28 pixels
  • Subheadline: 22 pixels
  • Parágrafos: 17 pixels
  • Outros detalhes: 15 pixels

é claro que você pode ajustar os tamanhos, uma vez que não existe um tamanho único para atender 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 móvel pós-clique.

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, quando você constrói sua página de destino pós-clique móvel, certifique-se de que a altura da linha para elementos de texto seja de pelo menos 1.4.

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

formulários

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

em nossas páginas móveis, geralmente esticamos os campos de formulário o máximo possível horizontalmente e evitamos situações como ter um campo de formulário e o botão na mesma linha. Isso é apenas uma experiência ruim:

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

As melhores práticas de nossa equipe descoberto é 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 para saber que tipo de informação é necessária, em vez de tentar lembrar o que a de entrada:

Aumentar seu celular conversões a partir de hoje

assim como páginas da área de trabalho, móvel pós-clique em design da página de destino é toda sobre a experiência do usuário primeiro, e o que vai convencer as pessoas a envolver-se e converter. Sem levar em consideração as sugestões acima, sua taxa de conversão móvel provavelmente sofrerá e as pessoas saltarão.

considere implementar as 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 do Instapage AMP hoje.

Deixe uma resposta

O seu endereço de email não será publicado.