Como criar um wireframe de página de destino com dicas de especialistas

Publicados: 2018-05-08

Uma página de destino pós-clique costuma ser uma das primeiras impressões que as pessoas veem de sua marca, por isso é importante torná-la excepcional. Um wireframe de página de destino pós-clique pode ajudar com isso, permitindo que você visualize a organização dos elementos da página antes de realmente construí-la.

O que é um wireframe de página de destino pós-clique?

Um wireframe é um layout de design básico ou esqueleto de uma página de destino pós-clique para dar aos interessados uma ideia de como a página será estruturada e quais recursos são necessários para criá-la.

Rares Cimpean, um Visual Designer da Instapage, explica:

Ao montar um wireframe de página de destino pós-clique, você deve se concentrar no fluxo, usabilidade e acessibilidade da página, quão rápido as pessoas podem obter as informações de que precisam, quão acessível e reconhecível é o CTA, etc. Todos esses fatores são levados em consideração na fase de wireframing.

Aqui estão alguns exemplos de página de destino pós-clique em wireframe, longos e curtos:

Um modelo de wireframe de página de destino pós-clique serve a vários propósitos principais:

Para atuar como um meio-termo entre seu esboço em papel e caneta e o primeiro protótipo
Apresentar uma visão geral do conteúdo que será exibido na página
Para fornecer um plano da estrutura da página
Para transmitir a direção geral da interface do usuário

Observação: não há um único design de wireframe de página de destino pós-clique que se ajuste a todas as campanhas. Algumas páginas de destino pós-clique podem simplesmente exigir um título, uma cópia com marcadores, um formulário e um botão de CTA, enquanto outras podem precisar destacar benefícios adicionais e demonstrar prova social. As páginas de vendas, por exemplo, geralmente exigem descrições mais detalhadas do produto e podem precisar ser mais longas. (Lembre-se de que você pode sempre fazer um teste A / B de uma página curta em comparação com uma página longa para ver qual produz melhores resultados.)

Não importa o tipo de página que você está fazendo wireframe, nosso Gerente de Design Gráfico, Rafal Bogdan, expressa a importância de manter seu wireframe muito simples no início, para não sobrecarregar as partes interessadas envolvidas:

Não quero me concentrar muito nos elementos que podem ser rejeitados pelas partes interessadas na próxima fase. A ideia principal de um wireframe é mostrar recursos específicos do projeto em uma página inicial pós-clique e ajudá-los a entender como esses recursos se comportarão na página real.

Depois de ter seu wireframe, é hora de o design fazê-lo brilhar. Abaixo estão os elementos normalmente encontrados em páginas de destino pós-clique de alta conversão.

Como criar um wireframe para uma página de destino pós-clique

Sem navegação

Como as páginas de destino pós-clique são projetadas para conversão e para um único propósito, não deve haver links de navegação que possam desviar os usuários de sua meta de conversão. É converter ou sair - sem outras opções.

Muitas empresas viram mudanças substanciais em suas taxas de conversão depois de remover suas barras de navegação:

O Career Point College observou um aumento de 336% na taxa de conversão depois de remover a barra de navegação superior e modificar o layout do formulário.
Yuppiechef testemunhou um aumento de 100% nas taxas de conversão (de 3% para 6%) removendo sua barra de navegação.
O SparkPage teve um aumento na taxa de conversão, de 9,2% para 17,6%, durante o mês em que eles testaram A / B removendo sua navegação superior.

A Comporium Media Services é outra marca que entende a necessidade de retirar a navegação para maximizar as conversões. Nem mesmo seu logotipo está vinculado, o que mantém os visitantes na página e focados na solicitação de uma consulta:

Ao seguir as práticas recomendadas, os únicos links que devem ser usados são aqueles que aumentam a credibilidade (por exemplo, Termos de Uso e / ou Política de Privacidade) e links que aprimoram a experiência do usuário (como tags âncora e um telefone clique para ligar número).

Título e subtítulo

Seu título é um dos elementos mais importantes porque, sem um atraente, os visitantes não serão persuadidos o suficiente para continuar avaliando sua oferta. Como essa é a forma principal de transmitir sua mensagem, ela deve chamar a atenção, estar claramente visível assim que os usuários acessarem a página e acima da dobra.

Seu subtítulo é usado para complementar o título principal, especialmente se o título principal for longo ou exigir contexto adicional (como uma estatística, por exemplo).

A chave para escrever um bom título é garantir que ele transmita sua proposta de valor exclusiva (UVP), ou o que diferencia seu produto ou serviço de seus concorrentes.

O título da página de destino pós-clique do Autopilot permite que as empresas saibam que podem “crescer mais rápido” no Autopilot em comparação com outro software de automação de marketing. O subtítulo complementa essa ideia, descrevendo como eles podem crescer mais rápido:

Além de incluir seu UVP, existem quatro tipos principais de títulos atraentes:

Notícias: apresente uma nova solução para clientes em potencial
Interesse próprio: apelo ao interesse próprio inerente dos clientes em potencial <
Solução rápida e fácil: apele ao desejo dos clientes em potencial por soluções rápidas
Curiosidade: desperta o interesse e a curiosidade dos visitantes, levando-os a ler mais

Você pode usar um ou combinar vários para um título ainda mais poderoso. Os títulos mais atraentes usam dois ou mais.

meios de comunicação

Como é mais fácil para as pessoas processar imagens do que texto, mídia envolvente (imagens, gifs e vídeo) ajuda a transmitir o valor de uma oferta, ainda mais do que as palavras. No entanto, os recursos visuais não são uma solução única para todos. O tipo de mídia que você escolhe para sua página de destino pós-clique depende do que você está oferecendo.

Os tipos de imagens da página de destino pós-clique incluem:

Fotos do herói: dê aos visitantes um vislumbre de como seu produto ou serviço mudaria suas vidas para melhor
Imagens do produto: permita que os visitantes vejam os detalhes de sua oferta, incluindo seus principais recursos
Infográficos: permitem que os visitantes conceituem dados e estatísticas (tabelas, gráficos etc.) com mais facilidade

Dê uma olhada nas imagens que o iContact usa para mostrar aos clientes em potencial vários exemplos de e-mails comerciais que eles ajudam a criar:

Além das imagens, existem vários tipos de vídeos da página de destino pós-clique:

Vídeos explicativos: explique como seu produto funciona - especialmente se for novo ou complicado - com foco em como ele beneficiará seus clientes em potencial
Vídeos introdutórios: mostre novas empresas, anuncie novos produtos ou destaque novos recursos do produto
Testemunhos em vídeo e estudos de caso: sirva como prova social, mostrando clientes reais e satisfeitos, explicando sua satisfação e sucesso com seu produto ou serviço

Se estiver usando imagens, fique longe de fotos de banco de dados, a menos que elas transmitam uma situação realista de sua oferta e sejam relevantes para o tópico. Qualquer coisa a menos e você corre o risco de diminuir a percepção e o valor da sua marca.

cópia de

Por mais tentado que você se sinta a contar aos visitantes tudo sobre sua oferta - não o faça. A capacidade de atenção é de apenas alguns segundos, no máximo, portanto, sua cópia deve ser sucinta e captar a atenção das pessoas imediatamente.

Por exemplo, os marcadores (marcados por iconografia, marcas de verificação, setas, etc.) são uma maneira comum de transmitir informações importantes, permitindo que os visitantes examinem rapidamente a página e identifiquem os principais pontos da oferta.

Os clientes em potencial podem aprender rapidamente sobre a solução de videoconferência da Highfive com a ajuda de cabeçalhos de seção em negrito, cópia mínima e marcadores:

Prova social

Antes da conversão, as pessoas precisam confiar que sua empresa oferece um serviço confiável. É aí que a prova social pode convencê-los de várias maneiras:

Depoimentos de clientes: mostre aos clientes em potencial que você cumpre sua promessa, já que ela foi verificada diretamente de seus clientes (por meio de citações com informações específicas, estatísticas, nomes completos, afiliação profissional e títulos e fotos de rosto).
Logotipos (e contagens) do cliente: exiba as empresas conhecidas com as quais você já trabalhou (e com quantas), informando aos visitantes: “Como nosso produto ou serviço era bom o suficiente para eles, será para você também”.
Prêmios do setor: demonstre que você foi publicamente reconhecido por líderes do setor, repórteres, estações de notícias, sites, etc.
Selos de confiança: garantem aos clientes potenciais que suas informações de pagamento estão protegidas e protegidas de terceiros.
Política de privacidade: garante aos clientes em potencial que seus endereços de e-mail serão usados de forma adequada e não compartilhados com ninguém.

Olhando novamente para a mesma página de destino pós-clique do Highfive anterior, verifique todas as provas sociais que eles usaram para persuadir os visitantes a converter - logotipos de marcas, um depoimento citado e classificações de estrelas do setor:

Aqui está outro exemplo, desta vez da Splash Omnimedia, que inclui todos os tipos de prova social - uma contagem de clientes, logotipos de marcas, vídeo de estudo de caso e depoimento citado:

Ao combinar todas essas provas, você persuade os clientes em potencial a se converterem, clicando no botão de CTA.

Formulário de captura de chumbo

Criar a forma perfeita não é tão fácil. Não há campos de formulário suficientes e você não coletará todas as informações de que precisa; muitos campos e você corre o risco de assustar clientes em potencial. O comprimento do formulário depende de onde sua oferta se encontra no funil de marketing. Como regra geral, quanto mais alto, mais curta é a forma e vice-versa.

Justworks projetou esta página inicial pós-clique para fornecer informações sobre preços. Como esta é uma oferta do topo do funil, faz sentido que contenha apenas três campos de e solicite informações muito básicas:

Em contraste, a avaliação gratuita do Autopilot está mais abaixo no funil, portanto, pedir mais informações é aceitável:

Call-to-action

Seu botão de CTA é onde ocorre a conversão da landing page pós-clique, então ele deve se destacar e implorar para ser clicado. Aqui estão os principais aspectos para otimizar seu botão de CTA:

Cor: use a teoria das cores para encontrar um matiz, tom, matiz ou sombra que contraste bem e se destaque do resto da página.
Cópia: “Enviar” e “Baixar” são genéricos e pouco inspiradores. Em vez disso, crie uma cópia personalizada e específica e incorpore "você", "seu", "eu" e "meu" para gerar mais cliques em botões de CTA.
Tamanho: não faça as pessoas pesquisarem o botão - torne-o perceptível. Ele também pode apresentar dicas visuais - como as setas saltitantes na página inicial pós-clique do Volusion
abaixo - para chamar ainda mais atenção:

Rodapé mínimo

a página de destino pós-clique e os rodapés do site não são iguais. os rodapés da página de destino pós-clique não devem conter mapas de sites, links de páginas de produtos ou contas de mídia social. Cada link que você inclui cria uma outra distração e uma maneira adicional para eles saírem de sua página sem converter.

Veja todas essas rotas de fuga que o Infegy oferece aos visitantes:

Se você optar por incluir um rodapé da página de destino pós-clique, certifique-se de que ele exiba apenas informações de direitos autorais atualizadas, termos de serviço e uma política de privacidade, como a Tapstone:

Espaço em branco

O espaço em branco permite que sua página respire para que todos os elementos atraiam a atenção e os visitantes possam navegar em sua página com mais facilidade. Adicionando espaço em branco também:

Diminui a desordem
Melhora a legibilidade
Estabelece hierarquia visual
Faz com que sua página de destino pós-clique pareça mais profissional

Compare as seguintes páginas de destino pós-clique de NASM e Acquisio:

A página do NASM está lotada e pode ser opressora para algumas pessoas porque é difícil decidir onde olhar primeiro e como navegar na página. A página de Acquisio tem espaço em branco suficiente para que seja mais fácil navegar de cima para baixo e oferece uma experiência geral melhor.

Tudo começa com um wireframe de página de destino pós-clique

A criação de um wireframe permite que sua equipe determine a história geral da página, veja quais recursos serão necessários e quanta cópia é necessária. A partir daí, você pode criar uma página de destino pós-clique otimizada com as sugestões acima. Mas, para construir uma página de destino pós-clique personalizada e 100% personalizável, você precisa de uma solução que seja poderosa o suficiente para o trabalho.

Com o Instapage, os profissionais de marketing podem criar páginas perfeitas em pixels com nosso criador de design amigável, editor CSS, alinhamento e agrupamento, teclas de atalho e muito mais. Em seguida, use mapas de calor integrados para teste A / B para conversões ainda maiores e dimensione sua produção com Instablocks ™. Nenhuma outra solução pode ser comparada. Inscreva-se para uma demonstração do Instapage Enterprise hoje mesmo.