Sei sulla pagina 1di 42
C C J J E E 5250 5250 - - Metodologia Metodologia de de webdesign
C C J J E E 5250 5250 - - Metodologia Metodologia de de webdesign

CC JJ EE 52505250 -- MetodologiaMetodologia dede webdesignwebdesign baseadabaseada emem UsabilidadeUsabilidade

 

PercepçãoPercepção

O lado humano da Interação com o computador

O lado humano da Interação com o computador

Percepção O lado humano da Interação com o computador   Profa Profa Dra Dra Maria Maria
Percepção O lado humano da Interação com o computador   Profa Profa Dra Dra Maria Maria
 

ProfaProfa DraDra MariaMaria LauraLaura MartinezMartinez

20032003

2

2 Conteúdo Conteúdo 1. Visão Visão 2. Audição Audição 3. Memória Memória
2 Conteúdo Conteúdo 1. Visão Visão 2. Audição Audição 3. Memória Memória

ConteúdoConteúdo

2 Conteúdo Conteúdo 1. Visão Visão 2. Audição Audição 3. Memória Memória
2 Conteúdo Conteúdo 1. Visão Visão 2. Audição Audição 3. Memória Memória

1. VisãoVisão

2. AudiçãoAudição

3. MemóriaMemória

2 Conteúdo Conteúdo 1. Visão Visão 2. Audição Audição 3. Memória Memória
2 Conteúdo Conteúdo 1. Visão Visão 2. Audição Audição 3. Memória Memória
2 Conteúdo Conteúdo 1. Visão Visão 2. Audição Audição 3. Memória Memória
2 Conteúdo Conteúdo 1. Visão Visão 2. Audição Audição 3. Memória Memória
Visão Visão
Visão Visão
Visão Visão
Visão Visão

VisãoVisão

4

4 Visão Visão ■ cones Células Células fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes ◆
4 Visão Visão ■ cones Células Células fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes ◆

VisãoVisão

4 Visão Visão ■ cones Células Células fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes ◆

cones

4 Visão Visão ■ cones Células Células fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes ◆

CélulasCélulas fotoreceptorasfotoreceptoras nana retinaretina

fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes ◆ Na parte posterior do globo ocular,
fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes ◆ Na parte posterior do globo ocular,
fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes ◆ Na parte posterior do globo ocular,

bastonetes

Na parte posterior do globo ocular, próximo ao nervo ótico, há uma área muito sensível chamada fóvea ou mancha amarela, com cerca de 1

mm de diâmetro.

Aí não existem

bastonetes, e os cones

são mais estreitos e

estão mais juntos.

O cérebro recebe mais

informações da fóvea do

que de todo o resto da

retina.

A visão nessa área é colorida.

o resto da retina. ◆ A visão nessa área é colorida. ◆ Fora da fóvea, a

Fora da fóvea, a retina contém principalmente bastonetes.

A visão que vem dessa área é menos precisa e em “preto e branco” (tons de cinza).

Retina

Fóvea central

Ponto cegoé menos precisa e em “preto e branco” (tons de cinza). Retina Fóvea central Íris Cristalino

Íris Cristalino
Íris
Cristalino

Córnea

Nervo ótico

5

5 Visão Visão Células Células fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes: ! visão
5 Visão Visão Células Células fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes: ! visão

VisãoVisão

5 Visão Visão Células Células fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes: ! visão
5 Visão Visão Células Células fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes: ! visão

CélulasCélulas fotoreceptorasfotoreceptoras nana retinaretina

fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes: ! visão periférica : vêem
fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes: ! visão periférica : vêem
fotoreceptoras fotoreceptoras na na retina retina ■ bastonetes: ! visão periférica : vêem

bastonetes:

! visão periférica : vêem principalmente movimento e formas sem cor e menos nítidas.

! mais células (~125 milhões em cada olho)

! 100 vezes mais sensíveis à luz do que os cones (variações de luz -e movimentos - são facilmente percebidos)

! não são sensíveis à cor

! saturam rapidamente com excesso de luz

Ex:

Se uma mensagem importante tem que estar na linha inferior de uma tela cujo foco está no centro. O que fazer ? Mensagem animada: os bastonetes são sensíveis ao movimento.

6

6 Visão Visão ■ cones: Células Células fotoreceptoras fotoreceptoras na na retina retina ■ Ex: !
6 Visão Visão ■ cones: Células Células fotoreceptoras fotoreceptoras na na retina retina ■ Ex: !

VisãoVisão

6 Visão Visão ■ cones: Células Células fotoreceptoras fotoreceptoras na na retina retina ■ Ex: !

cones:

6 Visão Visão ■ cones: Células Células fotoreceptoras fotoreceptoras na na retina retina ■ Ex: !

CélulasCélulas fotoreceptorasfotoreceptoras nana retinaretina

fotoreceptoras fotoreceptoras na na retina retina ■ Ex: ! menos células (~ 7 milhões) ! sensíveis
fotoreceptoras fotoreceptoras na na retina retina ■ Ex: ! menos células (~ 7 milhões) ! sensíveis
fotoreceptoras fotoreceptoras na na retina retina ■ Ex: ! menos células (~ 7 milhões) ! sensíveis

Ex:

! menos células (~ 7 milhões)

! sensíveis ao vermelho, verde e azul

! azul: menos percebido (3 a 4% da fóvea sensível à luz azul)

! amarelo (vermelho e verde): mais percebido

! na fóvea não existem bastonetes, só cones

Formas pequenas em azul se “perdem”.

Essa é uma boa razão para não usar azul para texto pois este pode parecer confuso.

O mesmo efeito fará com que uma pequena área azul pareça mais desbotada do que uma grande área da mesma cor.

sensibilidade do olho

pequena área azul pareça mais desbotada do que uma grande área da mesma cor. sensibilidade do
pequena área azul pareça mais desbotada do que uma grande área da mesma cor. sensibilidade do

R

pequena área azul pareça mais desbotada do que uma grande área da mesma cor. sensibilidade do

G

pequena área azul pareça mais desbotada do que uma grande área da mesma cor. sensibilidade do

B

pequena área azul pareça mais desbotada do que uma grande área da mesma cor. sensibilidade do

64%

32%

4%

7

7 Ponto Ponto cego cego ■ No local onde todos os nervos se juntam e saem
7 Ponto Ponto cego cego ■ No local onde todos os nervos se juntam e saem

PontoPonto cegocego

7 Ponto Ponto cego cego ■ No local onde todos os nervos se juntam e saem
7 Ponto Ponto cego cego ■ No local onde todos os nervos se juntam e saem
7 Ponto Ponto cego cego ■ No local onde todos os nervos se juntam e saem
7 Ponto Ponto cego cego ■ No local onde todos os nervos se juntam e saem

No local onde todos os nervos se juntam e saem do olho, não existem células retinais, sensíveis à luz

Essa área, onde a luz não é detectada, é conhecida como ponto cego.

A presença do ponto cego pode ser constatada através da figura abaixo.

Cubra o olho esquerdo e aproxime a figura, com a visão fixa no X. A uma determinada distância, correspondente ao seu ponto cego, a circunferência escura simplesmente desaparece!

A uma determinada distância, correspondente ao seu ponto cego, a circunferência escura simplesmente desaparece!
A uma determinada distância, correspondente ao seu ponto cego, a circunferência escura simplesmente desaparece!

8

8 Íris Íris e e Luz Luz ■ A íris muda de forma automaticamente. ■ Quando
8 Íris Íris e e Luz Luz ■ A íris muda de forma automaticamente. ■ Quando

ÍrisÍris ee LuzLuz

8 Íris Íris e e Luz Luz ■ A íris muda de forma automaticamente. ■ Quando
8 Íris Íris e e Luz Luz ■ A íris muda de forma automaticamente. ■ Quando
8 Íris Íris e e Luz Luz ■ A íris muda de forma automaticamente. ■ Quando
8 Íris Íris e e Luz Luz ■ A íris muda de forma automaticamente. ■ Quando

A íris muda de forma automaticamente.

Quando uma luz muito brilhante entra no olho, ela é detectada pela retina e quase imediatamente a pupila se contrai.

Trata-se de uma reação reflexa, não envolvendo diretamente o cérebro, que pode estar ocupado com outra tarefas igualmente importantes.

reflexa, não envolvendo diretamente o cérebro, que pode estar ocupado com outra tarefas igualmente importantes.

9

valor / brilho

9 valor / brilho Percepção Percepção da da cor cor ( s i s t e
9 valor / brilho Percepção Percepção da da cor cor ( s i s t e

PercepçãoPercepção dada corcor

(sistema(sistema HSVHSV))

s i s t e m a ( s i s t e m a H
s i s t e m a ( s i s t e m a H

matiz

s i s t e m a ( s i s t e m a H
brilho brilho
brilho
brilho

Cubo de Cores

matiz

s i s t e m a ( s i s t e m a H

saturação

s i s t e m a ( s i s t e m a H

10

10 Percepção Percepção da da cor cor ( s i s t e m a (
10 Percepção Percepção da da cor cor ( s i s t e m a (

PercepçãoPercepção dada corcor

(sistema(sistema HSV)HSV)

t e m a ( s i s t e m a H S V )
t e m a ( s i s t e m a H S V )
t e m a ( s i s t e m a H S V )
t e m a ( s i s t e m a H S V )

Matiz (Hue)

normalmente é associada ao nome da cor.

comprimento de onda (podemos distinguir 150 tonalidades desde que não sejam exibidas todas juntas)

Valor (Value) / Luminância / Brilho (Brightness)

Quantidade relativa de claro ou escuro de uma cor em uma escala do branco ao preto.

Ex: experiência suco + leite

Saturação / Croma (Saturation)

Grau de concentração da cor.

Quantidade de cinza presente no matiz

Ex: Azul mais forte (mais “vivo”).

H

S

V

 

H

 
     

0

 

255

     

S

   

136

48

255

255

195

0

0

10

255

102

255

102

V

102

195

   

102

 

195

   
 

H

S

0

255

0

255

0

255

0

255

0

255

V

50

 

100

128

180

221

 
     

11

1 1 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆
1 1 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆

PercepçãoPercepção dada corcor

1 1 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆

1 1 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆
1 1 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆
1 1 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆

Diferenças culturais e fisiológicas entre indivíduos

Cores estão associadas a um simbolismo e evocam emoções subjetivas

O significado das cores pode variar dependendo:

! da cultura

! da faixa etária

! do indivíduo

12

1 2 Percepção Percepção da da cor cor ■ Cores quentes: ■ Cores marginais (seu caráter
1 2 Percepção Percepção da da cor cor ■ Cores quentes: ■ Cores marginais (seu caráter

PercepçãoPercepção dada corcor

1 2 Percepção Percepção da da cor cor ■ Cores quentes: ■ Cores marginais (seu caráter

Cores quentes:

Percepção Percepção da da cor cor ■ Cores quentes: ■ Cores marginais (seu caráter depende da
Percepção Percepção da da cor cor ■ Cores quentes: ■ Cores marginais (seu caráter depende da
Percepção Percepção da da cor cor ■ Cores quentes: ■ Cores marginais (seu caráter depende da
Percepção Percepção da da cor cor ■ Cores quentes: ■ Cores marginais (seu caráter depende da
Percepção Percepção da da cor cor ■ Cores quentes: ■ Cores marginais (seu caráter depende da

Cores marginais (seu caráter depende da cor que esteja ao redor):

estimulantes, chamam a atenção

Vermelho

! evitar o seu uso para áreas grandes ou como cor de fundo

Amarelo

Laranja

Core frias: relaxantes

azul

verde

magenta

! não deve ser usada em texto ou detalhes finos, boa para fundos (transmite sensação de profundidade)

turquesa

violeta

ser usada em texto ou detalhes finos, boa para fundos (transmite sensação de profundidade) ◆ turquesa
ser usada em texto ou detalhes finos, boa para fundos (transmite sensação de profundidade) ◆ turquesa

13

OO verdeverde
OO verdeverde

14

OO verdeverde
OO verdeverde

15

15 Percepção Percepção da da cor cor Diferenças culturais e fisiológicas entre indivíduos ■ Idade: Pessoas
15 Percepção Percepção da da cor cor Diferenças culturais e fisiológicas entre indivíduos ■ Idade: Pessoas

PercepçãoPercepção dada corcor

15 Percepção Percepção da da cor cor Diferenças culturais e fisiológicas entre indivíduos ■ Idade: Pessoas
15 Percepção Percepção da da cor cor Diferenças culturais e fisiológicas entre indivíduos ■ Idade: Pessoas

Diferenças culturais e fisiológicas entre indivíduos

cor Diferenças culturais e fisiológicas entre indivíduos ■ Idade: Pessoas idosas perdem sua habilidade em
cor Diferenças culturais e fisiológicas entre indivíduos ■ Idade: Pessoas idosas perdem sua habilidade em

Idade: Pessoas idosas perdem sua habilidade em discernir matizes azuis.

! têm uma sensibilidade reduzida para cores,

! pode requerer o uso de cores mais brilhantes (Robertson, 1993).

Devemos lembrar que o número de idosos que fazem uso da Web tem aumentado muito e os projetistas de páginas na Web devem elaborar páginas que atendam a esse público.

http://www.eps.ufsc.br/disserta98/rosam/cap2.htm#2.2.3

16

16 Percepção Percepção da da cor cor Diferenças culturais e fisiológicas entre indivíduos ◆ D a
16 Percepção Percepção da da cor cor Diferenças culturais e fisiológicas entre indivíduos ◆ D a

PercepçãoPercepção dada corcor

16 Percepção Percepção da da cor cor Diferenças culturais e fisiológicas entre indivíduos ◆ D a
16 Percepção Percepção da da cor cor Diferenças culturais e fisiológicas entre indivíduos ◆ D a

Diferenças culturais e fisiológicas entre indivíduos

cor Diferenças culturais e fisiológicas entre indivíduos ◆ D a l t o n i s
cor Diferenças culturais e fisiológicas entre indivíduos ◆ D a l t o n i s

Daltonismo:

!

2 % dos homens têm cegueira para o vermelho e

!

6% têm cegueira para o verde, totalizando aproximadamente 8% com cegueira para vermelho-verde.

Esta é uma anomalia rara no sexo feminino, ocorrendo somente em 0,5% das mulheres (Guyton, 1986).

!

!

http://www.eps.ufsc.br/disserta98/rosam/cap2.htm#2.2.3

17

1 7 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆
1 7 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆

PercepçãoPercepção dada corcor

1 7 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆
1 7 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆
1 7 Percepção Percepção da da cor cor ■ Diferenças culturais e fisiológicas entre indivíduos ◆

Diferenças culturais e fisiológicas entre indivíduos

Aumentando a diferença de brilho entre as cores elimina-se a confusão entre elas.

de brilho entre as cores elimina-se a confusão entre elas. ! Deste modo, se um amarelo

! Deste modo, se um amarelo tiver um alto valor de luminância,

! um verde tiver uma luminância média e

! um vermelho tiver um baixo valor de luminância,

! todos os usuários devem estar aptos a detectar as diferenças entre elas (ISO 9241-8).

18

18 Percepção Percepção da da cor cor ■ Persistência visual ◆ Goethe (“Teoria das Cores”) :
18 Percepção Percepção da da cor cor ■ Persistência visual ◆ Goethe (“Teoria das Cores”) :

PercepçãoPercepção dada corcor

18 Percepção Percepção da da cor cor ■ Persistência visual ◆ Goethe (“Teoria das Cores”) :
18 Percepção Percepção da da cor cor ■ Persistência visual ◆ Goethe (“Teoria das Cores”) :

Persistência visual

Goethe (“Teoria das Cores”) :

após olhar fixamente um objeto brilhante, por muito tempo, pode-se ver uma leve sombra por um breve período que se segue (na cor complementar);

os cones se “cansam”;

a

impressão na retina

persiste até algum tempo após ter cessado a excitação;

esse tempo varia de 1/30

a 1/50 segundo.

ter cessado a excitação; ◆ esse tempo varia de 1/30 a 1/50 segundo. ◆ isto permitiu

isto permitiu criar o cinema e a TV.

19

1 9 Percepção Percepção da da cor cor Segundo Robertson (1993), o uso inapropriado das cores
1 9 Percepção Percepção da da cor cor Segundo Robertson (1993), o uso inapropriado das cores

PercepçãoPercepção dada corcor

1 9 Percepção Percepção da da cor cor Segundo Robertson (1993), o uso inapropriado das cores
1 9 Percepção Percepção da da cor cor Segundo Robertson (1993), o uso inapropriado das cores
1 9 Percepção Percepção da da cor cor Segundo Robertson (1993), o uso inapropriado das cores

Segundo Robertson (1993), o uso inapropriado das cores pode causar efeitos indesejáveis como:

das cores pode causar efeitos indesejáveis como: ■ Sangramento ◆ Esse efeito é observado quando uma

Sangramento

Esse efeito é observado quando uma determinada cor começa a ter influência de outra cor que está em torno dela.

Ex: uma pequena área de vermelho envolvida por uma grande área de azul pode começar a ter uma aparência violeta.

Ex: uma pequena área de vermelho envolvida por uma grande área de azul pode começar a

20

2 0 Percepção Percepção da da cor cor ■ A percepção da cor é relativa à
2 0 Percepção Percepção da da cor cor ■ A percepção da cor é relativa à

PercepçãoPercepção dada corcor

2 0 Percepção Percepção da da cor cor ■ A percepção da cor é relativa à
2 0 Percepção Percepção da da cor cor ■ A percepção da cor é relativa à
2 0 Percepção Percepção da da cor cor ■ A percepção da cor é relativa à

A percepção da cor é relativa à cor que é colocada do lado algumas cores ficam mais claras ou escuras em presença de outras (efeito Bezold)

claras ou escuras em presença de outras (efeito Bezold) ■ Os cinzas são de diferente luminosidade?

Os cinzas são de diferente luminosidade?

(efeito Bezold) ■ Os cinzas são de diferente luminosidade? não ■ Qual a cor do quadrado
(efeito Bezold) ■ Os cinzas são de diferente luminosidade? não ■ Qual a cor do quadrado
(efeito Bezold) ■ Os cinzas são de diferente luminosidade? não ■ Qual a cor do quadrado
(efeito Bezold) ■ Os cinzas são de diferente luminosidade? não ■ Qual a cor do quadrado

não

Qual a cor do quadrado maior?

(efeito Bezold) ■ Os cinzas são de diferente luminosidade? não ■ Qual a cor do quadrado

vermelho

(efeito Bezold) ■ Os cinzas são de diferente luminosidade? não ■ Qual a cor do quadrado
(efeito Bezold) ■ Os cinzas são de diferente luminosidade? não ■ Qual a cor do quadrado

ciano

(efeito Bezold) ■ Os cinzas são de diferente luminosidade? não ■ Qual a cor do quadrado

21

2 1 Percepção Percepção da da cor cor ■ O azul e o vermelho tem diferentes
2 1 Percepção Percepção da da cor cor ■ O azul e o vermelho tem diferentes

PercepçãoPercepção dada corcor

2 1 Percepção Percepção da da cor cor ■ O azul e o vermelho tem diferentes
2 1 Percepção Percepção da da cor cor ■ O azul e o vermelho tem diferentes
2 1 Percepção Percepção da da cor cor ■ O azul e o vermelho tem diferentes

O azul e o vermelho tem diferentes profundidades de foco

Para o olho humano o processo de encontrar o foco correto é fatigante

Evite usar o azul e o vermelho simultaneamente

■ Evite usar o azul e o vermelho simultaneamente ■ Ilusão de profundidade ◆ Quando cores
■ Evite usar o azul e o vermelho simultaneamente ■ Ilusão de profundidade ◆ Quando cores

Ilusão de profundidade

Quando cores do espectro amplamente separadas, como o vermelho e o azul, são apresentados na tela elas parecerão estar em diferentes planos de profundidade porque estas cores têm diferentes profundidades de foco.

Cor e movimento

Se um objeto vermelho e azul é movido de um lado

◆ Se um objeto vermelho e azul é movido de um lado a outro da tela,
◆ Se um objeto vermelho e azul é movido de um lado a outro da tela,
◆ Se um objeto vermelho e azul é movido de um lado a outro da tela,

a outro da tela, os

componentes vermelhos

e azuis podem parecer

dissociados e moverem-se, um em relação ao outro, de maneira perturbadora.

22

2 2 Percepção Percepção da da cor cor ■ Aberrações cromáticas ◆ Quando cores como vermelho
2 2 Percepção Percepção da da cor cor ■ Aberrações cromáticas ◆ Quando cores como vermelho

PercepçãoPercepção dada corcor

2 2 Percepção Percepção da da cor cor ■ Aberrações cromáticas ◆ Quando cores como vermelho
2 2 Percepção Percepção da da cor cor ■ Aberrações cromáticas ◆ Quando cores como vermelho
2 2 Percepção Percepção da da cor cor ■ Aberrações cromáticas ◆ Quando cores como vermelho
2 2 Percepção Percepção da da cor cor ■ Aberrações cromáticas ◆ Quando cores como vermelho

Aberrações cromáticas

Quando cores como vermelho e azul são usadas simultaneamente (por exemplo, um texto vermelho brilhante no meio de um texto em azul) o olho pode tentar repetidamente empurrar cada cor da imagem dentro de um foco preciso em rápidas sucessões.

Neste caso, não há profundidade inteiramente correta para focar e há uma evidência que o processo de diferentes profundidades de foco torna-se fatigante.

(por exemplo, um texto em vermelho no meio de um texto em azul)

23

2 3 Leitura Leitura ■ Padrão de percepção visual ■ Evolui com o treinamento ■ Legibilidade:
2 3 Leitura Leitura ■ Padrão de percepção visual ■ Evolui com o treinamento ■ Legibilidade:
2 3 Leitura Leitura ■ Padrão de percepção visual ■ Evolui com o treinamento ■ Legibilidade:

LeituraLeitura

2 3 Leitura Leitura ■ Padrão de percepção visual ■ Evolui com o treinamento ■ Legibilidade:
2 3 Leitura Leitura ■ Padrão de percepção visual ■ Evolui com o treinamento ■ Legibilidade:
2 3 Leitura Leitura ■ Padrão de percepção visual ■ Evolui com o treinamento ■ Legibilidade:
2 3 Leitura Leitura ■ Padrão de percepção visual ■ Evolui com o treinamento ■ Legibilidade:

Padrão de percepção visual

Evolui com o treinamento

Legibilidade:

medida da facilidade de leitura

tamanho, espaçamento, tipo de fonte,

maiúsculas menos legíveis do que minúsculas

1o. vê letras

2o. vê sílabas

3o. vê palavras como um todo (relevo).

Movimentos do olho

avanço

retrocesso

“sacadelas”

Ex: Maiúsculas:

Ex: leitura em língua estrangeira

cansa mais

mais ‘sacadelas’, avanços e retrocessos

não devem ser usadas para transmitir grandes quantidades de informação.

serve para chamar a atenção

24

24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras
24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras
24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras
24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras
24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras
24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras
24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras

TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO

24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras
24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras
24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras
24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras
24 TEXTO COM LETRAS MAIÚSCULAS: SEM RELEVO Letras minúsculas mantém o relevo natural das palavras

Letras minúsculas mantém o relevo natural das palavras

Audição Audição
Audição Audição
Audição Audição
Audição Audição

AudiçãoAudição

26

26 Audição Audição ■ Audição: ◆ o ouvido externo, ◆ o ouvido médio ◆ a cóclea.
26 Audição Audição ■ Audição: ◆ o ouvido externo, ◆ o ouvido médio ◆ a cóclea.

AudiçãoAudição

26 Audição Audição ■ Audição: ◆ o ouvido externo, ◆ o ouvido médio ◆ a cóclea.
26 Audição Audição ■ Audição: ◆ o ouvido externo, ◆ o ouvido médio ◆ a cóclea.
26 Audição Audição ■ Audição: ◆ o ouvido externo, ◆ o ouvido médio ◆ a cóclea.
26 Audição Audição ■ Audição: ◆ o ouvido externo, ◆ o ouvido médio ◆ a cóclea.

Audição:

o ouvido externo,

o ouvido médio

a cóclea.

Equilíbrio:

ouvido interno

O movimento do líquido coclear gera impulsos nervosos que são transmitidos pelo nervo auditivo ao centro de audição do córtex cerebral.

Ouvido

externo Ouvido interno
externo
Ouvido
interno
tímpano Ouvido médio
tímpano
Ouvido
médio

Canais

semi-

circulares

Martelo,

bigorna e

Nervo

estribo

auditivo

Cóclea

Trompa de Eustáquio

27

2 7 Percepção Percepção do do som som ■ A audição é seletiva ■ Identificação da
2 7 Percepção Percepção do do som som ■ A audição é seletiva ■ Identificação da

PercepçãoPercepção dodo somsom

2 7 Percepção Percepção do do som som ■ A audição é seletiva ■ Identificação da
2 7 Percepção Percepção do do som som ■ A audição é seletiva ■ Identificação da
2 7 Percepção Percepção do do som som ■ A audição é seletiva ■ Identificação da
2 7 Percepção Percepção do do som som ■ A audição é seletiva ■ Identificação da

A audição é seletiva

Identificação da fonte:

diferenças de intensidade

Pode ser utilizado para:

localização

feedback

chamar a atenção

Frequências :

! 20 Hz - 20 KHz

Medidas:

Tom

! frequência do som

Altura

!

amplitude

Timbre

! característica do instrumento que o emite

Ex: Sugira o aperfeiçoamento de um supermercado virtual utilizando o som de modo eficiente.

som para identificar produtos (atende a cegos)

destacar promoções relâmpago

estimular compras com músicas relaxantes (que tenham a ver com o produto vendido).

Memória Memória
Memória Memória
Memória Memória
Memória Memória

MemóriaMemória

29

2 9 Memória Memória ■ Sensorial ◆ Tem que ser continuamente escrita (não dura quase nada)
2 9 Memória Memória ■ Sensorial ◆ Tem que ser continuamente escrita (não dura quase nada)

MemóriaMemória

2 9 Memória Memória ■ Sensorial ◆ Tem que ser continuamente escrita (não dura quase nada)
2 9 Memória Memória ■ Sensorial ◆ Tem que ser continuamente escrita (não dura quase nada)
2 9 Memória Memória ■ Sensorial ◆ Tem que ser continuamente escrita (não dura quase nada)
2 9 Memória Memória ■ Sensorial ◆ Tem que ser continuamente escrita (não dura quase nada)
2 9 Memória Memória ■ Sensorial ◆ Tem que ser continuamente escrita (não dura quase nada)

Sensorial

Tem que ser continuamente escrita (não dura quase nada)

Icônica (memória visual)

! persistência visual:

~0,5s

! Ex: cinema, fogos de artifício, “desenho com palitinhos de fósforo no escuro”

De trabalho (curta duração)

Armazena a informação de forma provisória para tomar uma decisão ou formar uma idéia (leitura, cálculo).

Acesso rápido: ~70 ms

Decaimento rápido:~ 200 ms

Permanente (longa duração)

Ecóica (memória auditiva)

Háptica (memória de posição)

! Ex: reconhecimento da posição atual

Armazena conhecimento

Acesso Lento: ~0,1 s

Decaimento muito lento:

horas, dias

30

3 0 Memória Memória de de trabalho trabalho (curta (curta duração) duração) ■ Capacidade limitada: ◆
3 0 Memória Memória de de trabalho trabalho (curta (curta duração) duração) ■ Capacidade limitada: ◆

MemóriaMemória dede trabalhotrabalho (curta(curta duração)duração)

de trabalho trabalho (curta (curta duração) duração) ■ Capacidade limitada: ◆ 7 +/- 2 (Miller) ◆
de trabalho trabalho (curta (curta duração) duração) ■ Capacidade limitada: ◆ 7 +/- 2 (Miller) ◆
de trabalho trabalho (curta (curta duração) duração) ■ Capacidade limitada: ◆ 7 +/- 2 (Miller) ◆
de trabalho trabalho (curta (curta duração) duração) ■ Capacidade limitada: ◆ 7 +/- 2 (Miller) ◆

Capacidade limitada:

7 +/- 2 (Miller)

(sobrecarga cognitiva)

Interferência de outras informações

Fechamento: formação bem sucedida de “chunks” (ponteiros para nossa memória)

Ex: Memorizar números:

Aplicação: Não fazer menus muito extensos.

Não adianta dar ao usuário muitas informações ao mesmo tempo (+ de 7)

melhor agrupar em sub- grupos significativos (chunks), ou organizar de forma gráfica

! 9 2 5 8 4 3 4 2 1

! 925 - 843 - 421 (capacidade limitada: ao agrupar cabe mais informação)

31

3 1 Memória Memória permanente permanente (longa (longa duração) duração) ■ Capacidade : ilimitada (?
3 1 Memória Memória permanente permanente (longa (longa duração) duração) ■ Capacidade : ilimitada (?

MemóriaMemória permanentepermanente (longa(longa duração)duração)

permanente permanente (longa (longa duração) duração) ■ Capacidade : ilimitada (? overflow , stress ) ■
permanente permanente (longa (longa duração) duração) ■ Capacidade : ilimitada (? overflow , stress ) ■
permanente permanente (longa (longa duração) duração) ■ Capacidade : ilimitada (? overflow , stress ) ■
permanente permanente (longa (longa duração) duração) ■ Capacidade : ilimitada (? overflow , stress ) ■

Capacidade : ilimitada (? overflow, stress

)

A carga ocorre a partir da memória de trabalho, após alguns segundos ou por repetição

Organização: depende de interpretação

Teoria conexionista:

se aprende /armazena a informação associando-a a coisas conhecidas,

resgatando um pode-se resgatar o outro

Capacidade de esquecimento:

reforço para lembrar

vínculo emocional: papel importante na retenção

Aplicação:

uso de metáforas

interface bonita, agradável provoca estímulo (emocional) positivo.

32

3 2 Metáfora Metáfora ■ Tentativa de adaptar algo novo ao modelo mental do usuário. ◆
3 2 Metáfora Metáfora ■ Tentativa de adaptar algo novo ao modelo mental do usuário. ◆

MetáforaMetáfora

3 2 Metáfora Metáfora ■ Tentativa de adaptar algo novo ao modelo mental do usuário. ◆
3 2 Metáfora Metáfora ■ Tentativa de adaptar algo novo ao modelo mental do usuário. ◆
3 2 Metáfora Metáfora ■ Tentativa de adaptar algo novo ao modelo mental do usuário. ◆
3 2 Metáfora Metáfora ■ Tentativa de adaptar algo novo ao modelo mental do usuário. ◆

Tentativa de adaptar algo novo ao modelo mental do usuário.

Ex1: Quanto o automóvel foi mostrado pela primeira vez ele foi chamado de "carruagem sem cavalos".

Ex2: Principal metáfora visual da Web: a teia (de aranha).

A escolha consistente de metáforas traz conforto tornando o site mais usável.

Ex:

www.exploratorium.edu/nagasaki/

http://www.eca.usp.br/

http://www.lsi.usp.br/

escritório)

(sombrio) (tintas) (arquivo de

33

33 Memória Memória x x hipermídia hipermídia ■ Estrutura associativa da mente humana para organizar
33 Memória Memória x x hipermídia hipermídia ■ Estrutura associativa da mente humana para organizar

MemóriaMemória xx hipermídiahipermídia

33 Memória Memória x x hipermídia hipermídia ■ Estrutura associativa da mente humana para organizar
33 Memória Memória x x hipermídia hipermídia ■ Estrutura associativa da mente humana para organizar
33 Memória Memória x x hipermídia hipermídia ■ Estrutura associativa da mente humana para organizar
33 Memória Memória x x hipermídia hipermídia ■ Estrutura associativa da mente humana para organizar

Estrutura associativa da mente humana para organizar informações:

não é linear

é parecida à estrutura da hipermídia / hipertexto

[GLENN,92]

A natureza cognitiva da mente humana tem sido observada em muitos contextos

Modelo de rede da memória humana

[COLLINS,75];

Eich (1982) e Murdock (1982) apud [BUTTERWORTH]

Anderson (1983) apud

[GLENN,92].

humana ◆ [COLLINS,75]; ◆ Eich (1982) e Murdock (1982) apud [BUTTERWORTH] ◆ Anderson (1983) apud [GLENN,92].
humana ◆ [COLLINS,75]; ◆ Eich (1982) e Murdock (1982) apud [BUTTERWORTH] ◆ Anderson (1983) apud [GLENN,92].

34

3 4 Mapas Mapas conceituais conceituais / / Redes Redes semânticas semânticas ■ [Ausbel,78] ◆ aprendizagem
3 4 Mapas Mapas conceituais conceituais / / Redes Redes semânticas semânticas ■ [Ausbel,78] ◆ aprendizagem

MapasMapas conceituaisconceituais // RedesRedes semânticassemânticas

conceituais / / Redes Redes semânticas semânticas ■ [Ausbel,78] ◆ aprendizagem significativa =>
conceituais / / Redes Redes semânticas semânticas ■ [Ausbel,78] ◆ aprendizagem significativa =>
conceituais / / Redes Redes semânticas semânticas ■ [Ausbel,78] ◆ aprendizagem significativa =>
conceituais / / Redes Redes semânticas semânticas ■ [Ausbel,78] ◆ aprendizagem significativa =>

[Ausbel,78]

aprendizagem significativa => processo pelo qual uma nova informação relaciona-se com a estrutura cognitiva prévia do indivíduo.

Mapas conceituais (Novak )

Representações gráficas semelhantes a diagramas que indicam relações entre conceitos ligados por palavras.

Redes semânticas

[Quillian,68]:

Representações gráficas também utilizadas para mapear modelos cognitivos.

! Rede composta por nós

e por arcos.

! Os nós são os conceitos

e os arcos as relações

entre os conceitos.

35

■ Modelo conceitual do usuário ◆ Levantar o modelo conceitual (mental) do usuário ◆ Usar
■ Modelo conceitual do
usuário
◆ Levantar o modelo
conceitual (mental) do
usuário
◆ Usar a linguagem do
usuário

MapasMapas conceituaisconceituais // RedesRedes semânticassemânticas

conceituais / / Redes Redes semânticas semânticas Modelo conceitual projetado Fortalecer informações

Modelo conceitual projetado

Fortalecer informações importantes

Enfraquecer informações erradas

36

RedeRede semânticasemântica dodo usuáriousuário webmasterwebmaster dada AUNAUN •nome geram informações
RedeRede semânticasemântica dodo usuáriousuário
webmasterwebmaster dada AUNAUN
•nome
geram
informações
•e-mail
pessoas
•nome
pode ter
anúncios
•telefone
•data
•URL
•local
•anunciante
entrevistadas
•sigla
•descrição
por
captam
permite
•nome
veículo
diálogo
•endereço
tem
•nome
•telefone
através de
e-
•nome
publicadas em
repórteres
•URL
unidade
mail,fóruns
•e-mail
forma
da AUN
•e-mail
USP
•turma
e chats
•nome
geram
editorias
vinculada a
•URL
organizadas
por
arquivo de
edições
notícias
anteriores
se relaciona com
•título
•sub-título
•corpo
•palavras-chave
•fonte
•data publicação
quando antigas,
armazenadas
em
pertencentes
•ano
edição
a uma
•número
podem ter
complemento
também
enviadas
•ano
•número
referente à
por
imagens,
•tipo
•nome
sons e
•URL
serviço de entrega
por e-mail
vídeo
sons e •URL serviço de entrega por e-mail vídeo LEGENDA: LEGENDA Rede semântica atual Rede semântica

LEGENDA:LEGENDA

Rede semântica atual Rede semântica projetada ( à qual se quer que o usuário chegue com o uso do sistema).

37

3 7 Processos Processos de de memória memória (1) (1) ■ Arquivamento das informações: ◆ Hipótese
3 7 Processos Processos de de memória memória (1) (1) ■ Arquivamento das informações: ◆ Hipótese

ProcessosProcessos dede memóriamemória (1)(1)

3 7 Processos Processos de de memória memória (1) (1) ■ Arquivamento das informações: ◆ Hipótese
3 7 Processos Processos de de memória memória (1) (1) ■ Arquivamento das informações: ◆ Hipótese
3 7 Processos Processos de de memória memória (1) (1) ■ Arquivamento das informações: ◆ Hipótese
3 7 Processos Processos de de memória memória (1) (1) ■ Arquivamento das informações: ◆ Hipótese

Arquivamento das informações:

Hipótese do tempo total:

! Volume de Informação proporcional ao Tempo de exposição

Efeito de distribuição da prática:

! é mais eficiente distribuir a informação no tempo com intervalos, do que expor o aprendiz a um tempo muito longo e contínuo de informação

! pausa para acomodar / relacionar

Aprendizagem significativa:

! se dá quando se tem uma estrutura mental preparada para recebê- la

! Aplicação: ao construir uma interface, é útil primeiro procurar levantar a rede semântica do usuário e saber a familiaridade que ele tem com o conhecimento.

38

3 8 Processos Processos de de memória memória (2) (2) ■ Decaimento (esquecimento) ◆ Se tiver
3 8 Processos Processos de de memória memória (2) (2) ■ Decaimento (esquecimento) ◆ Se tiver

ProcessosProcessos dede memóriamemória (2)(2)

3 8 Processos Processos de de memória memória (2) (2) ■ Decaimento (esquecimento) ◆ Se tiver
3 8 Processos Processos de de memória memória (2) (2) ■ Decaimento (esquecimento) ◆ Se tiver
3 8 Processos Processos de de memória memória (2) (2) ■ Decaimento (esquecimento) ◆ Se tiver
3 8 Processos Processos de de memória memória (2) (2) ■ Decaimento (esquecimento) ◆ Se tiver

Decaimento (esquecimento)

Se tiver 2 traços igualmente fortes na memória se perde o mais recente (lei de Jost).

Emoção : ajuda a fixar um traço

Interferência:

! retroativa: memória velha apaga a nova

! proativa: memória nova apaga a velha.

Recuperação da informação

resgatar da rede semântica uma informação

processo de resgate por associações:

! tempo de resposta tem

o

a

ver com a

profundidade da rede

! “pistas” (atalhos) ajudam a lembrar a informação mais rapidamente.

39

3 9 Mais Mais informações informações ■ AUSBEL,D.P.; NOVAK,J.D.; HANESIAN,H. Educational psychology: a
3 9 Mais Mais informações informações ■ AUSBEL,D.P.; NOVAK,J.D.; HANESIAN,H. Educational psychology: a

MaisMais informaçõesinformações

3 9 Mais Mais informações informações ■ AUSBEL,D.P.; NOVAK,J.D.; HANESIAN,H. Educational psychology: a
3 9 Mais Mais informações informações ■ AUSBEL,D.P.; NOVAK,J.D.; HANESIAN,H. Educational psychology: a
3 9 Mais Mais informações informações ■ AUSBEL,D.P.; NOVAK,J.D.; HANESIAN,H. Educational psychology: a
3 9 Mais Mais informações informações ■ AUSBEL,D.P.; NOVAK,J.D.; HANESIAN,H. Educational psychology: a

AUSBEL,D.P.; NOVAK,J.D.; HANESIAN,H. Educational psychology: a cognitive view. New York: Holt, Rinehart & Winston. 1978.

COLLINS, A. M., LOFTUS, E. A spreading-activation theory of semantic processing. Psychological Review. p. 407-428, 1975.

GLENN, B. T, CHIGNELL, M.

H. Hypermedia: Design for

Browsing. In:

HARTSON,H.R, HIX,D. Advances in Human-Computer Interaction. Nerwood, New Jersey: Ablex Publishing

Corporation, v.3, pp.143-183,

1992.

FARINA,M.

Psicodinâmica

das cores em comunicação. 4.ed., São Paulo, Edgar Blücher. 1990.

40

4 0 Mais Mais informações informações ■ JACKSON,R.; MacDonald.L; Freeman,K. Computer generated color: a
4 0 Mais Mais informações informações ■ JACKSON,R.; MacDonald.L; Freeman,K. Computer generated color: a

MaisMais informaçõesinformações

4 0 Mais Mais informações informações ■ JACKSON,R.; MacDonald.L; Freeman,K. Computer generated color: a
4 0 Mais Mais informações informações ■ JACKSON,R.; MacDonald.L; Freeman,K. Computer generated color: a
4 0 Mais Mais informações informações ■ JACKSON,R.; MacDonald.L; Freeman,K. Computer generated color: a
4 0 Mais Mais informações informações ■ JACKSON,R.; MacDonald.L; Freeman,K. Computer generated color: a

JACKSON,R.; MacDonald.L; Freeman,K. Computer

generated color: a practical guide to presentation and display. John Wiley & Sons.

1994.

KLATZKY,R.L. Human memory. 2nd. ed. W.H.Freeman & Co. 1980.

NORMAN,D.A. Cognitive

Engineering. User centered

Lawrence

systems design.

Earlbaum Associates. 1986.

NOVAK,J.D.; GOWIN,D. Learning How to Learn. Cambridge University Press, New York, 1984.

QUILLIAN,M.R. Semantic

memory.

Semantic Information Processing, pp. 216-270. M.I.T. Press, Cambridge, MA,

In MINSKY,M. ed.,

1968.

41

4 1 Mais Mais informações informações ■ SHNEIDERMAN,B. Designing the user interface - strategies for
4 1 Mais Mais informações informações ■ SHNEIDERMAN,B. Designing the user interface - strategies for

MaisMais informaçõesinformações

4 1 Mais Mais informações informações ■ SHNEIDERMAN,B. Designing the user interface - strategies for
4 1 Mais Mais informações informações ■ SHNEIDERMAN,B. Designing the user interface - strategies for
4 1 Mais Mais informações informações ■ SHNEIDERMAN,B. Designing the user interface - strategies for
4 1 Mais Mais informações informações ■ SHNEIDERMAN,B. Designing the user interface - strategies for

SHNEIDERMAN,B. Designing the user interface - strategies for effective human-computer interaction. Addison Wesley, 2.ed., Maryland, USA. 1992.

BUTTERWORTH,P.; DENNIS ,S. Theory of Distributed Associative Memory: A Tutorial

http://www2.psy.uq.edu.au/CogPs

ych/Noetica/OpenForumIssue6/T

ODAM/TODAM.html

AMORETTI, M.S.M; TAROUCO,L. Mapas conceituais: modelagem colaborativa do conhecimento. Revista Informática na Educação:

Teoria & Prática, v.3 n.1, PPGIE/UFRGS, Porto Alegre, setembro 2000.

CANÃS, Alberto J. Mapas Conceituais. http://

www.cedi.g12.br/mapas.htm

42

4 2 Mais Mais informações informações ■ AMORETTI,M.S.M. Protótipos e estereótipos: aprendizagem de conceitos
4 2 Mais Mais informações informações ■ AMORETTI,M.S.M. Protótipos e estereótipos: aprendizagem de conceitos

MaisMais informaçõesinformações

4 2 Mais Mais informações informações ■ AMORETTI,M.S.M. Protótipos e estereótipos: aprendizagem de conceitos
4 2 Mais Mais informações informações ■ AMORETTI,M.S.M. Protótipos e estereótipos: aprendizagem de conceitos

AMORETTI,M.S.M.

Mais informações informações ■ AMORETTI,M.S.M. Protótipos e estereótipos: aprendizagem de conceitos

Protótipos e estereótipos:

aprendizagem de conceitos Mapas Conceituais:

experiência em Educação a Distância. Revista Informática na Educação: Teoria & Prática, v.4 n.2, PPGIE/UFRGS, Porto Alegre, dezembro 2001.

http://www.rau-

tu.unicamp.br/nou-

rau/ead/document/?view=19

Redes Semânticas http://www.lcmi.ufsc.br/gia/soft

comp/node27.html

tu.unicamp.br/nou- rau/ead/document/?view=19 ■ Redes Semânticas http://www.lcmi.ufsc.br/gia/soft comp/node27.html