IHC-001. Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Me. Álvaro d Arce

Transcrição

1 IHC-001 Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Me. Álvaro d Arce alvaro@darce.com.br

2 Uso de Cores 2 Uso de cores em interfaces de usuário. Uso de Cores Exercícios

3 Uso de Cores 3 Psicologia Cognitiva: Ramo da psicologia que trata da maneira como os indivíduos percebem, aprendem, lembram e representam as informações que a realidade fornece. Procura explicar como o ser humano percebe o mundo e como utiliza-se do conhecimento para desenvolver diversas funções cognitivas como: falar, raciocinar, resolver situações-problema, memorizar etc. Áreas do conhecimento relacionadas (aplicações): Inteligência humana, inteligência artificial, representação do conhecimento, construção de conceitos, atenção, percepção visual e auditiva, linguagem, reconhecimento de modelos, esquecimento e lembrança, ciência da computação etc.

4 Uso de Cores 4 De acordo com a Psicologia Cognitiva Aplicada, a cor pode ser usada para atingir objetivos específicos e interfere em diversos aspectos da vida das pessoas: Nos sentidos; Nas emoções; No intelecto. Ex.: Uma parede laranja em uma cozinha pode provocar fome na pessoa. O uso correto das cores pode resultar em rápida e correta assimilação da informação; O uso incorreto pode acarretar resultados indesejáveis.

5 Uso de Cores 5 O uso de cores na IU possibilita: Mostrar as coisas conforme são vistas na natureza; Representar associações simbólicas; Chamar e direcionar a atenção; Enfatizar alguns aspectos da interface; Determinar um estado de espírito; Auxiliar na identificação de estruturas e processos; Diminuir a ocorrência de erros; Tomar uma interface mais fácil de ser memorizada.

6 Uso de Cores 6 Há 2 processos de formação de cores: Mistura aditiva de cores; Mistura subtrativa de cores.

7 Uso de Cores 7 A mistura aditiva é o processo usado nos monitores de vídeo e de televisão. A cor é gerada pela mistura de vários comprimentos de onda da luz, provocando uma alteração de comprimento de onda que atinge e sensibiliza o olho humano. As cores primárias aditivas são: vermelho, verde e azul Padrão RGB (Red Green Blue). O preto é gerado pela ausência de qualquer cor, indicando que nenhuma luz está sendo transmitida, e o branco é a mistura de todas as cores, o que indica que uma quantidade máxima de vermelho, verde e azul está sendo transmitida. R B G

8 Uso de Cores 8 É o processo usado nas pinturas e nas impressoras coloridas. Uma pintura é diferente de um monitor. Este é uma fonte de luz e pode criar cores. Já uma pintura não emite luz, apenas a absorve e a reflete, gerando a cor por um processo que absorve comprimentos de ondas de luz específicos e reflete outros. As cores primárias aditivas são: ciano, magenta, amarelo e preto C K Y Padrão CMYK (Cyan Magenta Yellow Black). O preto representa a mistura de todas as cores e o branco a ausência de cor. M

9 Uso de Cores 9 O critério para selecionar as cores não se baseia apenas em conceitos estéticos. Deve ser considerada a interação entre elas. As cores em uma interface interagem entre si: cores de frente são afetadas pelas de fundo. Uma cor é afetada pelo ambiente que a circunda: a iluminação do ambiente pode provocar distorções de cor.

10 Uso de Cores 10 Embora deva ser permitido que o usuário personalize suas cores, os sistemas devem ter um padrão de cores para suas telas, de maneira a providenciar ao usuário o melhor desempenho e conforto diante do sistema, não permitindo reações indesejáveis. A escolha inadequada de cores interfere na legibilidade da IU, e devem ser selecionadas de modo a não causarem fadiga nos olhos, nem deixarem o usuário confuso.

11 Uso de Cores 11 As cores acromáticas são os vários tons de cinza situados entre o branco e o preto.

12 Uso de Cores 12 As cores cromáticas podem ser: Quentes: amarelo, laranja e vermelho Frias: azul, turquesa, violeta. Há ainda as chamadas cores marginais: verde e magenta Tanto as cores acromáticas quanto as cores marginais podem aparentar ser quentes ou frias, dependendo da cor que esteja ao seu redor: ao lado de uma cor quente aparentam ser frias, ao lado de uma cor fria aparentam ser quentes.

13 Uso de Cores 13 O branco transmite leveza e atrai a atenção para um fundo escuro. Cuidados: Deve-se evitar olhar uma interface com intenso brilho por tempo prolongado. Áreas extensas de branco podem resultar em um brilho que dilui as cores exibidas. Deve-se evitar branco em cantos da interface e ter cuidado com o brilho como cor de fundo.

14 Uso de Cores 14 Fundo branco dá maior legibilidade para tons escuros Fundo branco dá maior legibilidade para tons escuros As associações do branco podem ser: Positivas Paz Leveza Limpeza Pureza Inocência Negativas Frio Hospital Esterilidade

15 Uso de Cores 15 O preto age como estimulante para as demais cores e se harmoniza bem com todas elas. Fornece bom contraste com cores brilhosas Fornece bom contraste com cores brilhosas Fornece bom contraste com cores brilhosas Fornece bom contraste com cores brilhosas

16 Uso de Cores 16 Pode ser necessário negrito quando o preto está sobre um fundo branco Sobre fundo preto geralmente não é necessário negrito Pode ser necessário negrito quando o preto está sobre um fundo branco Sobre fundo preto geralmente não é necessário negrito

17 Uso de Cores 17 Torna-se mais legível quando contrasta com cores claras Torna-se mais legível quando contrasta com cores claras Torna-se mais legível quando contrasta com cores claras Torna-se mais legível quando contrasta com cores claras

18 Uso de Cores 18 Linhas pretas são mais eficientes para separar áreas coloridas

19 Uso de Cores 19 Não é uma boa cor de fundo para imagens, pois as cores podem parecer penduradas no espaço Mas pode ser usado para circundar uma imagem, de modo a estabelecer os limites da variação tonal

20 Uso de Cores 20 As associações do preto podem ser: Positivas Noite Formalidade Sombriedade Estabilidade Negativas Medo Vazio Morte Anonimato

21 Uso de Cores 21 O cinza reduz as conotações emocionais, dando um aspecto neutro. Combina com todas as demais cores. Destaca as outras cores, que apresentam seu colorido máximo quando contrastam com cinza escuro. Avião fotografado no cinza natural do céu.

22 Uso de Cores 22 É uma boa cor de fundo. Minimiza o contraste entre uma cor mais escura e outra mais clara. A maioria dos softwares possui como padrão uma cor cromática de baixo brilho.

23 Uso de Cores 23 É a cor com maior impacto emocional, devido à associação com sangue e fogo. Seu significado simbólico varia: nos EUA, representa perigo; na China, revolução; na Inglaterra, realeza; na India, casamento.

24 Uso de Cores 24 Pode ser usado nas interfaces para simbolizar perigo ou atrair a atenção. Bordas vermelhas de sinais de advertência são percebidas logo.

25 Seu uso deve ser evitado em áreas amplas ou como fundo, por ser uma cor agressiva que chama muito a atenção. Uso de Cores 25

26 Uso de Cores 26 As associações do vermelho podem ser: Positivas Paixão Vitória Energia Sensualidade* Amor Negativas Raiva Perigo Sangue Sensualidade* Guerra Diabo/Demônio Fogo * A sensualidade pode ser tanto um fator positivo quanto um negativo, dependendo de como e para quem ela é apresentada. Nos padrões bíblicos, só é saudável entre marido e mulher.

27 Uso de Cores 27 Exemplo: ifood (

28 Uso de Cores 28 Uma das cores mais vibrantes. Em suas tonalidades escuras, pode ser associado com a terra e o outono. Pela sua associação com a mudança de estações, pode representar mudança e movimento em geral. Por associar-se com a fruta laranja, remetendo à saúde e à vitalidade. É considerado mais amigável e convidativo, atraindo atenção visual sem ser tão esmagador quanto o vermelho. Incita o usuário a executar ações (calls to action).

29 Uso de Cores 29 As associações do laranja podem ser: Positivas Comunicação Aconchego Seco Dominante Extravagante Explosivo Negativas Exagero Cansativo Ultrajante

30 Uso de Cores 30 Exemplo: Grooveshark (

31 Uso de Cores 31 É uma cor incandescente, com impressão acolhedora. Associada ao sol, simboliza vida e calor. Nos terminais RGB é produzida pela combinação de vermelho e verde. R G B É um bom indicador de atividade nas interfaces, por exemplo: Ícone de página em construção.

32 Uso de Cores 32 Só deve ser usado como cor de texto, quando o fundo for azul escuro ou preto. Só deve ser usado como cor de texto, quando o fundo for azul escuro ou preto.

33 Uso de Cores 33 As associações do amarelo podem ser: Positivas Sol Luz Verão Colheita Ouro Negativas Covardia Risco Doença

34 Exemplo: Hivitcons ( Uso de Cores 34

35 Uso de Cores 35 É uma cor associada à natureza, a movimentos ambientalistas; Por consequência é associada a estabilidade, segurança; Deve ser usado para indicar que está tudo normal, ex.: No software indicando que um item está ok; No trânsito indicando passagem livre.

36 Uso de Cores 36 No entanto deve ser usado com cuidado, pois: Ambientes em verde claro promovem um estado de paz na mente A cor verde faz liberar um hormônio que promove tranquilidade; Verde em excesso pode resultar em aparência doentia.

37 Uso de Cores 37 O olho humano é mais sensível aos componentes de onda próximos ao amarelo-verde. O verde é a cor mais visível das 3 cores primárias dos terminais RGB, sendo muito propícia quando se deseja passar rapidamente uma informação. Nas interfaces, é fundamental ter um bom contraste no canal verde para uma nítida legibilidade do texto.

38 Uso de Cores 38 As associações do verde podem ser: Positivas Vegetação Natureza Primavera Fertilidade Esperança Negativas Inveja Inexperiência Decadência Ganância

39 Exemplo: More ( Uso de Cores 39

40 Uso de Cores 40 Sugere espaço, profundidade, por ser a cor do céu e do mar; É a cor preferida pela moda, sendo usada para qualquer ocasião, desde os jeans até os ternos de negócios; É uma cor fria e suave, sendo a mais tranquila e relaxante de todas, simboliza espiritualidade; Simboliza também unidade, autoridade, estabilidade (é a cor mais usada em bandeiras nacionais); É excelente para fundo das interfaces dá uma impressão de expansão e profundidade infinita.

41 Uso de Cores 41 É uma das três cores primárias dos terminais de vídeo. Como o olho humano é menos sensível aos comprimentos de onda do azul, é uma cor difícil de ser focalizada e de obter bons contrastes; Portanto, o azul não deve ser usado para texto, nem em detalhes finos.

42 Uso de Cores 42 É bom como cor de fundo Mas não deve ser usado para texto

43 Uso de Cores 43 As associações do azul podem ser: Positivas Céu Mar Espiritualidade Bem estar Negativas Frio Depressão Melancolia Mistério Solidão

44 Exemplo: Twitter ( Uso de Cores 44

45 Uso de Cores 45 Por muito tempo associado à realeza, pode ser usado no design para transmitir riqueza e luxúria. Em tonalidades mais claras remete à primavera e romance. Muito usado em sites da indústria de cosméticos e, especificamente, de produtos anti-envelhecimento

46 Uso de Cores 46 As associações do roxo podem ser: Positivas Ambição* Ansiedade** Encantamento Enigmático Extravagante Negativas Ambição* Ansiedade** Arrogância Crueldade Penitência Lamento * A ambição pode ou não ser saudável, dependendo da intenção da pessoa. ** A ansiedade não é saudável quando traz preocupações.

47 Exemplo: Zoom ( Uso de Cores 47

48 Uso de Cores 48 Alterações cromáticas fazem com que comprimentos de onda distintos sejam focalizados em diferentes planos no olho; Para a maioria das pessoas as cores vermelhas parece que se encontram mais perto do observador do que as cores azuis. Em pintura existe uma técnica chamada perspectiva aerial, na qual se pinta objetos distantes (como montanhas) de azulado.

49 Uso de Cores 49 Esta técnica pode ser aplicada às interfaces. O uso de um azul não saturado mostra-se uma boa escolha para uma cor de fundo de tela (em decoração, tal cor provoca a impressão de maior altura ou profundidade de uma sala), permitindo que os demais elementos da tela apareçam com mais destaque.

50 Uso de Cores 50 Desde os tempos remotos, as cores são utilizadas para dar significados e interpretações, como por exemplo, na Bíblia Sagrada: Cor Preto Azul Marrom Verde Púrpura Vermelho Branco Amarelo Laranja Contexto Fome, morte, pecado, luto, humilhação Natureza Celestial de Cristo, caráter e natureza de Cristo como Sumo Sacerdote, Espírito Santo, revelação divina Ovelhas Vegetação, renovo, vigor, prosperidade, esperança (Tintura mais preciosa da antiguidade), Realeza, soberania de Cristo Sacrifício, sangue, vida, guerra (Linho fino), pureza, perfeição, retidão, alegria, santidade Pêlos da região leprosa do corpo, ouro Louvor, Juízo, provação

51 Uso de Cores 51 Independente do tipo de informação (números, palavras, tons musicais, cores etc.) as pessoas só conseguem se lembrar de listas com aproximadamente 7 itens (mais ou menos dois itens de diferença); Nas interfaces em que se usa cores para identificar categorias distintas de informação, não se deve usar mais de 7 cores ao mesmo tempo.

52 Uso de Cores 52 A memória do ser humano para cores é pobre. Não se consegue dizer se duas cores são iguais, a não ser que sejam colocadas lado a lado. Se separadas por alguma distância, devem ser levados em consideração as condições de visualização e os diferentes contornos.

53 Uso de Cores 53 De modo geral, as cores são recordadas de modo diferente: Cores claras são lembradas como sendo mais claras que as originais; Cores escuras são lembradas como mais escuras que as originais.

54 Uso de Cores 54 Usar no máximo 7 (mais ou menos duas) cores; Usar cores familiares, consistentes; Não usar simultaneamente cores de alto croma/intensidade (em termos espectrais); Usar cores que apresentam uma variação mínima no aspecto comportamento.

55 Exercícios 55 Uso de Cores Exercícios

56 Exercícios 56 Pesquise 5 sites onde você percebe o uso das cores de acordo com o que foi visto em aula.