Atualizado em 1.11.2007
 
Projetos web:
Criação de modelos

Layout da interface

Atividades relacionadas (ao layout do web site)

Aspectos específicos da interface web

Configuração de tipologias

A resolução de tela dos computadores pessoais (PCs) pode ir de 72 a 96 dpi, diferente dos livros impressos, por exemplo, em que as resoluções vão de 1.200 a 2.400 dpi (dots per inch, pontos por polegada), o que garante uma boa definição dos contornos das letras.

A baixa resolução do monitor faz com que a leitura de textos fique 25% mais lenta do que a leitura sobre papel impresso.

O uso apropriado de famílias de tipologias aumenta a legibilidade dos textos não só em computadores mas em diversos dispositivos digitais. Ajuda também a reforçar a confiança e a credibilidade no conteúdo, evidenciando a adequação da identidade visual, bem como as áreas de maior ou menor destaque editorial/comercial, os diferentes elementos da interface.

Alinhamento

Textos alinhados à esquerda são os mais fáceis de ler em tela. Textos com alinhamento justificado costumam formar "canais" vazios nos blocos de textos, que são forçados a chegar ao limite da linha (na web ainda não há texto hifenizado).

Textos centralizados e alinhados à direita são mais difíceis de ler.

O uso de margens ajuda a definir as áreas de texto e separá-los dos outros elementos das páginas. Margens largas podem dar a impressão de leveza, enquanto margens apertadas podem dar a impressão de que há pouco espaço disponível para muito conteúdo.

Número de caracteres por linha

É difícil estabelecer um número ideal de caracteres, pois cada browser e sistema operacional interpreta os tamanhos e entreletras de maneira diferente. Pode variar também se o layout se ajusta à largura do monitor.

Neste caso o leitor deve ser o responsável pela configuração com a qual se sinta mais confortável, de forma que possa aumentar ou diminuir a resolução de tela ou o tamanho das letras.

A medida da coluna de texto influencia a velocidade de leitura, mas não a facilidade de compreensão do texto, segundo testes de leitura em monitor realizados com estudantes que fizeram leituras de artigos com linhas de 35, 55, 75, ou 95 caracteres por linha.

Textos com 95 caracteres por linha permitiram a leitura mais rápida. A largura da linha não afetou a facilidade de compreensão. Os usuários não manifestaram preferência especial por linhas mais curtas ou mais longas.

Sentido de estrutura

A aplicação adequada de tipologias permite a identificação visual das relações entre as informações e facilita a sua compreensão. O uso de cores e variações de tipologias (estilos, tamanhos, uso de maiúsculas e minúsculas), conduz a visualização das subordinações entre categorias e facilita a escolha das opções disponíveis.

-> Na página ilustrada abaixo, por exemplo, pode-se visualizar claramente o título geral da área ("Catalogue"), a sub-área ("Femme") e os artigos selecionados (o subitem "Tambour chronographes" como parte do item "Horlogerie".

 

Exemplo de página com identificação clara das relações entre os diferentes títulos de links

http://www.louisvuitton.com (acesso em 7.2.2006)

Assuntos relacionados
Componentes da interface web
Textos para a web : Atividades relacionadas
Atenção às especificidades de leitura da tela
Acessibilidade
CSS
Mapa do site

Referências bibliográficas (Criação de modelos de web sites)
Web style guide
The effects of line length on reading online news (Universidade de Wichita, acesso em 22.7.2005)
The effect of website typeface appropriateness on the perception of a company's ethos (Usability News, acesso em 8.8.2007)

Mais informação sobre o assunto (link externo)
The essentials of font philosophy - Relato de estudo sobre se determinadas fontes estariam associadas a usos específicos (Usability News, 8.1.2006)
The essentials of font philosophy - Sobre as vantagens das tipologias sem serifa para a leitura online (WebProNews.com, 15.3.2006)
Dreamstime - links para bibliotecas de fontes gratuitas, entre outros recursos (BlueVertigo, acesso em 6.5.2006)