Nós lemos em ‘F’

Tags: , , — April 22, 2008 @ 1:02 pm
Estudos de rastro visual exibem que usuários geralmente lêem páginas web em um formato padrão em ‘F’: Duas linhas horizontais, seguidas de uma linha vertical.

“‘F’, de Fast. É como usuários comumente lêem o conteúdo de nossas páginas e blogs. Movendo os olhos velozmente em um padrão bem diferente do que aprendemos na escola.”

Estudos do Grupo Nielsen Norman, comprovam que a maioria das leituras de páginas web concidem no padrão de leitura utilizado:

  • Primeiramente, o usuário lê uma primeira linha horizontal superior à página.
  • Em seguida o usuário desce um pouco e lê mais rapidamente uma segunda linha horizontal ou parte desta.
  • Por último, o usuário escaneia rapidamente as linhas abaixo, formando uma linha vertical na página, correspondente aos inícios dos parágrafos subseqüentes.

O estudo deste padrão de leitura foi feito com o uso de uma tecnologia de escaneamento de rastro visual. A tecnologia destaca, como zonas de calor, os locais onde o usuário mantém seus olhos fixos por mais tempo. Veja os exemplos abaixo:

F Sahped Pattern

As áreas mais próximas do vermelho são as em que o usuário gastou mais tempo com seus olhos fixos, enquanto as em azul são as que foram vagamente visualizadas. As zonas de calor desenham um formato que lembra, na maioria dos casos, a letra ‘F’.

Este estudo é um tanto útil para designers e redatores de páginas, uma vez que exibe quais áreas em geral recebem mais atenção do usuário. Assim, seguem algumas dicas para dar uma boa leitura aos visitantes de seu blog ou site:

  • Escreva um título chamativo e atraente, que dê uma boa idéia do tema que será abordado na página. Este será a linha superior do ‘F’ e, conseqüentemente, a que receberá mais atenção.
  • Presenteie o usuário com um breve resumo so material apresentado no parágrafo logo abaixo do título. Este resumo pode ser uma rápida conclusão do assunto, ou um breve comentário sobre os principais pontos desde. Este será a segunda linha horizontal do ‘F’ e, possivelmente, muitos leitores terminarão por ler apenas até aqui, caso não se interessem mais pelo assunto. Em resumo, os dois primeiros parágrafos devem apresentar a parte mais importante da informação.
  • Destaque cada início de parágrafo do texto principal com um objetivo bem definido. Não enrole o texto com citações ou comentários desnecessários, comece diretamente no assunto, e lembre de separar cada tópico em um novo parágrafo. Estes inícios de parágrafos formarão a linha vertical do ‘F’. O desafio é incentivar o leitor a não parar nas primeiras duas ou três palavras do parágrafo.

Obviamente, este padrão não se aplica a páginas com estruturas diferentes de um artigo em comum. Como páginas de FAQ e separadas em tópicos, mas é predominante na maioria.

Uma vez que é a nossa missão como designers web, redatores e/ou blogueiros, dispor informações para rápido e fácil acesso aos nossos queridos leitores, não custa nada seguir esta pequenas regrinhas. Certamente elas trarão mais e mais leitores para nossas páginas, atraídos pelos textos bem elaborados e objetivos.

Fonte: www.useit.com

Se você gostou deste artigo, inscreva-se em meu RSS feed!

BrowserShots - Teste o seu design web em diferentes navegadores

Tags: , , , — March 18, 2008 @ 10:42 pm

Você desenvolve páginas web em Linux e não tem como testá-las no Internet Explorer ou Safari? Desenvolve no Windows mas quer ver como ficam as páginas no Konqueror?

Para os Web Designers que não dispõem de, pelo menos, um Mac e um PC com Dual Boot (Linux + Windows) em casa, o website BrowserShots, pode salvar vidas.

O serviço renderiza as páginas solicitadas em vários navegadores nas 3 principais plataformas, contento inclusive opções para limitar a resolução, ativar/desativar JavaScripts, Flash, etc, e depois exibe os screenshots por um período de tempo. Veja os exemplos do meu blog:

Firefox 3.0 no Ubuntu 7.10 Firefox 3.0 no Ubuntu 7.10

MSIE 8.0 no Windows XP MSIE 8.0 no Windows XP

Safari 3.1 no Mac OS X 10.5

Se alguém tiver curiosidade sobre os resultados do Acid3 em vários navegadores esta é uma boa oportunidade, no browsershots deve haver sempre alguns testes do acid3.

É uma pena que não é possivel testar o comportamento de animações Javascript e Ajax, mas apenas exibir as páginas renderizadas já é uma grande ajuda. Quem sabe o projeto não evolui para apresentar novos recursos daqui a algum tempo? Screencasts seriam bem-vindos. :)

Fonte: meiobit

Se você gostou deste artigo, inscreva-se em meu RSS feed!