Como aumentar a taxa de conversão aplicando os fundamentos do design?

Guilherme Harrison
Guilherme Harrison - 23 de junho de 2017
Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+

Conhecendo a realidade do mercado, sabemos que não é sempre que os departamentos de comunicação que trabalham com metodologias de inbound marketing têm disponível designers profissionais dedicados para o desenvolvimento de peças gráficas. Especialistas das mais variadas áreas precisam arregaçar as mangas e se aventurar no desenvolvimento de ebooks, landing pages e apresentações se apoiando no conhecimento adquirido apenas como observador.

Pesquisando um pouco na internet é fácil encontrar artigos que mostram resultados de testes AB, estruturação hierárquica para web e estratégias para otimizar a taxa de conversão e conduzir a atenção do seu usuário. Ainda sim, é difícil encontrar material que te apresente os fundamentos para uma boa diagramação, qual tipografia correta, como utilizar cores.

Pensando nessa demanda, criamos esse artigo para que você consiga criar materiais assertivos que prendam a atenção do usuário.

Compreendendo o design

Ao contrário do que muita gente pensa, design não é uma forma de arte, a própria nomenclatura se relaciona mais ao aspecto projetual que necessariamente o estético. Claro, todo mundo gosta de ver projetos bonitos, mas compreendendo que “beleza” é um conceito subjetivo, o design existe para que o projeto funcione. Os melhores projetos de design são aqueles que não são notados pelo usuário.

Mas como isso se relaciona com Inbound Marketing?

Como tudo na web, o primeiro aspecto que chega ao usuário é o visual. Um bom projeto gráfico pode ser determinante para que ele, o usuário, se mantenha engajado na leitura do conteúdo, que é uma estratégia essencial do marketing. A programação visual se ampara nas mais diferenciadas áreas do conhecimento como, fisiologia dos olhos, estudos de como o cérebro se comporta na percepção, ordem dos elementos visuais e convenções sociais (leituras que o subconsciente faz baseados em experiências prévias e aspectos sociais recorrentes).

Como escolher a fonte? Como saber se fonte é adequada?

Quando avaliamos a tipografia de um projeto gráfico, o primeiro passo é a escolha adequada da família que será utilizada. A má utilização de fontes pode acarretar não só na dificuldade da leitura mas também no estranhamento do usuário que, mesmo sem entender o motivo, sente desconforto quando o conteúdo não condiz com o desenho da tipografia.

As convenções sociais contemplam quase todas as etapas do design e estão presentes também na tipografia. Para entender, recorreremos ao contexto histórico: Até o final do século XIX existiam apenas famílias serifadas, ou seja: fontes com traços nas extremidades das hastes. Estes traços eram utilizados para se entalhar letras nas pedras e evitar acúmulo de poeira no período Romano e permaneceram como padrões nos desenhos de fontes pelos séculos que se seguiram. Por sua vez, as fontes sem serifa (sans serif) surgiram no início do século XX e eram conhecidas como fontes grotescas, tornando-se populares apenas no período modernista pós Segunda Guerra Mundial.

Fontes serifadas:

taxa de conversão

Em decorrência do seu papel na história, fontes serifadas ou Neo Romanas a exemplo da Times New Roman, despertam no subconsciente do usuário a percepção de forte linha tradicional, auxiliando na taxa de conversão de textos jurídicos, históricos, políticos e veículos de notícias tradicionais.

Fontes sans serif:

taxa de conversão

Fontes não serifadas a exemplo da Helvética ou Arial, são mais flexíveis, sendo bem recebidas em textos que falam de tecnologia, modernidade, contemporaneidade.

Outros estilos mais artísticos ou cursivos podem funcionar para títulos mas, utilizá-los em textos corridos dificulta a leitura. Isso ocorre pois, diferente do que se pensa, o processo de leitura de uma pessoa adulta é feito quase que inteiramente pela interpretação do “desenho” da palavra completa que o cérebro busca da memória (bloco ótico) e não pela decodificação de cada letra separada. Isso pode ser percebido quando nos deparamos com uma palavra que não temos hábito ou não fazem parte do nosso vocabulário, geralmente lemos de forma mais lenta, quase soletrando na nossa cabeça.

Alguns estudos apontam as serifas ajudam na legibilidade das palavras como bloco ótico, aglutinando melhor as letras e criando uma linha contínua que conduz a leitura, por isso são amplamente a escolha de grandes jornais e veículos de comunicação e projetos editoriais.

Mas como escolher a fonte adequada para os títulos?

É importante observar o seguimento ou conteúdo do seu material. Fontes narrow funcionam melhor para segmentos industriais, engenharia e construção civil, fontes com serifas grossas e quadradas (slab) funcionam bem para tecnologia e TI pois se assemelham às primeiras fontes em painéis de programação pré-sistemas operacionais gráficos, fontes caligráficas são bem recebidas em segmentos cerimoniais, holísticos, religiosos, fontes comic para cultura pop, quadrinhos e segmentos infantis.

DIAGRAMAÇÃO E PARÁGRAFOS

Talvez o ponto mais importante para você, especialista de Inbound que pretende criar um material rico que funcione, é na escolha tipográfica para os blocos de texto. Afinal, é aqui que seu material (e, subconscientemente ou não, você) será avaliado.

Tipos de parágrafo:

Existem duas formas distintas de separar parágrafos. A mais tradicional, onde a primeira linha sofre um recuo para a direita mas não existe espaçamento vertical. Entretanto, no parágrafo conhecido como Americano, os blocos são separados verticalmente, não existindo o recuo da primeira linha.

taxa de conversão

Não existe regra quanto a quando é mais recomendada a utilização de cada um, ficando a critério profissional escolher o de sua preferência porém, não é adequado que os dois estilos coexistam em um texto.

Alinhamento:

Outros pontos relativos a diagramação são fundamentais de se observar como a justificação do texto, qual a mais adequada? Também não há uma regra, mas é importante se observar as especificidades.

Textos alinhados à direita são indicados apenas para legendas, infográficos e pequenos blocos de informação, não sendo usual para grandes volumes de texto.

Alinhados à esquerda (sem justificação) são mais fáceis de se utilizar, embora, quando se está trabalhando com colunas lado a lado, se o espaçamento entre as elas não for adequado, pode gerar confusão para se entender onde acaba e começa outra coluna.

A utilização de textos justificados é mais visualmente harmonioso mas exige uma atenção maior a certos detalhes como a hifenização (separação da palavra quando a linha é quebrada) ou espaçamento entre palavras. Nesse modelo de justificação a hifenização torna-se imprescindível para impedir o espaçamento irregular entre as palavras. No entanto, justificar textos em páginas na web ou landing pages pode gerar problemas com a separação das palavras pois no CSS, linguagem que determina a formatação dos elementos, a hifenização das palavras está (por incrível que pareça) ainda em caráter experimental, não sendo implementado nem nas versões mais recentes dos navegadores. Isso cria os famosos caminhos de rato que são espaçamentos irregulares entre palavras.

taxa de conversão

Deve-se tomar cuidado também com as chamadas viúvas que são a primeira ou a última linha de um parágrafo sobrando em uma página, interrompendo de forma irregular a leitura, a melhor forma de se contornar esse problema é trabalhar as colunas para dividir melhor o texto, deixando duas ou mais linhas no último parágrafo ao fim de cada página ou coluna.

Formatação, tamanho e espaçamento das fontes:

Detalhes como o tamanho, espaçamento entre letras, palavras e linhas também são fundamentais legibilidade. O tamanho mínimo recomendado para fontes em legendas e informações complementares na web é de 12px. Para grandes volumes de texto é mais recomendável partir de 14px para que a leitura não cause esforço excessivo do usuário (variando dependendo da fonte e considerando densidade de pixels de 72ppi).

Geralmente, ferramentas de formatação de texto e diagramação já mantém por padrão o mínimo necessário dos espaçamento para uma boa legibilidade. Esses valores podem ser alterados porém é preciso ter cuidado, exageros para mais ou para menos podem dificultar bastante a leitura e tirar a clareza dos textos.

Um erro comum e que pode prejudicar a sua taxa de conversão é acreditar que as fontes precisam de alto contraste para ter melhor leitura. Contrastes muito fortes causam saturação na retina do leitor e trazem desconforto, desinteresse e até fadiga, especialmente quando se lê em telas eletrônicas. A visão é o processo que mais consome energia do cérebro. Para fundos claros é sempre recomendável cinza escuro (ex: 85% de preto), o que torna a leitura mais leve e confortável para os olhos.

Como escolher as cores?

Pode parecer simples, mas cor é um dos pontos mais complexos e delicados de se trabalhar em um projeto gráfico, nesses processo é preciso entender um os olhos percebem as cores, como o subconsciente interpreta e como podemos utilizar esse conhecimento.

Na verdade, estamos chamando “cor, brilho e saturação” de somente “cor”, para simplificar esta sessão e deixá-la menos complexa.

Círculo cromático

círculo cromático

Isaac Newton, descobriu que a luz branca é a soma dos espectros de cores: vermelho, laranja, amarelo, verde, azul, índigo (variação do azul) e violeta (cor próxima do roxo e do púrpura). Newton organizou estas cores em um círculo, chamado círculo cromático.

Como obter uma poderosa ferramenta de composição de cores

Abra o site Adobe Color (https://color.adobe.com) para visualizar a roda cromática, entender suas harmonizações e, de quebra, construir paletas harmônicas de forma fácil e visual.

Variações cromáticas

Cores Primárias: Cores primárias são tonalidades puras que fundidas podem formar todas as outras paletas existentes. Essas cores são o vermelho, amarelo e azul.

Secundárias: Demais cores do círculo que são obtidas através da fusão das primárias, são o verde, violeta e o laranja.

Terciárias: conseguidas a partir da fusão das secundárias.

Harmonização das cores

Imagine que você está sem companhia, sem saber o caminho certo, em uma floresta no centro-oeste brasileiro. Você não tem mais comida nem bebida no seu cantil. A mata é densa e você tem dificuldades de encontrar um caminho para trilhar. Tudo ao seu redor é verde. Você está há tantos dias andando pela floresta que você passa a notar que as folhas, galhos, troncos, flores e gramas têm tonalidades diferentes de verde. Você aprende a notar que determinada planta, que tem um caule de um verde amarelado, é seguro para comer e é bastante suculento. Agora imagine que você viu um ponto vermelho em meio a tanto verde. Ou algo amarelo com manchas pretas. Ou, na melhor das hipóteses, uma linha azul, mais à frente.

A evolução fez com que você não precise “aprender” a notar essas cores. Você simplesmente sabe que vermelho e amarelo pode ser perigo, enquanto azul pode ser sua salvação. E seu cérebro não perde tempo para detectar isso. Estudos indicam que você nota a presença desses contrastes antes mesmo de você processar a forma, dando a oportunidade para uma reação instintiva.

Abaixo, vamos demonstrar como esses poderes evolucionais que temos são usados para instigar o usuário a uma ação, talvez sem mesmo que ele note que isto está acontecendo.

Cores complementares

As cores complementares são as cores que compõem o extremo nas extremidades representadas no círculo cromático. Sangue sobre folhas verdes; uma onça pintada ou um tigre amarelo numa tarde escura; um lago no meio de um deserto; todos ótimos exemplos de cores complementares e exemplos que nos ajudam a entender porque damos tanta importância para elas.

As cores complementares apresentam alto contraste entre si, por um lado, essas cores podem ser utilizadas para se destacar pontos que queremos chamar a atenção do usuário, mas não é recomendado que elas sejam aplicadas uma sobre a outra com 100% da sua opacidade. O contraste entre elas é tão forte que  causa saturação na retina do usuário, causando manchas temporárias na visão (como quando olhamos para uma luz por muito tempo).

taxa de conversão

A forma mais correta de se utilizar é quando se tem um layout onde existe a predominância de uma cor, ex: vermelho, em títulos e gráficos sobre cor neutra (branco e preto), se utilizar de um elemento complementar, ex: verde, destacará no layout chamando atenção do usuário.

Importante: Não sobre-utilize cores complementares no seu projeto. Se você bombardear o usuário com cores complementares, ele vai criar uma resistência mental ao contraste cromático e essa arma poderosa vai perder todo o impacto!

Cores análogas

Se observarmos o círculo cromático apresentado anteriormente, é fácil perceber que cada cor vizinha tem uma semelhança visual entre si. Essas cores similares são consideradas cores análogas. Harmonizam muito bem entre si, sendo muito usadas para compor uma paleta de cores com aspecto mais suave.

Considerando o exemplo acima, elas seriam as nuances de cores entre as folhas da floresta. Sabemos que há diferença, mas não é um alerta para o cérebro agir o mais rápido possível.

O uso de cores análogas é recomendado para iniciantes na prática pois dificilmente estas cores não vão funcionar entre si.
Uma dica: Uma paleta de cores análogas pode parecer “entediante” para o usuário. Portanto, quando for construir uma paleta desse tipo, utilize-as com baixo contraste para, quando precisar, elevar o contraste para elementos importantes como CTA’s ou links. É também uma boa tática escolher duas ou três cores análogas e uma complementar, para dar destaque e recuperar o interesse do usuário.

Cores monocromáticas

Uma outra forma de criar paletas é mudando o tom de uma mesma cor (deixando mais clara ou mais escura). Nesse caso, é importante saber que cores mais escuras ou mais claras têm menos contraste que as cores mais “puras”, portanto reserve-as para destaques pontuais. Essa forma de criar uma paleta é similar à de cores análogas, por ser fácil de combinar as cores, porém é mais recomendado para pequenos projetos, como landing pages curtas.

Como escolher paletas?

É fundamental, antes de se começar a trabalhar um layout, escolher uma paleta limitada a poucas cores, entre 1 e 5, considerando que se pode usar cada uma dessas cores com diferentes saturações. Entre uma cor e outra existem centenas variações de tons para ser trabalhados.

taxa de conversão

Como saber se a cor é adequada?

A importância de se limitar uma paleta vem da confusão visual causada quando se trabalha sem esse cuidado. Fica muito fácil perder a atenção do usuário quando tem dezenas de tons colocados sem cuidado em um layout.

Fake it until you make it

A página https://color.adobe.com/pt/explore/ da ferramenta Adobe Color mostra infindos exemplos de paletas criadas pelos usuários e é uma boa forma de você treinar seus olhos e identificar quais técnicas acima foram utilizadas para compô-las.

Outra ferramentas úteis para montar sua paleta de cor:

https://coolors.co/ – Similar ao Adobe Color, porém focado em HSL (Cor, brilho e saturação)

https://www.canva.com/color-palette/ – Criação de uma paleta baseada em uma foto específica

Como escolher imagens que aumentem a sua taxa de conversão?

Não é todo projeto que necessita, mas é importante saber quando usar e como usar uma boa imagem para causar o efeito necessário e de forma elegante.

Por que utilizar uma imagem

Note que não estamos utilizando o termo “fotos” aqui. Imagem significa o uso de cor, forma e composição para transmitir uma informação ou sentimento que complementa (ou, em casos mais complexos, contrapõe) o conteúdo em geral. Mas imagens têm um poder muito maior e mais importante para nós do que isso. Ela também tem a chance de guiar o olhar do usuário para elementos que queremos e induzir a navegação do usuário.

Por quê utilizar fotos

Você já ouviu falar ou percebeu que quando uma pessoa está olhando para você, você nota mesmo que não esteja olhando diretamente? Isso não é mito nem lenda urbana. Nosso cérebro tem um “setor” específico para lidar com rostos e sua especialidade são detectar olhos. É por isso que sempre vemos matérias de pessoas que reconhecem rostos em torradas e rostos.

taxa de conversão

E o que isso tem a ver com projetos de Design? Fotos de rostos “humanizam” o layout e causa mais empatia no usuário. Mais profundamente, sorrisos indicam “solução de problemas” e rostos concentrados indicam seriedade. É possível usar outras expressões como tristeza para induzir emergência mas deve ser utilizado com muita cautela.

A especialidade cerebral que mencionamos de detectar olhos instantaneamente é especialmente importante. Isso porque as pessoas têm o instinto de olhar para onde as pessoas estão olhando, mesmo que numa foto. Você já deve ter imaginado o quanto isso é útil. Você pode direcionar o olhar do usuário para o elemento mais importante de uma página (por exemplo, um formulário) com o olhar da foto de banner. Por induzir a ação subconsciente do usuário esse tipo de solução causa efeitos melhores do que o uso de setas, por exemplo. Finalmente, há estudos que indicam que muitos olhos devolvendo o olhar para o usuário induzem uma pequena ansiedade, provocando que a interação seja encurtada.

Por que utilizar ilustrações ou obras de arte

Podemos dividir esse tipo de imagem em ilustrações representativas e abstratas. As representativas vão causar um efeito similar às fotos, por serem representações de coisas reais. Elas podem causar um impacto menor do que fotos (pelo menos menos imediato), mas permitem mais liberdade nas cores, estilo e “sentimento” desejado.

Já ilustrações abstratas são muito úteis e impactantes para dar ao usuário a sensação desejada, sem ter representação de nada específico. Também é possível guiar o olhar do usuário utilizando esse tipo de imagem. Texturas (nem sempre são ilustrações, mas estamos generalizando para não prolongar muito 🙂 ) são uma forma de abstratismo bastante útil.

Como estruturar meu conteúdo?

Ok, finalmente vamos parar de analisar os pontos individuais e focar no “todo”. Cada tipo de conteúdo prevê uma estruturação diferente para o conteúdo. Portanto, vamos passar aqui o que cada tipo de conteúdo mais comum requer em termos de estrutura. Mas é importante notar que vamos ser bem sucintos aqui e esse assunto, mais que todos os anteriores, merece um longo papo por si só. Aguarde para um post nosso futuro em que destrinchamos esse assunto.

Landing Pages

Landing pages têm por objetivo incentivar o usuário a interagir com seu formulário. Portanto o conteúdo textual deve ser o mais breve e o mais direto possível.

Fontes

Títulos de fonte grande e pouco texto são seus amigos aqui. Dê prioridade para fontes grotesque ou slab para facilitar a leitura das fontes maiores.

Parágrafos

Distancie bastante todo conteúdo dos títulos (o famoso “respiro”) para dar bastante foco para o título, que é o texto principal da página. Aqui você pode utilizar fontes serifadas se julgar necessário.

Cores

Importante associar as cores da LP com a cor da identidade visual do cliente. Reserve sua cor mais marcante para o botão de envio do formulário e para algum elemento que chame para o formulário.

Imagens

Será útil se conseguir usar uma imagem de fundo guiar o olhar do usuário para o formulário da página (usando qualquer tipo de imagem). Uma imagem que represente o produto também é recomendado.

CTA’s

Fontes

Possível utilizar qualquer tipo de fonte, levando em consideração que, por ser uma pequena dimensão, a leitura deve ser boa.

Parágrafos

Melhor que não haja parágrafos em um cta pequeno, no caso de um maior, utilize um texto curto, sem grandes contrastes.

Cores

Foque na menor paleta de cores possível. Uma boa dica é o uso de uma paleta monocromática com uma cor complementar para o botão.

Imagens

A imagem aqui deve ser menos visível que o texto e o botão, normalmente no fundo e não tem necessidade de guiar o foco do usuário. Portanto nossa recomendação é o uso de imagens abstratas ou uma foto focada em olhos (aqui é um dos casos em que olhos voltados para a tela seja útil).

Blog

Fontes

Também é possível usar qualquer fonte, mas é importante que o título seja muito bem distinguível do texto introdutório, quando o usuário estiver vendo a listagem de posts (a home do blog).

Parágrafos

Já na postagem, é legal que se use uma fonte serifada ou slab para ajudar na leitura. Por usabilidade, é importante que a linha do texto não seja muito larga, para que o usuário não precise girar a cabeça para ler, o que é cansativo. Além disso, uma linha curta ajuda na memória a curto prazo; é sugerido que uma linha de 8 a 12 palavras seja usada.

Cores

Um texto preto sobre um fundo branco tende a irritar os olhos, devido ao brilho do monitor e tende a ficar desagradável por ser um excesso de contraste na mancha. Ao invés de preto, utilize cinza bem escuro. Não recomendamos utilizar uma cor diferente da escala de cinza (se sair, que seja bastante acinzentada). Do mais, respeite as cores da identidade do cliente, deixando a cor mais forte e contrastante para elementos de CTA, formulários de inscrição de newsletter ou outros elementos que requer atenção.

Imagens

Imagens do layout do blog não devem chamar toda a atenção para si. Tenha em mente que o que precisamos é que o usuário atente aos textos e CTA’s do blog e não no layout em si. Portanto, novamente o uso de imagens abstratas é útil. Já imagens de cada postagem deve, sim, chamar atenção.

Ebook

Essa peça é talvez a que permite maior liberdade de todas e, ao contrário do que você pode imaginar, isso torna ela mais difícil do que outros tipos de projeto.

Fontes

Possível utilizar qualquer fonte também, sempre respeitando a identidade visual do cliente.

Parágrafos

Assim como no blog, evite o uso de preto no branco e dê uma atenção para distanciamento entre linhas para que a leitura seja boa. Utilize bastante respiro visual para não causar repulsa no usuário.

Cores

Aqui você pode utilizar qualquer forma de compor uma paleta de cores, levando em consideração a identidade do cliente. Como no ebook a conversão do usuário já foi feita, não precisamos reservar a cor de destaque para elementos como CTA. Pode utilizar em imagens, títulos ou detalhes gráficos.

Imagens

O maior propósito das imagens nos posts são para criar interesse no usuário e mantê-lo interessado no conteúdo. Portanto, surpreenda com imagens que não seja exatamente o esperado para a seção 😉

taxa de conversão

Conclusão

Espero que esteja se sentindo equipado para colocar a mão na massa em alguns projetos gráficos ou, pelo menos, utilizar desses conhecimentos para dialogar mais claramente com o designer que trabalha com você. Como falamos (talvez excessivamente) anteriormente, esse assunto não é só isso. Há muito mais informações que podemos aprender de Design, Neurociência e Biologia para criar uma experiência perfeita para o usuário e para seu cliente/sua empresa.

Este artigo foi escrito em parceria com o Eduardo Viana. Obrigado, Du!

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+