C J E 5250 - Metodologia de webdesign

baseada em Usabilidade

Percepo
O lado humano da Interao com o computador

Profa. Dra. Maria Laura Martinez

2003
2
Contedo

1. Viso
2. Audio
3. Memria
Viso
4
Viso Clulas fotoreceptoras na retina
cones bastonetes
Na parte posterior do Fora da fvea, a retina
globo ocular, prximo ao contm principalmente
nervo tico, h uma rea bastonetes.
muito sensvel chamada A viso que vem dessa
fvea ou mancha rea menos precisa e
amarela, com cerca de 1 em preto e branco
mm de dimetro. (tons de cinza).
A no existem
bastonetes, e os cones ris
so mais estreitos e
esto mais juntos.
Retina
O crebro recebe mais
informaes da fvea do Fvea central Cristalino
que de todo o resto da
retina.
Ponto cego Crnea
A viso nessa rea
colorida.
Nervo tico
5
Viso Clulas fotoreceptoras na retina
bastonetes:
! viso perifrica : vem
principalmente movimento e
formas sem cor e menos
ntidas.
! mais clulas (~125 milhes
em cada olho)
! 100 vezes mais sensveis
luz do que os cones
(variaes de luz -e Ex:

movimentos - so Se uma mensagem

facilmente percebidos)
! no so sensveis cor
! saturam rapidamente com
excesso de luz
importante tem que estar
na linha inferior de uma
tela cujo foco est no
centro. O que fazer ?
Mensagem animada: os
bastonetes so sensveis ao
movimento.
6
Viso Clulas fotoreceptoras na retina
cones: Ex:
! menos clulas (~ 7 Formas pequenas em
milhes) azul se perdem.
! sensveis ao vermelho, Essa uma boa razo
verde e azul para no usar azul para
! azul: menos percebido texto pois este pode
(3 a 4% da fvea parecer confuso.
sensvel luz azul) O mesmo efeito far com
! amarelo (vermelho e que uma pequena rea
verde): mais percebido azul parea mais
! na fvea no existem desbotada do que uma
bastonetes, s cones grande rea da mesma
cor.
sensibilidade do olho
R G B

64% 32% 4%
7
Ponto cego
No local onde todos os
nervos se juntam e saem do
olho, no existem clulas
retinais, sensveis luz
Essa rea, onde a luz no
detectada, conhecida
como ponto cego.
A presena do ponto cego
pode ser constatada atravs
da figura abaixo.
Cubra o olho esquerdo e
aproxime a figura, com a
viso fixa no X.
A uma determinada
distncia,
correspondente ao seu
ponto cego, a
circunferncia escura
simplesmente
desaparece!
8
ris e Luz
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 reao
reflexa, no envolvendo
diretamente o crebro, que
pode estar ocupado com
outra tarefas igualmente
importantes.
9
Percepo da cor (sistema HSV)
saturao

matiz

valor / brilho
matiz

rilho bri
b lho

Cubo de Cores
10
Percepo da cor (sistema HSV)
Matiz (Hue) Saturao / Croma
normalmente associada (Saturation)
ao nome da cor. Grau de concentrao
comprimento de onda da cor.
(podemos distinguir 150 Quantidade de cinza
tonalidades desde que presente no matiz
no sejam exibidas todas Ex: Azul mais forte
juntas) (mais vivo).
H H
Valor (Value) / Luminncia / S 255 136 S 0 0
Brilho (Brightness) 255 48 V 255 102 0
V 255
102 255 195 10
Quantidade relativa de 102 195
102 195
claro ou escuro de uma
cor em uma escala do
branco ao preto. 0 0 0
H 0 0
Ex: experincia suco + 255 255 255 255
S 255
leite 50 100 128 180 221
V
11
Percepo da cor
Diferenas culturais e
fisiolgicas entre indivduos

Cores esto associadas a

um simbolismo e evocam
emoes subjetivas

O significado das cores

pode variar dependendo:
! da cultura
! da faixa etria
! do indivduo
12
Percepo da cor
Cores quentes:
estimulantes, chamam a
ateno
Vermelho
! evitar o seu uso para
reas grandes ou como
cor de fundo
Cores marginais (seu carter
Amarelo
depende da cor que esteja
Laranja
ao redor):
verde
Core frias: relaxantes
magenta
azul
! no deve ser usada em
texto ou detalhes finos,
boa para fundos
(transmite sensao de
profundidade)
turquesa
violeta
13
O verde
14
O verde
15
Percepo da cor
Diferenas culturais e
fisiolgicas entre indivduos

Idade: Pessoas idosas

perdem sua habilidade em
discernir matizes azuis.
! tm uma sensibilidade
reduzida para cores,
! pode requerer o uso de
cores mais brilhantes
(Robertson, 1993).
Devemos lembrar que o
nmero de idosos que fazem
uso da Web tem aumentado
muito e os projetistas de
pginas na Web devem
elaborar pginas que
atendam a esse pblico.
http://www.eps.ufsc.br/disserta98/rosam/cap2.htm#2.2.3
16
Percepo da cor
Diferenas culturais e
fisiolgicas entre indivduos Daltonismo:
! 2 % dos homens tm
cegueira para o
vermelho e
! 6% tm 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
Percepo da cor
Diferenas culturais e
fisiolgicas entre indivduos
Aumentando a diferena
de brilho entre as cores
elimina-se a confuso
entre elas.
! Deste modo, se um
amarelo tiver um alto
valor de luminncia,
! um verde tiver uma
luminncia mdia e
! um vermelho tiver um
baixo valor de
luminncia,
! todos os usurios
devem estar aptos a
detectar as diferenas
entre elas (ISO 9241-8).
18
Percepo da cor
Persistncia visual
Goethe (Teoria das
Cores) :
aps olhar fixamente um
objeto brilhante, por
muito tempo, pode-se ver
uma leve sombra por um
breve perodo que se
segue (na cor
complementar);
os cones se cansam;
a impresso na retina
persiste at algum tempo
aps ter cessado a
excitao;
esse tempo varia de 1/30
a 1/50 segundo. isto permitiu criar o
cinema e a TV.
19
Percepo da cor
Segundo Robertson (1993), o uso
inapropriado das cores pode
causar efeitos indesejveis
como:

Sangramento
Esse efeito observado
quando uma determinada
cor comea a ter influncia
de outra cor que est em
torno dela.
Ex: uma pequena rea de
vermelho envolvida por
uma grande rea de azul
pode comear a ter uma
aparncia violeta.
20
Percepo da cor
A percepo da cor
relativa cor que colocada
do lado
algumas cores ficam
mais claras ou escuras
em presena de outras
(efeito Bezold)

Os cinzas so de diferente Qual a cor do quadrado

luminosidade? maior?

no vermelho ciano
21
Percepo da cor
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
Iluso de profundidade
Quando cores do
espectro amplamente
separadas, como o
vermelho e o azul, so
apresentados na tela elas
parecero estar em
diferentes planos de
profundidade porque
estas cores tm
diferentes
profundidades de foco.
Cor e movimento
Se um objeto vermelho e
azul movido de um lado
a outro da tela, os
componentes vermelhos
e azuis podem parecer
dissociados e
moverem-se, um em
relao ao outro, de
maneira perturbadora.
22
Percepo da cor
Aberraes cromticas Neste caso, no h
Quando cores como
profundidade inteiramente
correta para focar e h
vermelho e azul so
usadas simultaneamente uma evidncia que o
(por exemplo, um texto processo de diferentes
vermelho brilhante no meio profundidades de foco
de um texto em azul) o torna-se fatigante.
olho pode tentar
repetidamente empurrar
cada cor da imagem
dentro de um foco preciso
(por exemplo, um
em rpidas sucesses.
texto em vermelho no
meio de um texto em
azul)
23
Leitura
Padro de percepo visual Legibilidade:
Evolui com o treinamento medida da facilidade de
1o. v letras leitura
2o. v slabas tamanho, espaamento,
3o. v palavras como um tipo de fonte,
todo (relevo). maisculas menos
legveis do que
Movimentos do olho minsculas
avano
retrocesso
sacadelas
Ex: Maisculas:
no devem ser usadas
Ex: leitura em lngua
para transmitir grandes
estrangeira
quantidades de
cansa mais
informao.
mais sacadelas,
avanos e retrocessos serve para chamar a
ateno
24

TEXTO COM LETRAS MAISCULAS: SEM RELEVO

Letras minsculas mantm o relevo natural das palavras

Audio
26
Audio
Audio: Ouvido
externo
o ouvido externo,
Ouvido
o ouvido mdio
interno Canais
a cclea. semi-
Martelo, circulares
bigorna e
Equilbrio: estribo
Nervo
auditivo
ouvido interno
tmpano
Cclea

O movimento do lquido Ouvido

coclear gera impulsos mdio Trompa de
Eustquio
nervosos que so
transmitidos pelo nervo
auditivo ao centro de
audio do crtex
cerebral.
27
Percepo do som
A audio seletiva Pode ser utilizado para:
Identificao da fonte: localizao
diferenas de feedback
intensidade chamar a ateno

Frequncias : Ex: Sugira o

aperfeioamento de um
! 20 Hz - 20 KHz supermercado virtual
utilizando o som de modo
Medidas: eficiente.
Tom som para identificar
produtos (atende a
! frequncia do som
cegos)
Altura
destacar promoes
! amplitude relmpago
Timbre estimular compras com
! caracterstica do msicas relaxantes (que
instrumento que o emite tenham a ver com o
produto vendido).
Memria
29
Memria
Sensorial De trabalho (curta durao)
Tem que ser Armazena a informao de
continuamente escrita forma provisria para
(no dura quase nada) tomar uma deciso ou
formar uma idia (leitura,
Icnica (memria clculo).
visual)
Acesso rpido: ~70 ms
! persistncia visual:
~0,5s Decaimento rpido:~ 200
! Ex: cinema, fogos de ms
artifcio, desenho
com palitinhos de
fsforo no escuro Permanente (longa durao)
Ecica (memria Armazena conhecimento
auditiva) Acesso Lento: ~0,1 s
Hptica (memria de Decaimento muito lento:
posio)
horas, dias....
! Ex: reconhecimento da
posio atual
30
Memria de trabalho (curta durao)
Capacidade limitada:
7 +/- 2 (Miller) Aplicao: No fazer menus
(sobrecarga cognitiva) muito extensos.
No adianta dar ao
Interferncia de outras usurio muitas
informaes informaes ao mesmo
tempo (+ de 7)
melhor agrupar em sub-
Fechamento: formao bem grupos significativos
sucedida de chunks (chunks), ou organizar de
(ponteiros para nossa forma grfica
memria)
Ex: Memorizar nmeros:
! 925843421
! 925 - 843 - 421
(capacidade limitada: ao
agrupar cabe mais
informao)
31
Memria permanente (longa durao)
Capacidade : ilimitada (?
overflow, stress...)
Organizao: depende de
interpretao
Teoria conexionista:
se aprende /armazena a
informao associando-a
a coisas conhecidas,
resgatando um pode-se
resgatar o outro
A carga ocorre a partir da
memria de trabalho, aps
alguns segundos ou por
repetio
Capacidade de
esquecimento:
reforo para lembrar
vnculo emocional: papel
importante na reteno
Aplicao:
uso de metforas
interface bonita,
agradvel provoca
estmulo (emocional)
positivo.
32
Metfora
Tentativa de adaptar algo novo ao modelo mental do
usurio.
Ex1: Quanto o automvel foi mostrado pela primeira vez
ele foi chamado de "carruagem sem cavalos".
Ex2: Principal metfora visual da Web: a teia (de aranha).

A escolha consistente de metforas traz conforto

tornando o site mais usvel.

Ex:
www.exploratorium.edu/nagasaki/ (sombrio)
http://www.eca.usp.br/ (tintas)
http://www.lsi.usp.br/ (arquivo de
escritrio)
33
Memria x hipermdia
Estrutura associativa da
mente humana para
organizar informaes:
no linear
parecida estrutura da
hipermdia / hipertexto
[GLENN,92]
A natureza cognitiva da
mente humana tem sido
observada em muitos
contextos
Modelo de rede da memria
humana
[COLLINS,75];
Eich (1982) e Murdock
(1982) apud
[BUTTERWORTH]
Anderson (1983) apud
[GLENN,92].
34
Mapas conceituais / Redes semnticas
[Ausbel,78]
aprendizagem
significativa => processo
pelo qual uma nova
informao relaciona-se
com a estrutura cognitiva
prvia do indivduo.
Mapas conceituais (Novak )
Representaes grficas
semelhantes a diagramas
que indicam relaes
entre conceitos ligados
por palavras.
Redes semnticas
[Quillian,68]:
Representaes grficas
tambm utilizadas para
mapear modelos
cognitivos.
! Rede composta por ns
e por arcos.
! Os ns so os conceitos
e os arcos as relaes
entre os conceitos.
35
Mapas conceituais / Redes semnticas

Modelo conceitual do
usurio
Levantar o modelo
conceitual (mental) do
usurio
Usar a linguagem do
usurio

Modelo conceitual projetado

Fortalecer informaes
importantes
Enfraquecer informaes
erradas
36
Rede semntica do usurio
webmaster da AUN
nome geram
e-mail pessoas informaes nome
telefone pode ter anncios URL
data
entrevistadas local anunciante
sigla por captam descrio permite
nome veculo
endereo tem dilogo
telefone nome atravs de e-
reprteres nome publicadas em URL
unidade e-mail mail,fruns
forma da AUN e-mail e chats
USP turma
editorias
nome
vinculada a geram URL
organizadas
por arquivo de
notcias quando antigas, edies
armazenadas anteriores
ttulo em
se relaciona com sub-ttulo pertencentes ano
a uma edio
corpo nmero
palavras-chave ano
podem ter tambm nmero
complemento fonte
data publicao enviadas referente
por
imagens, tipo
sons e nome servio de entrega
URL por e-mail
vdeo

LEGENDA:
LEGENDA
Rede semntica atual
Rede semntica projetada ( qual se quer que o usurio
chegue com o uso do sistema).
37
Processos de memria (1)
Arquivamento das
informaes:
Hiptese do tempo total:
! Volume de Informao
proporcional ao Tempo
de exposio
Efeito de distribuio da
prtica:
! mais eficiente
distribuir a informao
no tempo com
intervalos, do que expor
o aprendiz a um tempo
muito longo e contnuo
de informao
! pausa para acomodar /
relacionar
Aprendizagem
significativa:
! se d quando se tem
uma estrutura mental
preparada para receb-
la
! Aplicao: ao construir
uma interface, til
primeiro procurar
levantar a rede
semntica do usurio e
saber a familiaridade
que ele tem com o
conhecimento.
38
Processos de memria (2)

Decaimento (esquecimento) Recuperao da informao

Se tiver 2 traos resgatar da rede
igualmente fortes na semntica uma
memria se perde o mais informao
recente (lei de Jost). processo de resgate por
Emoo : ajuda a fixar associaes:
um trao ! o tempo de resposta tem
Interferncia: a ver com a
profundidade da rede
! retroativa: memria
velha apaga a nova ! pistas (atalhos)
ajudam a lembrar a
! proativa: memria nova
informao mais
apaga a velha.
rapidamente.
39
Mais informaes
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. Psicodinmica
das cores em comunicao.
4.ed., So Paulo, Edgar
Blcher. 1990.
40
Mais informaes
JACKSON,R.; MacDonald.L; NOVAK,J.D.; GOWIN,D.
Freeman,K. Computer Learning How to Learn.
generated color: a practical Cambridge University Press,
guide to presentation and New York, 1984.
display. John Wiley & Sons.
1994.
QUILLIAN,M.R. Semantic
memory. In MINSKY,M. ed.,
KLATZKY,R.L. Human
Semantic Information
memory. 2nd. ed.
Processing, pp. 216-270.
W.H.Freeman & Co. 1980.
M.I.T. Press, Cambridge, MA,
1968.
NORMAN,D.A. Cognitive
Engineering. User centered
systems design. Lawrence
Earlbaum Associates. 1986.
41
Mais informaes
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 Informtica na Educao:
Teoria & Prtica, v.3 n.1,
PPGIE/UFRGS, Porto Alegre,
setembro 2000.
CANS, Alberto J. Mapas
Conceituais. http://
www.cedi.g12.br/mapas.htm
42
Mais informaes
AMORETTI,M.S.M.
Prottipos e esteretipos:
aprendizagem de conceitos
Mapas Conceituais:
experincia em Educao a
Distncia. Revista Informtica
na Educao: Teoria &
Prtica, v.4 n.2,
PPGIE/UFRGS, Porto Alegre,
dezembro 2001.
http://www.rau-
tu.unicamp.br/nou-
rau/ead/document/?view=19

Redes Semnticas
http://www.lcmi.ufsc.br/gia/soft
comp/node27.html