Layout da interface
Atividades relacionadas (ao layout do web site)
Aspectos específicos da interface
Para que o desenho de um ambiente web com muitas seções e áreas de informações se mantenha consistente e evidencie as suas funcionalidades, cada ponto de contato deve apresentar um layout consistente em relação ao conjunto. O modelo precisa ter flexibilidade para abrigar conteúdo com diferentes características e atender a diferentes demandas. É importante para isto observar aspectos como:
■ Navegação e layout – a estrutura visual e a estrutura de informações do site devem estar diretamente relacionadas, para facilitar o deslocamento e a orientação do usuário.
■ Configuração de tipologias – os estilos de fonte e outros atributos de texto, como tamanhos, cores devem ser aplicados consistentemente. Os textos precisam ser configurados de modo que a sua leitura seja adequada a monitores de diversos tamanhos e com diversas configurações de cores e resolução.
■ Palheta de cores – o uso de sistemas de cores harmoniosos e conceitualmente integrados permite a identificação funcional dos elementos e o estabelecimento de sentido de identidade para a usabilidade dos canais.
■ Malha gráfica (grid) – o uso de referências ortogonais que se mantenham consistentes em todas as páginas permite a criação de ambientes com rigor conceitual e visualmente harmoniosos.
■ A rolagem vertical de cada tela – Quanto mais fundo nas camadas de informações o usuário estiver, menos se incomoda com a rolagem vertical, pois está mais interessado no conteúdo.
■ Facilidade de uso de elementos ativos como títulos de links, botões, barras de navegação, formulários em diferentes situações e aplicações.
Estes elementos precisam também permitir a percepção de que realizam ações, qualidade conhecida como affordance, ou o potencial de um objeto para ser manipulado da maneira como foi pensado para funcionar. Por exemplo, uma maçaneta redonda de porta convida o usuário a girá-la. (ver definição da Wikipedia)
■ Retorno ao usuário – indicação de que uma ação aconteceu. Cada ação de um usuário cria uma ligação direta com a interface que deve retornar algum sinal de que foi realizada. O movimento do mouse é sinalizado pelo movimento do cursor na tela, o posicionamento do mouse sobre um link muda o desenho do cursor.
Caso o usuário não identifique estas mudanças de estado, pode insistir em realizar a mesma ação, até identificar uma resposta, o que pode causar problemas como um duplo cadastro da mesma pessoa para receber uma mala direta.
Projetistas de interfaces precisam desenhar o modo como este retorno vai ser mostrado, para que os usuários sintam que estabeleceram algum tipo de comunicação com a sua ação. Se o processamento de uma ordem pagamento precisar demorar algum tempo (intervalo conhecido como "tempo de latência"), por exemplo, pode-se prover um sinal, como um ícone animado, de que está sendo realizado.
Assuntos relacionados
► Localização dos elementos (interface web)
► Componentes da interface web
► Barras de rolagem
► Especificações do produto
► Usabilidade - Consistência
► O espaço da página
Referências sobre aspectos específicos de interfaces web
► Visual framework (Designing interfaces, acesso em 6.2.2009)
► Bridging the designer–user gap (Alertbox, acesso em 20.3.2008)
► The importance of effective detailed design (Human Factors International, acesso em 2.5.2005)
Mais informações sobre o assunto (links externos)
► Website design: 12 sites dissected (Wisdeo, acesso em 3.8.2010)
► Eye candy vs. bare-bones in UI design (UX Magazine, acesso em 28.3.2010)
► Anatomy of a redesign (WebSiteOptimization, acesso em 25.1.2010)
► Interactive sketching notation, de Jakub Linowski (Linowsky interaction design, acesso em 5.11.2009)
► Integrating prototyping into your design process, de Fred Beecher (Boxesandarrows, acesso em 20.10.2009)
► Usability Body of Knowledge (acesso em 20.3.2009)
► Design principles (IBM, acesso em 28.3.2008)
