O Guia Definitivo Sobre Design para Conversão

Recentemente, eu questionei no Facebook os meus amigos designers digitais o seguinte: Para você, qual a coisa mais importante que um designer deve se preocupar e gerar com um projeto? As respostas que eu obtive foram interessantes, pois notei uma grande diferença.

Mauricio Campos: Resultado.
Tereza Cristina Alux: Interface amigável e intuitiva
Felipe Saueia: Dinheiro? Hahahaha
Tereza Cristina Alux: Concepção visual alinhada à marca
Guilherme Gonzalez: Resultado [quando se trata de redesign] e Interfaces Amigáveis ficam no topo
Claudio Frouche: Atender ao máximo a expectativa do cliente, entregando exatamente o que ele pediu, no prazo, custo e escopo acordado.
Bruno Vinicius Silva: Entender o cliente / usuário.
Alexandre Collart: Entregar realmente o que o cliente pede, sem vulcões, tsumanis ou fogos de artifícios no projeto.

Interessante ver a diferença de pensamentos, não? Eu já concordei com todos, em momentos diferentes e em projetos diferentes. Muitos citaram a mesma palavra, e eu também acredito no foco em resultados. E quando eu falo em resultados, penso nele de diversas formas, seja com uma entrega no prazo, seja com alta qualidade, mas principalmente gerando resultado para os clientes. E se o cliente passar a converter mais, e vender mais, eu considero que fiz um bom trabalho. E design com foco em resultados tem muita coisa em comum com o Design para Conversão, conforme você verá neste guia que preparei.

Torne-se um Designer de Conversão com estas dicas

Então você decidiu que quer se tornar um designer de landing pages? Você pode estar pensando que vai ser fácil — no final das contas, templates de landing pages são apenas uma página, o que seria muito mais fácil do que criar um site completo, certo? Errado! As regras do design mudam um pouco quando se pensa em construir landing pages com foco em design de conversão, ou seja, focadas em resultados.

Com base neste ótimo material do Unbounce, nós criamos o O guia definitivo sobre Design para Conversão. Aproveite!

O que é uma Landing Page?

Antes de entrarmos nos princípios de design por trás das landing pages, vamos trabalhar alguns conceitos básicos. Uma landing page é uma página independente, específica para uma campanha. O objetivo dela é fazer com que os seus visitantes completem uma ação única. Ela não é o seu site, muito menos a home do seu site.

Sites são espaços centrais para uma marca, e são para pessoas que encontram sua empresa por meio da busca orgânica ou que precisam de uma referência ou de uma olhada na fase de pesquisa da sua jornada de compra. Eles não são o alvo ideal para determinadas campanhas de marketing.

Campanhas de marketing possuem um único propósito — compre isto, inscreva-se aqui, assine este serviço — e dessa forma, precisam de uma experiência muito mais focada. A maior razão para usar uma landing page versus uma homepage para o público-alvo de qualquer campanha que busque tráfego (CPC, e-mail, mídias sociais) é por causa de algo chamado “relação de atenção” (attention ratio, em inglês).

A relação de atenção é a relação de pontos de interação (links) em uma página, com o número de ações pretendidas nessa página (que para uma campanha sempre é 1:1). Em uma homepage convencional, essa taxa é normalmente em torno de 40:1, significando que há 39 ações de distração e uma ação desejada.

O que isso significa para mim como designer?

Os dias em que era aceitável criar uma linda experiência web, terminar o trabalho e ir embora com o dinheiro no bolso acabaram. Conversão é a palavra quente em tudo o que se refere a web atualmente. Isso quer dizer que o propósito, impacto e sucesso, podem ser, e estão sendo mensurados. E se uma landing page não está fazendo com sucesso o seu papel de converter visitantes em clientes, então não foi criada corretamente.

Design é o único fator em altas taxas de conversão. O texto tem uma enorme importância. Mas o melhor texto do mundo não funciona se o visitante estiver distraído, ofendido — sabemos que um design ruim pode ser francamente ofensivo — ou confuso. A boa notícia é que combinando alguns princípios simples de design e o básico de psicologia, você pode mudar totalmente o seu foco para criar experiências digitais que encantem e convertam. Vamos discutir os 7 princípios do Design Centrado na Conversão, e um pouco de psicologia.

Os 7 princípios das Landing Pages de acordo com o Design Centrado na Conversão

Criar uma landing page otimizada não é exatamente a maior moleza. Se você tiver como objetivo ter uma taxa de conversão respeitável, claro.

Que tal testar os seus conhecimentos para saber o quanto você sabe sobre Design para Conversão?

Design de Conversão é uma especialidade focada em criar experiências que atinjam um objetivo único. O objetivo é guiar o visitante para completar uma ação específica, utilizando um design persuasivo e gatilhos mentais como meios de aumentar as conversões. E as landing pages são o coração do Design Centrado na Conversão.

Como você consegue persuadir um visitante a completar seus objetivos de conversão usando design? Há vários elementos de design que guiam a atenção do visitante para a área desejada para interação. Gatilhos psicológicos também podem encorajar a participação.

Então, vamos mergulhar nestes dois tipos de elementos do Design de Conversão para que você comece a criar landing pages que realmente convertam.

1 — Elemento de design: Encapsulamento

O nome é estranho, vem do inglês Encapsulation, ou seja, colocar os elementos em cápsulas, caixas. Essa é uma técnica clássica para enganar os olhos do visitante e criar um efeito visual de túnel.

Você pode pensar nisso em algo como criar uma janela em sua landing page onde o seu call-to-action é a visão. Nessas fotos, o cenário cria uma moldura, uma caixa, impedindo o seu olhar de procurar outras coisas na foto. Procure utilizar formas dinâmicas fortes para envolver os seus pontos de interesse.

2 — Elemento de design: Contraste e Cor

Usar contraste é um conceito razoavelmente simples que se aplica em todo o espectro de cores, mas é mais facilmente visto em mono-cromático.

A dica que eu dou é, quanto mais você conseguir fazer o seu call-to-action se destacar do que está ao redor mais fácil ele poderá ser visto.

Se você tem um monte de texto preto e cinza em um fundo branco, então um call-to-action preto ou branco não terá um contraste legal, você se daria melhor com um elemento colorido. Entretanto, se a página tem um design muito simples, sem grandes detalhes ou textos, um botão grande branco ou preto pode trazer um efeito dramático.

As cores podem ser utilizadas para criar respostas emocionais de seus visitantes. Laranja, por exemplo, é uma cor conhecida por remeter a sentimentos positivos e pode ser uma ótima escolha de cor para o seu call-to-action. Eu listei abaixo cada uma das cores juntamente com o impacto psicológico delas no design.

Vermelho: perigo, pare, negativo, entusiasmo, quente;
Azul escuro: estável, calmo, confiável, maduro;
Azul claro: jovem, masculino, legal;
Verde: crescimento, positivo, orgânico, ir, reconfortante;
Branco: puro, limpo, honesto;
Preto: sério, pesado, morte;
Cinza: integridade, neutro, legal, maduro;
Marrom: sadio, orgânico, despretensioso;
Amarelo: emocional, positivo, cuidado;
Dourado: conservador, estável, elegante;
Laranja: emocional, positivo, orgânico;
Roxo: jovem, contemporâneo, realeza;
Rosa: jovem, feminino, caloroso;
Tons pastel: jovem, suave, feminino, sensitivo;
Tons metálicos: elegante, duradouro, rico.

Um detalhe importante é o efeito de contraste causado pelas cores. Essa ideia empresta conceitos do uso de espaço em branco e outras técnicas de contraste, pois também busca criar um efeito de isolamento pela diferença.

Algumas pessoas acreditam que a cor do botão, por exemplo, é irrelevante, mas isso não conta quando o fator é o contraste das cores. Um call-to-action vermelho pode performar tão bem quanto um azul, mas se a landing page for predominantemente azul, o botão vermelho atrairá muito mais atenção.

A ideia é que a cor seja tão diferente que o visitante não consiga olhar outra coisa, senão a área de contraste de cores. Nesse caso, você deve fazer com que o seu alvo de conversão domine a página e atraia os olhares.

3 — Elemento de design: Direcionamento

O direcionamento no Design para Conversão se resume basicamente em indicações visuais que levam para uma área de foco em suas landing pages. Elas ajudam a guiar os seus visitantes para as ações desejadas, deixando claro o propósito da página assim que eles a visualizam. Os tipos de direcionamento incluem setas, caminhos e linhas direcionais.

As setas, como elemento de direcionamento, são diretas e funcionam muito bem. Com poucos segundos na sua página, guiar o usuário para o call-to-action é uma boa jogada. As setas permitem que você diga: ignore todo o resto e preste atenção aqui, por favor.

A dica de ouro é: para chamar atenção para os elementos realmente importantes da sua landing page, experimente criar uma sequência de setas, definindo um caminho para o visitante seguir, levando ao seu call-to-action. Pode soar estranho encher sua landing page de setas, mas acredite, funciona.

Caminhos e estradas são imagens que naturalmente guiam o olhar para onde levam, pois acionam um gatilho em nosso cérebro, nos fazendo pensar que devemos segui-los. Esta imagem traz um exemplo em forma de fotografia, mas você pode simplesmente criar uma landing page com linhas convergentes, com formas simples como triângulos, guiando seus visitantes até um call-to-action.

Nesta fotografia, o call-to-action seria inserido no final da estrada, pois é para lá que o caminho guia o seu olhar.

Os olhos também possuem um poder sugestivo muito forte. O cérebro humano é programado para entender o propósito e o uso dos olhos, e o significado que existe quando olha para alguma coisa. Isso quer dizer que, quando alguém estiver olhando em alguma direção, provavelmente você também se sinta persuadido a olhar na mesma direção.

Tente olhar em outra direção que não a mesma para onde o gato está olhando. Isso mesmo, é ali que iria o seu call-to-action.

4 — Elemento de design: Espaços em branco

Os espaços em branco ou vazios, o white space, são basicamente uma área vazia ao redor de uma área de maior importância. Também pode-se dizer espaço vazio, porque na verdade a cor deste espaço vazio não é importante. O propósito é usar um posicionamento que permita seu call-to-action se destacar dos elementos ao redor e dar aos olhos uma única coisa para prestar atenção.

A dica de ouro é: dê aos elementos da sua landing page espaço de respiro para criar um efeito de calma e permitir que o call-to-action realmente se destaque do resto do design.

A psicologia da conversão

A segunda parte dos elementos do Design para Conversão diz respeito aos gatilhos emocionais que podem ajudar a aumentar a motivação dos seus visitantes. Os elementos psicológicos são: urgência e escassez, experimente antes de comprar e a validação social.

5 — Elemento psicológico: Urgência e escassez

Esses são motivadores psicológicos muito comuns, que utilizam a urgência (tempo limitado) e a escassez (estoque limitado), conceitos simples e que podem ser utilizados de muitas formas.

Criar gatilhos mentais de urgência e escassez é um exercício, principalmente de escrita, mas também cabe a você apresentar bem essas informações com o design. Ao mostrar ao seu visitante que ele tem um prazo para fazer uma ação, que o produto é escasso e/ou por tempo limitado, você pode atingir as metas de conversão de uma maneira muito mais fácil.

Compre agora, não perca. Já estamos acostumados a ouvir essas frases, pois afirmações de urgência são usadas para nos persuadir a fazer uma decisão de compra no impulso. Esse tipo de gatilho tende a acelerar o momento de decisão, pois qualquer produto ou serviço que esteja menos disponível passa a ser mais desejado.

6 — Elemento psicológico: Experimente antes de comprar

Um dos exemplos mais comuns do “Experimente antes de comprar” são quando as pessoas experimentam uma uva de um bonito cacho no supermercado ou na feira. Todos nós já fizemos isso. Essa parece ter se tornando uma forma de roubo mundialmente aceita, apesar de algumas pessoas sentirem mais culpa do que outras.

Só uma uvinha não vai fazer falta!

Como um designer focado em conversão, você pode aprender com isso, deixando seus visitantes experimentarem o seu produto sem medo de qualquer recriminação. Ou seja, ofereça um gostinho do seu produto de graça para que o visitante possa experimentar antes de comprar, um preview do que você está vendendo, ou até um free trial.

É claro que muita gente pode acabar decidindo não comprar o seu produto ou serviço, mas em troca desta pequena uva, você pode, por exemplo, passar a ter o contato de uma lead qualificada e que pode realmente estar interessanda em conhecer mais sobre o seu produto ou serviço.

Além disso, liberar uma parte do seu produto antes de ser comprado faz a sua empresa parecer mais honesta, isso aumenta a confiança e pode ser um ótimo fator para alavancar suas conversões.

7 — Elemento psicológico: Validação social

A validação social é um gatilho emocional que ocorre quando as pessoas assumem que as ações de outros refletem o comportamento mais indicado naquela situação. Neste elemento, entram depoimentos, textos e imagens, avaliações e feedbacks e outros dados de sucesso. Aqui entram as estatísticas e provas de um determinado grupo, de forma a influenciar o visitante a seguir o mesmo caminho.

Basicamente, você está dizendo ao seu visitante: estas pessoas usaram meu produto e gostaram, e você também deveria fazer como elas. Mas não basta um depoimento aleatório dizendo que o seu produto é o melhor. Aqui, você precisa pensar no público que deseja atingir, escolher pessoas com o perfil semelhante ao dele, com atuação, objetivos e problemas que conversem com os do seu público-alvo.

Depoimentos também podem ser um ótimo fator de confiança, especialmente se vierem de tipos de negócio parecidos ou de empresas conhecidas pelo seu público.

Design para conversão em resumo

Use formas marcantes para delimitar as áreas de interesse. Por exemplo, para um formulário, a melhor forma de fazer isso é criar uma caixa, delimitando o conteúdo do resto da página, visando destaca-lo.

Você pode utilizar a mesma tonalidade de cores para toda a sua landing page, exceto para o call-to-action. Faça ele saltar da página. E teste isso simplesmente levantando da sua cadeira e observando a landing page de longe.

Chame a atenção para os elementos mais importantes da landing page utilizando elementos como setas ou linhas de visão.

Os espaços em branco buscam utilizar áreas vazias para guiar o olhar do visitante para áreas importantes.

Deixe os seus visitantes experimentarem uma uva do seu conteúdo e facilite downloads e acesso a conteúdo gratuito.

Design para Conversão possivelmente é a próxima evolução pela qual o design passará no mundo dos negócios. Com a bagagem do material que eu trouxe para você aqui, você poderá deixar seus clientes muito felizes quando as taxas de conversão deles baterem recordes.

Então, quando você estiver criando suas landing pages centradas em conversão, lembre-se de passá-las por cada um dos 7 elementos do Design para Conversão para se certificar de que elas irão cumprir com o desejado.

E aí, você gostou do nosso guia para o Design Centrado em Conversão? Ficou com alguma dúvida?
Entre em contato, compartilhe, comente e deixe as suas impressões.

Grande abraço e até o próximo artigo
Felipe Melo