Fundamentos de Fatores Humanos em IHC:

Introdução e Percepção Visual

Prof. André Constantino da SilvaIHC

Baseado nos slides daProf. Dr. Heloísa Vieira da Rocha

Overture...

Pet Shop Boys - Invisible https://www.youtube.com/watch?v=n609XaagVJo

…I'm here but you can't see meI'm invisibleIt's queer how graduallyI've become invisibleLook at me the absenteeDisappearing finallyGoodbyeIs it magic or the truth?Strange psychology?…

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

Objetivo das Aulas

• 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?

• 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

• 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

• “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

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

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

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

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

• Como percebemos o mundo em nossa volta?

Os Sentidos

• É 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

• 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

• 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

• http://youtu.be/ywaovES97vI?list=PL4EDA01368AB3E59E

Vídeos Extras

• 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

Entendendo os mecanismos da percepção

• 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

Degradando a imagem...

Foto de R.C.James

Colocando organizações competitivas...

M C Escher, Cavaleiros

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

Colocando uma organização sem sentido...

Processos perceptuais impõem

uma organizaçã

o à imagem....

B. Riley, Tremor

Nosso aparato visual evolui em mundo 3D...

Atribuindo profundidad

e (e contexto) à

imagem

R. Magritte, Les Promenades d´Éuclide

Descreva a imagem

Compare a descrição com a de um colega

Olhando para “figuras impossíveis”

Outra maneira de mostrar a operação

que fazemos ao colocar objetos em 3D durante

sua interpretaçã

oM C Escher, Moebius Strip

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

Tudo junto e misturado

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

• 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

• 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

• Os objetos carregam certas características que dirigem nossa percepção sobre eles...

Quais são os botões da figura?

• 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

• 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

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

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)

• 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

• https://www.youtube.com/watch?v=0_WLOzUg8eA

• https://www.youtube.com/watch?v=l9x0irsINXg

• https://www.youtube.com/watch?v=axEy4hDmKOo

Vídeos - Extras

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

• 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

• https://www.youtube.com/watch?v=FzeXeXR9cCs

Atenção

• 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

• 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

• 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

• 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

Um exemplo de uso excessivo de gráficos

• 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

• 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

• 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

• 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

• 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

• 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?

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

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

Memória e Soluções de Interfaces

Memória e Soluções de Interfaces

Memória e Soluções de Interfaces

• 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

• 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

• 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

O chunk

• Função do usuário e da tarefa...=ativação de sua MLD

HSICAUIMPWIHCUSAWIMP

Se você tivesse que repetir as letras das duas “palavras” acima qual seria mais fácil?Por que?

Recuperação da Informação na memória humana...

• umcd = 7 [5~9] chunks• Lembrando palavras de uma lista...

Ganzer e Cunitz (1966)

• 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 ‘72’

• 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 …

• 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ê?

• 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

• https://www.youtube.com/watch?v=XZEW0Qw_XTQ

Vídeos Complementares

• 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

• Memórias e Processadores• Princípios de Operação

O Modelo do Processador de Informação Humano

PPPC

PM

MLD

MCD/MTMIAMIV

• 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 MPIHPP

PC

PM

MLD

MCD/MTMIAMIV

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

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

• 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

Modelos Mentais

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)

• 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

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

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?

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

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

• 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

• 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

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!

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