inf 043 - interação homem-computador parte 4

Prof. Roberto Cabral de Mello Borges

Instituto de InformáticaUFRGS

2008

INF 043 - Interação Homem-Computador

Parte 4

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 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

Modern abcdeTimes New Roman abcde Empire abcdeHoefler

abcdeGeorgia abcde

Fontes Não Serifados

Français abcdeArial abcdeMonotype Corsiva abcdeVerdana abcdeTechno abcde

Modern nº 20

a a a a a a a a a a aa a a a 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 a a a a a 9 12 14 18 24 28 32 36 40 44 48 54 60 72 80

Empire

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

Hoeflera 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 a a a a a

a a 9 12 14 18 24 28 32 36 40 44 48 54 60 72 80

Charcoal

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

Arial


Monotype


Courier New


Verdana


Techno

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

Exemplos de fontes mais usados

€

Georgia- a( )

€

Verdana- a( )

€

Times New Roman- a( )

€

Charcoal- a( )

€

Monaco- a( )

€

Courier - a( )

Fonte Proporcional

Fonte não proporcional Fonte proporcional

Courier New

COURIER

Mmmmmmm

Iiiiiii

Arial

ARIAL

Mmmmmmm

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 PC Mac Unix1 Arial 99% 99% 82%2 Times New Roman 99% 98% 82%3 Arial Black 98% 97% 45%4 Courier New 98% 96% 92%5 Verdana 98% 99% 45%6 Comic Sans MS 97% 96% 45%7 Courier 97% 99% 100%8 Monospace 97% 100% 93%9 Sans-serif 97% 100% 93%

10 Serif 97% 100% 93%11 Trebuchet MS 96% 96% 45%12 Georgia 95% 96% 45%13 Impact 95% 84% 45%14 Arial Narrow 88% 84% 9%15 Helvetica 88% 99% 91%

16 Tahoma 88% 55% 18%17 Times 87% 99% 91%18 Century Gothic 79% 59%19 MS Sans Serif 78% 20%20 Lucida Console 76% 18%21 Garamond 75% 24% 23%22 Lucida Sans Unicode74% 18%23 Bookman Old Style72% 19% 9%24 Book Antiqua 71% 19% 9%25 Microsoft Sans Serif69% 19% 14%26 Palatino Linotype 69% 14%27 Monotype Corsiva 64% 24% 9%28 Haettenschweiler 63% 13% 14%29 Franklin Gothic Medium52% 9%

http://www.visibone.com/font/FontResults.html

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: Font

8 pontos: Font

12 pontos: Font

18 pontos: Font

24 pontos: Font

36 pontos: 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 32%Arial - 12 pt 68%

Times News Roman - 12 pt 33%Georgia - 12 pt 52%<não pode distinguir> 15%

Legibilidade de Fontes (Ralph F. Wilson)

Arial - 12 pt 53%Verdana - 12 pt 43%<não pode distinguir> 4%

12 pt 10 pt 9 pt

Arial - 59% 34% 21%

Verdana - 40% 64% 74%

<não pode distinguir> 1% 2% 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



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 (24 Pontos - Fonte 36)



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.

• 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.

Recomendações para escolha da cor da fonte (Weinman, 1997, Hill, 2001 e Griffin, 1998)

Red Orange Yellow Spring Green Teal Magenta PinkAzure VioletBlueCyan

Palette de cores do Power Point (3)

inf 043 - interação homem-computador parte 4

Documents