Principal
Projetos web:
Criação de modelos

Layout

Atividades relacionadas (ao layout do web site)

Aspectos específicos da interface web

Navegação e layout

Atualizado em 15.7.2010

A relação entre a navegação e o layout de uma interface web considera a identidade visual e funcional da interface. O layout facilita a compreensão da hierarquia funcional entre os elementos, em que as tarefas mais importantes se destacam em relação às menos importantes. O posicionamento dos elementos e a sua cor são fatores importantes nesta diferenciação. Exemplo Exemplo 1

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

Para a 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 do usuário. Exemplo

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

-> 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 bullets e sinais de itens (como pontinhos, setas, caracteres especiais) e de endentação nas barras de navegação, ajuda a visualização dos diversos níveis das informações. Exemplo

Exemplo:

Item 1

• Subitem 1

• Subitem 2

Item 2

• Subitem 1

• Subitem 2

• Subitem 3

Item 3


Assuntos relacionados
Componentes da interface web
Usabilidade - Consistência
Barras de rolagem

Mais informações sobre o assunto (link externo)
Design principles (IBM, acesso em 28.3.2008)