Layout

Atividades relacionadas (ao layout do web site)

Aspectos específicos da interface

Navegação e layout

Atualizado em 2.1.2011

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 melhor reconhecidos se tratados de maneira visualmente diferenciada em relação a agrupamentos relacionados a outros assuntos, mesmo que situados próximos uns dos outros.Exemplo

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 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 a relação entre navegação e layout (links externos)
Are all results on search engines equal? A surprising journey within the SERPs [Best of SEW 2010 #7] – pesquisa sobre o layout das páginas de resultados das principais ferramentas de busca da internet (SearchEngineWatch, acesso em 2.1.2011)
Design principles (IBM, acesso em 28.3.2008)

Avellar e Duarte no Twitter Avellar e Duarte no Facebook