Slides para apoiar as aulas sobre Fatores Humanos na Interação com o Computador

1. Fundamentos de Fatores Humanos
em IHC:
Introdução e Percepção Visual
Prof. André Constantino da Silva
IHC
Baseado nos slides da
Prof. Dr. Heloísa Vieira da Rocha

2. Overture...
 Pet Shop Boys - Invisible
 https://www.youtube.com/watch?v=n609XaagVJo
…
I'm here but you can't see me
I'm invisible
It's queer how gradually
I've become invisible
Look at me the absentee
Disappearing finally
Goodbye
Is it magic or the truth?
Strange psychology?
…

3. • estudaremos as capacidades físicas e
cognitivas do Humano, como fatores que
influenciam o design de interfaces de
sistemas computacionais.
Objetivo das Aulas

4. • A interação com a tecnologia é cognitiva
– Necessitamos levar em consideração os processos
cognitivos envolvidos e as limitações cognitivas dos
usuários
• Podemos prover conhecimento sobre o que
pode, ou não, ser esperado dos usuários
• Identificar e explicar a natureza e causas dos
problemas encontrados pelos usuários
• Suprir com teorias, ferramentas de modelagem,
guias e métodos que possam conduzir a projetos
de melhores produtos interativos
Por que precisamos compreender os
usuários?

5. • Aspectos Cognitivos Centrais
• Modelo de Processador Humano
• Engenharia Cognitiva
– Golfo de Avaliação e Golfo de Avaliação
– O modelo GOMS
– Modelos Mentais
– Metáforas em interfaces
Conteúdo

6. • Percepcão e reconhecimento
• Atenção
• Memória
Usados para:
• Ler, falar e ouvir
• Resolver problemas, planejar, raciocinar e tomar
decisões, aprender
Aspectos Cognitivos Centrais

7. • “Refere-se a como a informação é assimilada do
ambiente pelos diferentes órgãos sensitivos –
olhos, ouvidos, dedos – e transformada em
experiências com objetos, eventos, sons e
gestos” (Roth, 1986)
• Processo complexo que envolve outros processos
cognitivos, como a memória, a atenção e a
linguagem
Percepção

8. Descreva o que você vê na figura?
É real?
Dê um rótulo para a figura?

9. Descreva o que você vê na figura?
É real?
Dê um rótulo para a figura?

10. Sua descrição desta figura usa um ...... e ou usa um ..... ou
ou seja, você consegue ver duas coisas ao mesmo tempo?

11. Marque o tempo em
que você diz a
palavras e compare
com o tempo com
que você diz as cores

12. • Como percebemos o mundo em nossa
volta?
Os Sentidos

16. • É a operação que leva ao cérebro
informações de fenômenos do meio
externo e do estado do organismo
• É por meio dela que os indivíduos se
relacionam com o ambiente
– Órgão de sentido
Sensação

17. • Exteroceptiva: permite o contato entre o
indivíduo e o meio externo por meio dos órgãos
dos sentidos
• Interoceptiva: permite ao cérebro tomar
conhecimento do que acontece nos órgãos
internos
– Exemplo: fome, calor, frio, desconforto
• Proprioceptiva: permite ao cérebro tomar
conhecimento do movimento corpóreo no
espaço e da sua posição em relação aos outros
– Exemplo: equilíbrio
Tipos de Sensação

18. • Estímulos muito tênues ou muito intensos
não são detectados
– Limiar da sensação
• Sensação é relativa: varia de acordo com o
ambiente, estado emocional, uso de
medicamentos, etc
Estímulos

19. • http://youtu.be/ywaovES97vI?list=PL4EDA0
1368AB3E59E
Vídeos Extras

21. • O usuário deve “perceber” a informação
apresentada na interface, através dos sinais
que a constituem.
• Como os sinais externos que chegam aos
órgãos sensoriais são convertidos em
experiências perceptuais significativas?
Mecanismos da Percepção Humana

22. Entendendo os mecanismos da
percepção

23. • Casamento de padrões?
– Esse processo simples não funciona se a letra
é apresentada com outra orientação ou com
tamanho variável.
– Um sistema mais poderoso e flexível é
necessário para dar conta da capacidade
humana de reconhecimento de padrões.
• Como a informação que chega a nossos
órgãos dos sentidos é interpretada?
Mecanismos da Percepção Humana

24. Degradando a imagem...
Foto de R.C.James

25. Colocando organizações competitivas...
M C Escher, Cavaleiros

26. Salvador Dalí, The Slave Market with
Disappearing Bust of Voltaire

28. Colocando uma organização sem sentido...
Processos
perceptuais
impõem
uma
organização
à imagem....
B. Riley, Tremor

29. Nosso aparato visual evolui em mundo 3D...
Atribuindo
profundidade
(e contexto)
à imagem
R. Magritte, Les Promenades d´Éuclide
Descreva a imagem
Compare a descrição com a
de um colega

30. Olhando para “figuras impossíveis”
Outra maneira
de mostrar a
operação que
fazemos ao
colocar
objetos em 3D
durante sua
interpretação
M C Escher, Moebius Strip

32. • http://youtu.be/sk0rPAGoJcs?t=32m9s
Assistir do 32:11 até 36:50
Tudo junto e misturado

33. Anomalias da Percepção
Células neurais
interagem umas
com as outras.
No único ponto
do olho onde os
receptores não
interagem muito
com os outros, o
escurecimento
da interseção
não acontece

34. • Construtivistas
– A informação que captamos é “construída”
envolve processos cognitivos
• Ecologistas
– A informação é “detectada” em um processo
direto
noção de affordance
Teorias da Percepção Humana

35. • percepção é um processo direto no qual a
informação é simplesmente detetada ao
invés de ser construída
• conceito central - affordance
– o que se vê como comportamento de um
sistema, objeto ou evento é o que é permitido
pelo sistema, objeto ou evento
Abordagem Ecológica

36. • Os objetos carregam certas características
que dirigem nossa percepção sobre eles...
Quais são os botões da figura?

37. • percepção envolve a intervenção de representações e
memórias
– o que se vê não é uma réplica do mundo como uma
fotografia
– o sistema visual constrói um modelo do mundo através de
transformações, acréscimos, distorções e descartando
informação
• a habilidade de perceber objetos em uma tela - textos,
gráficos, representações bi ou tri-dimensionais - é
resultado de nosso conhecimento anterior e
expectativas do que deveria aparecer
Abordagem Construtivista

38. • A implicação óbvia é projetar
representações que sejam facilmente
perceptíveis, exemplo:
– O texto deve ser legível
– Os ícones devem ser fáceis de se distiguir e ler
Percepção e Reconhecimento no
Design de Interfaces

39. Qual a frase mais fácil de ler? Por quê?

40. Perceber é muito mais que ver...
• A demanda por memorização e a carga cognitiva exigida pelas
interfaces de comandos, nas interfaces gráficas é deslocada
para o processamento perceptual e viso-motor
(Shame, 1999)

41. • Percepção é um processo ativo
• Existem duas teorias principais sobre percepção:
construtivista e ecológica
– A abordagem construtivista tem sido usada para
auxiliar no design de display de informações de
forma a torná-la rapidamente perceptível
– A abordagem ecológica tem sido usada para auxiliar
no design de objetos da interface – affordance
Percepção - Resumo

42. • https://www.youtube.com/watch?v=0_WL
OzUg8eA
• https://www.youtube.com/watch?v=l9x0irs
INXg
• https://www.youtube.com/watch?v=axEy4h
DmKOo
Vídeos - Extras

43. Percepção - Resumo
• Percepção é um processo ativo
• Existem duas teorias principais sobre percepção:
construtivista e ecológica
• A abordagem construtivista tem sido usada para
auxiliar no design de display de informações de
forma a torná-la rapidamente perceptível
• A abordagem ecológica tem sido usada para
auxiliar no design de objetos da interface –
affordance

44. • Em grupo, apresentar o problema e a explicação
– Cadeira de Beuchet
– Quarto de Ames
– Imagem biestável
– Arte anamórfica
– Paralaxe do movimento
– Autoestereograma
– Anáglifo
Trabalhos

45. • https://www.youtube.com/watch?v=FzeXeXR9cCs
Atenção

46. • Seleção de coisas para se concentrar dentre
várias ao nosso redor, em um dado momento
• Mecanismo que permite a fixação de alguns
estímulos e a organização das informações para o
processo de tomada de decisão
– Seletiva: foca em alguns e descarta os demais
– É influenciada pelas necessidades, motivações,
interesses, personalidade, cultura, objetivo, prazer,
medo…
Atenção

47. • atenção focada
– habilidade de concentrar em um determinado
evento quando existe uma série de eventos
competindo
• o que é relevante as atividades e intenções que se tem no
momento
• atenção dividida
– quando se tenta atender a mais de uma
demanda ao mesmo tempo
• ex.: dirigir e conversar com um passageiro ao lado
Atenção dividida e focada

48. • A atenção focalizada e dividida nos permite ser
seletivos apesar da grande quantidade de
estímulos competindo, no entanto limita nossa
capacidade de perceber todos os outros eventos
Atenção Focada e Dividida

49. • As informações de uma interface devem ser
estruturadas para capturar a atenção do usuário,
por exemplo usando fronteiras perceptíveis
(windows), cor, vídeo reverso, som e luzes
piscantes
Focando atenção em uma Interface

50. Um exemplo de uso excessivo de
gráficos

51. • Como dirigir a atenção do usuário para a
informação relevante no display?
– Estruturando a interface
• torná-la fácil de ser navegada
• apresentar informação na medida certa: nem muita e nem
pouca
• agrupar e ordenar a informação em partes significativas
– Outras técnicas
• cores
• técnicas de alerta: vídeo reverso, som etc
• janelas
Focando atenção em uma Interface

52. • executar uma série de tarefas alternadamente
durante um mesmo período de tempo
• tarefas primárias e secundárias
• como saber de onde recomeçar
– ajudas cognitivas
• sistemas devem ser projetados para
sitematicamente prover informação sobre o
status de uma determinada atividade
– p. ex: ainda não salvou arquivo …..
Multi-tarefas e Interrupções

53. • Salientar a informação, quando esta necessitar de
atenção
• Utilizar técnicas que façam com que coisas se
destaquem, como: cor, disposição, espaçamento,
sublinhado, ordenação e animação.
• Evitar sobrecarregar a interface
– Exemplo: Google, possui um design simples e rápido
• Evitar usar muitos recursos só porque o software
permite implementá-los
Implicações da atenção no projeto de
interfaces

54. • Envolve codificar e recordar o conhecimento e agir
apropriadamente
• Nós não lembramos de tudo
– filtragem e processamento
• O contexto é importante para nossa memória
• Nossa capacidade de identificar coisas é muito maior do
que a de lembrar coisas
– O aumento do uso de interfaces GUI baseadas em comando
(Graphical User Interface)
• É mais fácil lembrar de imagens do que de palavras
– O uso de ícones ao invés de nomes
Memória

55. • Memória de
Informação
Sensorial
• Memória de Curta
Duração
• Memória de Longa
Duração
As Bases Neurais da Memória Humana

56. • Memória de Informação Sensorial
– “fotografia do mundo”, como ele é recebido pelos
nossos órgãos dos sentidos
• Memória de Curta Duração
– A informação retida não é mais a imagem
completa de eventos, mas a interpretação
imediata deles
• Memória de Longa Duração
– 10 bilhões de neurônios capazes de armazenar
informações...
Qual foi o cardápio do seu jantar de sábado?

57. Atividades correntes de pensamento, processos de
consciência e memórias imediatas são mediados por
atividades elétricas

58. Mudanças estruturais e químicas devem ocorrer como resultado da
aquisição de novo conhecimento
• Memória de Curta Duração  ativação elétrica de um
loop neural específico
• Memória de Longa Duração  estrutura permanente de
circuitos neurais, que acontece através do processo de
consolidação:
– Codificação química na estrutura de moléculas de proteína em
cada sinapse
– Crescimento de novas junções sinápticas

59. Memória e Soluções de Interfaces

60. Memória e Soluções de Interfaces

61. Memória e Soluções de Interfaces

62. • Memória está envolvida em todas as nossas
atividades (da mesma forma que percepção e
atenção)
– sem memória não conseguiríamos escovar os dentes
• sistema humano de memória é muito versátil
– ele pode armazenar procedimentos, dados
sensoriais, relações, sentimentos, experiências etc
– não é infalível
Restrições de Memória

63. • a extensão de quanto é relembrado depende do
quanto é significativo
– teoria do nível de processamento
– é a profundidade que uma informação é processada
que determina a facilidade com que é relembrada (
o som de uma palavra ----> o significado de uma
palavra)
– familiaridade e associação de imagens ( ex.: o
quanto uma palavra é familiar e o quanto ela tem
uma imagem associada)
Restrições de Memória

64. • Conhecimento no mundo X conhecimento na
cabeça
• Reconhecer é muito mais efetivo que lembrar
– reduzir na interface o número de componentes
que tem que ser lembrados
• Um expert é perito em lembrar onde encontrar
informação no mundo externo
– colocar informação do mundo na interface
Reconhecimento X Lembrança

65. O chunk
• Função do usuário e da tarefa...
=ativação de sua MLD
HSICAUIMPW
IHCUSAWIMP
Se você tivesse que repetir as letras das duas “palavras” acima qual seria mais fácil?
Por que?

66. Recuperação da Informação na memória humana...
• umcd = 7 [5~9] chunks
• Lembrando palavras de uma lista...
Ganzer e Cunitz (1966)

67. • A Teoria de George Miller de quanta
informação as pessoas podem lembrar
• A memória imediata das pessoas é muito
limitada
• Muitos projetistas foram conduzidos a
acreditar que esta é uma descoberta útil ao
design da interação
O problema clássico do ‘72’

68. • Apresentar apenas 7 opções em um menu
• Exibir apenas 7 ícones em uma barra de ferramenta
• Ter no máximo 7 bullets em uma lista
• Colocar apenas 7 itens em um menu pull down
• Colocar apenas 7 tabs no topo de uma página web
Mas isto é errado? Por quê?
O quê alguns projetistas acreditam …

69. • Aplicação imprópria da teoria
• Pessoas podem varrer listas de bullets, tabs, itens de
menu até que vejam o que querem
• Eles não têm que lembrar no momento em que os ouve
ou vê
• Às vezes, um pequeno número de itens é um bom
design
• Mas depende da tarefa e da disponibilidade da tela
Por quê?

70. • Cognição é o ato ou processo da aquisição
do conhecimento que se dá através da
percepção, da atenção, memória,
raciocínio, juízo, imaginação, pensamento e
linguagem
• é também um mecanismo de conversão do
que é captado para o nosso modo de ser
interno
Cognição

71. • https://www.youtube.com/watch?v=XZEW
0Qw_XTQ
Vídeos Complementares

72. • Com que facilidade palavras da linguagem
de interface podem ser lembradas?
• Como o tipo de fonte altera a legibilidade?
• Qual a velocidade de leitura na tela?
• Card, Moran e Newell (1983)
– Como características do ser humano afetam a maneira como
ele interage com computadores
– Bases para as abordagens cognitivas ao design e avaliação de
sistemas computacionais
Um Modelo do Usuário de Computadores

73. • Memórias e Processadores
• Princípios de Operação
O Modelo do Processador de
Informação Humano
PP
PC
PM
MLD
MCD/MT
MIAMIV

74. • Sistema Perceptual
– Guarda saída dos sistemas sensoriais
• Sensores e buffers associados: MIV, MIA
• Sistema Cognitivo
– Usa informação da MCD e da MLD para tomada de decisão
• Sistema Motor
– Viabiliza resposta do Sistema Cognitivo
Princípio básico: ciclo Reconhece-Age do Processador
Cognitivo
O MPIH
PP
PC
PM
MLD
MCD/MT
MIAMIV

75. O Sistema Perceptual
• Transporta sensações do mundo físico
detectadas por sistemas sensoriais do
corpo e as transforma em
representações internas
– Ex. Sistema Visual

76. O Sistema Motor
• Após processamento perceptual e cognitivo,
pensamento é traduzido em ação pela ativação de
padrões de músculos arranjados em sequência
– Ex. sistema braço- mão- dedo
• O movimento não é contínuo, mas uma série de
micromovimentos discretos, cada um requerendo
tm = 70 [30~100] ms

77. • Nas tarefas mais simples, o SC serve para conectar
entradas do SP para saídas corretas do SM
• Maioria das tarefas envolve de forma complexa:
– Aprendizado, recuperação de fatos, resolução de problemas
• Memórias Associadas:
– Memória de Curta Duração (ou Memória de Trabalho)
– Memória de Longa Duração
O Sistema Cognitivo

78. Modelos Mentais

79. Modelos Mentais
• Craik (1943) descreveu modelos mentais como
construções internas de algum aspecto do
mundo externo que permitem predizer o que
fazer
• Envolvem processos inconscientes e
conscientes, onde imagens e analogias são
ativadas
Aprofundamento versus modelos superficiais (ex.
como dirigir um carro e como ele funciona)

80. • Interagindo com o ambiente, com outros, com artefatos
tecnológicos, as pessoas constroem MMs das coisas com as quais
interagem
• Concepções espontâneas de fenômenos físicos são MMs que as
pessoas criam para explicar fenômenos da natureza...
• Os MMs são incompletos, imprecisos, inconsistentes,
idiossincráticos...
• Nossa habilidade para executar MMs é limitada pelos
mecanismos perceptuais e cognitivos
Modelos Mentais

81. Modelos Mentais
• Os usuários desenvolvem uma compreensão de um
sistema através do seu estudo e de seu uso
• O conhecimento é frequentemente descrito como um
modelo
– Como usar o sistema (o que fazer depois)
– O que fazer diante de sistemas não familiares ou em
situações inesperadas (como os sistemas funcionam)
• As pessoas fazem inferências utilizando modelos
mentais de como realizar tarefas

82. Raciocínio diário & modelos mentais
Você chega em casa em uma noite fria de inverno e sua casa não está
aquecida. Como aquecê-la o mais rápido possível?
Ligando o termostato no máximo ou na temperatura desejável?
Você chega em casa morrendo de fome. Olha no refrigerador e tudo que
encontra é uma pizza não cozida. Você tem um forno elétrico.
Você primeiro o esquenta até 375 graus antes de colocar a pizza (como
especificado nas instruções) ou gira o fogão acima do máximo
especificado para tentar que ele aqueça o mais rapidamente possível?

83. Aquecimento de uma sala ou fogão controlados
por um termostato
• Muitas pessoas possuem modelos mentais não
corretos (Kempton, 1996)
• Por quê?
– Na teoria geral de válvulas, o princípio “more is
more” é generalizado para diferentes ambientes
• ex.: fogão a gás, torneira, volume do rádio
– Mas...
Os termostatos funcionam baseados no modelo de
interruptor on-off

84. Aquecimento de uma sala ou fogão controlados
por um termostato
• O mesmo é frequentemente verdade para
entender como os dispositivos interativos e
os computadores funcionam:
– Pobremente, frequentemente incompletos,
facilmente confusos, baseados em analogias
inapropriadase superstições (Norman,1983)
• ex.: cursor/tela congelada - a maioria das pessoas irão
pressionar todas as teclas possíveis

85. • Como designers devemos desenvolver interfaces que ajudem o
usuário a construir MMs adequados à sua interação com o
sistema
=> poder de predição e explicação necessários para condução da
interação
Porque Modelos Mentais?
Modelo
do
Designer
Modelo
do
Usuário

86. • Noções de modelos mentais têm sido usadas como base para
modelos conceituais (conceptual models)
• A hipótese é que se você pode entender como as pessoas
desenvolvem os modelos mentais então pode ajudá-las a
desenvolver mais apropriadamente os modelos mentais da
funcionalidade do sistema
• Por exemplo, um princípio de projeto é tentar fazer sistemas
transparentes para que as pessoas possam entendê-los mais,
sabendo o que fazer
Modelos mentais & projeto de sistemas

87. O princípio da transparência
• Feedback útil
• Fácil de entender
• Uso intuitivo
• Claro & fácil de seguir as instruções
• Ajuda online apropriada
• Guia sensitivo ao contexto de
como proceder quando errar
NÃO entender de forma literal!

88. Pontos Chaves
• Cognição envolve muitos processos incluindo atenção,
memória, percepção e aprendizado
• Como a interface foi projetada pode afetar enormemente
quão bem os usuários podem entender, aprender e lembrar
como realizar suas tarefas
• A estrutura conceitual dos “modelos mentais” e “cognição
externa” proveêm maneiras de entender como e porque
pessoas interagem com produtos, o que pode nos levar a
refletir sobre como é possível melhorar os projetos