Então você assumiu a missão de aumentar conversões, entregando uma experiência ainda mais fluida e encantadora para qualquer visitante? Bom, você sabe fazer isso sem quebrar o estilo que seu design demorou para construir?
Essa noção de que conversão e design são prioridades que competem entre si é uma dicotomia falsa. Testes A/B e Design são parentes quando se trata de aumentar as taxas de conversão e aplicar criatividade dirigida por dados para resolver problemas.
Ideias básicas de design são uma fonte rica de ideias para testes A/B que podem converter bem sem perder a beleza. Por isso, vamos falar um pouco sobre duas noções que podem ser testadas no seu site ou Landing Page: o contraste de cores e os pontos focais. Boa leitura!
O que você vai encontrar nesse artigo:
O que é contraste de cores
O contraste acontece quando um elemento parece diferente daqueles que o cercam ou do plano de fundo. Texto escuro contrasta com um fundo claro, por exemplo. Nosso cérebro é feito para notar diferenças no nosso ambiente, o que faz com que elementos contrastantes saltem aos olhos.
Existem muitos tipos de contraste, como tamanho, formato, cor e textura. Nesse artigo, vamos focar apenas no contraste de cores.
O contraste pode variar entre alto e baixo, dependendo do grau de distinção entre os elementos. Preto e branco tem contraste alto, pois são cores opostas. Diferente de um cinza escuro e um cinza claro, que possuem um contraste baixo. Em linhas gerais, quanto maior contraste, mais óbvio é esse elemento.
Um designer experiente pode usar o contraste alto e baixo para focar a atenção de uma pessoa num elemento específico da página. Existem duas formas de usar contraste para gerar ideias de testes A/B: a primeira é aumentar o contraste dos elementos mais importantes, como CTAs, ou diminuir o contraste de elementos menos importantes, o que faz todo o resto ter mais destaque.
Como testar o contraste de cores
Para testar o contraste como parte da experiência de seu site, primeiro identifique um objetivo principal.
Pode ser fazer com que mais visitantes cliquem em um botão, banner ou envie um formulário preenchido. Qual é seu objetivo em utilizar contraste? Que elementos você quer seus visitantes olhem e cliquem?
Uma sugestão é usar uma cor forte que contrasta com um fundo mais neutro para destacar o elemento que você quer que seus visitantes foquem. Pode ser a cor de sua marca ou uma cor diretamente oposta a de sua marca numa roda de cores.
Se os resultados com o contraste alternativo forem positivos, tente implementar essa técnica em outras páginas em seu site. Se não, considere um tipo diferente de contraste visual ou simplifique sua página, reduzindo o número de elementos que podem ser distrações. Talvez o contraste não foi suficiente para que seus visitantes notassem a diferença.
Pontos focais: como usá-los para teste A/B
Pontos focais são áreas de interesse, ênfase ou diferença dentro de uma composição, que capturam e prendem a atenção do espectador. Pontos focais é o local onde os olhos descansam no design visual. Se fosse colocar em termos de narrativa, eles seriam a vírgula.
Geralmente, seu design visual vai guiar sutilmente o foco de seu espectador para áreas chave onde você quer que ocorra engajamento ou uma ação. Podem ser CTAs, formulários ou outros elementos.
Às vezes, pontos focais podem ser criados por distribuir o peso de elementos visuais pelo texto. O contraste de cores, como já vimos, é um dos modos que possibilita isso.
Mas pontos focais são criados também por posição relativa, contexto ou imagens de suporte que seu design tenha produzido (ilustrações, bullets especiais, etc.).
Vimos como é uma página que cria pontos de foco únicos entre si – trazendo, portanto, pontos mais e menos destacados. A versão alternativa seria uma página que divide a atenção do usuário, trazendo pontos focais de mesmo peso.
Às vezes, essa é a atitude certa. Páginas iniciais são exemplos de pontos focais que diferem pela sua função, não pelo destaque visual. Mas, quando falamos em otimizar conversões, você deve usar pontos limitados onde a atenção do espectador possa fluir para onde você quer.
Pontos focais com imagem
Primeiro, fotos. Você pode criar um ponto focal usando imagens complementares, que atraem a atenção para o ponto de interesse. Pense numa chamada ou botão na linha de visão de uma pessoa ou no final de uma coluna de elementos.
Mas cuidado, todo mundo conhece algum exemplo no uso de bancos de imagens que se perdem e parecem artificiais. Use fotos com moderação.
Além de fotos, ilustrações e iconografia podem ser usadas para desenvolver pontos focais. Uma composição assimétrica pode criar a ilusão de movimento, por exemplo, e ser usada para atrair a atenção do público num ponto específico.
Quando usar ilustrações para construir um ponto focal, preste atenção na direção dos elementos, como estão alinhados e ainda, se os elementos estão balanceados, da esquerda para a direita.
Pontos focais com espaço negativo
Como o contraste de cores, existe a possibilidade do espaço visual ao redor do elemento ser mais importante do que ele mesmo.
O espaço negativo que cerca um objeto pode ser uma forma de criar um ponto focal. Adicionar espaços negativos num design visual reduz a desordem que pode distrair o olhar da audiência.
É como um prato bem apresentado num restaurante chique. O espaço branco ao redor da comida atrai toda a atenção para o que está sendo servido. O ponto focal está no meio do espaço vazio.
Mesmo que seja tentador usar o espaço negativo para colocar outros elementos, é importante manter um espaço ao redor de um objeto-chave para que ele continue proeminente.
O padrão natural de leitura de páginas é o Padrão-F (já falamos dele por aqui). Crie elementos que favoreça esse padrão, facilitando a escaneabilidade da página, dentro do que se espera no olhar de um leitor.
Assim você terá mais chance de capturar sua atenção ou até mesmo interromper seu foco num ponto estratégico. Coloque uma chamada, informação-chave ou outro elemento interativo em uma das linhas horizontais do Padrão-F de sua página.
Como testar o impacto dos pontos focais
Da mesma forma que você testou o contraste de cores, é preciso também ter um objetivo principal para o teste A/B entre pontos focais. É preciso também reunir os elementos mais capazes de dirigir o usuário para esse objetivo.
Pode ser o direcionamento de visitantes para uma tabela de preços, encorajá-los a buscar por uma categoria de produto ou mesmo destacar conteúdo para seu consumo
Então, use uma das técnicas que comentamos para criar um ponto focal no seu design. Criar um elemento criativo extra, como uma imagem, ou mesmo afastar elementos para ter mais espaço negativo.
Seja qual for os resultados, documente sempre o que você está fazendo. Você não vai concluir nada de primeira, por isso, é importante anotar todos os dados para não ter que repetir hipóteses já vencidas antes.
Testes A/B são exercícios que podem melhorar muito a performance de suas conversões e não tem nada a ver com deixar seu site intragável.
Procure a mudança incremental que pode fazer com que o cliente olhe para onde ele precisa olhar e, então, procure aplica em todo seu site. Você vai notar a diferença.
Já fez testes A/B com contraste de cores ou pontos focais? Conte pra gente como que foi esse processo!
