Publicação de imagens online
De acordo com um estudo do Stanford Poynter que acompanhou o movimento de olhos de usuários de páginas web, "64% olharam as fotos pelo período médio de 1 segundo e um quarto". De modo geral, neste breve relance, as pessoas reconhecem o conteúdo, mas não conseguem apreciar suas sutilezas e nuances. Por isto as imagens (fotos, ilustrações) publicadas na web precisam não só chamar a atenção para si mesmas como valorizar a experiência de uso. Algumas práticas facilitam o seu acesso pela maioria dos usuários, como:
■ Legendar as imagens se não estiver claro o contexto da publicação.
■ Inserir informações "alt e "title" nas imagens, para facilitar a sua indexação, como no exemplo:
<img class="estilo"
title="Legenda da fotos" src="http://www.exemplo.com.br/imagens/
nomedaimagem.jpg" alt="Descrição do conteúdo da imagem"
width="300" height="225" />
■ Editar fotos e diagramas para publicação online, no tamanho mais adequado de exibição na mídia de saída.
■ Evitar imagens de pano de fundo com texto sobreposto nas áreas mais ocupadas, para não atrapalhar a leitura.
■ Manter bom contraste entre a imagem em primeiro plano e o fundo, para melhorar o sentido de profundidade e valorizar a informação mais importante, normalmente na parte da frente.
■ Priorizar o enquadramento apenas das informações necessárias de cada imagem publicada (como em "close-ups"), para manter os tamanhos dos arquivos pequenos. ► Exemplo
■ Verificar se o uso de fotos iguais ou muito semelhantes em diversas áreas é realmente necessário, para evitar redundâncias desnecessárias.
Sobre o tamanho e número das imagens
■ Avaliar a importância informativa de cada imagem antes de publicá-la. Na medida em que as imagens aumentam o tempo de carregação das páginas, sua publicação deve ser sempre considerada como um acréscimo às informações em texto - devem, por isto, ser úteis à compreensão do conteúdo, incluindo as usadas em banners ou na composição da marca editorial-comercial. ► Exemplo► Exemplo
-> Num site de comércio, por exemplo, é indispensável publicar fotos dos produtos oferecidos de cada marca, para identificá-los e diferenciá-los de outros produtos semelhantes.
-> Para ilustrar um texto que descreva as atividades de uma organização, uma foto permite a aproximação afetiva com esta pessoa.
Pesquisa global sobre os hábitos de usuários de programas leitores de tela por pessoas com deficiência visual mostra que, se uma imagem precisa ser publicada para melhorar o layout e a percepção de uma página, 59% gostariam que a imagem fosse descrita também em modo texto e 31% prefeririam que o programa simplesmente as ignorasse. (1)
■ Publicar imagens na mesma página em quantidade e em tamanhos que não prejudiquem o download no browser.
O número de imagens e o seu tamanho influencia muito o tempo de carregação das páginas web, que devem conter em situação ideal, um tamanho em Kb que evite que os usuários fiquem longo tempo esperando a sua carregação. Embora seja difícil apontar um tamanho preciso de página, pode-se arriscar que fica em torno de 200Kb.
Como um número alto de usuários brasileiros acessa a internet com linha discada, os desenvolvedores web precisam se preocupar com a velocidade de carregação da páginas nos browsers. Em 2010, 14% das residências acessaram a internet com linha discada no Brasil, um número ainda razoavelmente alto a considerar. (TIC Domicílios, PDF)
■ Quando é preciso publicar numa mesma página muitas imagens para ilustrar um conteúdo específico, esta deve ficar localizada em níveis mais profundos do site, onde os usuários realmente interessados no assunto (ou nas fotos) vão procurá-las. As páginas localizadas em camadas superficiais devem ficar mais leves e menos carregadas, para que os visitantes possam transitar por elas mais rapidamente.
Conjuntos de imagens reduzidas
■ Cortar as imagens melhores de modo a realçar os seus detalhes, mesmo que fiquem diferentes das versões ampliadas. De qualquer forma, é importante mantê-las num tamanho não muito pequeno, para que o usuário faça uma ideia do seu conteúdo e queira vê-las ampliadas.
É comum especialmente em sites de demonstração de produtos, a publicação de pequenas imagens (thumbnails) agrupadas que, ao serem selecionadas pelos usuários, mostram uma versão em tamanho ampliado. O problema desta solução é que às vezes as imagens ficam tão reduzidas que é impossível o leitor entender se realmente vale a pena ampliá-las.
De acordo com estudo do Stanford Poynter sobre o acompanhamento do movimento dos olhos dos usuários, "64% das fotos são vistas durante apenas 1,25 segundos." Ou seja, num rápido relance reconhece a foto e identifica o seu sentido, mas não se atém a detalhes ou nuances.
Como as imagens ampliadas em muitos casos são carregadas com a página embora escondidas, podem torná-la pesada e de carregação demorada. Neste caso, é necessário reduzir o número de imagens por página.
A publicação da imagem maior numa página separada tem a desvantagem de fazer com que o usuário inexperiente deixe muitas janelas abertas e sobrecarregue o seu browser.
A conveniência de cada solução depende do número de imagens publicadas e da funcionalidade do desenho de cada interface.
No exemplo abaixo, a demonstração dos recursos da geladeira aparece numa página limpa, com poucas imagens e um enquadramento das imagens menores que permite a sua antecipação antes da seleção.
http://www.consul.com.br
Referências
1) Survey of preferences of screen readers users (acesso em 20.2.2009)
► Livro: Designing web usability, de Jakob Nielsen. New Riders Publishing, 2000 (Edição traduzida: Projetando websites. Editora Campus, 2000)
► Shooting photographs for the web, de Jay Kinghorn (Creative Pro, acesso em 20.2.2009)
Mais informação sobre o assunto (links externos)
►Visual-Blast Media, ferramenta que permite a visualização de detalhes de imagens de produtos à venda.
► Alguns órgãos de governo no Brasil estabelecem regras para a criação, armazenamento e publicação de documentos, como o governo do Estado do Paraná - Lei Estadual nº 15.472, de 18/12/2007 - DOE de 18/12/2007 (sugestão de André Luiz P. Domarques de Menezes, da http://www.dmd2.com.br)
Sobre o proteção de direitos de autoria (link externo)
► How to put the kibosh on content scrapers & thieves (Famous Bloggers, acesso em 19.3.2010)
