Como Peggy Olson faria design para interativo

Na era de Mad Men, os profissionais de marketing sabiam exatamente como seu trabalho seria consumido. O público-alvo veria o anúncio na TV, ouviria no rádio, veria em uma revista ou em um outdoor e talvez viesse na caixa de correio (caracol). Se você planejou um anúncio impresso ou uma correspondência, sabia o tamanho exato do imóvel para o qual estava projetando e otimizou seu anúncio para caber nesse espaço. O consumidor veria esse conteúdo exatamente como você o imaginou quando o projetou.

Se Peggy Olson estivesse projetando um anúncio hoje, ela teria que considerar o contexto de como esse anúncio seria visto e como seu público-alvo interagiria com ele. Não haveria garantia de que seu trabalho seria visto da maneira que ela imaginou, então ela precisaria otimizar seu layout e design para que tivesse impacto, não importa como fosse visto. Ela teria que garantir que a chamada para ação (CTA) fosse clara, concisa e decifrável – mesmo em uma tela de três polegadas.

Projetar páginas da web, páginas de destino e e-mails hoje é muito mais complicado do que na época de Mad Men. Hoje você tem a dimensão agregada de elementos interativos, sem saber em qual dispositivo o conteúdo será visualizado. Um layout que parece perfeito em uma tela de computador de tamanho normal pode ser uma bagunça completa quando visualizado em um tablet ou smartphone. Um CTA que não é claro ou colocado no lugar errado pode matar sua taxa de engajamento.

Três principais práticas recomendadas de design interativo

A maioria dos consumidores hoje tem a atenção de um mosquito. Você tem cerca de dois segundos para fisgá-los quando eles acessarem seu conteúdo antes que eles decidam clicar ou não em algo mais interessante. É imperativo que você entenda esses três conceitos ao criar um e-mail, página inicial ou página da web:

1. Como o layout afeta o engajamento: saiba como fazer o layout dos elementos em uma página para máximo engajamento
2. Como o conteúdo afeta o engajamento: saiba o que me motivará a interagir com seu conteúdo
3. Quão importante é o tempo: você tem dois segundos para chamar minha atenção

Parece simples, certo? Se fosse tão simples eu não estaria escrevendo isso! Eu não posso te dizer quantos conteúdos eu encontro diariamente que me frustram a ponto de apenas apertar o botão Voltar. Estou falando de grandes corporações com bolsos cheios, mas sem senso de design.

Então vamos ser práticos. Continue lendo para obter algumas dicas muito simples que ajudarão você a otimizar seus layouts de página para engajamento em qualquer plataforma.

Como o olho escaneia uma página

A primeira coisa que você precisa entender é como o olho humano rastreia um conteúdo. Quando eu estudava publicidade na faculdade, disseram-nos que o olho percorria uma página na forma de um Z maiúsculo, começando no canto superior esquerdo. Tenho certeza de que essa teoria foi elaborada por um estudo que tinha uma cobaia olhando para partes do conteúdo enquanto um cara de jaleco branco tentava desenhar o padrão dos movimentos dos olhos em um pedaço de papel. Isso foi muito antes da agora amplamente disponível tecnologia de mapa de calor que é usada para ver como as pessoas rastreiam as páginas visualizadas online. E, lembre-se, as pessoas digitalizam a impressão de maneira ligeiramente diferente do conteúdo on-line.

O consenso hoje em dia é que o olho segue um padrão F maiúsculo ao visualizar um conteúdo online, ainda começando no canto superior esquerdo. Seu olho normalmente percorre horizontalmente a barra superior do F primeiro, depois a segunda barra do F e, finalmente, de cima para baixo na haste vertical do F.

Então o que isso quer dizer? Isso significa que seu CTA precisa estar em algum lugar nesse padrão F maiúsculo, ou você precisa colocar um bigode em um bebê. Tome uma decisão de design consciente para colocar seu CTA principal em um local onde chame a atenção do espectador nos primeiros dois segundos.

Desastres reais de design

Então, vamos dar uma olhada em um verdadeiro desastre de design que um dos meus colegas aqui na Act-On me ajudou a criar. Lamento dizer que o exemplo abaixo foi extraído de um conteúdo real que encontrei online. Usei uma empresa fictícia chamada Actomatic para demonstrar os erros mais comuns que as pessoas cometem e como corrigi-los.

Exemplo 1: Não me faça rolar para ver o CTA

A oportunidade perdida mais comum que vejo é um conteúdo sem nenhuma maneira de compartilhar ou compartilhar botões que estão enterrados na parte inferior da página abaixo da dobra. A dobra é aquela linha imaginária na parte inferior da tela. (O termo vem da época em que os jornais eram dobrados ao meio; “acima da dobra” era um posicionamento melhor, com melhor público leitor.) Em uma tela de laptop de tamanho médio, a dobra pode ter 480 pixels a partir da parte superior da tela, mas em um iPhone pode estar a 100 pixels da parte superior. Esteja ciente disso ao fazer o layout do conteúdo da página.

Se estivermos falando de um blog ou de um artigo de várias páginas, atrevo-me a supor que a maioria das pessoas está pronta para compartilhar depois de ler o título (se for bom) e as duas primeiras frases de um conteúdo, porque querem ser o primeiro a sair do portão. As pessoas gostam de compartilhar conteúdo novo, não conteúdo que já viram compartilhado por seus colegas cinco vezes.

Sugiro ter botões de compartilhamento na parte superior e inferior do conteúdo ou botões de compartilhamento que flutuam ao longo do conteúdo quando você rola.

Trabalhei com uma empresa muito conhecida que descobriu que, quando adicionavam botões de compartilhamento na parte superior e inferior de um artigo, a taxa de compartilhamento aumentava mais de 400%.

Exemplo 2: Oh, meus olhos!

Você já parou em um conteúdo que estava tão ocupado que você não sabia onde procurar? Talvez tivesse um vídeo para compartilhar, um formulário para preencher, alguma cópia, alguns links aqui e ali. Se eu caísse na página abaixo, não saberia por onde começar, então provavelmente não me envolveria. Este exemplo não me dá nenhuma indicação do que é mais importante nesta página. Você tem dois segundos ou menos para chamar minha atenção e me envolver, e você acabou de me perder.

Se você tiver vários CTAs, deixe bem claro qual é a ordem lógica desses elementos. Soletre-o com textos explicativos numerados, se necessário. Se eu chegasse a esta página, estaria fazendo as seguintes perguntas:

O layout parece não planejado e desleixado com espaço em branco aleatório e fontes estranhas. Os CTAs estão definitivamente abaixo da dobra.

Se eu estivesse aconselhando a Actomatic, começaria perguntando o que eles esperavam alcançar com esta página. Qual é o objetivo aqui? Presumo que os principais objetivos aqui sejam fazer com que as pessoas se inscrevam no blog, assistam e compartilhem um pequeno vídeo. Se for esse o caso, precisamos fazer algumas alterações.

1. Certifique-se de que o CTA principal esteja acima da dobra. Os botões de compartilhamento e o botão Assinar estão abaixo da dobra.
2. Deixe claro que você gostaria que os visitantes se inscrevessem no blog E compartilhassem o vídeo
3. Adicione algumas informações sobre a empresa

OK, vamos dar uma olhada agora:

A versão nova e aprimorada tem um layout um pouco diferente, menos fontes, uma breve sinopse sobre a empresa e o vídeo e uma barreira menor para assinar o blog. Também adicionei links na parte inferior e um botão de contato. Observe como otimizei o layout para maximizar a quantidade de informações que um leitor veria nos primeiros dois segundos, seguindo a maneira como o olho examina naturalmente a página. A teoria do padrão F diz que esta é a ordem na qual o visualizador receberá os elementos na página:

1. O logotipo da empresa
2. Os destaques
3. Os botões de compartilhamento e inscrição
4. A seção Explorar na parte inferior

Me dê um motivo para interagir

Agora que você tem seu layout organizado, precisa me dar um motivo para interagir com seu conteúdo. Se você deseja que eu preencha um formulário ou compartilhe seu conteúdo, deve haver um motivo convincente para que eu o faça. Então deixe-me perguntar, o que há nisso para mim?

Se você não sabe a resposta para essa pergunta, você não fez sua lição de casa.

A principal razão pela qual as pessoas interagem com o conteúdo é porque elas obtêm algum tipo de satisfação emocional ou material. Se o seu conteúdo for bom, vou compartilhá-lo porque me faz parecer bem informado na frente de meus colegas. Recebo um impulso de ego se sou o primeiro a descobrir sobre um novo widget que você acabou de lançar, então é claro que vou compartilhar o fato de que pude vê-lo primeiro.

Talvez você seja uma organização sem fins lucrativos e seu conteúdo seja uma história de bem-estar sobre alguém que fez algo extraordinário. Vou compartilhar esse conteúdo porque me faz sentir bem e caridoso. Ofereça-me a chance de ganhar um iPad se eu preencher um formulário e terei muito mais chances de fornecer minhas informações pessoais.

O truque é saber o que leva seu público a se envolver. É recompensa emocional, recompensa material ou ambos? Coloque-se no lugar deles e crie uma estratégia de engajamento voltada para o seu público.

Mantenha simples

Recentemente, falei em uma conferência onde apresentei um estudo de caso de uma campanha de marketing social bem-sucedida. Usei uma camiseta com isto impresso na frente: #KeepItSimple. Eu tento praticar o que prego.

Trabalhei com clientes que criaram conteúdo interativo extremamente complicado e outros que o mantiveram incrivelmente simples, e o simples vence quase sempre. Veja como mantê-lo simples:

• Escolha fontes como Trebuchet que são fáceis de ler online.
• Não misture muitas fontes e tamanhos em uma página. Um tamanho para títulos, um tamanho para o corpo do texto.
• Mantenha-o em um CTA claro, se possível.
• Mantenha as coisas importantes acima da dobra.
• Torne a barreira de entrada o mais baixa possível (não peça o primogênito de alguém se tudo o que você realmente precisa é o endereço de e-mail)

Sua tarefa de casa

Espere um minuto, você nunca disse que haveria lição de casa no final deste artigo! Se eu tivesse dito que haveria lição de casa, você teria lido até aqui? Uh huh. Eu gostaria que você desse uma olhada em uma de suas páginas de destino com um olhar crítico e se perguntasse se há espaço para melhorias.

• Visualize uma de suas páginas de destino em um laptop e em um dispositivo móvel. Você tem que rolar para chegar ao CTA? Ele exibe bem em um dispositivo móvel?
• Peça a um amigo que não saiba nada sobre sua empresa para visualizar uma de suas páginas de destino e peça a ele que dê um feedback sincero enquanto a visualiza. Peça a eles que digam o que notaram primeiro, o que sua empresa faz e qual é o CTA principal da página.
• Veja se todos os elementos importantes estão dentro do padrão F.
• Teste suas páginas no maior número possível de navegadores e plataformas. O Safari não renderiza elementos como o Chrome. O Firefox não renderiza elementos como o Internet Explorer (IE). E diferentes versões do IE podem exibir conteúdo de forma completamente diferente.

Você não precisa ter um diploma em layout e design de publicidade para fazer isso. Mas você precisa estar disposto a olhar para o seu conteúdo atual com um olhar crítico.

Vale a pena o esforço.