Navegação e layout – Avellar e Duarte

A relação entre a navegação e layout em mídias digitais considera a identidade visual e funcional da interface. O layout facilita a compreensão das funcionalidades, o conteúdo e as tarefas mais importantes em relação aos menos importantes. A harmonia do conjunto, a composição dos elementos, as cores, têm papel importante nesta diferenciação.

A relação entre a navegação e o layout da interface web considera a identidade visual e funcional da interface — No exemplo acima, quando o usuário passa o mouse sobre os itens do menu à esquerda, vê o menu com fundo colorido. Por default, a tarja colorida aparece com fundo branco. As cores variam para cada link, mostrando uma palheta com tons relacionados. Neste caso, as funcionalidades da navegação estão relacionadas ao conjunto do layout, que destaca os elementos mais importantes da interface e do conteúdo.

Navegação e layout se relacionam também à sinalização conceitual de menus e barras de navegação. Agrupamentos de links sobre um assunto são melhor reconhecidos se visualmente diferenciados em relação a agrupamentos relacionados a outros assuntos, mesmo que próximos uns dos outros.

A sinalização conceitual de diferentes menus e barras de navegação — A diferenciação visual entre as barras de navegação horizontais do alto da página, com fundo branco e com fundo cinza, sinaliza que tratam de assuntos diferentes. A diferença é parcial, pois as duas se relacionam aos produtos da marca, apenas a abordagem é diferente.
A barra de fundo branco mostra os produtos sob o ponto de vista do posicionamento da marca no mercado, “Todos os produtos”, “Produtos indispensáveis”, “Mais vendidos”. Já a barra de fundo escuro detalha os tipos de produtos, de públicos, produtos diferenciados por promoções e novidades. O posicionamento da busca nesta barra indica que consumidores que procuram produtos a utilizam bastante, especialmente os já familiarizados a nomes e linhas de produtos mais conhecidas.

Na criação de um sistema consistente, uma estrutura visual compreensível, com variação de elementos em cada tela (se necessária) estimula o deslocamento do olho.

A repetição de elementos estruturais é necessária, mesmo que não façam parte da estrutura de navegação.

► Exemplos: fios em torno das fotos, sombras no fundo dos gráficos, o tamanho das imagens, o alinhamento dos textos efeitos tridimensionais.

Em barras de navegação muito longas, o uso de estilos diferenciados nos rótulos, de marcadores (bullets, como pontinhos, setas, caracteres especiais) e a indentação dos itens nas barras de navegação, facilita a visualização dos diversos níveis das informações.

Em barras de navegação muito longas, estilos diferenciados nos rótulos, marcadores (pontinhos, setas, caracteres especiais) e indentação ajudam a identificação dos níveis hierárquicos das informações — Na página acima, a longa barra de navegação permite a visualização não só as diferentes seções do site, mas também a relação de subordinação entre elas. No alto, o link para a página Principal assinala o nível mais alto da hierarquia. Vê-se que esta página, “Film” (marcada entre linhas horizontais) está localizada dentro da seção “Events & Education”, localizada na segunda camada de informações.
A visualização entre as camadas é identificada visualmente pela indentação diferenciada entre elas.
Abaixo da navegação principal, com fundo rosa, podemos identificar três itens, “Tate Collection”, “Tate Learning” e “Tate Research” que, por sua natureza independente em relação à visitação e à programação do museu, têm tratamento visual diferenciado em relação aos demais (fundo branco, letras em cinza).

Exemplo:

Item 1

• Subitem 1

• Subitem 2

Item 2

• Subitem 1

• Subitem 2

• Subitem 3

Item 3

O acesso a sites em diversos dispositivos demanda a adaptação ergonômica dos botões para utilização híbrida. As áreas para toque com dedo precisam ser maiores (maior conforto físico) e adaptadas para os locais da tela onde os dedos ficam mais confortáveis para ação se precisam segurar o dispositivo. Como nem sempre é possível adaptar botões para diferentes dispositivos, é importante considerar que todos os botões devem ser clicáveis em qualquer dispositivo.

Assim, para que o polegar possa digitar e clicar facilmente, a parte de baixo da tela é mais privilegiada do que o alto (ao contrário das interfaces para desktop). É preciso considerar também que os dedos cobrem a tela, por isto a área ativa embaixo ajuda a mantê-la mais livre para visualização.

Fundos de tela muito “ocupados” podem atrapalhar a leitura dos rótulos de botões da estrutura de navegação, de textos, e o reconhecimento dos elementos funcionais. Espaços em branco, ou desocupados, orientam a leitura e a compreensão do conteúdo.

Fundos da tela muito "ocupados" podem atrapalhar a leitura dos rótulos de botões e de textos, bem como o reconhecimento dos elementos funcionais — O fundo da página em rosa intenso e com pontinhos brancos cria uma espécie de “ruido visual”, que compete com o texto da área central. Embora os títulos estejam legíveis (pelo tamanho) e os textos estejam em área com fundo branco, a padronagem do fundo dispersa a atenção necessária à leitura dos textos.

barranav_layout — A barra de navegação à esquerda, com subitens sobre a barra branca, destaca as informações e os percursos. O fundo ilustrado não se estende à área de navegação, e não atrapalha o deslocamento. As cores escuras e contornos desfocados da imagem ajudam a ilustrar o conceito geral associado à marca não atrapalham a leitura dos textos.

(Atualizado em 20.8.2015)