Por redação

29/04/2022, às 13h

Os visitantes de sites, públicos de interfaces e de produtos digitais não leem as páginas, eles as escaneiam. Isso significa que os olhos geralmente seguem uma lógica de análise e visualização rápida geral de telas e materiais online. Esse padrão é estudado e analisado por muitos profissionais de UX e UI. Ele leva o nome de “padrão de escaneamento”. 

Conhecendo um pouco da lógica por trás desse “scan” feito pelos públicos de materiais online, no momento da montagem da interface (seja ela uma tela, um site, ou até mesmo algum outro produto digital), é importante fazer uso da hierarquia visual para dar mais destaque às informações principais. Sabendo sobre os padrões de escaneamento, é possível destacar de maneira certeira as informações principais e passar a quem vê a tela a mensagem desejada de maneira efetiva (eficiente e eficaz).

Existem diversos tipos de padrão de escaneamento, mas os dois tipos são os mais comuns no ocidente são: o F-pattern e o Z-pattern. Entenda mais sobre cada um no texto abaixo:

 

F-Pattern:

Padrão de escaneamento que acontece em interfaces que tenham mais textos. Observe na imagem abaixo o mapa de calor de como a leitura ocorre em páginas assim:

O que acontece é que o usuário começa o texto da página com bastante atenção, vai até o fim da linha, na leitura, e desce para a próxima. Logo, o foco se perde e o mapa de calor da leitura fica parecido com um “F”, onde algumas linhas do começo tem mais atenção, mas, do meio para o final, só o início de cada linha é observado.

A partir dessa análise, o grupo Nielsen Norman Group (especializados em realizar pesquisas voltadas para UX) fez algumas observações: 

• Raramente todas as palavras de seu site serão lidas;
• Se seu texto não tiver atrativos visuais (como tópicos, negrito, citações, imagens), ele será lido em F-Pattern.

Se o conteúdo para a página é grande, adapte-o com algumas dicas abaixo e aumente a chance de uma melhor leitura:

• corte o conteúdo repetitivo ou irrelevante do texto;
• faça as primeiras palavras serem bem atrativas, gerando curiosidade para o resto do conteúdo;
• Use títulos e subtítulos para dividir o texto;
• Realce palavras importantes com negrito;
• Use numeração ou bullets para facilitar a leitura.

Além da leitura em F-Pattern, existe também a leitura em Z-Pattern, que é o outro padrão mais comum:

 

Z-Pattern

A leitura em Z-Pattern pode ser induzida e acontece, geralmente, em interfaces que apresentam pouco texto. Nesse padrão, a leitura acontece da seguinte forma: 1 – da esquerda para a direita; 2 – Do canto superior direito para o inferior esquerdo; 3 – Do canto inferior esquerdo para o canto inferior direito, como na imagem abaixo:

Esse padrão é recorrente em interfaces que não possuem textos corridos e tem informações agrupadas. A partir dessa lógica, é possível agrupar as informações mais importantes tendo em mente quais serão visualizadas primeiro e em que local da tela.

Duas dicas principais para o sucesso nessa comunicação são: 

• Ordene as informações de maneira lógica, para facilitar o escaneamento;
• Entregue o que o usuário quer ver no local onde ele deseja visualizar aquela informação.

Conhecer um pouco mais sobre Hierarquia Visual e padrões de escaneamento permite que as interfaces sejam montadas de maneira que a visualização das informações seja lógica e rápida, pelo usuário e que informações importantes tenham destaque para que sejam percebidas por ele.

 

Você já conhecia os padrões de escaneamento e as especificações da hierarquia visual? Quem geralmente cuida dessa análise e estratégia aqui na Aigen são nossos Designers Gráficos. Clique aqui e conheça mais sobre essa área da Aigen.