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!

This entry was posted in In Portuguese and tagged , , . Bookmark the permalink.

2 Comments

Leave yours!
  1. at July 20, 2010, 4:26 pm

    Parabéns pelo trabalho didático, adorei sua explicação.

    Farei como dito!

  2. Alian
    at July 4, 2012, 1:01 am

    Amei as explicações, mas… gostaria de ver uma exposição pronta deste pensamento ,
    porque de exemplo só foi apresentados a leitura em bolõeszinos.
    abraço

Leave a Reply

Please note that all fields are required. In order to keep the site clean and free of any subscription to comment, please do not post ads, no spam, no link dropping, no domain names. Your e-mail will not be published. All comments are moderated (they will appear shortly). rel="nofollow" in use: no page rank will be considered for links here. All fields are required. Thank you to share your thoughts :-)

*