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

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

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

Apresentações semelhantes


Apresentação em tema: "Prof. Roberto Cabral de Mello Borges Instituto de Informática UFRGS 2008 INF 043 - Interação Homem-Computador Parte 4."— Transcrição da apresentação:

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

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

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

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 Empire abcde Hoefler abcde Georgia abcde

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

11 Modern nº 20 a a a a a a a a a a a a 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 Fonte não proporcionalFonte 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 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: –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: –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

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 18 pontos: Font 24 pontos: Font 36 pontos: Font 48 pontos: Font 72 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 - 12 pt68% Times News Roman - 12 pt 33% Georgia - 12 pt52% 15%

34 Legibilidade de Fontes (Ralph F. Wilson) Arial - 12 pt 53% Verdana - 12 pt43% 4% 12 pt 10 pt9 pt Arial - 59%34%21% Verdana - 40%64%74% 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 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)

43

44 RedOrangeYellowSpringGreen Teal Magenta PinkAzureVioletBlueCyan

45 Palette de cores do Power Point (3)


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

Apresentações semelhantes


Anúncios Google