INF 043 - Interação
Homem-Computador
Parte 4
Prof. Roberto Cabral de Mello Borges
Instituto de Informática
UFRGS
2008
Ergonomia de Hardware
• Teclado
– tipos e disposição das teclas
– sensibilidade e “eco”
• Monitor de Vídeo
–
–
–
–
tipos e padrões
cores no vídeo
fatores humanos ligados ao visual do monitor
Fontes em textos de monitores
• Mobília da Estação de Trabalho
– cadeira
– mesa
• Condições Ambientais
– temperatura, umidade, iluminação, som e cores do ambiente.
Fontes Serifados x Não Serifados
• Outro quesito importante dos fontes usados em
textos é a sua característica de espessura do
contorno, sendo classificados em Serifados
(Serif ) e Não Serifados (Sans Serif )
• Os fontes serifados têm detalhes nas
extremidades e no meio das letras, dando-lhes
um aspecto que lembra os velhos estilos, tais
como gótico e outros.
• Já os não serifados tem todo o desenho da letra
com a mesma espessura, sem detalhes nas
extremidades ou meio.
Non Serif
Serif
Fontes
Fontes
Fontes Serifados
• Um dos primeiros fontes serifados surgiu em 1931,
quando o New York Times encomendou a Monotype
Corporation, um fonte cujo desenho tivesse certa classe
e boa legibilidade em tipos de jornal. Em 1932, Victor
Lardent desenhou um fonte, que começou a ser usado no
jornal, e que receberia o nome de Times Roman, que
em versão recente, para computadores denomina-se
Times New Roman.
Fontes Não Serifados
• Dentre os fontes não serifados mais utilizados está o Arial. Isto se
deve ao fato do mesmo ser um dos mais antigos e estar instalado em
praticamente todas as plataformas e sistemas operacionais.
• Em 1996 a Microsoft lançou 2 fontes: Verdana e Georgia.
Entretanto a disseminação do Verdana só se deu mais recentemente em
todas as plataformas, mas o Georgia ainda é escasso na maioria das
plataformas e ambientes.
Fontes Serifados
abcde
Times New Roman
abcde
Empire
abcde
Hoefler
abcde
Georgia
abcde
Modern
Fontes Não Serifados
Français
Arial
Monotype Corsiva
Verdana
Techno
abcde
abcde
abcde
abcde
abcde
Modern nº 20
a
a a
a
a aaa
a a aa a
aa
9 12 14 18 24 28 32 36 40 44 48 54
60
72
80
Times New Roman
a
a
a
a
a a
a a
a a
aaa
9 12 14 18 24 28 32 36 40 44 48 54 60
aa
72
80
Empire
a
a
a
a
a
a a
9 12 14 18 24 28 32
a a
a a
36 40 44
48
aa
54
aa
60
72
80
Hoefler
a
a
a
a
a
a
a
a a
a a
a a
a a
9 12 14 18 24 28 32
36 40 44
48
54
60
72
80
Georgia
a
a
a
a
a
a
a a
9 12 14 18 24 28 32
a a
36 40 44
a a
a
48
60
54
aa
72
80
Charcoal
a
a
a
a
a
a
a
9 12 14 18 24 28 32
a a
a a
36 40 44
48
a a
54
60
aa
72
80
Arial
a
a
a
a
a
a
a
9 12 14 18 24 28 32
a a
a a
36 40 44
48
a a
54
60
aa
72
80
Monotype
a
a
a
a
a a
aa
aaaaa
9 12 14 18 24 28 32
aa
36 40 44
48
54
60
72
80
Courier New
a
a
a
a
a
a
a
9 12 14 18 24 28 32
a a
a a
36 40 44
48
a a
54
60
a a
72
80
Verdana
a
a
a
a
a
a a
9 12 14 18 24 28 32
a a
a a
36 40 44
48
aa
54
60
aa
72
80
Techno
a
a
a
a
a a
a a
a a
a a
9 12 14 18 24 28 32 36 40 44
48
a
54
aa
60
72
80
Exemplos de fontes mais usados
Georgia- a
Ve r dana - a 
Tim es New Rom-an
a
Charcoal - a
Monaco- a
Courier- a
Fonte Proporcional
Fonte não proporcional Fonte proporcional
Courier New
Arial
COURIER
ARIAL
Mmmmmmm
Mmmmmmm
Iiiiiii
Iiiiiii
Recomendações p/ Fontes
• Textos em papel: Fontes Serifados (Times)
• Textos em tela: Fontes não Serifados (Arial)
• Email: Fontes não proporcionais
(Courier)
• Páginas HTML: Fontes não Serifados
(Arial) e nunca em formato de imagem
Recomendações para
Fontes(Bernard & Mills [2003])
•
•
•
•
•
•
•
•
•
Em HTML use tamanhos de fontes relativos e não absolutos
Para mudar o tamanho use <font size=+1, +2, -1,-2>
Para texto normal não especifique nada (use o default)
Use H1, H2..H6 para cabeçalhos
Use Letras maiúsculas e minúsculas. Não use só letras
maiúsculas.
Cabeçalhos em letras grandes; sub-titulos em letras médias
e o texto principal em letras menores
Usar Negrito e Itálico para destaque
Não usar sublinhado (confunde com link)
Os tamanhos dos textos em Windows aparecem cerca de 2
vezes maior do que em Macintosh (Lynch & Horton - 1997). Ex.
Fonte 14 no Windows aparece como fonte 12 no Macintosh.
Sugestões para especificação de
fontes em HTML
1ª opção:
<FONT FACE="Geneva,Arial,Helvetica">
– Usuários de Mac vêem em Geneva
– Usuários de Windows vêem Arial
– Usuários de UNIX vêem Helvetica.
2ª opção:
<FONT FACE=" Arial,Verdana,Geneva,
Helvetica">
– Arial se presente será visto tanto no Windows como no Mac).
– senão
» Usuários de Mac vêem em Geneva
» Usuários de Windows vêem Verdana
» Usuários de UNIX vêem Helvetica
Compatibilidade de fontes entre PC, Mac e Linux
Fonte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Arial
Times New Roman
Arial Black
Courier New
Verdana
Comic Sans MS
Courier
Monospace
Sans-serif
Serif
Trebuchet MS
Georgia
Impact
Arial Narrow
Helvetica
PC
99%
99%
98%
98%
98%
97%
97%
97%
97%
97%
96%
95%
95%
88%
88%
Mac Unix
99% 82%
98% 82%
97% 45%
96% 92%
99% 45%
96% 45%
99% 100%
100% 93%
100% 93%
100% 93%
96% 45%
96% 45%
84% 45%
84%
9%
99% 91%
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Tahoma
88%
Times
87%
Century Gothic
79%
MS Sans Serif
78%
Lucida Console
76%
Garamond
75%
Lucida Sans Unicode 74%
Bookman Old Style 72%
Book Antiqua
71%
Microsoft Sans Serif 69%
Palatino Linotype
69%
Monotype Corsiva
64%
Haettenschweiler
63%
Franklin Gothic Medium 52%
http://www.visibone.com/font/FontResults.html
55%
99%
59%
20%
24%
19%
19%
19%
24%
13%
18%
91%
18%
23%
18%
9%
9%
14%
14%
9%
14%
9%
Disponibilidade de Fontes
• Arial:
– PC - 100%
– Mac - 100%
– Linux - 95%
– Browsers - 99,5%
• Times / Courier New / Verdana:
– PC - 90%
– Mac - 75%
– Linux - 75%
– Browsers - 50%
Recomendação para escolha de
fontes
• Não serifado:
–
–
–
–
ARIAL
VERDANA
HELVETICA
SANS SERIF
• Serifado:
–
–
–
–
TIMES NEWS ROMAN
GEORGIA
TIMES
SERIF
• Não proporcional:
– COURIER NEW
– COURIER
– MONOSPACE
Especificações de Fontes
• Fontes são especificados por unidades de
medida próprias:
– Pontos
– Picas (1 Pica = 12 pontos)
– Polegadas (1 Polegada = 6 Picas = 72 Pontos)
• Na figura abaixo a relação entre as 3 medidas.
Tamanhos de Fontes
6 pontos:
8 pontos:
12 pontos: Font
18 pontos: Font
24 pontos: Font
36 pontos: Font
Font
Font
48 pontos:
Font
72 pontos:
Font
Legibilidade de Fontes (Ralph F.
Wilson)
• Teste feito com usuários variados
• Usuários receberam 2 textos iguais, com fontes
diferentes, sem indicação do nome do fonte
Times News Roman - 12 pt
Arial - 12 pt
Times News Roman - 12 pt
Georgia - 12 pt
<não pode distinguir>
32%
68%
33%
52%
15%
Legibilidade de Fontes (Ralph F.
Wilson)
Arial - 12 pt
Verdana - 12 pt
<não pode distinguir>
Arial Verdana <não pode distinguir>
53%
43%
4%
12 pt
10 pt
9 pt
59%
40%
1%
34%
64%
2%
21%
74%
4%
Densidade Horizontal de
Impressão
É a quantidade de caracteres que cabe na unidade
de comprimento (polegada). É medida em C.P.I
(Characters Per Inch).
• 12 pontos - 10 CPI
• 14 pontos - 8,57 CPI
• 24 pontos - 5 CPI
• 36 pontos - 3,33 CPI
• 72 pontos - 1,66 CPI
Exemplo de Densidade Horizontal
de Impressão
Densidade 12 CPI (10
Pontos - Fonte 15)
Densidade 10 CPI (12 Pontos - Fonte 18)
Densidade 8,57 CPI (14 Pontos - Fonte 21)
Densidade 5 CPI
Densidade
(24 Pontos - Fonte 36)
3,33 CPI (36 Pontos -
Fonte 54)
Densidade
1,66 CPI (72
Pontos - Fonte 112)
Recomendações para escolha da cor da
fonte (Weinman, 1997, Hill, 2001 e Griffin, 1998)
• Usar a "safe color palette".
– A "safe color palette" é uma palette de 216 cores,
conhecida como "Browser safe colors", em cores de 8
bits, que pode ser mostrada em qualquer browser,
qualquer plataforma e em qualquer tipo de monitor (em
cores). As cores foram escolhidas não em função da
beleza, mas provém de um cubo matemático de cores,
baseadas na multiplicação dos 6 valores das 6 cores.
Também é chamada de palette 6x6x6. As cores do
cubo são: Vermelho, Verde, Azul, Ciano, Magenta e
Amarelo.
Recomendações para escolha da cor da
fonte (Weinman, 1997, Hill, 2001 e Griffin, 1998)
• Use Contraste. Não importa qual a cor escolhida,
mas o contraste entre a cor e o fundo é que é
mais relevante.
• Se a cor de fundo é clara, o texto ou figuras
devem ser escuros e vice-versa.
• Use a regra das 3 cores: Limite a seleção de
cores de uma tela em uma cor de fundo e 3 cores
para sobrescrever textos e figuras.
Red
Orange Yellow
Spring
Green
Teal
Cyan
Azure
Blue
Magenta
Pink
Violet
Palette de cores do Power Point (3)