Interfaces Pessoa. Desenho de Ecrãs II. Máquina. Cap. 8 Desenho de Ecrãs

Transcrição

1 Interfaces Pessoa Máquina Desenho de Ecrãs II Cap. 8 Desenho de Ecrãs 09

2 Melhor e Pior?

3 Melhor e Pior?

4 Melhor e Pior?

5 Resumo Aula Anterior Desenho Visual Proximidade Alinhamento Repetição Contraste Ordenação Espaço em branco Proporção Decoração

6 Perguntas! Que princípio é este e para que serve? O que é o espaço aprisionado? Exemplo.

7 Sumário Cor Texto Escrita de Texto

8 01 USO DA COR

9 Estético

10 Transmitir Informação

11 Atrair o Olhar

12 Indicar Estado

13 Escolha das Cores

14 Primeiro Passo: sem cor!

15 Significado das Cores Conceito Parar Avançar Frio Quente Perigo Precaução Segurança Ligado Desligado Cor Vermelho Verde Azul Vermelho Vermelho Amarelo Verde Vermelho Azul %

16 Utilizar Cor de Acordo com Convenções Parar Avançar

17 Utilizar Cor de Acordo com Convenções

18 Utilizar Cor de Acordo com Convenções

19 Utilizar Cor de Acordo com Convenções

20 Utilizar Cor de Acordo com Convenções

21 Esquema de Cores

22 Limitar número de Cores

23 Cores em Contexto

24 Cores em Contexto

25 Cores em Contexto

26 Cores em Contexto

27 Cores em Contexto

28 Cores em Contexto

29 Cores em Contexto

30 Cores em Contexto

31 Roda das Cores

32 Esquema de Cores Monocromático

33 Esquema de Cores - Complementar

34 Esquema de Cores - Análogo

35 Esquema de Cores - Triádico

36 Mas... CUIDADO

37 Seguir convenções da plataforma

38 Contraste CONTRASTE

39 Contraste CONTRASTE

40 Contraste CONTRASTE

41 ... mas não demasiado! CUIDADO

42 Cor do Texto Como neste slide!

43 Cores e Imagens

44 Daltonismo

45 Daltonismo

46 02 TIPOGRAFIA

47 Tipos de Letras

48 Dentro de um mesmo tipo

49 Duas grandes famílias Sans Serif Serif

50 Duas grandes famílias Sans Serif Serif

51 Legibilidade Serifas Serifas ajudam a ler texto corrido Mas

52 Legibilidade Serifas Serifas ajudam a ler texto corrido Mas Ecrãs não têm resolução para detalhes tão pequenos!

53 Excepção?

54 Legibilidade Bom Contraste Eficaz Não tão Eficaz

55 Legibilidade Deficiências e Seniores Melhor Assim

56 Tamanho de Texto Aproximadamente 12 pontos Isto é texto de 32 pontos Isto é texto de 14 pontos Este texto tem 12 pontos Este texto tem 8 pontos Este texto tem 8 pontos com itálico

57 Pixéis!= Pontos! 20 pixeis num ecrã de 72 dpi 20 pixeis num ecrã de 150 dpi 20 pontos num ecrã de 72 dpi 20 pontos num ecrã de 150 dpi

58 Espaçamento Pelo menos 30% da altura do tipo Muitas pessoas com problemas visuais (e não só) têm problemas em ler texto em linhas demasiado juntas

59 Tipo de Letra Evitem tipos excessivamente ornados que são menos legíveis Apenas para ênfase Usem tipos padrão: normal ou itálico Tipo condensado poupa espaço mas é menos legível

60 Estilo de Texto Mistura de maiúsculas e minúsculas melhor que SÓ MAIÚSCULAS ou só minúsculas Evitem o itálico (menos legível)

61 Texto na vertical Difícil de ler

62 03 ESCRITA DE MENSAGENS

63 Breves e Concisas O processamento do editor de texto conduziu a 23 páginas impressas

64 Breves e Concisas O processamento do editor de texto conduziu a 23 páginas impressas Impressas 23 páginas

65 Usar a Linguagem do Utilizador Erro no campo Nº do Vestido

66 Usar a Linguagem do Utilizador Erro no campo Nº do Vestido Erro: nº do vestido deve estar entre 32 e 48

67 Mensagens Afirmativas Não é possível sair sem antes guardar o ficheiro

68 Mensagens Afirmativas Não é possível sair sem antes guardar o ficheiro Guardar o ficheiro antes de sair

69 Construtivas e Não Críticas Nome de ficheiro Mau/ilegal/inválido

70 Construtivas e Não Críticas Nome de ficheiro Mau/ilegal/inválido Nº máximo de caracteres do nome do ficheiro: 8

71 Específicas Erro sintáctico nº 1542

72 Específicas Erro sintáctico nº 1542 Parêntesis esquerdo na linha 210 não tem parêntesis direito

73 Utilizador Tem o Controlo Introduza comando

74 Utilizador Tem o Controlo Introduza comando Pronto para receber comando

75 Indicadoras de Accão Trem de aterragem está recolhido

76 Indicadoras de Accão Trem de aterragem está recolhido Abra o trem de aterragem

77 Voz Activa Documento foi recebido pelo João

78 Voz Activa Documento foi recebido pelo João João recebeu o documento

79 04 EM SUMA

80 Erros Típicos Desenho de Ecrãs Posição arbitrária de componentes Dimensões arbitrárias dos componentes Tamanhos e layouts arbitrários das janelas Inconsistência nos vários ecrãs Inconsistência com o dispositivo físico Ex. Janelas tipo Windows num telemóvel 3G Resolução do ecrã

81 Resumo (1/2) Garantir desenho simples e logicamente organizado Evitar encher o ecrã com informação irrelevante Sempre que apropriado apresentar a informação graficamente em vez de números Alinhar números e mostrar claramente as unidades Não usar só MAIUSCULAS e limitar o número de tipos

82 Resumo (2/2) Agrupar elementos relacionados usar caixas, cor, espaço Usar cor conservadora e consistentemente Usar uma cor neutra para o fundo Usar caracteres escuros sobre fundo claro Minimizar o número de cores, mas que sejam distintas Usar informação adicional para além da cor Daltónicos

83 Referências Adicionais Tipografia na web HOWTO/typography.shtml m nt.htm Cor

84 TPC Avaliação Ler Cap. 9 do Livro