DTeixeira Creativity, what else?

Técnicas de Layout

Tanto um website, software ou game, passam por um processo de criação de layout. Deve-se levar em consideração que o Layout deve ser fácil de aprender e usar, ele será uma peça importante na hora da comunicação do seu produto. Compilei aqui 3 aspectos importantes ao montar um layout para seu site:

No ocidente, é um costume ler-se da esquerda para a direita, de cima para baixo, basta pegar uma revista em quadrinhos feita no Brasil para conferir a ordem de leitura dos balões. Um Layout leva em consideração esses fatores, pois a comunicação feita em balões em um quadrinho é feita com elementos (e widgets no caso de um software) em uma GUI.

A figura abaixo mostra a ordem de leitura de uma interface gráfica:

Note como a maioria dos websites carregam seu logotipo no canto superior esquerdo, é o local que se inicia a leitura. Ao construir uma interface, é importante fazer com que esta ordem seja seguida, pesando corretamente os elementos da interface. A Região Quatro mostrada acima, não deve pesar mais que a Região 1.

A Região 1 é o ponto inicial que o usuário observa seu site, muitos desenvolvedores de sites não sabem porque todos colocam o logotipo nesta região, acreditando que é um chavão, ele coloca também. Uma Região nunca deve ser mais pesada que a Região anterior.

A Região Dois é um ponto estratégico para a inserção de logotipos, ou um menu superior, pois o trajeto que os olhos fazem entre a Região Um e a Dois ainda é a mais importante. Dependendo do ramo do website, inserir um menu de serviços, um campo de senha ou publicidade, é uma prática bastante adotada por designers e webmasters.

Um outro fator importante na construção de um Layout, é atentar-se na Hierarquia da Informação, que consiste em organizar a disposição das informações em seu website em relação a outros elementos visuais da GUI. Essa disposição determina que informação o usuário vê, e o que ele é encorajado a fazer primeiro, muito utilizado em websites de comércio eletrônico (e-commerce). Para ajudar a decidir a hierarquia, deve fazer a si mesmo perguntas como: "Qual informação é mais importante para o usuário?" e "O que o usuário deseja ver primeiramente? E em segundo, terceiro, quarto lugar?". Para um usuário que procura websites de confecção de etiquetas comerciais, ver como elas são e preços é a prioridade, no caso de um software de edição de imagens, por exemplo, a primeira coisa que um usuário quer fazer é: Criar uma nova imagem.

Dar foco e ênfase nas informações relevantes e centrais do produto auxilia o usuário a se localizar no Layout. Se um usuário procura um website de um estúdio de gravação para treinar com sua banda, dê ênfase nas salas, preços e imagens do local, deixe mais relevante do que outros serviços como gravação de CDs, empréstimos de equipamentos, etc.

Estrutura e equilíbrio dos elementos e informações do site são vitais para que haja compreensão do layout. Misturar assuntos ou não deixar claro onde termina o menu, e onde começa o conteúdo, dificulta a leitura do usuário, e o mesmo acaba se perdendo. Sites pessoais sofrem pesadamente com este problema. Por falta de estudo, muitos criadores acabam pecando nas noções mais básicas de estrutura e equilíbrio. Um erro grave e imperdoável é misturar anúncio com conteúdo do site. Isso faz com que o usuário se sinta enganado por estar sendo persuadido a clicar nos anúncios de publicidade.

A figura abaixo ilustra uma tradicional quebra de equilíbrio e estrutura, misturando anúncios textuais da empresa Google Inc com itens de seu menu de navegação e elementos de notícias do site. O usuário que clicar erroneamente em um anúncio, se sentira enganado pela pegadinha, além de ter dificuldades em separar o que é anúncio de conteúdo.

Relação de Elementos é um fator que complementa a Estrutura e Equilíbrio. Criar relações entre elementos de mesma categoria, ou conduzir um fluxo de navegação é importante. Na figura abaixo temos um bom exemplo de manter relações usando cores. Note como o website do e-commerce Submarino utilizou cores para relacionar suas seções.

Agora, para fazer o enlace deste padrão de cores, note a figura abaixo e veja como o Submarino fechou a relação entre Beleza e Saúde com azul-bebê e Brinquedos com Vermelho, no mapa de navegação:

Por fim, quando temos um website, software ou game muito grande, é importante prestar atenção na unidade de integração. Isso faz com que uma seção de seu website, ou uma janela de seu software carregue elementos chaves que permitem o usuário saber que ainda está em seu website ou software. Isso exige que se construa uma identidade visual que permite saber em qualquer momento que mude o título de seu website por estar em uma sub-seção, ou caso abra muitas janelas em seu software, o usuário ainda saiba que ainda está dentro do produto, para não causar a sensação de que ele deixou o website, ou abriu outro programa. O Website da Microsoft Corporation possui um padrão visual onde mesmo mudando o título, nos permite deduzir que ainda estamos no website da Microsoft, basta olhar a figura abaixo e ver por alto a relação visual entre os dois sites.

A identidade visual do topo se mantém em todos os hotsites. A disposição do menu e elementos centrais (região 1, 2 e 3) sempre seguem o mesmo padrão. Então, não importa se mudar as cores ou até o logo, você ainda saberá que está dentro da rede de sites da Microsoft, ou ainda estará vendo um produto da Microsoft.

Então, resumindo a ópera, para começar a fazer uma interface de sucesso, os três itens abaixo devem ser obedecidos:

• Ter uma disposição dos elementos de forma correta;
• Tornar a navegação e leitura simples, sem poluição; e
• Criar uma identidade visual

Dá para começar a trabalhar com isso? Dá sim! Mas ainda tem mais coisas que vai gostar de saber, que estarei publicando nos próximos posts!

Visualizações: 1844