DEV Community

Cover image for Como estruturar os elementos de uma aplicação com os padrões F e Z
Iuri Silva
Iuri Silva

Posted on

Como estruturar os elementos de uma aplicação com os padrões F e Z

Existem dois formatos que podemos utilizar quando estruturamos os elementos de uma aplicação. Os formatos que iremos abordar são baseados nos movimentos dos nossos olhos e podem ser aplicados dentro do contexto da cultura ocidental (leitura da esquerda para direita). Essas diretrizes acabam por definir quais são os pontos mais nobres de um conteúdo, ou seja, aqueles que devem conter as informações mais importantes.

Padrões “F”

Os padrões “F” se aplicam a páginas tradicionais com muitos textos, como artigos ou postagens em blogs.

Um leitor escaneia o lado esquerdo da página, procurando por palavras-chave interessantes em cabeçalhos alinhados à esquerda ou frases de tópicos iniciais, depois para em um ponto e segue lendo em linha à direita, parando quando encontra algo interessante.

O resultado se parece com um “F” (ou “E,” ou algo com ainda mais barras horizontais; mas o termo “F” pegou).

Image description

Como você pode utilizar isso? Use negrito, itálico, cores ou sublinhado com moderação para destacar informações cruciais. Isso ajuda a guiar os olhos dos leitores para os pontos-chave.

Padrões “Z”

Os padrões “Z” se aplicam a outros tipos de páginas, como anúncios ou sites, em que as informações não são necessariamente apresentadas em parágrafos em bloco.

O olho de um leitor primeiro escaneia a parte superior da página, onde é possível encontrar informações importantes, depois dispara para o canto oposto na diagonal e faz a mesma coisa na parte inferior da página.

Image description

Por isso é quase um padrão universal que os sites sigam esse comportamento, colocando as informações mais importantes nos cantos e orientando outras informações importantes nas barras superior e inferior.

Conclusão

É importante entender como os seus usuários fazem a leitura das informações antes de adotar um padrão. Considere também uma mistura dos padrões mencionados no artigo para chegar a uma solução ideal. Uma boa hierarquia visual irá diminuir o processo cognitivo dos usuários e destacar os pontos mais importantes para que concluam suas tarefas de uma forma mais eficaz.

Top comments (0)