O livro How Users Read on the Web, de Jakob Nielsen, completou 25 anos esta semana, e uma olhada em um estudo de rastreamento ocular lhe dirá que suas principais observações ainda são relevantes hoje.

Simplificando, os usuários não lêem uma página da web; eles o examinam em busca de palavras e frases individuais.

Um padrão típico mostrado em relatórios de rastreamento ocular é que os usuários digitalizam rapidamente uma página, rolando para baixo para fazê-lo. Em seguida, pressione o botão Voltar e aumente sua taxa de rejeição ou role até o topo e se envolva novamente com o conteúdo.

Mesmo quando o conteúdo, o volume e a qualidade marcam todas as caixas do usuário e ele opta por permanecer em seu site, ele ainda não lê; eles escaneiam; uma varredura um pouco mais profunda, mas ainda uma varredura.

Como resultado, é vital projetar sites para serem facilmente escaneáveis, tanto em uma varredura de fração de segundo para decidir se sua página vale o tempo do leitor quanto em uma segunda ou terceira passagem.

Esclareça o propósito da página imediatamente

Cada página deve ter um objetivo principal. Na maioria das vezes, esse objetivo é incorporado em um CTA (Call to Action).

A boa notícia é que, se o seu SEO (Search Engine Optimization) foi planejado, seu objetivo (ou seja, vender algo) e o objetivo do seu usuário (ou seja, comprar algo) se alinharão. Ao esclarecer o propósito da página, você pode mostrar ao usuário que seus objetivos estão alinhados.

Você pode ser experimental se for uma empresa estabelecida e o usuário souber o que esperar. Mas se você é novo no mercado ou tem um perfil mais baixo, precisa se adequar aos padrões de design estabelecidos. Isso significa que um SaaS deve se parecer com um SaaS, uma loja deve se parecer com uma loja e um blog deve se parecer com um blog.

Incluir seu CTA acima da dobra — o que no contexto da web significa que o usuário não precisa interagir para vê-lo. Isso facilita o progresso do usuário e informa claramente ao usuário o que você está oferecendo.

webflow

A página de destino da Webflow Conf 2022 do próximo mês esclarece o conteúdo da página, com um CTA claro acima da dobra.

Empregar uma hierarquia visual

O efeito Von Restorff afirma que quanto mais algo se destaca, maior a probabilidade de notá-lo e lembrá-lo.

As hierarquias visuais são excelentes para guiar um usuário pelo conteúdo. HTML tem os níveis de cabeçalho h1–h7 – embora, na realidade, apenas h1–h4 sejam muito úteis – o que lhe dá vários níveis de cabeçalho que podem ser escaneados por diferentes leitores escaneando em taxas diferentes.

Por exemplo, sabemos que os subtítulos têm pouco impacto se um usuário ler a página de cima para baixo com diligência, mas são excelentes para chamar a atenção dos leitores desnatados.

amnesty

A Anistia usa uma hierarquia muito simples, a única mudança em seu subtítulo é o aumento do peso. Mas é o suficiente para chamar a atenção do usuário.

Você também pode criar hierarquias visuais com outras formas de contraste; peso e cor são frequentemente empregados em adição ao tamanho. Para acessibilidade e design inclusivo, é aconselhável combinar indicadores visuais ao criar uma hierarquia; por exemplo, os títulos geralmente são maiores, mais negritos e coloridos.

Usar espaço negativo

Imagine uma pessoa parada no meio da multidão. Digamos que eles estejam vestindo um suéter listrado vermelho e branco e um chapéu bobble vermelho e branco – bem distinto. Mas se houver centenas de outros personagens ao seu redor, eles podem ser difíceis de identificar.

Agora imagine a mesma pessoa vestida da mesma forma, sozinha. Quanto tempo você levará para identificá-los? Mesmo sem a roupa listrada, não é um grande desafio.

Elementos isolados não são apenas mais fáceis de detectar, mas chamam a atenção porque o espaço negativo (às vezes chamado de espaço em branco) ao redor deles cria contraste.

Ao usar o espaço negativo, a chave é dar aos elementos espaço suficiente para respirar e atrair o olhar sem dar-lhes tanto espaço que eles sejam dissociados do resto do seu conteúdo.

moheim

Em todo o site, o Moheim usa espaço negativo para destacar elementos da interface do usuário enquanto agrupa o conteúdo associado.

Usar padrões F

Os usuários digitalizam uma página usando um padrão F ou um padrão Z.

Como os usuários verificam sua página de maneira previsível, podemos empregar layouts que atendem a essa tendência.

Os designers estão cientes dos padrões F e Z há algum tempo e, como são usados ​​há tanto tempo, podem ser auto-realizáveis, com os usuários sendo treinados para digitalizar uma página dessa maneira. No entanto, ambos os padrões são semelhantes a como os olhos viajam de linha em linha em sistemas de escrita horizontais.

Seja qual for a causa, ao colocar conteúdo-chave nesses caminhos, você aumenta a chance de capturar a atenção de um usuário.

kamilbarczentewicz

Kamil Barczentewicz usa um layout bonito e natural que também está em conformidade com um padrão F clássico.

Incluir imagens com rostos

As imagens são uma ótima maneira de transmitir os valores da marca e tornar um site atraente. Mas quando se trata de chamar a atenção de um usuário digitalizando seu design, as melhores imagens incluem rostos.

Por exemplo, um depoimento com uma imagem do cliente chamará a atenção mais do que um depoimento apenas em texto.

awwwardsconference

A Conferência Awwwards usa um computador animado com um rosto para chamar a atenção. E grandes imagens de alto-falantes fazendo contato visual.

Isso se deve quase certamente ao condicionamento social; vemos um rosto e nos relacionamos com ele para ver se é uma ameaça ou não. A maioria de nós naturalmente procura expressões de emoção para entender situações, e a distinção entre uma pessoa da vida real e uma imagem ainda não entrou em nossa programação mental.

Você não precisa usar fotos. As ilustrações estão bem. A chave é garantir que haja um rosto na imagem. É por isso que as ilustrações dos personagens funcionam tão bem.

Copiar Design de Impressão

O design de impressão é séculos mais antigo que a web, e muitos aplicativos de impressão, de jornais a publicidade, desenvolveram elementos de design para chamar a atenção dos leitores que escaneiam o design.

Subtítulos, listas, blockquotes e pull quotes chamam a atenção. Parágrafos introdutórios em tamanho maior ou até mesmo em itálico atraem os usuários para o texto. Parágrafos mais curtos incentivam os usuários a continuar lendo.

As regras horizontais usadas para delinear seções de texto funcionam como uma pausa nos olhos que viajam pelo conteúdo com impulso. Eles são uma boa maneira de pegar um leitor de digitalização que está perdendo o interesse.

Você pode usar uma régua horizontal ou dividir seu layout com faixas de cores que dividem as seções de conteúdo.

omono

Omono usa faixas horizontais para destacar diferentes seções de conteúdo.

Massa, não peso

Frequentemente discutimos elementos de design como tendo peso; font-weight é a espessura dos traços.

Mas é mais útil pensar nos elementos de design como tendo massa; massa cria gravidade, atraindo o olhar do usuário para eles.

O truque é projetar elementos com massa suficiente para atrair a atenção do usuário ao digitalizar em velocidade sem forçar o usuário a alterar a forma como se envolve com seu conteúdo.

Imagem em destaque via Pexels.

Com informações de WebDesigner Depot.