Layout da interface
Atividades relacionadas (ao layout do web site)
A configuração do usuário
A diversidade de situações de acesso muitas vezes exige que, no projeto de interfaces web, seja necessário selecionar os usuários para quem o site se dirige em caráter prioritário. É importante, para isto, manter o foco nos objetivos de negócios do web site.
■ A definição dos segmentos prioritários do público é feita durante a conceituação do projeto web. Neste momento, diversos métodos, que variam de acordo com o escopo do projeto, ajudam a estabelecer o perfil do público-alvo, seus hábitos, seu vocabulário, e a conhecer as suas principais características de acesso.
Este conhecimento permite ao designer de interfaces web criar layouts que estabeleçam identidade afetiva, cultural, simbólica, com os principais segmentos a quem o site se dirige. E lhe permite também estruturar interfaces que se adaptem às condições técnicas da maioria, ao levar em conta as diferenças em configurações como:
◊ Plataformas e sistemas operacionais (Windows, Mac, Linux), em diversas versões.
◊ Browsers, também em diferentes versões, com diferentes configurações da interface - ocupando diferentes áreas da tela do monitor, com ou sem ferramenta de busca, ícones, letreiros, funcionalidades especiais - como a barra do del.icio.us, por exemplo.
◊ Resoluções de tela, tanto em PCs como em dispositivos móveis.
◊ Velocidades de conexão.
◊ Capacidade/ velocidade de processamento.
Fatores como estes interferem diretamente na composição dos elementos das interfaces web e precisam ser considerados antes mesmo que o designer comece a criar o layout.
Por exemplo:
-> A interface de comércio ou de governo precisa incluir desde as resoluções de tela de PC mais baixas (atualmente 800x600) até as conexões de acesso mais lentas, com linhas discadas, na medida em que o site atende a um público amplo e heterogêneo.
-> Já o layout do site de um grupo de estudos de física nuclear dentro de uma organização pode considerar de equipamento de uso mais comum entre estes profissionais e a sua velocidade de conexão. E neste caso o desenho da tela, bem como o uso de imagens e interfaces multimídia pode ser dirigido especialmente para as condições de acesso e necessidade de conteúdo destes usuários.
-> Milissa Tarquini, diretora de design de interface do usuário e arquitetura da informação da AOL, lembra que a rolagem de tela não era permitida nos sites da empresa. Textos longos, artigos, listas, eram apresentados em caixas, estas sim, com rolagem vertical. A criação de conteúdo, o design e a programação das páginas eram rigidamente controlados, de modo a se adaptar ao dispositivo dos usuários.
No entanto, na medida em que os browsers de acesso deixaram de ser proprietários e os sites da AOL aderiram à web aberta, as políticas internas de design e produção de conteúdo se adaptaram a configurações mais genéricas de acesso. (1)
■ A configuração de uma página web se subordina, em última análise, aos objetivos do web site. Quanto mais amplo e heterogêneo o público, maiores as restrições técnicas para a estruturação das páginas.
Inversamente, quanto mais segmentado o público, melhores as condições de se estabelecer recortes com as configurações de uso ideais.
■ Algumas medidas para adaptar o layout da interface a cada usuário:
◊ Examinar em detalhe as pesquisas e os estudos sobre o usuário, para traçar o perfil dos principais públicos do site.
◊ Estabelecer as configurações prioritárias às quais a interface vai atender e verificar como afetam diretamente o layout.
◊ Definir as informações que precisam aparecer no alto das páginas (ou acima da dobra da marca de rolagem) da maioria dos usuários - a partir da resolução de tela e dos equipamentos da maioria.
É importante também definir a área em que a barra de rolagem deve começar a ser necessária, para que os elementos desta área sinalizem que há mais conteúdo embaixo - fotos e blocos de textos "partidos" e incompletos, por exemplo, levam os usuários a fazerem a rolagem para continuar a leitura.
◊ Desenhar o modelo básico do layout e testá-lo em diferentes situações de uso (browsers, plataformas, resoluções, tamanho do monitor).
◊ Depois da homologação pelos stakeholders, aplicar o modelo às diversas situações editoriais necessárias.
◊ Testar o layout com usuários representativos do público-alvo, de preferência no lugar de acesso das pessoas, de modo a emular as situações de uso mais comuns.
Configurações inclusivas
■ O controle da estrutura do layout é feito através de folhas de estilo CSS. Alguns desenvolvedores utilizam scripts e "hacks", que permitem adaptar o layout a diferentes configurações de acesso.
No entanto, algumas medidas ajudam a adaptar o layout da interface a públicos amplos:
◊ Adotar padrões web, que seguem recomendações do W3C para o desenvolvimento do sites e de browsers, e aumentam a compatibilidade das páginas com diferentes plataformas, linguagens e sistemas operacionais.
◊ Usar fontes com tamanho flexível (baseado em percentual ou na largura da letra).
◊ Configurar layout líquido, com a largura da página adaptável a diversas resoluções de tela, especialmente se o site se dirigir a público amplo e não especializado.
◊ Compatibilizar a interface com os principais programas de acesso à web, em diversos dispositivos, pelo uso de CSS para diferentes situações de acesso ("screen" para PCs, "handheld" para dispositivos móveis, "braile" para impressoras em braile, etc.).
◊ Aderir a normas de acessibilidade, como o uso de cores contrastadas para os elementos críticos, de forma facilitar a sua visualização/ identificação ou de "alt" tags para os usuários que não visualizem ou habilitem a visualização de imagens.
■ Usando ou não estes recursos, o designer precisa testar exaustivamente os layouts e as configurações estabelecidas em diversas situações de uso, para garantir que a interface se mantenha estruturada e funcional para a maioria dos usuários prioritários.
De qualquer forma, mesmo no caso de sites ou portais de públicos restritos, em que a interface é desenhada para atender a um público restrito, esta deve se manter estruturada em diferentes situações de acesso.
Assuntos relacionados
► Componentes da interface web
► Arquitetura da informação dos usuários
► O público e suas demandas
► Navegadores (browsers) utilizados
► Espaço do browser na página
► Tamanho da página e resolução
► A velocidade de conexão e o tamanho do arquivo da página em Kb
Mais informaçao sobre o assunto
► i-Learrn (Curso de Formação Web Standards, único centro de treinamento do W3C no Brasil)
1) Rating: Blasting the myth of the fold (Boxesandarrows, acesso em 11.11.2007)
► eMAG - Modelo de Acessibilidade de Governo Eletrônico do Brasil (link direto para documento zipado)
► Web Content Accessibility Guidelines 1.0 (acesso em 5.4.2008)