Design

Google Display, como otimizar o design para uma melhor conversão

Google Display, como otimizar o design para uma melhor conversão

Campanhas são criadas e colocadas em práticas frequentemente, mas nem todas atingem o resultado esperado. No entanto, durante esse ciclo de tentativa e erro, existe a adaptação e melhoria.

Apenas configurar a campanha e executar não traz tanto resultado, pois a otimização é algo essencial para ter uma visibilidade mais relevante e o maior número de conversões possível.

Por volta de 50% das empresas reportam que o design escolhido de um anúncio influencia diretamente em quão bem-sucedido o mesmo é, até porque o design influencia a primeira impressão que uma pessoa tem como anúncio, ou seja: influencia o modo que o consumidor percebe a sua marca.

Então, vamos dar uma olhada em como você pode melhorar seu jogo de design aplicando cinco princípios-chave do design visual para criar anúncios gráficos de alto desempenho

Estrutura do Anúncio

Um bom anúncio tem como base a sua estrutura e há práticas já bem difundidas sobre como você deveria mapear seu anúncio.

De acordo com a empresa do ramo de Marketing Digital, Interactive Advertising Bureau, os anúncios devem ser diferenciáveis do conteúdo normal do site e a área do anúncio deve ter uma borda bem definida para não ser confundido com o restante do site.

Eles inclusive falam sobre como o tamanho do anúncio deve ser flexível, pois as pessoas podem estar visualizando o anúncio em telas de diferentes tamanhos.

Os tamanhos de ads oferecidos pelo Google são vários, desde anúncios de meia página a grades banners para dispositivos móveis.

Mas há três principais tamanhos quando se fala em termos de desempenho. São eles: 300 x 250 (retângulo médio), 336 x 280 (retângulo grande) e 728 x 90 (cabeçalho).

Você pode ver no gráfico como eles são e os outros dois tipos de anúncio que, junto com os anteriores, formam os 5 tipos de anúncio com maior desempenho.

Display

Levando isso em consideração, você deve possuir uma estrutura forte e flexível para se adequar a cada um dos formatos, atentando-se especialmente aos tamanhos de melhor desempenho.

Para fazer isso, pense nos elementos fundamentais de um anúncio gráfico. Cada anúncio deve conter quatro componentes principais:

  • Seu logotipo ou nome da empresa
  • Uma proposta de valor
  • Uma imagem ou representação visual do seu serviço
  • Um botão de CTA

A estrutura dos elementos do anúncio cabe a você fazer, desde que o CTA e a proposta de valor estejam em destaque e os elementos possam ser reorganizados para que se adequem a diferentes tamanhos de anúncio.

Cores

No design, a atenção a cores é de fato imprescindível, pois a cor é usada para atrair a atenção de pessoas e evocar emoções.

É importante lembrar a comum associação que muitos fazem de cores às marcas.

É completamente normal, e bastante comum, inclusive, que você associe a cor vermelha à Coca-Cola, por exemplo.

A psicologia por trás da cor é interessantíssima e algo que você precisa prestar atenção ao criar anúncios.

Homens e mulheres, por exemplo, costumam ter preferências de cores bem diferentes, de acordo com um estudo na UX Planet.

Eles chegaram à conclusão de que a cores mais populares entre os homens são azul (57%) e verde (14%); enquanto as mulheres estão em azul (35%) e roxo (23%).

O resto das cores e quão favoritadas elas são de acordo com o gênero podem ser vistos no gráfico abaixo:

Cores por gênero

Fonte: UX Planet

Tendo em vista isso, você pode decidir usar uma paleta de cores um pouco diferente, considerando o público alvo de sua campanha e possivelmente aumentando o nível de atenção que se voltará para a mesma.

Tipografia

Tipografia refere-se a como se organiza a escrita, ou as fontes no caso de hoje em dia; no entanto, é mais do que uma questão de estética.

A tipografia estratégica pode facilitar o processo de leitura e criar interesse em seu produto ou serviço anunciado.

O mais importante é ter uma hierarquia tipográfica clara e legível. Não importa o quão incríveis sejam seus recursos visuais se o público não conseguir ler ou entender sua mensagem.

Uma imagem com estilo pode chamar a atenção sim dos visitantes, mas se não há uma mensagem por trás da mesma, dificilmente atrairá um clique.

Hierarquia Tipográfica

Note como seus olhos foram a princípio para o grande nome no topo antes de qualquer outra coisa.

Esse é o exemplo mais simples e notável da importância da Hierarquia Tipográfica. Você pode usar, inclusive, um enorme texto que passa a mensagem e deixar ao lado a marca.

Lembre-se que o que é ensinado aqui não é excludente, então além disso, também pode-se usar uma paleta de cores referente ao seu público alvo no anúncio.

Menos é mais

Esta não é uma ideia original e se aplica em uma enorme gama de diferentes contextos.

Estes anúncios não vão carregar tudo sobre sua marca e produto ou serviço e, portanto, você terá que ser o mais sucinto possível.

Sua mensagem terá que ser direta e clara, de forma que seja entendida na primeira leitura.

Design minimalista

Fonte: Imagine por www.jvm.com

Ou seja, ao passar rapidamente os olhos sobre o seu anúncio, a pessoa tem que sentir curiosa sobre sua ideia, criar um senso de valor sobre ela e ainda se sentir inclinado a clicar nele.

Isso é melhor atingido com um anúncio que diga muita coisa com uma menor quantidade de caracteres e sem poluição visual.

Originalidade e Funcionalidade

Não faça nada sem propósito algum, pois isso remete a amadorismo e é percebido pelos internautas.

Imagens, por exemplo, nunca deveriam ser colocadas em um anúncio pelo único propósito de se ter uma imagem ali.

Obviamente, imagens são de extrema importância, principalmente quando usadas corretamente, mas como tudo, podem causar o efeito contrário quando mal utilizadas.

Uma imagem deve ser a menos genérica possível, sendo algo produzido por você, como fotos do seu escritório ou produto ou algum representante direto do seu serviço, como fotos de um destino de turismo, por exemplo.

Banner Coca-cola

A Coca-cola coloca aqui uma imagem das latas predominantemente vermelhas de seus novos produtos, assim associando a qualidade deles ao produto carro-chefe.

Além disso, a imagem é um demonstrativo da novidade, que é o produto da própria marca, junto com a logo. Nada que está aí é mais que o necessário.

Pessoas costumam se lembrar mais costumeiramente do que elas veem em relação ao que elas ouvem, reforçando que uma boa imagem vai ser ótimo para sua marca e uma imagem ruim vai ser extremamente desvantajoso.

Imagens também devem ter um propósito claro que se conecte com a mensagem, do contrário, falharão em transmitir realidade na proposta.

Como planejar o design da sua Landing Page de acordo com o conteúdo

Como planejar o design da sua Landing Page de acordo com o conteudo

Com a presença de várias marcas é cada vez mais comum na internet, a competição por alguns segundos a mais de atenção.

As empresas acabam tendo que lutar e se esforçar frequentemente para evoluir de forma que consigam sempre passar de forma clara sua ideia e obter os melhores resultados.

E este é o grande objetivo das técnicas de otimização das Landing Pages.

O que é uma Landing Page?

O termo Landing Page costumava ser usado para definir a página por onde um internauta passava para acessar o site.

No caso, a página onde ele “cai primeiro” depois de clicar em um link, daí o nome, que em inglês, seria traduzido como “página de aterrissagem”.

Não é à toa que ao checar o Google Analytics em inglês, você verá que Landing Pages é apresentada como uma das dimensões de comportamento.

Em Português, no entanto, o nome que o Google usa para defini-las é outro, um pouco diferente do termo em inglês: “Páginas de destino”.

Este conceito acaba ficando um pouco vago, já que basicamente pode ser usado para qualquer página de um site onde você caia após clicar em um link em outro blog ou em um mecanismo de busca, por exemplo.

No entanto, o termo acabou caindo em desuso para este propósito, hoje em dia sendo usado para algo diferente.

Em Marketing Digital, quando criamos uma página cujo único objetivo é a conversão, esta página é o que nós chamamos de Landing Page.

O design da Landing Page é feito pensando na comunicação da sua oferta aos visitantes da página.

Este processo de comunicação é para que você influencie as pessoas a perceberem o que você deseja que elas percebam.

Utilizar-se de uma área em branco para organizar a página com um botão Call-to-Action em contraste é uma das maneiras fazer isso.

No final, no entanto, o apelo visual é apenas uma das facetas do design da página.

Devemos prestar atenção ao jeito que os elementos da Landing Page interagem e como eles fluem juntos para determinar se a página vai ser bem-sucedida em engajar os visitantes.

É aí que entra a Hierarquia Visual.

Hierarquia Visual

Hierarquia visual é a ordem na qual um usuário processa informações em uma página.

A sua função no design da interface do usuário (UI) é permitir que os usuários entendam as informações facilmente.

Isso é feito ao atribuir-se diferentes características visuais a seções de informações, como as fontes maiores em um cabeçalho, por exemplo.

Por meio do emprego da hierarquia visual, um designer pode influenciar o que os usuários perceberão como estando mais acima na hierarquia.

Influenciando a percepção dos usuários

As características visuais que um designer pode usar para influenciar a percepção dos usuários sobre as informações são:

  • Tamanho: quanto maior o elemento, mais atenção ele atrairá
  • Cor: as pessoas são atraídas por cores ousadas e contrastantes.
  • Contraste: mudanças de cor chamam atenção
  • Alinhamento: chame atenção alinhando ou quebrando o alinhamento
  • Repetição: repetir estilos pode dar a impressão de que o conteúdo está relacionado
  • Proximidade: elementos próximos também aparecerão relacionados
  • Espaço em branco: mais espaço ao redor dos elementos atrairá o olhar para eles
  • Textura e estilo: texturas mais ricas atraem mais atenção do que as planas

Todos os elementos de design acima são importantes, mas obviamente, como tudo, o sucesso depende do bom emprego do conhecimento.

Aliando este conhecimento aos estudos de rastreamento ocular, nós podemos criar poderosos designs que sempre guiarão os olhos dos visitantes para onde nós queremos.

Estilos de Leitura

Acompanhando os estudos de rastreamento ocular, muito se descobriu sobre como os olhos se movem em determinados contextos.

No caso da leitura, foram encontrados dois padrões mais dominantes.

O padrão F

O Nielsen Norman Group compilou vários relatórios e ainda continuam a ser citados quando o assunto é rastreamento ocular.

A verdade é que foram os estudos deles que trouxeram uma série de descobertas que acabaram por ser úteis em vários ramos.

Uma das mais importantes descobertas do grupo foi o chamado “F-Pattern” ou “Padrão F”.

Os usuários costumam começar lendo em um movimento horizontal que costuma se originar na parte superior da área do conteúdo, que seria o movimento que dá origem à barra inicial do “F” que se desenhará pelo movimento dos olhos.

Em seguida, os usuários movem a página um pouco para baixo e leem em um segundo movimento horizontal que geralmente cobre uma área menor que o movimento anterior.

Esta segunda leitura de menor extensão é o que formaria a barra inferior do “F”.

Por fim, os usuários verificam o lado esquerdo do conteúdo em um movimento vertical, fazendo assim o último elemento do “F”, seu tronco.

Essa imagem é referente à pesquisa citada anteriormente e demonstra o movimento dos olhos uma página de um site.

As cores demonstram o seguinte:

  • Vermelho: Área mais visualizada, onde o olho se manteve por mais tempo.
  • Amarelo: Área visualizada, mas com menor fixação.
  • Azul: Área pouco visualizada e com pouca fixação.
  • Cinza: Área pouco visualizada e com nenhuma fixação.

Comecemos da premissa de que o movimento dos olhos, em geral, começa pelo canto superior esquerdo e, a partir daí, desliza pela página.

Ao posicionar os elementos que você considera mais importantes em uma página no padrão F acaba por garantir que tais elementos sejam vistos.

O Padrão Z

Páginas menos pesadas em texto ou de organização mais solta tendem a provocar um movimento menor nos olhos.

Este movimento, também mais solto e mais direto, é o que chamamos de “Z Pattern”, ou Padrão Z.

Este padrão ocorre quando a simplicidade é uma característica notável na página, que geralmente tem o Call-to-Action como foco principal.

Esse foco na simplicidade torna o padrão Z especialmente adequado ao design da página de destino, no qual você deseja que um foco singular atraia as pessoas e incentive-as a agir.

O Padrão Z pode ser igualmente aproveitado, contanto que você coloque sua chamada em ação ao longo do caminho Z para garantir que o visitante o veja; levando-o assim a conseguir mais conversões.

Padrão Z

Assim como o Padrão F, o formato do padrão Z não precisa ser um exato Z.

Mas prestando atenção na imagem acima, podemos ver, a partir dos números, por onde os olhos dos visitantes vão passar em uma página mais simplificada.

O que significa que você pode distribuir as informações ao longo deste Z, considerando a ordem dos pontos onde os olhos se fixam.

Ou seja, um texto mais longo, como um título, pode ficar ao longo do círculo 1 chegando até onde se encontra o círculo 2. Uma imagem ilustrativa pode ficar no 3 e o botão CTA ao longo da Seta até a área do círculo 4.

Em geral, siga a seguinte linha:

  • A linha horizontal superior inclui os principais componentes nos quais você deseja que os visitantes se concentrem primeiro.
  • A linha diagonal deve apresentar qualquer informação que leve ao seu botão de CTA, então ela vai servir como um conversor da informação na linha anterior que transforma a ideia em ação.
  • A linha horizontal inferior deve destacar o CTA em qualquer ponto ao longo desta linha, com o visitante já informado ou trabalhado nas linhas anteriores.