Fundamentos Teóricos:
   Percepção Visual
      Jair C Leite




                        © Jair C Leite
Percepção
•   Percepção Visual
     – É a mais utilizada em IHC.
•   Percepção Auditiva
     – Normalmente como informação...
Fundamentos da percepção visual
• Roteiro
  –   Elementos fundamentais
  –   Anatomia do olho humano
  –   Percepção de co...
Elementos fundamentais - 1
•   Luz
    – Porção (1/70) do espectro
      eletromagnético (com
      comprimentos de onda e...
Elementos fundamentais - 2
• Luminância
     – Intensidade de energia luminosa recebida na retina
• Contraste
     – Influ...
Influência do contraste




• Os círculos são todos do mesmo tom de cinza




                                            ...
Grid de Hermann




Você está vendo os círculos   Existem apenas círculos
entre os quadrados?           brancos entre os q...
© Jair C Leite
© Jair C Leite
Anatomia do olho humano
•   A retina capta os sinais luminosos e os transforma em impulsos
    nervosos.
•   A retina cont...
Cores primárias
•   Cores Primárias (cores-luz)
     –   Vermelho, Verde, Azul (RGB)
     –   Sistema aditivo
     –   Som...
Elementos fundamentais da cor
•   Matiz (Hue)
     – É a característica que define e
       distingue uma cor. Vermelho,
 ...
Percepção de Cores - 1
•   A visão humana é tricromática (teoria de Young-Helmholtz). Com os
    três tipos de cones, pode...
Percepção de Cores - 2
•   Nem todas as cores focalizam no mesmo plano na retina.
•   O vermelho focaliza um pouco à frent...
Interação entre cores
• Cores vizinhas afetam as propriedades percebidas
  da cor




                  Mudança na matiz

...
Problemas com cores
•   Os cones azuis raramente
    apresentam deficiências,
    comuns nos outros dois
    tipos sensíve...
Cores secundárias, terciárias e
complementares
• Cores secundárias
                                           P
   – Combi...
Cores complementares e pós-imagens




                  Efeito ‘Afterimages’
     Olhe a figura por 30 segundos e depois ...
Harmonia Cromática
•   Com uma cor
     – Escala de tons e valores –
       utiliza o índice de luminosidade   [Luciana Si...
Exemplos de combinações hamônicas




             Harmonia monocromática




           Harmonia bicromática

           ...
Campo de visão
• Determina os ângulos nos quais um indivíduo
  consegue perceber elementos.
• Em monitores com grande larg...
Cores e foco
•   Ao focalizarmos um objetos estamos movimentando os olhos
    para que a imagem se forme na fovea.
•   Os ...
Ilusão de movimento periférico




                                 © Jair C Leite
Ilusão de movimento periférico




                                 © Jair C Leite
Teorias para percepção visual
• Abordagem construtivista
• Abordagem ecológica




                                © Jair ...
Abordagem construtivista
• A percepção visual do mundo é construída a partir
  das informações do ambiente e do conhecimen...
Distinção figura-fundo




                         © Jair C Leite
Figura-fundo
• Quantas rostos
  você consegue
  ver nesta
  árvore?




                   © Jair C Leite
O que você percebe na figura abaixo?




                                 © Jair C Leite
Gestalt
• Teorias da percepção visual desenvolvido por
  psicólogos alemães na década de 20.
• Significa ‘unificado’
• São...
Proximidade
• Os elementos próximos são interpretados
  como pertencentes a um grupo




                                 ...
Efeito do posicionamento (humor)




                                   © Jair C Leite
Similaridade
• Elementos com atributos semelhantes (cor ou
  forma) são interpretados como de um mesmo
  grupo ou categori...
Fechamento
• Partes incompletas de uma figura são
  completadas pela mente humana




                                    ...
Continuidade
• Os olhos tendem a seguir as formas da
  imagem




                                          © Jair C Leite
Simetria
• Partes simétricas são percebidas como
  figuras coerentes.




   [   ][   ][   ]   3 pares de colchetes


   [...
Figura-fundo
• O cérebro tenta separar formas em uma
  imagem, separando-a do fundo
• Algumas imagens podem ter relações
 ...
Abordagem ecológica
•   Argumenta que a percepção é um processo direto e contínuo
    que ocorre através da exploração do ...
A abordagem ecológica (Gibson)




  quot;I have described environment as the surfaces that separate
  substances from the...
Exemplos de Affordances
• Os objetos “convidam” a sua utilização.
• A percepção está associada com aquilo que se pode
  fa...
Fenômenos da percepção
• Os slides a seguir mostram exemplos de
  fenômenos da percepção visual
• Para saber mais veja
  –...
Ilusão de ótica




                  © Jair C Leite
Ilusão de Hering e Poggendorff


                 As linhas vermelhas são retas?



                 As duas linhas vermel...
Ilusão de Kanizsa




Nenhum triângulo foi
desenhado aqui.

                       © Jair C Leite
Ilusão de movimento aparente




                               © Jair C Leite
Técnicas de visualização –
profundidade
•   Tamanho
     – Objetos idênticos com tamanhos maiores parecem estar mais perto...
Ilusão de perspectiva
                   • Os cubos são todos do
                     mesmo tamanho
                   • A...
Ilusão de perspectiva
                   • A imagem do homem
                     pequeno é a mesma
                     q...
Profundidade ambígua




                       © Jair C Leite
Distorção nas imagens




 Esta figura é formada apenas
 por retas horizontais e
 quadrados.




                         ...
Próximos SlideShares
Carregando em…5
×

Fundamentos Percepcao

10.156 visualizações

Publicada em

Fundamentos Percepcao

  1. 1. Fundamentos Teóricos: Percepção Visual Jair C Leite © Jair C Leite
  2. 2. Percepção • Percepção Visual – É a mais utilizada em IHC. • Percepção Auditiva – Normalmente como informação auxiliar, feedback ou alertas. – Algumas interfaces utilizam mensagens sonoras para ajuda (MS Money) ou informações de status (Gerenciador da impressora Compaq I700) • Percepção tátil – Normalmente utilizada como feedback em jogos • Olfato e Paladar – Muito pouco usados – Já existem experimentos para transmitir cheiro digital © Jair C Leite
  3. 3. Fundamentos da percepção visual • Roteiro – Elementos fundamentais – Anatomia do olho humano – Percepção de cores – Harmonia cromática – Campo de visão – Fenômenos da percepção visual – Teorias da percepção visual © Jair C Leite
  4. 4. Elementos fundamentais - 1 • Luz – Porção (1/70) do espectro eletromagnético (com comprimentos de onda entre 4 mil e 8 mil angstrons) que impressiona as células fotoreceptoras existentes no olho: cones e bastonetes. • Cor – A cor percebida depende do conteúdo espectral da luz incidida. © Jair C Leite
  5. 5. Elementos fundamentais - 2 • Luminância – Intensidade de energia luminosa recebida na retina • Contraste – Influência da luminância de objetos vizinhos. • Brilho – luminância percebida influenciada pelo contraste.  A luminância é a capacidade de percepção da intensidade da luz de um objeto de um objeto não depende da sua vizinhança.  O brilho de um objeto é a luminância percebida e depende da vizinhança contraste.  Dois objetos com com diferentes vizinhanças, mas com luminâncias idênticas podem ter brilhos diferentes. © Jair C Leite
  6. 6. Influência do contraste • Os círculos são todos do mesmo tom de cinza © Jair C Leite
  7. 7. Grid de Hermann Você está vendo os círculos Existem apenas círculos entre os quadrados? brancos entre os quadrados! Eles não existem! © Jair C Leite
  8. 8. © Jair C Leite
  9. 9. © Jair C Leite
  10. 10. Anatomia do olho humano • A retina capta os sinais luminosos e os transforma em impulsos nervosos. • A retina contém dois tipos diferentes de fotorreceptores: cones e bastonetes. • Os bastonetes (120 milhões) são sensíveis a quantidades relativamente pequenas de luz. Extraem informações sobre intensidade luminosa (luminância). Não diferenciam cores. • Os cones (6 milhões) são de três tipos de cones, cada um capaz de detectar uma cor diferente: vermelho, verde e azul. © Jair C Leite
  11. 11. Cores primárias • Cores Primárias (cores-luz) – Vermelho, Verde, Azul (RGB) – Sistema aditivo – Soma: Branco – Ausência: Preto • Cores primárias (pigmentos) – Azul, Vermelho e Amarelo (CMY) – Sistema subtrativo – Soma: Preto – Ausência: Cor da superfície • Espectro de cores – Variação do comprimento de onda © Jair C Leite
  12. 12. Elementos fundamentais da cor • Matiz (Hue) – É a característica que define e distingue uma cor. Vermelho, verde ou azul, pôr exemplo, são matizes • Intensidade (Saturação) – Um matiz de intensidade alta ou forte é vívido e saturado, enquanto o de intensidade baixa ou fraca caracteriza cores fracas ou quot;pastelquot;. • Valor (Brilho) – Refere-se a maior ou menor quantidade de luz presente na cor. Varia acrescentando branco ou preto H - Hue S - Saturação B - Brilho © Jair C Leite
  13. 13. Percepção de Cores - 1 • A visão humana é tricromática (teoria de Young-Helmholtz). Com os três tipos de cones, podemos distinguir um número quase infinito de cores. • A quantidade de cada um dos três tipos de cones na retina não é igual. Os cones sensíveis ao azul representam apenas 5% do total. • O mecanismo de visão das cores se dá por oposição das cores por pares mutuamente excludentes (teoria de Hering). • Vermelho x Verde • Azul x Amarelo (que decorre da soma do vermelho com o verde). • O contraste (branco x preto) percebido nos bastonentes, dá conta do brilho ou da intensidade da luz. © Jair C Leite
  14. 14. Percepção de Cores - 2 • Nem todas as cores focalizam no mesmo plano na retina. • O vermelho focaliza um pouco à frente do verde e do azul. • Testes mostram que em objetos formalmente idênticos mas de cores diferentes, o de cor vermelha é percebido como mais próximo do que o verde e o azul. © Jair C Leite
  15. 15. Interação entre cores • Cores vizinhas afetam as propriedades percebidas da cor Mudança na matiz Mudança no brilho Mudança na saturação © Jair C Leite
  16. 16. Problemas com cores • Os cones azuis raramente apresentam deficiências, comuns nos outros dois tipos sensíveis ao vermelho e ao verde (Daltonismo. Incidente em 8% da população. Raro nas mulheres). © Jair C Leite
  17. 17. Cores secundárias, terciárias e complementares • Cores secundárias P – Combinação das T primárias T • Cores terciárias S S – Combinação das secundárias • Cores complementares T T – A é complementar a B se B é combinação de duas cores nas quais A não P P está presente – Aparecem em lados T oposto no círculo T cromático S © Jair C Leite
  18. 18. Cores complementares e pós-imagens Efeito ‘Afterimages’ Olhe a figura por 30 segundos e depois olhe para a área branca ao lado. O que você vê? © Jair C Leite
  19. 19. Harmonia Cromática • Com uma cor – Escala de tons e valores – utiliza o índice de luminosidade [Luciana Silveira] na variação para o preto ou branco – Cinzas coloridos – mistura da cor com o cinza. consonantes • Com duas cores – Acordes conssonantes – utiliza- se cores vizinhas – Acordes dissonantes – utiliza- se cores complementares (opostas) • Com três cores dissonantes – Conssonantes, Dissonantes e Assonantes – Assonantes – tríades primárias © Jair C Leite
  20. 20. Exemplos de combinações hamônicas Harmonia monocromática Harmonia bicromática © Jair C Leite
  21. 21. Campo de visão • Determina os ângulos nos quais um indivíduo consegue perceber elementos. • Em monitores com grande largura ou em interações com interfaces em um ambiente, estes dados são importantes. Ótimo 15o 15o 62o 62o Máximo recomendado 95o 95o Sem movimento 166o 166o Com movimento © Jair C Leite
  22. 22. Cores e foco • Ao focalizarmos um objetos estamos movimentando os olhos para que a imagem se forme na fovea. • Os cones estão concentrados na fovea enquanto os bastonetes ao seu redor. • Isto permite que as cores sejam melhor percebidas quando o objeto está focado. • As cores vermelhas e verdes são percebidas melhor quando estão focadas. • Alguns fenômenos interessantes podem ser percebidos. © Jair C Leite
  23. 23. Ilusão de movimento periférico © Jair C Leite
  24. 24. Ilusão de movimento periférico © Jair C Leite
  25. 25. Teorias para percepção visual • Abordagem construtivista • Abordagem ecológica © Jair C Leite
  26. 26. Abordagem construtivista • A percepção visual do mundo é construída a partir das informações do ambiente e do conhecimento prévio armazenado. • O conhecimento de cada um pode transformar, distorcer, ampliar ou descartar aquilo que esta sendo percebido. • Distinção Figura-Fundo • Princípios da Psicologia Gestalt © Jair C Leite
  27. 27. Distinção figura-fundo © Jair C Leite
  28. 28. Figura-fundo • Quantas rostos você consegue ver nesta árvore? © Jair C Leite
  29. 29. O que você percebe na figura abaixo? © Jair C Leite
  30. 30. Gestalt • Teorias da percepção visual desenvolvido por psicólogos alemães na década de 20. • Significa ‘unificado’ • São princípios baseados em fenômenos da percepção: – Proximidade – Similaridade – Fechamento – Continuidade – Figura-fundo © Jair C Leite
  31. 31. Proximidade • Os elementos próximos são interpretados como pertencentes a um grupo 1 grupo Nenhum grupo 3 grupos © Jair C Leite
  32. 32. Efeito do posicionamento (humor) © Jair C Leite
  33. 33. Similaridade • Elementos com atributos semelhantes (cor ou forma) são interpretados como de um mesmo grupo ou categoria Similaridade © Jair C Leite
  34. 34. Fechamento • Partes incompletas de uma figura são completadas pela mente humana © Jair C Leite
  35. 35. Continuidade • Os olhos tendem a seguir as formas da imagem © Jair C Leite
  36. 36. Simetria • Partes simétricas são percebidas como figuras coerentes. [ ][ ][ ] 3 pares de colchetes [ [[ [[ [ © Jair C Leite
  37. 37. Figura-fundo • O cérebro tenta separar formas em uma imagem, separando-a do fundo • Algumas imagens podem ter relações ambíguas de figura-fundo © Jair C Leite
  38. 38. Abordagem ecológica • Argumenta que a percepção é um processo direto e contínuo que ocorre através da exploração do ambiente em colaboração com os outros sentidos (audição, tato, olfato e paladar) • Noção de affordance – Ações possíveis que estão disponíveis num ambiente para um indivíduo, independente de ele perceber. – São as ações que o ambiente induz um indivíduo a realizar • Crianças de 1 a 2 anos reagem às affordances do seu ambiente – botão da TV, volume do som – D. Norman utilizou o termo em design • a forma do objeto deve induzir, incentivar a sua correta utilização © Jair C Leite
  39. 39. A abordagem ecológica (Gibson) quot;I have described environment as the surfaces that separate substances from the medium in which the animals live. But I have also described what the environment affords animals, mentioning the terrain, shelters, water, fire, objects, tools, other animals, and human displays. How do we go from surfaces, is there information for the perception of what they afford. If so, to perceive them is to perceive what they afford, This is a radical hypothesis, for it implies that the quot;valuesquot; and quot;meaningsquot; of things in the enviroment can be directly perceived. Moreover, it would explain the sense in which values and meanings are external to the perceiver.quot; (J. J. Gibson: The Ecological Approach to Visual Perception, 1979) © Jair C Leite
  40. 40. Exemplos de Affordances • Os objetos “convidam” a sua utilização. • A percepção está associada com aquilo que se pode fazer com o objeto © Jair C Leite
  41. 41. Fenômenos da percepção • Os slides a seguir mostram exemplos de fenômenos da percepção visual • Para saber mais veja – http://www.yorku.ca/eye/thejoy.htm © Jair C Leite
  42. 42. Ilusão de ótica © Jair C Leite
  43. 43. Ilusão de Hering e Poggendorff As linhas vermelhas são retas? As duas linhas vermelhas formam uma reta? Temos um ou dois círculos? © Jair C Leite
  44. 44. Ilusão de Kanizsa Nenhum triângulo foi desenhado aqui. © Jair C Leite
  45. 45. Ilusão de movimento aparente © Jair C Leite
  46. 46. Técnicas de visualização – profundidade • Tamanho – Objetos idênticos com tamanhos maiores parecem estar mais perto que o menores. • Interposição – Se um objeto está desenhado por cima de um outro, entende-se que o primeiro está a frente do segundo • Contraste, claridade e brilho – Objetos mais brilhantes e claros aparentam estar mais perto. • Sombras – Sombras podem ser utilizadas para indicar o posicionamento do objeto em relação a outros • Textura – Objetos com textura mais detalhada aparentam estar mais próximos © Jair C Leite
  47. 47. Ilusão de perspectiva • Os cubos são todos do mesmo tamanho • As linhas criam a ilusão de perspectiva (3D) • O cérebro confunde o tamanho real com o tamanho esperado pela perspectiva © Jair C Leite
  48. 48. Ilusão de perspectiva • A imagem do homem pequeno é a mesma que está no fundo do corredor! • Elas têm o mesmo tamanho © Jair C Leite
  49. 49. Profundidade ambígua © Jair C Leite
  50. 50. Distorção nas imagens Esta figura é formada apenas por retas horizontais e quadrados. © Jair C Leite

×