Typography, readability and legibility
Choosing Fonts
Fonte otimizada para web
Famílias de fontes mais comuns
Fonte para impressão
Fontes recomendadas
Mixing Fonts and Colors
Ajuda a dar ênfase:
Diferentes formas no tipo de letra:
- Cor
- Negrito
- Tamanho
- Até 3 tipos distintos
Diferentes cores:
- Até 4 cores
Limitar o número de fontes (tipos de letra) e cores torna o site consistente
Erros:
- Muito letreiro/elementos a chamar a atenção torna-se difícil para saber em qual nos devemos concentrar
- Utilização do Caps Lock (reduz a rapidez de leitura e demonstra gravidade)
Importante:
- Usar os elementos de design visual com sabedoria, de forma a criar ordem e para comunicar corretamente
Texto e Contraste de fundo
Cores escuras são melhores para texto
Cores claras são boas para fundos
Ter em atenção a combinação do roxo e amarelo:
- São de bom contraste mas no computador pode criar um efeito de vibração, o que pode dificultar a sua leitura
Um mau contraste (ex. texto vermelho e fundo azul) provoca esforço ocular e desconforto
Prejudicial para quem tem problemas visuais
"Daltonismo comum"
Problema a ter em conta!
Pessoas que têm dificuldade em distinguir vermelho e verde (daltonismo comum) não conseguem distinguir cores intermédias (cores dessas escalas)
Importante: Manter na página elementos na escala dos cinzentos
Text Images
Aumentam o tamanho do site
que consequentemente atrasa o seu carregamento: um dos principais problemas apontados é o facto da demora ser a causa das pessoas fecharem o site antes deste ser totalmente carregado.
Quando se cria um site há que ter em atenção ao tamanho dos ficheiros - nomeadamente em hiperligações gráficas e cabeçalhos.
As imagens-texto não são "pesquisáveis". Quando um utilizador procura uma palavra em web sites não irá ter resultados.
Não são seleccionáveis. É comum as pessoas copiarem texto para de seguida colarem em programas como Word.
Não têm uma escala manuseável. Isto é, mesmo que o texto para o nosso website seja redimensionável, os gráficos não são.
Relative Specifications
(Especificações Relativas)
Liquid design
(design liquido/fluido)
Utilizar unidades relativas em vez de valores fixos para determinar o tamanho da letra
Exemplos de unidades relativas
Ems
Percentagens
Permite ao utilizador mudar o tamanho da letra mantendo a proporção original
Permitir alterações para que o utilizador se sinta mais confortável é fundamental
Designing for de vision-impaired users
Criar formas obvias de alterar o tamanho da letra
Não é recomendado para todos os sites. Um tipo de letra cuidadosamente escolhido pode ser o suficiente se o público alvo não tiver necessidades especiais.
Body Text: The Ten-Point Rule
Algumas regras gerais
Não há um tipo de fonte que se adeqúe a todas as situações
Ser pelo menos do tamanho 10
Tipo de audiência - Tamanho da fonte
Público em geral - 10 a 12
Pessoas idosas e público com dificuldades visuais - 12 a 14
Crianças e iniciados na leitura - 12 a 14
Adolescentes e jovens adultos - 10 a 12
Mais texto = Menos leitura
Na falta de espaço para o texto
Usar fontes mais pequenas em partes de texto que não interessam muito ao público
Cortar o texto
Colocar a informação menos importante em páginas secundárias através de hiperligações
Na página inicial colocar a informação mais necessária ao público
A idade não é um problema
Os adolescentes também não gostam de textos impercetiveis
Óculos, lentes de contacto e factores ambientais, como a iluminação, podem dificultar a leitura dos textos, apesar da idade e da capacidade visual do público
Dica: Quando o mesmo tamanho parece mais pequeno
Os vários tipos de letra podem parecer maiores ou mais pequenos apesar de terem o mesmo tamanho de fonte
Exemplo: Tamanho 16 em vários tipos de letras
Mapa mental para Tecnologias Multimédia com a Professora Carla Freire
(Times New Roman)
Mapa mental para Tecnologias Multimédia com a Professora Carla Freire
(Courier New)
Mapa mental para Tecnologias Multimédia com a Professora Carla Freire
(Arial)
Mapa mental para Tecnologias Multimédia com a Professora Carla Freire
(Verdana)
Planear para vários tipos de hardware
Abranger as várias versões de computadores, os mais avançados e os mais antigos
Resoluções de ecrã comuns
Atualmente a mais comum: 800 x 600 e 1024 x 768
A tendência é a resolução aumentar cada vez mais, começando já a ser mais utilizada a de 1600 x 1200
Introdução
A tipografia transmite sensações ao público sobre as empresas, tal como a tipografia e o esquema de cores
A Legibilidade
A legibilidade ainda é um problema na web nos dias de hoje, independentemente de quão bom é o site
Problemas que podem surgir na pesquisa de sites tendo em conta uma má escolha de fontes e de cores de fundo
O utilizador ter que se inclinar para a frente para ver melhor (estrabismo)
O utilizador ter que colocar os óculos para ter acesso ao conteúdo
Na maioria das vezes os designers focam-se tanto na parte estética que a parte funcional como as fontes, os fundos e mesmo as sombras tornam os textos quase inacessíveis ao utilizador
A tipografia utilizada numa revista impressa nunca poderá ser a mesma numa página da web
Fontes grandes e pequenas são do agrado do público, mas sempre que há problemas visuais dá-se preferência a fontes maiores
Sites com fontes muito pequenas não são boas escolhas porque os utilizadores não conseguem ter acesso ao conteúdo.
Um texto com uma fonte muito pequena e demasiado denso irá afastar os leitores.
A parte mais importante da informação deve estar no início para ser absorvida pelo público de forma eficaz, assim sendo deve ter uma boa fonte e o conteúdo deve ser curto e concentrado.
Moving Text
Distrai os utilizadores, contudo é atrativo e estes acham que não
É confundido com publicidade/informação enganadora
Impede-os de ler ao seu ritmo, e eles querem ter o controlo sobre o que estão a ler.