A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

INF Interação Homem-Computador Parte 4

Apresentações semelhantes


Apresentação em tema: "INF Interação Homem-Computador Parte 4"— Transcrição da apresentação:

1 INF 043 - Interação Homem-Computador Parte 4
Prof. Roberto Cabral de Mello Borges Instituto de Informática UFRGS 2008

2 Ergonomia de Hardware Teclado Monitor de Vídeo
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.

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

4 Non Serif Serif

5 Fontes

6 Fontes

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

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

9 Fontes Serifados Modern abcde Times New Roman abcde Hoefler abcde
Empire abcde Hoefler abcde Georgia abcde

10 Fontes Não Serifados Français abcde Arial abcde Verdana abcde
Monotype Corsiva abcde Verdana abcde Techno abcde

11 Modern nº 20 a a a a a a a a a a aa a a a

12 Times New Roman a a a a a a a a a a a a a a a

13 Empire a a a a a a a a a a a a a a a

14 Hoefler a a a a a a a a a a a a a a a

15 Georgia a a a a a a a a a a a a a a a

16 Charcoal a a a a a a a a a a a a a a a

17 Arial a a a a a a a a a a a a a a a

18 Monotype a a a a a a a a a a a a a a a

19 Courier New a a a a a a a a a a a a a a a

20 Verdana a a a a a a a a a a a a a a a

21 Techno a a a a a a a a a a a a a a a

22 Exemplos de fontes mais usados

23 Fonte Proporcional Courier New Arial COURIER ARIAL Mmmmmmm Mmmmmmm
Fonte não proporcional Fonte proporcional Courier New COURIER Mmmmmmm Iiiiiii Arial ARIAL Mmmmmmm Iiiiiii

24 Recomendações p/ Fontes
Textos em papel: Fontes Serifados (Times) Textos em tela: Fontes não Serifados (Arial) Fontes não proporcionais (Courier) Páginas HTML: Fontes não Serifados (Arial) e nunca em formato de imagem

25 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 ). Ex. Fonte 14 no Windows aparece como fonte 12 no Macintosh.

26 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 Windows vêem Verdana Usuários de UNIX vêem Helvetica

27 Compatibilidade de fontes entre PC, Mac e Linux

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

29 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

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

31

32 Tamanhos de Fontes 6 pontos: Font 8 pontos: Font 12 pontos: Font

33 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 pt 68% Times News Roman - 12 pt 33% Georgia - 12 pt 52% <não pode distinguir> 15%

34 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 % 34% 21% Verdana % 64% 74% <não pode distinguir> 1% 2% 4%

35 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

36 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) Densidade 3,33 CPI (36 Pontos - Fonte 54) Densidade 1,66 CPI (72 Pontos - Fonte 112)

37

38

39

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

41

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

43

44 Teal Cyan Azure Blue Pink Violet
Red Orange Yellow Spring Green Teal Cyan Azure Blue Magenta Pink Violet

45 Palette de cores do Power Point (3)


Carregar ppt "INF Interação Homem-Computador Parte 4"

Apresentações semelhantes


Anúncios Google