Layout da interface
Atividades relacionadas (ao layout do web site)
Composição geral dos elementos
A composição geral dos elementos da interface web pode seguir modelos simétricos ou assimétricos, com colunas de larguras variáveis, dispostas de diferentes maneiras, de acordo com o(s) eixos(s) que guiam a localização dos elementos na página ou de acordo com malhas (grids) que atendam às características do conteúdo.
Pode incluir a concepção de uma malha gráfica (grid) para a maioria das páginas, de forma que, apesar das diferenças do conteúdo de cada página, todas tenham as mesmas margens, alinhamentos, localização de elementos em linhas e colunas. ► Exemplo
A malha facilita o posicionamento dos elementos da interface e do conteúdo em coordenadas definidas. A malha também provê sentido de localização para o deslocamento dos usuários nos diferentes canais e seções. ► Exemplo
A malha gráfica geral pode dispor os elementos do layout da interface web de diversas maneiras:
■ Layout "líquido", que se adapta a diferentes resoluções de tela. Neste caso, é necessário verificar o posicionamento dos elementos em diferentes configurações do monitor, priorizando uma delas.
Portais com grande volume de acessos diários, como Amazom.com, Submarino e Americanas.com preferem usar este modelo de configuração, para incluir o maior número possível de compradores.
■ Posicionamento centralizado do conteúdo: A localização centralizada do conteúdo entre duas colunas mais estreitas pode ser necessária em sites com longas barras de navegação e pequenas unidades de conteúdo (ou publicidade) posicionadas nas laterais. No entanto, é preciso ter cuidado para manter espaços de respiração que valorizem cada elemento. Exemplo: National Archives
■ Posicionamento da navegação à esquerda da tela: permite que os elementos se localizem de acordo com o modelo mental da maioria dos usuários (de cultura ocidental). Este modelo é mais tradicional e foi talvez o mais usado até agora, e pode associar o site a modelos não muito inovadores. No entanto, pode também estar associado a confiabilidade e conforto de leitura. Exemplo: Wikipedia.
■ Posicionamento da navegação à direita da tela: Atualmente é mais comum situar o conteúdo à esquerda da tela, com o posicionamento das barras de navegação, publicidade e conteúdo de apoio à direita. Sites de notícias e blogs costumam adotar este formato, bem como sites que não podem ficar restritos a uma navegação no alto. Exemplos: O Estado de São Paulo, Newyorkpost.com
■ A composição dos elementos dentro da malha gráfica inclui a localização e o balanço visual dos elementos em contexto – o usuário deve ser capaz de entender visualmente a estrutura da página e a funcionalidade dos elementos, bem como os elementos editorial e/ou comercialmente mais importantes, de acordo com o modo como estão organizados. ► Exemplos
A divisão da interface em diversas colunas deve facilitar o acesso às principais funcionalidades e ao conteúdo do web site. Os espaços em brancos devem procurar o equilíbrio entre os elementos dominantes e entre os elementos "menores", como entrelinhas, legendas, espaços entre colunas.
■ Deve-se evitar usar fundos de tela muito "ocupados", que possam atrapalhar a leitura dos rótulos de botões e de textos, bem como o reconhecimento dos elementos funcionais. Os espaços em branco ajudam a leitura e a compreensão do conteúdo no contexto do site. ► Exemplo
Assuntos relacionados
► Layout líquido: usar ou não?
► Componentes da interface web
► Lugares comuns dos elementos das páginas
► O espaço da página
► Especificações do produto : Consistência do layout e do tratamento editorial
► Usabilidade : Consistência
Referências sobre composição geral da interface web
► The laws of simplicity, de John Maeda (acesso em 22.6.2010)
► What is the best layout for multiple-column web pages? (Software Usability Research Laboratory, acesso em 1.2.2009)
► When what they see is what you get - but satisficing isn't enough (Human Factors International, acesso em 2.5.2005)
Mais informações sobre o assunto (links externos)
► Global Experience Language (BBC – Gel, acesso em 1.12.2011)
► Thinking outside the grid, de Molly E. Holzschlag (A list Apart, acesso em 22.6.2010)
► Designing with content in mind (thedesignCubicle, acesso em 7.12.2009)
► 960 Grid System, de Nathan Smith acesso em 28.8.2009
► Grids are good, de Khoi Vinh e Mark Boulton (PDF, 8,85Mb, Subtraction, acesso em 6.3.2009)
► Fluid grids, de Ethan Marcotte (A List Apart, acesso em 6.3.2009)
► Grids CSS: Examples (Yahoo Developer Network, acesso em 20.2.2009)
► Choose the overall page width - YUI grids CSS (Yahoo Developer Network, acesso em 20.2.2009)
► Feeling your way around grids, de Mark Boulton (Mark Bouton, acesso em 7.8.2008)
► Design principles (IBM, acesso em 28.3.2008)
Programas auxiliares
► PicNet's Mouse Eye Tracking – solução gratuita para mostrar detalhes sobre como cada usuário vê as páginas de um site (acesso em 28.3.2010)
► ClickTale – ferramenta de acompanhamento de uso de web sites (acesso em 28.3.2010)
► AttentionWizard – programa para avaliar layouts de web sites a partir da simulação dos movimentos do olho humano e da verificação dos principais pontos de atenção. (SiteTuners.com, acesso em 4.12.2009)
► Sketchbook Pro – permite o desenho livre de esboços, com suporte de ferramentas de texto e alguns efeitos de texturas
