Pesquisa Cuidados com Layout Web.

Autor: Vincius Garcia Maran

Consideraes
O que ns vemos influencia como sentimos e o que entendemos. A informao visual comunica de modo no verbal, mas com muita fora. Isso pode incluir sinais emocionais que motivem, dirijam, ou distraiam. O projeto visual de uma pgina na Web deve ser fcil de aprender e usar, pelo fato empregar efetivamente a comunicao visual e a esttica. Ele uma ferramenta importante para a comunicao. Como voc organiza a informao na pgina pode fazer a diferena entre comunicar uma mensagem ou deixar o usurio perplexo ou sobrecarregado. At mesmo a funcionalidade da pgina pode ser afetada, se ela no tiver uma apresentao bem projetada. Um bom layout depende do contexto em que esta inserido e cumpre uma proposta maior do que simplesmente decorao, pois todos os elementos visuais influenciam uns aos outros.

Recomendaes
1. Uso frames com cuidado.O uso de frames pode ajudar o usurio a navegar no site, mas cuidado com o momento da impresso para no imprimir o frame errado.

2. Recomenda-se agrupar os diferentes tipos de informao da sua pgina na Web. Ns organizamos o que lemos e o que pensamos sobre uma informao, agrupando-a espacialmente. Ns lemos uma pgina na web do mesmo modo como lemos outros tipos de informao.

3. Use cores e cones para atrair a ateno da sua pgina na Web. O olho sempre atrado por elementos coloridos antes dos elementos em preto e branco e por desenhos antes do texto.

4. Respeite as convenes de layout de leitura da informao. Em pases ocidentais isto significa da esquerda para a direita e de cima para baixo. As informaes mais importantes devem estar localizadas no canto superior esquerdo.

5. Quando a informao posicionada verticalmente, alinhe os links por suas extremidades esquerdas (em pases ocidentais). Isso geralmente facilita a compreenso da informao pelo usurio.

5.1 Hierarquia de Informao

Este princpio diz respeito disposio da informao dentro de uma pgina da Web baseada em sua importncia relativa com os outros elementos visuais. O resultado dessa disposio afeta todos os outros princpios de organizao e composio de um layout e determina que informao o usurio v e o que ele encorajado a fazer primeiro. Para considerar este princpio, faa estas perguntas: Qual informao mais importante para o usurio? (Em outras palavras, quais so as prioridades de um usurio quando encontra seu site?). O que o usurio quer ou precisa ver em primeiro, segundo, terceiro lugares, e assim por diante? ( O que o usurio v primeiro deve corresponder prioridade do usurio).

5.2 Foco e nfase

O princpio do foco e nfase auxilia o usurio na colocao de itens prioritrios. Determinar o foco envolve identificar a idia central, ou o ponto focal, por atividade. Determine a nfase escolhendo os elementos que devem ser proeminentes, isolando-os de outros elementos ou fazendo com que eles se sobressaiam de outra maneira. Onde o usurio navega primeiro procurando por informao uma importante considerao na implementao do site, que ser o foco da sua navegao. A cultura e as decises do projeto de uma pgina na Web podem governar este princpio. Pessoas de culturas ocidentais, por exemplo, procuram no canto superior esquerdo da tela as informaes mais importantes.

5.3 Estrutura e Equilbrio

O princpio de estrutura e equilbrio um dos mais importantes de um projeto visual. Sem uma estrutura que sirva de base e um equilbrio desses elementos, h falta de ordem e de significado, e isso afeta todas as outras partes de projeto visual. O mais importante que a falta de estrutura e equilbrio torna uma pgina na Web mais difcil de ser entendida pelo usurio.

5.4 Relacionamento de Elementos

O princpio do relacionamento de elementos refora o princpio anterior. A colocao de um elemento visual pode ajudar a comunicar uma relao/conexo especfica de uma pgina com o site da qual ela faz parte.

5.6 Unidade e Integrao

O ltimo princpio, unidade e integrao, reflete como avaliar uma dada pgina na Web em relao ao site ao qual ela pertence. Quando uma pgina na Web visualmente unificada com o site (endereo), o usurio acha mais fcil navegar porque ela oferece um ambiente de navegao consistente e previsvel. Para implementar este princpio, considere o seguinte: Como as diferentes pginas do site funcionam visualmente? Como o projeto visual da pgina se relaciona com as outras pginas do site ou de outros sites em que usada? Quando projetar a organizao e composio de elementos visuais da sua pgina na Web, recomenda-se respeitar os seguintes princpios: hierarquia de informao, foco e nfase, estrutura e equilbrio, relao de elementos, legibilidade e fluxo do texto, e unidade de integrao.

Observaes
Uma pgina na Web precisa funcionar intuitivamente - ela precisa parecer do modo como funciona e funcionar do modo como parece. Cuidado com o tamanho, o espaamento e a colocao da informao para que o ambiente seja visualmente consistente e previsvel. Estrutura visual importante para comunicar a proposta dos elementos exibidos em uma pgina na Web. Voc pode usar cores para agrupar assuntos correlatos. Use o alinhamento adjacente para links que formam um grupo de opes de assuntos exclusivos. O uso de texto deve ser o mnimo possvel para comunicar a informao. Para minimizar o movimento dos olhos, onde possvel, o usurio deve ser inquirido a responder em uma rea diretamente adjacente questo As reas para entrada de texto e reas de resposta devem estar to perto quanto possvel da base da tela devido ao fato de que a maioria dos usurios no so exmios datilgrafos e precisam olhar para o teclado. O incio ou a base da tela so os melhores locais para mostrar informaes sobre orientao, as quais devem estar sempre visveis. As orientaes para o usurio podem ser colocadas em reas fixas ou mveis, ou apresentando-as em menus pop-ups disponveis sobre requisio do usurio ou do prprio erro.

No escreva em MAISCULAS. NA INTERNET, ISTO CONSIDERADO ESTRIDENTE E DIFCIL DE LER. Voc viu que aparncia horrvel? Se for necessrio enfatizar uma determinada palavra, utilize negrito. Um ttulo ou cabealho em maisculas pode ser adequado em algumas circunstncias ocasionais, mas prefiro uma marca de cabealho ou um tipo de letra maior. Divida os textos longos. As pessoas se cansam ao ler textos na tela do computador. O senso comum diz que preciso ser breve. Se voc tem muito a dizer, considere a possibilidade de colocar uma linha em branco entre os pargrafos, como fiz neste manifesto. Para fazer isso, insira uma marca "<p>" entre os pargrafos a serem separados. Se quiser terminar uma linha mas no colocar um espao entre ela e a prxima, utilize a marca "<br>". O texto s vezes aparece misturado na Web. H um delicado ponto intermedirio entre grandes blocos de texto no legveis e linhas dispersas. No utilize caracteres que distraiam a ateno. Eles chocam os olhos e so de difcil leitura. No use pontos de exclamao e de interrogao demais. Vrios pontos de interrogao (??????) e de exclamao (!!!!) parecem horrveis. Muitas ... reticncias... tambm quebram a continuidade da linha e fazem com que o texto parea menos profissional. Tipos em negrito espalhados pelo pargrafo tornam a pgina menos atraente. D uma olhada no seu livro favorito e veja com que cuidado um escritor utiliza recursos para chamar a sua ateno. Se o seu livro preferido for a biografia de Howard Stern, esquea o que eu disse.