1 / 45

INF 043 - Interação Homem-Computador Parte 4

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

fancy
Download Presentation

INF 043 - Interação Homem-Computador Parte 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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 ) eNã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: Verdanae 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 Modernabcde Times New Romanabcde Empireabcde Hoefler abcde Georgiaabcde

  10. Fontes Não Serifados Français abcde Arial abcde Monotype Corsivaabcde Verdanaabcde Technoabcde

  11. Modern nº 20 aa a a a aaaaaaaaaa 9 12 14 18 24 28 32 36 40 44 48 54 60 72 80

  12. Times New Roman aa a a a a a aa a a aaaa 9 12 14 18 24 28 32 36 40 44 48 54 60 72 80

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

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

  15. Georgia aa a a a a a aa a a aaaa 9 12 14 18 24 28 32 36 40 44 48 54 60 72 80

  16. Charcoal aa a a a a a aa a a aaaa 9 12 14 18 24 28 32 36 40 44 48 54 60 72 80

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

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

  19. Courier New aa a a a a a aa a a aaaa 9 12 14 18 24 28 32 36 40 44 48 54 60 72 80

  20. Verdana aa a a a a a aaa aaaaa 9 12 14 18 24 28 32 36 40 44 48 54 60 72 80

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

  22. Exemplos de fontes mais usados

  23. Fonte Proporcional 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) • Email: 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 - 1997). 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 sepresente 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 http://www.visibone.com/font/FontResults.html

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

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

  33. Legibilidade de Fontes (Ralph F. Wilson) 12 pt 10 pt 9 pt Arial - 59% 34% 21% Verdana - 40% 64% 74% <não pode distinguir> 1% 2% 4% Arial - 12 pt 53% Verdana - 12 pt 43% <não pode distinguir> 4%

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

  35. Exemplo de Densidade Horizontal de Impressão Densidade 12 CPI (10 Pontos - Fonte15) 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)

  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.

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

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

  39. Palette de cores do Power Point (3)

More Related