Quando acessa uma mídia digital desconhecida, a maioria dos usuários procura alguns elementos em lugares consagrados pelo uso. A aderência a estas convenções acelera o uso e a curva de aprendizagem, bem como garante que elementos em locais de difícil acesso possam ser mais facilmente localizados – embora o grau de dificuldade dependa das características de cada produto e de seu público.

A composição de uma página web, com a distribuição dos diversos elementos na sua área, atende a critérios como os objetivos principais do site, as tarefas mais importantes que para os usuários, a priorização de um tipo de conteúdo ou funcionalidade. A princípio, deve haver uma hierarquia visual clara entre os elementos, que explicite os mais e menos importantes. Com a disposição hierárquica, os visitantes encontram mais facilmente o que procuram, e se concentram mais facilmente nas sua tarefas e informações.

Essa disposição obedece a modelos de posicionamento em colunas e linhas, as malhas (grids), que se adaptam à natureza do conteúdo. E na maioria das vezes obedece a convenções aceitas pelo senso comum, especialmente nos canais dirigidos a públicos heterogêneos e não-especializados. Os usuários de interfaces web estão acostumados a encontrar:

O logotipo ou assinatura visual no alto, à esquerda da página.

Informações relacionadas agrupadas por proximidade ou aparência, sendo as mais importantes mostradas em primeiro lugar.

A barra de navegação principal no alto, com links dispostos horizontalmente, ou no lado esquerdo da tela, com links dispostos verticalmente.

Links para “Voltar à Principal” na área superior esquerda da página, ou links de volta à Principal no logotipo.

A ferramenta de busca interna no alto, na área central ou à direita da página.

As informações para contato no alto da página, à direita.

Banners e anúncios no alto ou ao longo do lado direito.

Menus drop down e atalhos para páginas localizadas em áreas mais profundas, no alto da área de conteúdo ou ao longo do lado direito.

Formulários para entrar em área reservada do site (com campo de login e senha) no alto, à direita da página.

Breadcrumbs ou “migalhas de pão” no alto da área de conteúdo ou embaixo do logotipo, de forma que fiquem facilmente associados à localização da página em relação à Principal.

Carrinho de compras no alto da página – em sites de comércio. Nestes sites, também ficam normalmente no alto as informações sobre as compras, o acesso às informações sobre o consumidor e o acesso ao suporte, que pode ser feito via email, chat, forum, telefone.

Agrupamentos de links internos na área esquerda ou no alto das páginas.

Artigos em promoção, nos sites de comércio, no alto da área de conteúdo.

Área de conteúdo, na parte central da página, onde pode ser localizada com mais facilidade.

Links internos para informação adicional na área à direita da página.

Links para outros sites na parte inferior da página.

Informações institucionais no alto da página em sites institucionais ou na barra na parte de baixo, como nos sites de comércio, em que as informações institucionais não são prioritárias.

Links para “Voltar ao alto” na base de páginas muito altas.

Estes também podem ficar localizados ao longo da altura em páginas com diversos itens em que é necessário ir e voltar à parte de baixo (como no caso de perguntas frequentes, que podem exigir a navegação alternada entre as perguntas do alto e as respostas na parte de baixo).

Informações sobre o sitena base da página.

Os itens acima não são, de maneira nenhuma, regras a seguir de maneira incondicional. Um site que precise evidenciar uma postura inovadora ou um posicionamento diferenciado em relação aos seus pares precisa problematizar estas referências e propor soluções que abram caminhos para novos usos, novas percepções.

Alan Cooper, especialista em experiência do usuário, afirma que se deve seguir os padrões até que se encontre uma alternativa melhor. Caso não aconteça, é melhor seguir a regra.

Outras questões relacionadas ao posicionamento dos elementos nas interfaces – diretamente relacionadas entre si:

Alinhamento – cria relacionamentos entre os elementos, identificando-os a um tipo de conteúdo. Os vínculos estabelecidos facilitam sua varredura com os olhos, comportamento presente no modo de uso da maioria dos usuários de interfaces digitais.

Além disso, o alinhamento facilita a legibilidade de textos grandes: à esquerda facilita a leitura; centralizado, a não ser poucas palavras em um botão, dificulta.

Espaços em branco – não estão propriamente vazios, e por isso nem sempre devem ser ocupados. Proporcionam o balanceamento entre espaços ocupados e não ocupados.

Proximidade – os elementos próximos dão a impressão de estarem relacionados. Elementos distantes parecem não estar associados.

Repetição – o uso de estilos de botões, o uso consistente de cores e tipografias, bem como o uso de recursos dinâmicos, como mouseover, deve ser repetido em situações afins para manter a coerência com o universo informacional e editorial do website. O uso de padrões de design facilita o estabelecimento de modelos a serem repetidos em cada canal, ou entre canais, garantindo a consistência visual entre as partes e o conjunto, bem como de toda a experiência de uso em geral.

Contraste – facilita a leitura de textos e a criação de identidade entre elementos. Contrastes acentuados chamam a atenção dos usuários para os elementos, enquanto os com baixo contraste tendem a ser identificados, ou aproximados semanticamente, de maneira menos enfática.

Contraste cria hierarquia visual: o uso de muito contraste deve acompanhar os elementos mais destacados, de hierarquia visual/conceitual mais alta. O uso de baixo contraste afasta foco dos elementos, por isso diminui o sentido de importância, “urgência”, da sua percepção.

O contraste precisa ser balanceado: contraste demais dificulta a visualização, e contraste de menos, também.

Os usuários não devem precisar fazer rolagem horizontal para localizar os elementos que procuram – a rolagem horizontal, quando associada à vertical e especialmente em dispositivos móveis, pode ser dispersiva e difícil para pessoas com problemas motores ou dislexias.

O preparo da página deve permitir que usuários de desktops visualizem seus elementos críticos em resoluções de tela a partir de 1340 x 900px. E os usuários de dispositivos móveis devem ver os elementos críticos por meio de rolagem vertical. Caso seja necessário dispor elementos horizontalmente em dispositivos móveis, a funcionalidade deve ficar clara.

(Atualizado em 27.2.2017)