Layout da interface

O layout da interface não se relaciona apenas à sua aparência, que contribui para a experiência subjetiva e emocional de recepção. Na verdade o layout, com o estilo visual, fontes, cores, imagens, é parte integrante do design da informação e da funcionalidade dos aplicativos.

■ O layout da interface influencia a primeira impressão, de caráter subjetivo, do usuário que visita um web site, especialmente daqueles que o visitam pela primeira vez. Uma primeira impressão positiva facilita a compreensão da estrutura do conteúdo e do conceito editorial, bem como da funcionalidade da interface.

◊ Estudo realizado por pesquisadores canadenses, publicado em janeiro 2006 no jornal Behavior and Information Technology, afirma que os usuários da internet gostam ou não de um web site no primeiro momento do contato, ou seja, no intervalo de um vigésimo de segundo, menos que a duração de um piscar de olhos, em que a página aparece diante dos seus olhos.

Segundo a pesquisa, a primeira impressão influencia todo o resto da experiência de uso e navegação no site (ver bibliografias 1 e 2).

◊ Esta afirmação não é um consenso. Jakob Nielsen argumenta que estes testes não foram realizados com conexão à internet e suas condições de realização foram muito diferentes das condições de uso normal de acesso e visualização das páginas. Ele argumenta:

- Online, o tempo de carregação das páginas é maior (o que faz com que a primeira impressão seja a de "partes" da página, e não do conjunto) - normalmente os textos aparecem primeiro. Online, não há página que carregue instantaneamente.

- Normalmente o usuário olha primeiro os detalhes que o interessam, e estes compõem um conjunto de impressões que se acumulam antes que faça uma impressão geral da página - a impressão geral é composta de diversos fragmentos que compõem o layout do conjunto.

- O usuário já tem uma expectativa prévia do que procura em relação à página que seleciona, o que influencia a sua primeira impressão - isto não aconteceu no ambiente de testes citado, em que os usuários não tinham qualquer expectativa sobre as páginas que lhes seriam mostradas.

- A primeira impressão se processa de maneira relativamente lenta, e muitas vezes se consolida quando o usuário já saiu da página (o que pode resultar até num movimento de retorno imediato). (Newsletter Alertbox Announcement List, 23.1.2006).

De qualquer forma, os autores de modo geral reconhecem que a identificação inicial dos elementos de layout ajuda a compor a experiência de interlocução entre usuário e interface. E a primeira impressão se forma rapidamente (a média de permanência dos usuários em páginas web é de 27 segundos - Nielsen, bibliografia abaixo).

■ Além de criar uma empatia imediata, o layout influencia o grau de facilidade de encontrar os fragmentos de informações de maneira intuitiva. Uma interface saturada, com muitas instruções, sinais, rótulos, demanda mais tempo de aprendizado de uso e maior esforço para a localização das informações.

E a falta de pistas visuais, com sinais pouco visíveis, logotipos difíceis de localizar ou com funcionalidades difíceis de decifrar, dificulta a utilização.

O layout influencia também como o visitante do site se posiciona em relação ao seu conteúdo. Um layout agradável inspira confiança e estimula a navegação em diferentes páginas.

■ A organização visual das informações está também relacionada ao deslocamento entre as páginas e às indicações do conteúdo disponível, orientando assim a ação do usuário.

A seleção de um botão ou item de um menu pode ser influenciada pela ordem em que estes elementos estão dispostos em relação a outros.

A percepção do layout no projeto

■ É comum a percepção de que o projeto de site é constituído em sua maior parte pelo planejamento do layout das telas. Mas na verdade, web design é uma das etapas do projeto, que inclui uma extensa cadeia de processos de conhecimento.

■ O layout da interface reflete um conjunto de soluções de diversas naturezas, que devem estar contempladas no resultado final. Estas solução levam em conta fatores como uso, experiência, deslocamento e sentimento de identificação do usuário, aderência ao conceito editorial e necessidades específicas de edição, relação direta com os objetivos do site.

■ Devido a esta diversidade de fatores, a equipe de design para a web costuma ter formação heterogênea e é escalada de acordo com a natureza do projeto.

Para o projeto de um site com poucos recursos, que não permita a contratação de profissionais especializados, o designer tende a acumular algumas funções de programação e precisa ter a formação técnica necessária.

Um projeto com maior segmentação profissional permite a contratação dedicada de designers e outros profissionais com formação específica em mídias online e tecnologias da informação.

■ O designer de web sites precisa conhecer não só os assuntos relativos aos processos de elaboração de um projeto e à criação de soluções visuais como também regras de acessibilidade, usabilidade, arquitetura da informação, aplicação de elementos para a interação entre usuários e a interface, composição de páginas em HTML com CSS, uso de elementos como animação, vídeo e som, mesmo que não se proponha a ser um especialista em cada uma destas áreas de conhecimento.

■ Quanto mais completa a formação profissional, maior o escopo de atuação do designer em todas as etapas do projeto e maior é a probabilidade de compreender e absorver o modelo conceitual dos usuários de cada site.

■ A formação especializada garante ao designer as condições para ter a palavra final em decisões referentes ao design da interface, o que nem sempre acontece. Muitos gestores não-especializados relacionam o layout apenas à forma do produto, esquecendo que cada elemento está relacionado a conceitos e funcionalidades específicos, e tomam decisões baseadas apenas nas suas impressões pessoais.

Embora a opinião de cada profissional seja importante e necessária, o argumento do designer deve contribuir para preservar a integridade conceitual e a qualidade técnica da interface.

Assuntos relacionados
► Alessi e metodologias inovadoras
► Indexação para busca (os movimentos dos olhos dos usuários em páginas de resultados de buscas)
► Conceito editorial e comercial
► CSS
► Acessibilidade
► Usabilidade
► Animações
► Vídeo e áudio

Referências (Criação de modelos de web sites)
► You won't see what you don't look at... (HFI, acesso em 3.3.2009)
2) First impressions count in website design (WebSiteOptimization, acesso em 27.1.2006)
1) internet users judge web sites in less than a blink (ComputerWorld, acesso em 20.1.2006)
► Livro: Prioritizing web usability, de Jakob Nielsen e Hoa Loranger. New York: New Riders, 2006.
► Livro: Designing interfaces - Patterns for effective interaction design, de Jenifer Tidwell. O´Reilly, 2005
► Getting IA Done, Part II (DigitalWeb, acesso em 23.8.2005)
► When what they see is what you get - but satisficing isn't enough (HFI, acesso em 31.5.2005)

Mais informação sobre o assunto (link externo)
► Design - site FatorW.com, de Walmar de Andrade
► Visual language - Design guidelines for the widening of page templates across bbc.uk.uk - especificações de design dos sites da BBC

• Quem somos
• Glossário
• Receba o boletim mensal