Web Design & Skimming: Como a Leitura Dinâmica Afeta Seu Site
Atualizado: 25 de jul. de 2023
Vivemos na época da rolagem de tela. Pare um momento e pense como você se movimenta através dos feeds das suas redes sociais. Ou como você vai passar os olhos voando através deste artigo (achou que a gente não ia perceber, não é?). Com os internautas navegando rapidamente através do conteúdo, como conseguir que os leitores realmente diminuam o ritmo e consigam absorver todo o conteúdo do seu site? Para compreender como alcançar este objetivo vamos sair da internet por um momento e ver o estudo de caso de uma brilhante campanha de publicidade que está fazendo os pedestres pararem.
Têm surgido, em diversas cidades dos Estados Unidos, posters gigantes de cores brilhantes anunciando uma barrinha nutricional chamada RXBAR. Estes painéis publicitários criados pela firma Wieden+Kennedy são tudo menos sutis. Eles apresentam observações meio espirituosas e auto-referenciadas, como uma imagem da embalagem abaixo de um imenso título “COMIDA”. Ou então, no centro de Nova Iorque, um painel eletrônico onde se lê: “Pôster quase imperceptível da RXBAR na Times Square”. Esta campanha tem sido notícia no meio do design. Mas o que é exatamente tão genial sobre aparência e mensagem exageradas?
A resposta está na forma como nosso olhar se acostumou a absorver diariamente grandes quantidades de marketing. A maior parte do tempo olhamos os comerciais e placas promocionais com um olhar meio vago. A campanha da Wieden+Kennedy desafia esse comportamento. Eles apresentam um conteúdo digerível (olha aí o trocadilho!) de uma forma que quebra os estratagemas publicitários esperados, aos quais já nos acostumamos. Com o texto super legível e o choque da novidade, eles conseguiram fazer as pessoas pararem e repararem no que estão dizendo.
Voltando ao mundo virtual, esse é o mesmo tipo de efeito que você vai querer ter nos seus visitantes. Entretanto, como conseguir realmente que seu público absorva a mensagem que você está tentando transmitir através da sua página? (Isso sem mencionar que você também gostaria que apreciassem todo o árduo trabalho que você teve para criar sua magistral presença online). Transmitir suas ideias requer a utilização de uma variedade de técnicas de design para orientar os visitantes a rolar através do seu site e mostrar os mais importantes pontos ao longo do caminho. Neste artigo, vamos explicar o que é exatamente a técnica de leitura chamada “skimming”, como isso impacta a experiência do usuário no seu site e como você pode usar o web design para ajudar os leitores a reter informação mesmo que continuem a usar o skimming ao longo de toda a sua página.
O que é a técnica de leitura skimming?
Lá por 1997, quando a internet ainda era “tudo mato”, Jakob Nielsen, do Nielsen Norman Group, descobriu um dos mais importantes princípios da leitura pela internet: “Ninguém lê”. Ele chegou a essa conclusão depois de descobrir que 79% dos usuários pesquisados costumavam apenas “dar uma olhada” nos materiais que encontravam na internet.
A internet mudou muito desde então. Mas a forma como lemos esse material não mudou grande coisa. Na realidade, nós perdemos ainda mais a capacidade de ler o conteúdo palavra por palavra. Ao invés disso, adotamos uma prática de leitura chamada “skimming” (técnica de leitura onde só se dá uma passada de olhos no texto). Talvez você se lembre da época da escola, quando fazia isso tentando ler tudo o que era obrigatório da forma mais rápida possível. A versão digital não é muito diferente. Esse tipo de leitura refere-se à estratégia que usamos para passarmos rapidamente por uma página, procurando palavras-chave específicas e focando só nos elementos que atraem nosso olhar.
Tem havido muita pesquisa sobre o porquê dessa forma de navegação ser tão predominante entre o público na internet. Professora Maryanne Wolf, que tem escrito amplamente sobre este tópico, teoriza que o tempo imenso que ficamos online (aproximadamente 6 horas por dia para a média dos adultos em 2017!), na verdade, está alterando a neurologia do nosso cérebro. Ela argumenta que estamos ficando cada vez mais distantes da experiência da leitura de material impresso, que requer mais tempo para processar. Na internet, nos acostumamos com pedacinhos de conteúdo e um design visual avançado que cria hierarquias organizacionais por nós, para que nosso cérebro não precise fazer isso.
Isso realmente é um desafio para donos de sites que querem ter certeza de que sua mensagem vai alcançar o público. Felizmente, compreendemos cada vez mais como as pessoas interagem com o conteúdo na internet. Por exemplo, sabemos que inconscientemente empregamos certas estratégias de leitura, como procurar por palavras-chave e passar adiante rapidamente quando perdemos o fio da meada em meio a um mar de texto. Além disso, estudos de rastreamento ocular já mostraram que os visitantes de sites tendem a ler de acordo com uma forma de “Z” (para sites baseados no visual) e num padrão de “F” (para sites baseados em texto). Abaixo vamos explorar como colocar em uso cada uma destas técnicas em seu web design, de forma que você possa criar uma estratégia para que mais pessoas leiam seu conteúdo.
Design para o Padrão de Leitura Z
Este estilo é especialmente adequado para páginas cheias de elementos visuais e também para páginas de entrada (landing pages) que têm pouco texto e muitos elementos visuais como botões, formas e pequenas caixas explicativas. Se é isso o que você tem a oferecer, então continue lendo para saber como transformar todo o seu conteúdo na forma de um Z.
A ideia é que se possa mais ou menos desenhar a letra Z na sua página, começando pelo canto superior esquerdo e terminando no canto inferior direito passando por cada etapa do fluxo que você criou para os visitantes do seu site. Antes de dar um salto adiante e chegar nesse formato de Z, você primeiro deve determinar qual a informação que você vai querer incluir. Para tomar essa decisão pense sobre o momento inicial quando um visitante acabou de chegar em seu site.
Para quais elementos da página você vai querer que os olhos dos visitantes sejam atraídos de imediato?
Dos elementos que você acabou de listar, qual a ordem de importância? Qual deve aparecer primeiro, segundo, terceiro e por aí adiante?
Qual é a ação final para a qual você está direcionando sua página? O que você quer que o público faça na hora que chegar o final do Z? Escreva seu objetivo concreto, seja ele comprar um produto ou se registrar para um webinar.
Após responder estas três questões, você pode começar a colocar todo a sua linha de pensamento na forma do design.
Topo do padrão Z: Esta primeira linha horizontal fica bem onde está localizado seu cabeçalho. Uma vez que o olhar dos leitores se direciona primeiro para o canto esquerdo, aí é o local perfeito para você colocar seu logo. Ainda não tem logo? O Criador de Logo do Wix está aqui para resolver isso. Basta responder a algumas perguntas sobre o seu negócio e você vai receber um logo personalizado e profissional em segundos, que estará disponível para você fazer download e usar em todo o seu material de marketing. É uma forma de dar as boas-vindas instantaneamente aos visitantes e reforçar a identidade da sua marca.
Com seu logo pronto e posicionado no local certo, você pode se direcionar para a direita. Pense sobre o que é mais crucial seus visitantes saberem logo de cara sobre o seu negócio? Seu slogan? Links para as redes sociais onde você tem uma forte presença? Uma breve declaração sobre a sua missão?
Este local no topo também pode ser onde você deve colocar seu menu. Ter a informação essencial ao alcance dos seus visitantes vai facilitar muito a vida deles, quer você tenha um formato tradicional com múltiplas páginas ou um longo site de rolagem. Claro que se você tiver uma página de entrada (landing page) mais curta, então talvez possa pular essa parte do menu. Caso contrário, esse elemento da navegação é essencial.
Os visitantes, muitas vezes, esperam encontrar facilmente opções acessíveis de navegação no topo da página. Se entraram em seu site com uma intenção específica, como comprar uma das suas belíssimas fotografias, então provavelmente vão verificar o topo para ver se tem um link para sua galeria ou loja virtual. Faça um balanço de todo o conteúdo do seu site e depois organize-o em diversas categorias como: uma coleção de depoimentos, uma página “Sobre”, uma seção FAQ com as perguntas mais frequentes, uma loja virtual para mostrar sua mercadoria, uma seção “Contato” e quaisquer outras seções que você considere relevantes para o seu negócio.
Diagonal do padrão Z: Esta linha se estende pela página desde o canto superior direito até canto inferior esquerdo e funciona como um escorrega de um parquinho. Seu propósito é levar os visitantes rapidamente de onde eles pararam de olhar no topo, diretamente para onde você quer que eles continuem a verificar, ao final da página. Seja lá o que for que você insira nesse espaço, deve atrair a atenção dos visitantes. Dessa forma, eles vão manter o interesse por tempo suficiente para completar a ação identificada anteriormente como seu objetivo final quando chegarem ao final do Z.
Incorporar um elemento visual à sua página como um fascinante background de vídeo, uma galeria interativa ou uma animação que atraia os olhares, é uma forma infalível para conseguir isso. Cada um destes elementos mostra, ao invés de falar, do que trata seu negócio. Se você tem um café, um background interativo mostrando grãos de café sendo moídos transmite instantaneamente muita coisa sobre quem você é e o que faz. Seja lá o que você escolher para a seção diagonal, sua meta aqui é fazer o visitante direcionar-se ao longo da página em direção ao seu final.
Final do padrão Z: Está tudo pronto para levantar voo em direção ao seu objetivo. Este último plano horizontal da forma da letra é como se fosse o ajuste final para chegar ao seu “pedido”. Dessa forma, qualquer informação que você colocar aqui deve ter o objetivo duplo de responder a todas as questões que o visitante ainda possa ter antes de depositar toda a sua confiança em você e entusiasmar-se por seja lá o que você estiver oferecendo. Uma ideia para este trecho do caminho é usar pequenas caixas com um texto curto mostrando os benefícios do seu produto, trechos de críticas fantásticas ou algumas poucas frases sobre a “história” do seu negócio.
Se até agora você preencheu o caminho do seu Z com informação convincente e interessante – parabéns! O visitante provavelmente já chegou até o final da letra. Agora é o momento de mostrar sua chamada de ação (CTA). Seu pedido pode ter diversas formas: você pode pedir aos leitores para se cadastrarem na sua newsletter, comprar seu produto, fazer download do seu relatório, agendar um horário e muito mais. A questão que você vai colocar deve ser consistente com os objetivos da sua empresa.
Qualquer que seja a CTA selecionada, a forma como você coloca a questão é importante. Utilize efeitos de design como uma cor forte que contraste com o restante da página, um botão ou uma fonte acentuada para realçar seu “pedido”. Se você se sente meio perdido sobre a forma como abordar esta tarefa em termos de design, veja nosso guia completo sobre CTAs que realmente convertem, ideias para o melhor pareamento de fontes e uma análise de como aplicar os princípios do design ao seu site (especialmente o #2!). É para alcançar esse passo que você vem direcionando seus visitantes esse tempo todo. Não deixe que eles se percam justo na hora H.
Você chegou até o final! No entanto, não precisa ficar com apenas um formato em Z! Se você tem em mente múltiplas seções para sua página de entrada (landing page) ou uma série de CTAs que quer incluir (como, por exemplo, uma para cada um dos quatro serviços oferecidos pela sua empresa), então é só recomeçar esse formato ao final do primeiro Z. Se quer manter seu visitante engajado do início ao fim, explore o que os efeitos de rolagem parallax podem fazer para dar vida à sua página e deixar os visitantes entusiasmados para continuar rolando pela página.
Design para o Padrão de Leitura F
Se você decidiu criar um blog ou se algumas de suas páginas giram naturalmente ao redor de muito texto, então este padrão de design é para você. Imagine que alguém mapeou a letra F na sua página. Quaisquer áreas incluídas ao longo das linhas são os locais onde você deve inserir todas as informações mais importantes e frases do seu texto. A chave para converter visitantes casuais em leitores mais compromissados com seu árduo trabalho é atrair sua atenção onde quer que seus olhos se direcionem. Veja a seguir alguns princípios que deve ter em mente à medida que for estruturando a sua página:
Linhas horizontais do padrão F: É essencial criar títulos e subtítulos cativantes, para explicar rapidamente ao visitante o que ele pode esperar encontrar na página e por que vale a pena ficar por aqui. O topo do formato em “F” é geralmente onde você espera encontrar seu cabeçalho e sua imagem em destaque, e a segunda linha abaixo disso fica mais ou menos na área onde entraria um subtítulo um pouco mais adiante no texto. Isso é verdadeiro esteja você formatando o arquivo do seu blog ou o próprio artigo do blog. Além de despertar o interesse dos leitores, criar títulos H1 e H3 pode dar uma grande alavancada no SEO do seu site, pois faz todo o seu texto ser mais facilmente encontrado através do índice de buscas do Google.
Esta estrutura põe muito significado na área onde se encontram os dois primeiros parágrafos da página. Isso se deve ao fato de ficarem localizados diretamente naquela área onde o visitante ainda está lendo da esquerda para a direita ao longo da página. Certifique-se de conseguir incluir seu “gancho” no momento em que alcançar o final desta sequência (e não, o final do segundo parágrafo não fica na metade do caminho até o final da página), seja através de títulos cativantes para seus artigos ou de um início instigante para seu artigo.
No caso do padrão Z, você lembra como cada parte da letra era usada para manter o visitante navegando ao longo desse formato até alcançar a CTA ao final? Aqui, os dois planos horizontais do formato “F” são usados para alcançar o mesmo objetivo: convencer o leitor que deve continuar lendo esta página ou artigo até o final.
Linha vertical do padrão F: Depois de verificar tudo ao longo da seção horizontal do topo da sua página, o leitor vai naturalmente gravitar verticalmente para baixo, ficando do lado esquerdo. Seu trabalho é preencher esse espaço com elementos interessantes que se destaquem na página. Isso encoraja os leitores a quebrar seu ritmo instintivo de leitura e a realmente seguir lendo a frase até o fim.
Veja a seguir algumas estratégias que você pode usar para fazer isso acontecer.
Destacar palavras-chave em parágrafos, títulos e listas com marcadores: Não faça os leitores continuarem até o final da frase para descobrir qual o seu ponto. Por exemplo, “Receitas veganas para experimentar em casa” é um subtítulo mais convincente do que “Experimente estas receitas em casa para uma boa culinária vegana”. Com a segunda opção, você aposta muito alto e é muito pouco provável que seu leitor chegue até o fim para descobrir o que você está querendo dizer. Até para os mais audaciosos, não recomendamos arriscar-se a esse ponto.
Elementos de formatação: Espalhe pelo seu conteúdo elementos de estilo, como citações, imagens em destaque ou listas com marcadores ou numeradas. Estes elementos quebram a página e também proporcionam marcos que facilitam para atrair o olhar à medida que ele vai passeando ao longo da página. Um outro trampolim simples que você pode adicionar é usar os algarismos (quando for relevante) ao invés de escrever o número em palavras. O contraste com as letras do alfabeto serve como uma outra maneira de quebrar o texto e atrair a atenção.
Princípios gerais que deve considerar ao usar padrão F: A paciência que temos para ler online só tolera frases curtas. Para compreender a razão, basta pensar sobre o limite de caracteres do Twitter ou sobre como você se sente empolgado quando vê um post imenso no seu feed. Tenha este princípio em mente quando estiver escrevendo. Sua informação deve ser acessível e fácil de compreender. Exigir de seus leitores que façam um esforço ou voltem atrás para conseguir entender seu ponto não é uma boa estratégia para cativá-los.
Nós entendemos que o que sua empresa faz nem sempre é simples. E certamente você não precisa diminuir a qualidade das suas ideias para vender seus produtos ou serviços aos seus leitores. Isto apenas significa que você deve encontrar estratégias alternativas para agregar diversidade sem sobrecarregar visualmente os leitores com uma frase interminável. Se você tem uma ideia mais elaborada para mostrar, associe essa ideia à outras informações relevantes (dica: por exemplo, adicionar um link para outros artigos ou posts que você possa ter escrito anteriormente) ou complemente o parágrafo com imagens ou infográficos para aumentar a compreensão. Pode acreditar, seus visitantes vão te agradecer com emojis de mãos levantadas ou do polegar.
Você configurou todo o seu conteúdo num bonito formato de Z ou de F em toda a sua página. E agora? Primeiro use uma ferramenta como a Readability Test Tool para avaliar a clareza do seu conteúdo escrito. Segundo, envie o site atualizado a pessoas de sua confiança, como amigos, família ou colegas, e explique que adoraria ouvir seu feedback. Peça que anotem o que imediatamente se destacou na sua página. Cheque essa lista de acordo com seu plano original dos elementos que esperava que atraíssem o olhar dos visitantes, e faça ajustes até conseguir os resultados esperados. E agora está pronto para ser lido!
Faça os internautas exploradores virarem leitores engajados. Aplique estes padrões de design ao seu site hoje mesmo!
Por Equipe Wix
