PSICOLOGIA COGNITIVA
PERCEPÇÃO
Psicologia Cognitiva
• Consiste no estudo de processos
psicológicos envolvidos na busca de um
sentido para o ambiente e processos de
decisão da ação apropriada.
• Historicamente adota-se a abordagem de
processamento de informação.
Processamento de Informação
• Estimulo (problema ou tarefa)
• Causa da ocorrência do processo cognitivo
– Atenção
– Percepção
– Processo de Pensamento
– Decisão
• Resposta ou Ação
Principais Processos de Percepção
• Iremos tratar da
percepção visual.
• Sistema visual
• Formas básicas
em que a
percepção visual é
organizada.
Escher
Sistema Visual
• Grande parte do
cortex é dedicada à
visão.
• Razões:
– A visão é um dos
sentidos mais
importantes.
– O sistema visual
realiza atividades de
processamento
complexo
Sistema Visual
As ondas de luz
de objetos
passam através
da córnea
transparente na
parte frontal do
olho
Sistema Visual
e prossegue para
a íris, que está
logo atrás da
córnea, esta dá
ao olho a sua cor
característica.
Sistema Visual
A quantidade de luz
que entra no olho é
determinada pela
pupila, que é uma
abertura na íris.
a pupila tornar-se menor
quando a iluminação é
muito brilhante, e maior
quando há relativamente
pouca luz.
Sistema Visual
A lente foca a luz
sobre a retina.
Cada lente ajusta
sua forma mediante
um processo de
acomodação para
trazer o foco das
imagens para a
retina.
Sistema Visual
A retina é em si complexa.
É constituída
por cinco
camadas
diferentes de
células.
Sistema Visual
Células Receptores
Células Bipolares
Células Horizontais
Células Amácrinas
Células Ganglionares
Sistema Visual
A luz da lente passa
através de todas as
camadas de células
até que ele atinja as
células receptoras na
parte traseira, em
seguida a mensagem
neural volta através
das camadas.
Sistema Visual
Impulsos da retina saem do
olho através do nervo
óptico, que está em frente
da retina.
Por que temos dois olhos?
• Produz disparidade binocular, o que
significa que a imagem de um objeto
qualquer é ligeiramente diferente nas
duas retinas.
Por que temos dois olhos?
• Disparidade binocular
fornece informações
úteis para se
construir um mundo
tridimensional a partir
de imagens
bidimensionais da
retina.
Organização da Percepção
• Nossa inteligência pode ser caracterizada
pela nossa capacidade de identificar
padrões.
• Sistema Visual é o
mecanismo de
reconhecimento de
padrões mais
sofisticado.
Organização da Percepção
• Objetivo primário
do design de
representações
visuais é mapear
dados numa forma
visual compatível
com as nossas
capacidades
perceptivas.
Psicologia Gestaltica
• Estuda a organização perceptiva.
• Seu princípio fundamental da organização
da percepção era a lei de Prägnanz:
– “Das várias organizações geometricamente
possíveis a que um vai realmente perceber é
a que possui a melhor forma, a mais simples
e a mais estável".
Gestalt
• Conjunto de leis de percepção de padrões
– Proximidade
– Similaridade
– Boa Continuidade
– Fecho
– Simetria
– Destino Comum
Proximidade
as entidades visuais que estão
próximas umas das outras são
percebidas como um grupo ou unidade
Similaridade
objetos
semelhantes
são
percebidos
como um
grupo.
Boa Continuidade
Fecho
a mente tende
a fechar
contornos para
completar
figuras
regulares
Simetria
onde objetos simétricos são
mais prontamente percebidos do
que objetos assimétricos
Destino Comum
onde objetos com
a mesma direção
de movimento são
percebidos como
um grupo
Ainda...
• A escola gestátilca
enfatizou a
importância da
organização da figurafundo...
Figura - Fundo
Um objeto ou parte do campo
visual é identificado como a
figura, enquanto que o resto
do campo visual é de menor
importância, é o fundo.
A figura tem forma distinta, o
fundo não tem forma.
A figura é percebida como
estando na frente do fundo.
O contorno pertencente a
figura.
Adições à Gestalt - Ware
• Região Comum
• Conectividade
Região Comum
objetos dentro de uma região espacial
confinada são percebidos como um grupo
Conectividade
objetos conectados por traços contínuos
são percebidos como relacionados.
Leis em Conflito
• Quinlan e Wilton (1998)
• Os elementos em uma tela são
inicialmente agrupados com base na
proximidade.
• Processos adicionais são usados quando
os elementos que foram agrupados
provisoriamente diferem em uma ou mais
características.
Leis em Conflito
• Se existir diferenças dentro do grupo, mas
similaridades entre os grupos o
agrupamento é baseado na proximidade e
similaridade.
• Se existir diferenças dentro do grupo e
entre os grupos então a proximidade é
ignorada e o agrupamento geralmente é
baseado na cor.
Percepção Visual
• Depende da informação
que é apresentada para a
retina do olho.
• Envolve:
– processamento bottonup que é impulsionado
pelo estímulo.
– conhecimento e
expectativas do
observador - top-down.
Percepção Visual
• Abordagem Construtivista:
enfatiza o papel do
processamento top-down na
percepção visual.
• Abordagem Direta
enfatizam o processamento
bottom-up e a riqueza das
informações contidas dentro
do estímulo.
Pac Man
Ilusões Visuais
• 4 categorias principais:
– Ilusões baseadas em sinais psicológicos
(contraste simultâneo)
– Ilusões baseadas no conhecimento top-down
(face e taça)
– Ilusões baseadas em entradas físicas (uma
vara reta, metade colocada em água aparece
dobrada)
– Ilusões baseadas em regras da organização,
como as leis da Gestalt
Ilusões
• Regras derivadas da percepção de
objetos tridimensionais são aplicadas
inadequadamente a percepção de figuras
bidimensionais.
Ilusão de Ponzo
Ilusão de Müleer-Lyer
Ilusão de Ebbinghaus
Percepção da Cor
• Estudos sobre a percepção de cores e
luminância resultaram em diversas
diretrizes de design que podem ser
utilizadas no projeto de interfaces com
usuário.
Percepção da Cor
• Com relação à percepção de luminância,
que, grosso modo, é a nossa capacidade
de perceber padrões de tons de cinza,
aprendemos que o contraste ideal para
texto deve respeitar uma razão de 10:1
entre claro e escuro.
Teste
Teste
Teste
Teste
Teste
Teste
Teste
Percepção da Cor
Azul
Laranja
Preto
Vermelho
Amarelo
Percepção da Cor
• Linguagem e cores estão em partes
diferentes do cerebro.
• Isto cria um conflito quando se tenta
comunicar o que se vê.
4 Princípios Básicos do Design
•Contraste
•Repetição
•Alinhamento
•Proximidade
4 Princípios Básicos do Design
• Alinhamento: os itens são alinhados um com
os outros.
– Regra: Escolha um alinhamento e utilize este por
toda a página.
Alinhamento Horizontal
Botão
Botão
Algum
Texto
Algum
Texto
Texto
Texto
Sem
Texto
Sem
Texto
A digitação está em uma linha invisivel chamada “baseline”. Alinhando todo o
texto na mesma baseline, a tira de links parece mais limpa e organizada.Na
maioria dos softwares de autoria da web, há um botão para alinhamento de
baseline, normalmente nas especificações de tabela.
4 Princípios Básicos do Design
• Proximidade: Itens que estão próximos
parecem estar relacionados.
– Regra: Itens que pertencem a um mesmo grupo
devem ficar juntos.
Proximidade
Titulo 1
Titulo 1
Cabeçalho 1
Cabeçalho 1
Bla bla bla bla bla bla bla bla
Blaa bla bla bla bla bla
Bla bla bla bla bla bla bla bla
Blaa bla bla bla bla bla
Cabeçalho 1
Bla bla bla bla bla bla bla bla
Blaa bla bla bla bla bla
Cabeçalho 1
Cabeçalho 1
Bla bla bla bla bla bla bla bla
Blaa bla bla bla bla bla
Bla bla bla bla bla bla bla bla
Blaa bla bla bla bla bla
Cabeçalho 1
Bla bla bla bla bla bla bla bla
Blaa bla bla bla bla bla
Proximidade
Artista Desconhecido
Arte no Espaço
Galeria do Word
Conte quantas vezes seus olhos tiveram que pular de
um elemento para o outro na página.
Quando os elementos estão separados por espaços,
tornam se visualmente desconectados uns dos
outros.
Essa é uma das razões pelas quais você não deve
NUNCA pressionar dois Returns entre paragráfos –
isso cria muita separação entre itens que se
pertencem.
Proximidade
Artista Desconhecido
Arte no Espaço
Galeria do Word
Quando itens que se pertencem são agrupados
mais próximos, as informações são muito mais
organizadas e mais fáceis de ler. Os espaços
visuais criam uma hierarquia de informações.
Os grupos individuais de informações ainda estão
separados por espaço, mas o espaço está
organizado e tem um propósito – não é um espaço
aleatório que está separando elementos que
devem ficar juntos.
4 Princípios Básicos do Design
• Repetição: Elementos são repetidos em vários
lugares e páginas.
– Regra: Repita elementos por todo o site para unificar
as partes.
Repetição
• Em um site os botões de navegação são
um elemento repetitivo.
• Cores, estilos ilustrações, formato, layout,
tipografia se repetem para unificar o site
inteiro.
4 Princípios Básicos do Design
• Contraste: elementos são visualmente
diferentes um do outro.
– Regra: se dois elementos não são iguais faça os bem
diferentes.