Por trás da página de destino: princípios da experiência do usuário que impulsionam as conversões

Ontem, uma campanha de marketing quase quebrou meu mouse.

Como?

Ao me frustrar a tal ponto, quase o lancei do outro lado da sala.

Depois que finalmente me acalmei, percebi que havia uma valiosa lição de marketing a ser aprendida com minha raiva. E aqui está o que é ...

A usabilidade deve ser uma prioridade em sua página de destino pós-clique

Isto é o que aconteceu: eu precisava de um hotel de última hora, então digitei “hotel hoje à noite em Boston” na barra de busca do Google.

Por fim, depois de clicar em um anúncio de pesquisa paga, cheguei a uma página de destino pós-clique específica de um local do HotelTonight. Parecia assim acima da dobra:

Nele, meus olhos foram imediatamente atraídos para o elemento que mais chama a atenção na hierarquia visual: o maior texto da página, que dizia “Ofertas de hotéis de última hora em Boston”.

Eu olhei abaixo disso e vi alguns preços. Em seguida, rolei para baixo para procurar mais listagens. Aqui está o que eu vi:

Havia hotéis, mas nenhum indicador de preço ou disponibilidade. Portanto, presumi que deveria selecionar um para obter mais detalhes. Não precisando de nada extravagante, cliquei no título da lista “Midtown Hotel” para saber mais.

…mas nada aconteceu.

“Vamos tentar de novo”, pensei, antes de clicar no subtítulo abaixo: “Base de Back Bay simples”.

…nada ainda.

“E se eu clicar no rótulo 'básico'?”

Nada.

“Talvez esta lista esteja quebrada. E se eu clicar em Wyndham Boston Beacon Hill? ”

De novo, nada.

Nesse ponto, eu estava frustrado, clicando freneticamente em toda a página. Meu pensamento seguinte, soltei em voz alta: “POSSO APENAS VER UMA LISTAGEM DANIFICADA ?!”

Por que esta página foi tão difícil de usar?

A importância de projetar para a experiência do usuário

Esteticamente, não havia nada de muito errado com esta página. Parecia credível o suficiente para me colocar abaixo da dobra navegando nas listagens.

Mas, há mais para web design do que fazer as coisas parecerem bonitas. A “usabilidade” de uma página descreve o quão eficaz ela é no desempenho de sua função do ponto de vista do usuário. De acordo com Steve Krug, autor de Don't Make Me Think:

Na verdade, [usabilidade] significa apenas garantir que algo funcione bem: que uma pessoa de habilidade e experiência média possa usar a coisa - seja um site, uma torradeira ou uma porta giratória - para o propósito pretendido sem ficar irremediavelmente frustrada.

Infelizmente, muitos designs, tanto online (aquela página inicial pós-clique do HotelTonight) e offline, não são otimizados para o usuário. Se você já puxou uma porta de “empurrar”, você experimentou um design UX ruim.

Em vez de se considerar um idiota, você deve estar se perguntando por que o designer escolheu instalar uma maçaneta de “puxar” na porta de “empurrar”.

Não é você; é o design.

Existem muitos outros exemplos de baixa usabilidade. Em vez de entrar em cada um deles, podemos dizer com segurança que, quando uma interface de usuário não é criada com seu público em mente, pode resultar em uma experiência de usuário ruim.

Online, essa experiência ruim pode ter consequências desastrosas para o seu site. Do pai da usabilidade na web, Jakob Nielsen:

Se um site for difícil de usar, as pessoas vão embora. Se a página inicial não indicar claramente o que a empresa oferece e o que os usuários podem fazer no site, as pessoas vão embora. Se os usuários se perderem em um site, eles irão embora. Se as informações de um site são difíceis de ler ou não respondem às principais perguntas dos usuários, eles saem. Observe um padrão aqui? Não existe tal coisa como um usuário lendo o manual de um site ou gastando muito tempo tentando descobrir uma interface. Existem muitos outros sites disponíveis; sair é a primeira linha de defesa quando os usuários encontram uma dificuldade.

Durante o processo de design, os criadores de páginas de destino pós-clique muitas vezes esquecem que seu objetivo não é mostrar suas habilidades. Em vez disso, é para ajudar outro humano a atingir um objetivo.

Em termos gerais, esse objetivo é avaliar e possivelmente reivindicar uma oferta em sua página de destino pós-clique. Especificamente, você terá que se perguntar estas perguntas antes de começar a projetar:

• Qual é o meu objetivo para esta página de destino pós-clique (impulsionar inscrições, downloads, compras, etc.)?
• Qual é o objetivo específico do meu público quando ele chega a ele?
• O que eles precisam para avaliar minha oferta da maneira mais fácil possível?
• Como faço para que eles reivindiquem minha oferta facilmente?

Para respondê-las, você precisará de três coisas: conhecimento abrangente do seu público-alvo, uma ideia das melhores práticas de usabilidade da página de destino pós-clique e uma visão do que torna uma página de destino pós-clique persuasiva.

O primeiro, você aprende a desenvolver aqui; a segunda, você encontrará nesta postagem do blog; e o terceiro, você pode descobrir no novo recurso Instapage: O guia definitivo para construir uma página de destino pós-clique persuasiva:

princípios de usabilidade da página de destino pós-clique

Cada empresa é única e cada oferta é diferente, mas os princípios básicos para fornecer uma boa experiência ao usuário permanecem os mesmos. Lembre-se desses 5 Cs ao projetar uma página de destino pós-clique para obter a experiência ideal do usuário:

Consistência

Ao construir sua página de destino pós-clique, será tentador se desviar das convenções de design com o objetivo de se destacar entre seus concorrentes. Aqui está porque você não deveria ...

Não tente reinventar a web

Durante a infância da Internet, não era incomum ver designers experimentando layouts e elementos malucos. Dê uma olhada nessas joias:

Na época, não estava totalmente claro como a web seria usada. Portanto, botões de “FAQ” laterais e fundos espaciais pareciam ideias criativas.

Hoje, porém, você não verá mais páginas da web como esta. E isso porque eles violam as convenções de design que aprendemos podem degradar a experiência do usuário. Os fundos espaciais distraem e o texto lateral é desnecessariamente difícil de ler.

É por isso que você deve se concentrar em se destacar com uma USP clara, e não tentando reinventar a aparência da web. Seus botões devem se parecer com botões, não como estrelas ou sinais de parada. Seu logotipo deve estar localizado no canto superior esquerdo da página, não no canto inferior direito.

A consistência é um dos maiores contribuidores para a usabilidade. Para ajudar os visitantes a reconhecer e compreender os elementos da sua página, você deve usar aqueles que são familiares a eles - também conhecidos como aqueles que eles veem em qualquer outro lugar na web.

Vamos voltar à minha experiência frustrante na página de destino pós-clique do HotelTonight: Achei que poderia obter mais informações sobre uma determinada lista clicando nela, porque é assim que quase todas as páginas de destino pós-clique de hotel funcionam. Você clica em uma lista para saber mais sobre ela.

Mas, este não funcionou assim. Não atendeu às minhas expectativas de como as páginas de destino pós-clique de hotéis funcionam, e o resultado foi uma experiência frustrante para o usuário.

A lição aqui?

Coloque os elementos onde os visitantes esperam vê-los. Projete-os da maneira que seus clientes em potencial esperam que eles sejam. Não seja fofo. Ser consistente.

A correspondência da mensagem absolutamente deve estar presente

Outra coisa que os designers da landing page pós-clique tendem a esquecer é o seguinte: a landing page pós-clique não é a primeira impressão que o visitante tem de sua marca - o referenciador é. É por isso que sua página de destino pós-clique precisa cumprir a promessa feita por seu anúncio, e-mail ou resultado de pesquisa paga. Aqui está o que acontece se isso não acontecer, de acordo com o cofundador da Smashing Magazine, Vitaly Friedman:

A maioria dos usuários procura algo interessante (ou útil) e clicável; assim que alguns candidatos promissores são encontrados, os usuários clicam. Se a nova página não atender às expectativas dos usuários, o botão Voltar é clicado e o processo de pesquisa continua.

Para uma correspondência de mensagem perfeita, as palavras em uma página de destino pós-clique, logotipos e até mesmo cores precisam ser consistentes com o referenciador. Desconsiderar essa prática recomendada de design fará com que sua página seja abandonada em um instante.

Clareza

Clareza e consistência estão relacionadas. Quando as pessoas reconhecem um elemento de design, elas têm uma ideia de como ele funciona. Quando esse elemento de design também está claro , não há dúvida sobre sua finalidade. Veja como tornar tudo em sua página fácil para seus visitantes entenderem e usarem:

A cópia deve ser escrita para compreensão

Palavras são difíceis - para as pessoas que as escrevem e também para aqueles que as lêem. Um redator se depara com o desafio de tentar explicar uma oferta claramente quando ele já sabe tudo sobre ela. E os leitores são colocados em uma posição igualmente difícil de tentar entender uma oferta, quando atualmente não sabem nada sobre ela. Algumas dicas sobre como escrever textos abrangentes:

• A menos que você esteja escrevendo para um público com alto nível de conhecimento técnico, remova todo o jargão e presuma que seus clientes em potencial leem no nível da 6ª série.
• Enfatize os benefícios de sua oferta. Recursos de produtos como “bugigangas” e “thingamawhats” não têm poder de persuasão. Em vez disso, deixe as pessoas saberem o que esses recursos permitem que elas façam.
• Substitua palavras ambíguas. A palavra “qualidade” para algumas pessoas significa “alta qualidade”. Para outros, significa "satisfatório". Use descritores melhores para transmitir o valor de sua oferta.

Se eles não conseguem entender por que deveriam se converter, não há chance de seus clientes em potencial o fazerem.

Os botões de CTA devem permitir que os visitantes saibam o que um clique fará

Se você criou um botão que é reconhecível, você já ganhou metade da batalha. A outra metade é permitir que os visitantes saibam o que acontecerá quando eles clicarem em seu botão. Para isso, considere sua oferta.

Se não exigir o pagamento do visitante, escolha um CTA atraente perguntando-se o seguinte: "O que permitirá que os visitantes façam ou se tornem?"

Para um e-book sobre o design da página de destino pós-clique, considere usar "Envie meu e-book" como sua frase de chamariz ou até mesmo algo mais específico como "Torne-me um profissional de design". Aqui está um exemplo de Amy Porterfield:

Por outro lado, se for necessário o número do cartão de crédito, é melhor renunciar a títulos descritivos como o acima e, em vez disso, usar os mais básicos, como "Compre" ou "Doe". A última coisa que você quer é uma multidão de clientes empunhando um forcado que não sabiam que seu cartão seria cobrado quando pressionassem o botão "Torne-me um profissional de design".

Rótulos de formulário e feedback devem ser descritivos

Para preencher o formulário, os visitantes precisam saber exatamente o que você deseja deles. Embora essas dicas possam parecer senso comum, ainda existem muitas formas que não as seguem.

• Não use texto de espaço reservado que desaparece como um rótulo. Foi demonstrado que confunde os clientes em potencial e desafia sua memória. Em vez disso, os rótulos devem estar acima do campo ao qual correspondem.
• As etiquetas devem ser posicionadas próximo ao campo de formulário ao qual correspondem. Espaçamento branco ambíguo ou espaçamento equidistante de outro campo pode fazer um cliente em potencial questionar quais informações ele deve enviar.
• A entrada deve ter 8 letras com um caractere especial? O formulário não pode processar um asterisco? Se um campo requer uma entrada específica, o rótulo deve informar os visitantes.
• As mensagens de erro devem chamar a atenção e ser descritivas. Não use apenas a cor vermelha, mas vários sinais para indicar um problema de entrada, como texto em negrito e um contorno ao redor do campo incorreto. Certifique-se de que eles sabem o erro que cometeram para que possam corrigi-lo na segunda vez.
• Faça uma distinção clara entre campos opcionais e obrigatórios.

Sua oferta deve ser fácil de entender

Por que as pessoas gastam mais com cartões de crédito? Porque gastar dinheiro parece mais real.

Quando você passa um cartão, o dinheiro não troca de mãos; a cobrança não aparece em seu extrato bancário até mais tarde; e se você não verificar o saldo da sua conta, é quase como se a compra nunca tivesse acontecido.

Considere um experimento de pesquisa conduzido durante uma sessão de educação financeira para funcionários do ING. Dois grupos de participantes foram convidados:

1. se eles se inscreverem em um plano de 401k.
2. quanto eles estavam dispostos a economizar regularmente.

Ao primeiro grupo foram apresentadas apenas essas questões. O segundo grupo, porém, recebeu uma diretriz adicional: imagine todas as coisas positivas em sua vida que aconteceriam se você economizasse mais.

O resultado foi um aumento de 20% nas matrículas no grupo 2 e um aumento de 4% no valor que as pessoas economizariam.

O que isso significa para sua oferta de página de destino pós-clique?

Se você quer que as pessoas entendam seu valor, você deve apresentá-lo de uma forma que explique claramente seus benefícios. E muitas vezes, isso significa usar recursos visuais em vez de texto.

Para algumas ofertas, os infográficos funcionam melhor. Para outros, vídeos explicativos ou fotos de heróis farão o trabalho melhor.

A sua escolha depende do seu público e da sua oferta. Mostre em vez de dizer e teste até descobrir o que vende melhor seu produto ou serviço.

Concisão

O que pode ser a coisa mais importante a lembrar ao projetar sua página também pode ser o mais comumente desconsiderado: você está projetando para pessoas com pouco tempo e atenção.

Ninguém está navegando na sua página de destino pós-clique para se divertir. Eles clicaram em um anúncio ou link de um e-mail e querem saber, o mais rápido possível, se vale a pena reivindicar sua oferta. Que significa…

O texto deve ser otimizado para skimming

“Livre-se de metade das palavras de cada página e, em seguida, livre-se de metade do que sobrou”, diz Krug em seu livro. Depois de cortar 50% da cópia da página de destino pós-clique, é importante tornar o que resta passível de leitura , porque as pessoas não gostam de ler.

Minimize a verbosidade eliminando advérbios fofos e frases comuns. Use marcadores e subtítulos para separar blocos de texto intimidante. Adicione efeitos como negrito e itálico para tornar as palavras importantes visíveis.

A hierarquia visual deve comunicar a importância

A maneira como o conteúdo da sua página é organizado e manipulado tem muito a ver com o que os visitantes veem e o que perdem. Na página de destino pós-clique do HotelTonight, perdi a frase de chamariz, mas notei o título “Ofertas de hotéis de última hora em Boston”.

Porque?

Porque seu tamanho o torna o elemento que mais chama a atenção acima da dobra. Quando os usuários têm pouco tempo (o que é sempre), eles usam dicas visuais como localização, cor, tamanho etc. para determinar o que é importante na página. Alguns exemplos de como:

• Maior = mais importante
• Posicionamento superior = mais importante
• Maior contraste = mais importante

Saiba mais sobre como usar a hierarquia visual para guiar os visitantes até o botão do CTA aqui.

Seu formulário deve ser o mais curto possível e fácil de preencher

Será tentador capturar todos os tipos de informações do cliente potencial em seu formulário de página de destino pós-clique - de nome e e-mail a função e orçamento. Mas, se você não precisa absolutamente de todas essas informações, não deve solicitá-las.

A melhor geração de leads é obtida por equipes de marketing que sabem o mínimo necessário para qualificar um cliente potencial. Para alguns, serão três campos de informação. Para outros, serão dez.

Independentemente do tamanho do formulário, você deve torná-lo fácil de preencher. Permita que os visitantes enviem suas informações com o preenchimento automático de um clique social e preencha previamente os campos que normalmente são respondidos com a mesma entrada (por exemplo, se você capturar "país" e souber que a maioria de seus clientes em potencial é dos Estados Unidos, preencha previamente “Estados Unidos” é uma boa prática).

Além disso, apresente os campos em um layout de coluna única para evitar interromper o impulso descendente do visitante, a menos que sejam campos relacionados (como cidade, estado e código postal). Então, colocá-los próximos um do outro pode ajudar um visitante conceitualmente, bem como encurtar o comprimento percebido de seu formulário.

Distrações devem ser eliminadas

Parte de apresentar sua oferta de forma concisa é eliminar todas as outras coisas ao redor dela que têm o potencial de diminuir sua taxa de conversão. Isso significa se livrar de ...

• seu menu de navegação
• o link para sua página inicial em seu logotipo
• frases de chamariz concorrentes que anunciam outras ofertas
• links externos em seu rodapé

Quando recebemos muitas opções para clicar em uma página da web, um princípio conhecido como Lei de Hick entra em ação. Miles Soegaard explica isso claramente no blog da Interaction Design Foundation:

A Lei de Hick é uma ideia simples que diz que quanto mais opções você apresentar aos usuários, mais tempo eles levarão para tomar uma decisão.

Mas a pesquisadora Sheena Iyengar descobriu que a sobrecarga de escolhas pode fazer mais do que aumentar o tempo necessário para tomar decisões.

Em um experimento específico, ela e o colega Mark Lepper montaram uma mesa expositora em uma mercearia, dando US $ 1 em qualquer pote de geleia para quem provasse. No primeiro dia, eles ofereceram aos clientes 24 variedades diferentes da propagação. No segundo dia, eles ofereceram apenas 6.

Na conclusão do experimento, eles descobriram que a grande tela chamava mais atenção, mas gerava 10 vezes menos vendas.

Além disso, quando as pessoas têm mais opções, ela descobriu que é mais provável que elas:

• demora na escolha, mesmo quando vai contra seus próprios interesses
• fazer escolhas piores
• escolher coisas que os deixem menos satisfeitos, mesmo quando têm um desempenho objetivamente melhor

Em uma palestra TED, ela diz especificamente o seguinte:

Na verdade, o que vemos cada vez mais é se você está disposto a cortar - livrar-se dessas opções estranhas e redundantes - bem, há um aumento nas vendas; há redução de custos; há uma melhora na experiência de escolha.

Veja tudo a seguir para outras lições reveladoras que envolvem a otimização de escolha:

Credibilidade

A credibilidade desempenha um papel ainda maior em uma página de destino pós-clique do que na página da web comum. as páginas de destino pós-clique são projetadas especificamente para fazer com que os visitantes forneçam informações pessoais e, em alguns casos, dinheiro. Isso significa que você precisa fazer com que eles confiem em você. Veja como:

Sua autoridade deve ser comunicada por meio do design

Ao avaliar a autoridade de alguém, o psicólogo Robert Cialdini propõe que procuremos três coisas especificamente:

• Títulos - Dr., Prof., Ph.D., Presidente, Fundador, CEO, Especialistas da indústria
• Roupas: uniformes, ternos, roupas (uniformes do exército, ternos caros, jalecos)
• Armadilhas: acessórios que vêm com certas funções (por exemplo, crachás de polícia, religiosos, rosários, carros bonitos, etc.)

No entanto, online, sem fotos ou conhecimento das pessoas que dirigem uma empresa, os clientes em potencial não podem procurar por essas coisas. Em vez disso, eles avaliarão seu projeto.

Se sua página parece ter sido construída em 2002 por um estagiário que faz web design, você não vai parecer confiável. Por exemplo, isso se parece com o site de Suzanne Collins, autora do best-seller Jogos Vorazes?

Não pode ser, certo?

Pode, e realmente é.

A pesquisa mostra que, online, 94% das primeiras impressões estão relacionadas principalmente ao design e apenas 4% estão relacionadas ao conteúdo real de um site. Certifique-se de que suas páginas da web tenham a aparência e o estilo que os usuários esperam deles.

Os emblemas de credibilidade devem ser exibidos com destaque

Autoridade tem a ver com aparência, mas credibilidade prova que você é capaz. Se possível, mostre o máximo possível dos itens a seguir:

• Quaisquer prêmios que você ganhou
• Publicações ou programas proeminentes nos quais você foi destaque
• Experiência que você tem
• Parcerias com empresas de confiança
• Comentários de clientes satisfeitos

Aqui está um ótimo exemplo do HomeBay:

Usar indicadores de credibilidade é uma maneira simples de provar que você é tão qualificado quanto diz ser; porque dizer às pessoas que você é o melhor sem mostrar a elas não as convencerá de nada.

Conveniência

Em um mundo onde os usuários esperam páginas altamente acessíveis e a principal fonte de tráfego de pesquisa penaliza as que não o são, você tem apenas uma opção: adaptar-se ou falhar.

Se sua página não seguir essas regras por conveniência, sua taxa de rejeição aumentará.

Sua página deve carregar rapidamente

Dados do Google indicam que 53% das pessoas abandonarão uma página se ela demorar mais de três segundos para carregar. E a partir daí, a probabilidade de salto fica ainda maior:

Considerando a média de carregamento da página de destino pós-clique em dispositivos móveis em 22 segundos, seus dados são problemáticos. Evite perder a maioria dos visitantes seguindo as dicas a seguir:

• Minimize os elementos da página. De acordo com o Google, 70% das páginas testadas tinham mais de 1 MB, 36% tinham 2 MB e 12% tinham mais de 4 MB. Por meio de uma conexão 3G rápida, 1,49 MB leva cerca de 7 segundos para carregar. A causa são muitos elementos da página (imagens, títulos, botões, etc.).
• Crie orçamentos de desempenho. Determine a rapidez com que você deseja que sua página carregue - também conhecido como "o orçamento". A partir desse orçamento, determine os elementos que você pode incluir em sua página para cumpri-lo.
• Reduza as imagens. Favoritos, logotipos e imagens de produtos podem contribuir facilmente para ⅔ do tamanho de uma página. As páginas de alta conversão contêm 38% menos imagens.
• Use menos JavaScript. JS interrompe a análise do código HTML, o que diminui a velocidade na qual uma página de destino pós-clique pode ser exibida aos visitantes. Programas como AMP e AMP para anúncios fornecem aos desenvolvedores uma estrutura para criar páginas sem JavaScript, fazendo com que carreguem quase instantaneamente.

Para mais algumas dicas sobre como acelerar sua página de destino pós-clique, leia este post.

A faixa de acessibilidade deve ser uma prioridade

Nem é preciso dizer, mas vou lembrá-lo mesmo assim: se as pessoas não puderem acessar sua página no dispositivo de sua escolha, elas não a usarão de forma alguma. Eles não beliscarão para aumentar o zoom e não se atrapalharão com o botão de call to action.

Sua página deve ser projetada de forma responsiva, o que significa que deve se ajustar à tela de qualquer dispositivo. E todos os seus elementos devem ser fáceis de usar.

Preencher um formulário com os polegares é uma dor se os campos forem muito pequenos. Tocar em um botão de CTA é difícil se sua área não for tão grande quanto a sua almofada de dedo. O desktop não é mais a principal fonte de tráfego da Internet, então, se você ainda não otimizou suas páginas para celular, a hora de fazer isso é ontem.

A experiência do usuário é diferente para cada página

Incontáveis ​​elementos de design de página de destino pós-clique - de cores e formas a palavras e layouts - afetam a forma como as pessoas experimentam sua página de destino pós-clique.

A melhor maneira de determinar o impacto deles em sua taxa de conversão é testando como as pessoas se comportam especificamente em sua página. E lembre-se: a maneira como os visitantes usam sua página hoje pode não ser a forma como eles a usam amanhã. Portanto, nunca pare de testar.

Para começar a testar e otimizar facilmente a experiência do usuário da página de destino pós-clique, inscreva-se hoje para uma demonstração do Instapage Enterprise.