O layout de mídias digitais não se relaciona apenas à aparência das interfaces. O modelo visual, com fontes, cores, imagens, composição, é parte do design da informação e das funcionalidades relacionadas às tarefas que os usuários realizam, contribuindo para a experiência subjetiva de recepção e ação.

O layout da interface, geralmente realizado depois da consolidação dos requisitos do projeto e da arquitetura da informação, expressa os objetivos do canal e influencia a primeira impressão, de caráter subjetivo, de quem a utiliza, especialmente de quem acessa um  site ou aplicativo pela primeira vez. Uma primeira impressão positiva facilita a compreensão do conceito geral, da estrutura do conteúdo e das funcionalidades 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 website 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 toda a experiência de uso e navegação (1, 2).

Esta afirmação não é um consenso. Jakob Nielsen argumenta que estes testes não foram realizados com conexão à internet e as condições eram diferentes das de uso e visualização de páginas habituais. 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, poucas páginas carregam 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 fragmentos que compõem o conjunto.

– O usuário já tem uma expectativa prévia do que procura em relação à interface que seleciona, o que influencia sua primeira impressão – isto não aconteceu no ambiente de testes citado, em que os usuários não tinham expectativas sobre as páginas apresentadas.

– A primeira impressão se processa de maneira relativamente lenta e pode se consolidar quando o usuário já saiu da página (o que pode resultar até em um movimento de retorno imediato) (Alertbox Announcement List, 23.1.2006).

De qualquer modo, 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, segundo Nielsen).

Além de criar empatia imediata com o usuário, o layout da tela influencia a facilidade de encontrar informações e de realizar tarefas de maneira intuitiva. Uma interface saturada de instruções, sinais, rótulos, demanda mais tempo de aprendizado de uso e maior esforço para a tomada de decisões do que interfaces limpas e objetivas.

Também a falta de pistas visuais, estruturas pouco claras, hierarquias visuais pouco diferenciadas entre os elementos, relacionamentos invisíveis, pouca orientação visual, dificultam a utilização.

O layout influencia o modo como o visitante da interface se posiciona em relação ao conteúdo. Um layout personalizado, identificado com a marca, adaptado ao segmento de público a que se destina e editado de maneira conveniente inspira confiança, estimula a navegação e permite aos visitantes realizar os objetivos de seu acesso.

A organização visual das informações e elementos está relacionada também ao deslocamento entre páginas e às características conceituais do conteúdo publicado, orientando a ação do usuário.

Geralmente o olhar da maioria das pessoas de culturas que leem da esquerda para a direita procura primeiro o alto à esquerda da página. A seguir, vai para a extrema direita, e finalmente para as laterais mais embaixo. Estas referências estão sujeitas a variações entre grupos e pessoas, mas de modo geral pode-se considerar o canto superior esquerdo como uma das áreas mais importantes na tela de um dispositivo, sendo as áreas mais embaixo e/ou à direita menos importantes. É importante levar isso em conta na hora de criar a composição dos elementos.

Padrão “F” de visualização de telas: as manchas vermelhas, áreas mais procuradas pelos usuários, sinalizam que os olhos da maioria se movimentam da esquerda para a direita, de cima para baixo. No entanto, esses mapas de temperatura não são totalmente precisos, pois não consideram as áreas de foco máximo dos olhos, nem gravam a visão periférica, que corresponde a 98% do campo visual.

As diferenças entre orientações de leitura em diferentes culturas sinalizam que os usuários existem em diferentes ecossistemas integrados. Assim, quando um usuário usa uma interface, pode fazê-lo para dialogar com outras pessoas ou grupos de pessoas, com valores e costumes específicos. Assim, a interface pode influenciar um universo bastante amplo e subjetivo de interações.

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. Na verdade, esta é apenas uma de suas etapas, que inclui uma extensa cadeia de processos de conhecimento.

A elaboração do layout da interface reflete um conjunto de soluções de diversas naturezas, a serem contempladas no resultado final. Estas soluções levam em conta fatores como contextos de uso, experiência de uso, entendimento das tarefas a realizar e percursos a percorrer, identificação/descrição dos usuários, aderência ao conceito editorial e necessidades específicas de edição, relação com os objetivos comerciais ou não do canal.

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

Para o projeto de um produto com poucos recursos, cujo orçamento não comporte a contratação de profissionais especializados, o designer tende a acumular funções de programação e precisa ter a formação técnica necessária.

Projetos com maior segmentação profissional incluem a contratação de designers e diversos outros profissionais com formação específica em mídias online e tecnologias da informação.

O designer web e de aplicativos móveis 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 incrementalmente o modelo conceitual dos usuários de cada canal. Também é maior a probabilidade de se adaptar ao trabalho em equipes multifuncionais, em que muitos integrantes com diferentes áreas de formação também têm suficiente competência e visão de design para ajudar a desenvolver uma visão geral do produto.

A formação especializada ajuda o designer a fazer argumentações técnicas e fundamentadas das decisões referentes ao design da interface. Essas decisões se somam às de profissionais com outras perspectivas do produto. Embora a opinião de cada um seja importante e necessária, a argumentação do designer é fundamental para preservar e aperfeiçoar continuamente a integridade conceitual/funcional e a qualidade visual/técnica da interface.

(Atualizado em 15.2.2017)

 

Referências

Designing without a designer, de Jared M. Spool (User Interface Engeneering, acesso em 25.5.2015)

→ Livro: Designing interfaces, Jenifer Tidwell. Sebastopol, CA: O’Reilly, 2011

Beyond the pixel: Measuring visual designers’ strategic value, de Steve Calde (Cooper, acesso em 7.6.2012)

How long do users stay on web pages? de Jakob Nielsen (Alextbox, acesso em 12.9.2011)

2) First impressions count in website design (WebSiteOptimization, acesso em 27.1.2006)

1) Internet users judge websites in less than a blink (ComputerWorld, acesso em 20.1.2006, não mais disponível)

Livro: Prioritizing web usability, de Jakob Nielsen e Hoa Loranger. New York: New Riders, 2006

Livro: Designing interfaces – Patterns for effective interaction design, Jenifer Tidwell. OáReilly, 2005

Graphic design theory: 50 resources and articles (noupe, acesso em 22.6.2010)

Aspects of design quality (Alextbox, acesso em 23.11.2008)

Visual language – Design guidelines for the widening of page templates across bbc.uk.uk – especificações de design dos sites da BBC

 

Ferramenta

Fivesecondtest – Mostra uma imagem em um site e verifica o que os usuários pensam a respeito. Analisa o design das principais áreas de um site