aula_04_Teorias_IHC

Prévia do material em texto

Interface Homem/Máquina
Aula 4
Interface Homem/Máquina
Aula 4
Material elaborado a partir dos slides do Prof. Leandro Fernandes
Capitulo 3 do livro BARBOSA, S.D.J.; SILVA, B.S. Interação Humano-Computador
Editora Campus-Elsevier, 2010
Profa. Daniela Gorski Trevisan
daniela@ic.uff.br
Roteiro da Aula de HojeRoteiro da Aula de Hoje
• Psicologia Experimental
• Psicologia Cognitiva Aplicada
TCC-00.184 Interface Homem/Máquina 2
Diferença Entre as AbordagensDiferença Entre as Abordagens
• Baseadas em psicologia experimental
� Surgiram nos anos 50
� Permitem mensurar e modelar o comportamento 
humano e prever o desempenho
• Baseadas em psicologia cognitiva aplicada
� Surgiram nos anos 80
� Centradas nos aspectos cognitivos da interação
3
Psicologia ExperimentalPsicologia Experimental
4
Lei de Hick-HymanLei de Hick-Hyman
• Relaciona o tempo que leva uma pessoa tomar uma 
decisão com o número de escolhas possíveis
• Assume que pessoas
� Subdividem o conjunto total de opções em categorias
� Eliminam aproximadamente metade das opções
a cada passo
� Não selecionam considerando as escolhas uma
a uma (tempo linear)
• Pode ser aplicada caso haja um princípio de 
organização das opções
5
Lei de Hick-HymanLei de Hick-Hyman
6
T = k . log2(N + 1) 
Tempo médio T caso as N opções tenham
igual probabilidade de escolha
T = k . ∑ pi . log2(1 + 1 / pi) 
Tempo médio T caso as N opções tenham
probabilidade pi diferente de escolha
k ~ 150 ms é empiricamente determinado
Lei de Hick-HymanLei de Hick-Hyman
• Exemplo
7
Ana
André
Antônio
Bárbara
Cleiton
Danilo
Eduardo
T = k . log2(N + 1) 
= 150 . log2(7 + 1)
= 450 ms
Lei de FittsLei de Fitts
• Relaciona o tempo T que uma pessoa leva para 
apontar para algo com o tamanho S do objeto-alvo 
e com a distância D entre a mão e o objeto
• Ajuda designers sobre o tamanho e localização
de elementos de interface
8
Objeto
D S
Lei de FittsLei de Fitts
9
T = k . log2(D / S + 0,5) 
Tempo médio T considerando
tamanho S e distância D
k ~ 100 ms é empiricamente determinado
Lei de FittsLei de Fitts
10
Salvar
D S’
Salvar
D S”
T = 100 . log2(14 / 3,6 + 0,5)
~ 213 ms
T = 100 . log2(14 / 5,4 + 0,5)
~ 163 ms
Lei de FittsLei de Fitts
• Importante para aplicações em que o
desempenho é crítico
• Existem variações da equação conforme 
dispositivos e paradigmas de interação
• Exemplos
� Formato de menus
� Posicionamento de palheta de ferramentas e menus
11
Lei de FittsLei de Fitts
12
Pop-up menu circular (pie menu)
torna todas as opções eqüidistantes
Lei de FittsLei de Fitts
13
Windows®, o menu de aplicativos
fica sempre em cada janela
∞
Mac OS®, o menu de aplicativos
fica sempre no topo da tela
Acesso é, em média,
5X mais rápido
Psicologia Cognitiva AplicadaPsicologia Cognitiva Aplicada
14
TCC-00.184 Interface Homem/Máquina (2011.2)
Processador Humano de InformaçãoProcessador Humano de Informação
15
Memória de Longo PrazoMemória de Longo Prazo
Memória de Trabalho
Memória 
Visual
Memória 
Auditiva
Atuadores
mãos, cordas vocais, 
etc.
Atuadores
mãos, cordas vocais, 
etc.
Processador 
Perceptivo
Processador 
Perceptivo
Receptores
olhos, ouvidos, etc.
Receptores
olhos, ouvidos, etc.
Processador
Motor
Processador
Motor
Processador
Cognitivo
Processador
Cognitivo
Processador Humano de Informação
Mundo Externo
Sistema
Perceptivo
Sistema
Cognitivo
Sistema
Motor
Memórias com diferentes
capacidades de processamento
Características Pré AtencionaisCaracterísticas Pré Atencionais
• Conjunto de características processadas antes que 
uma pessoa volte sua atenção para elas
• Exemplos
� Luminância
� Cor
� Forma
� Movimentos simples
� Profundidade estereoscópica
16
Percepção de LuminânciaPercepção de Luminância
• Luminância é percebida da mesma forma por 
indivíduos com visão normal e daltônicos
• Ordenação é executada sem instrução adicional
• Contraste ideal para texto deve representar uma
razão de 10:1
17
Percepção de CoresPercepção de Cores
• Cores opostas são especiais em
todas as sociedades
� Vermelho, verde, amarelo, azul, preto e branco
• Entretanto o significado é cultural
18
TCC-00.184 Interface Homem/Máquina (2011.2) 19
Princípios de GestaltPrincípios de Gestalt
• Gestalt é um conjunto de leis/fatores que nos leva 
a perceber (ou deixar de perceber) determinada 
informação
20
** Adições recentes de acordo com alguns autores
Proximidade (1/8)Proximidade (1/8)
• Entidades visuais próximas umas das outras são 
percebidas como grupos
21
Boa Continuidade (2/8)Boa Continuidade (2/8)
• Traços contínuos são percebidos mais 
prontamente do que contornos que mudem de 
direção rapidamente
22
Simetria (3/8)Simetria (3/8)
• Objetos simétricos são mais prontamente 
percebidos
23
Simétrico Assimétrico
Similaridade (4/8)Similaridade (4/8)
• Objetos semelhantes são percebidos como grupos
24
Destino Comum (5/8)Destino Comum (5/8)
• Objetos com mesma direção de movimento são 
percebidos como grupo
25
É preciso
haver movimento
Fecho (6/8)Fecho (6/8)
• Contornos são fechados para completar figuras 
regulares, eliminando falhas e aumentando 
regularidade
26
Região Comum (7/8)Região Comum (7/8)
• Objetos dentro de uma região especial confinada 
são percebidos como um grupo
27
Conectividade (8/8)Conectividade (8/8)
• Objetos conectados por traços contínuos são 
percebidos como relacionamentos
28
Você consegue “ver” o cachorro?Você consegue “ver” o cachorro?
29
• Proximidade
• Boa continuidade
• Fecho
Principio de Gestalt AplicadosPrincipio de Gestalt Aplicados
30
Fecho.
Removendo as linhas pretas
e colocando linhas brancas
o gráfico fica mais “limpo”
Principio de Gestalt AplicadosPrincipio de Gestalt Aplicados
31
Comparando pares de retas
é possível identificar qual
está na frente
(“truque” usado em CAD)
Leis de Gestalt Aplicadas ao Web DesignLeis de Gestalt Aplicadas ao Web Design
32
Região Comum
Relacionamento dos itens
da direita inferido pelo
fundo colorido
Região Comum
Relacionamento dos itens
da esquerda inferido pelo
fundo branco
Proximidade
Glifo, texto em negrito e texto
normal compõem grupos
definidos por proximidade
Leis de Gestalt Aplicadas ao Web DesignLeis de Gestalt Aplicadas ao Web Design
33
Proximidade
O título de cada tópico
está associado a
uma descrição
Boa Continuidade
Ajuda a organizar os itens
do menu como em uma faixa
Fecho
As colunas são, na verdade
texto visto como retângulos
Leis de Gestalt Aplicadas ao Web DesignLeis de Gestalt Aplicadas ao Web Design
34
Simetria
Note como os elementos
estão alinhados
Leis de Gestalt Aplicadas ao Web DesignLeis de Gestalt Aplicadas ao Web Design
35
Similaridade
A cor do texto está
relacionada com o tipo de notícia
Reformulação de InterfaceReformulação de Interface
36
Proximidade
Aumentar a distância entre grupos
de componentes é mais apropriado
que o uso de caixas
Reformulação de InterfaceReformulação de Interface
37
Conectividade
O uso de uma hierarquia em árvore 
no lugar das abas mostrará a relação
entre grupos de componentes
Engenharia CognitivaEngenharia Cognitiva
Engenharia CognitivaEngenharia Cognitiva
• Papel do designer:
� desenvolver um sistema que permita ao usuário, durante o 
processo de interação, criar um modelo mental consistente com o 
modelo projetado pelo designer. 
• A idéia básica é que modelos cognitivos descrevem os 
processos e estruturas mentais� ex: recordação, interpretação, planejamento e aprendizado 
• E podem indicar para pesquisadores e projetistas quais as 
propriedades que os modelos de interação devem ter de 
maneira que a interação possa ser desempenhada mais 
facilmente pelos usuários. 
• Resultado: design de sistemas centrado no usuário
Modelo de Interação - Engenharia CognitivaModelo de Interação - Engenharia Cognitiva
Designer Imagem do Sistema:
MODELO IMPLEMENTADO
Usuário
IMAGEM
PERCEBIDA
IMAGEM PRETENDIDA
MODELO MENTAL DO SISTEMA:
Modelo de design
(modelo de tarefas + modelo de usuário)
Contexto
MODELO MENTAL 
DO SISTEMA:
Modelo de uso
Designer Imagem do Sistema:
MODELO IMPLEMENTADO
Usuário
IMAGEM
PERCEBIDA
IMAGEM PRETENDIDA
A partir do meu modelo conceitual
do sistema, eu vou projetar uma
interface que seja a imagem
do sistema, de maneira a minimizar
o esforço cognitivo do usuário Contexto
A partir do meu modelo 
conceitual do sistema, eu devo 
realizar um mapeamento entre as 
minhas metas e os comandos e 
funções do sistema
Modelo de Interação - Engenharia CognitivaModelo de Interação - Engenharia Cognitiva
Teoria da Ação (Norman)Teoria da Ação (Norman)
Percepção
Execução
Interpretação
Interação
Especificação da 
seqüência de ações
Avaliação
Formulação da 
intenção
Golfo de Avaliação
Golfo de Execução
Objetivo
User Centred System Design - D. Norman & S. Draper, 1986
Mental
Físico
Teoria da Ação – Exemplo 1Teoria da Ação – Exemplo 1
Formulação da 
intenção
Quero procurar a referência completa do livro Human-
Computer Interaction, editado por Preece
Especificação da 
seqüência de ações
Devo selecionar o comando de “busca” e entrar com os 
dados que eu tenho
Execução Ativo “busca” no menu;
Digito o nome do livro no campo “Nome do livro”;
Digito o nome do autor no campo “Nome do autor”;
Seleciono “Ok”
Percepção Apareceu uma nova tela com dados de livro
Interpretação Os dados apresentados correspondem à busca que eu fiz
Avaliação Encontrei as informações que eu queria. Completei a tarefa 
com sucesso
Mental
Físico
Distancia e AçãoDistancia e Ação
• Dado o modelo de IHC da Engenharia Cognitiva, a 
travessia de golfos sugere que há distâncias a 
serem percorridas entre as etapas mentais e 
físicas.
Distancia e AçãoDistancia e Ação
• Golfo de execução
� O sistema oferece ações às quais correspondem às 
intenções do usuário?
o As funcionalidades disponíveis no sistema são mapemaneto 
direto das intenções do usuário?
• Golfo de avaliação
� Reflete o esforço do usuário para interpretar o estado 
físico do sistema e determinar o quão bem as 
expectativas e intenções foram alcançadas
Distancia SemanticaDistancia Semantica
• Ocorre entre 2 2 estestáágiosgios mentaismentais
� Golfo de Execução
o Dado que tenho uma intenção, quão próxima ela está das 
funcionalidades oferecidadas pelo sistema?
� Golfo de avaliação
o Dado que tenho uma interpretação da imagem do sistema,quão
próxima estou da minha meta?
Distancia SemanticaDistancia Semantica
Percepção
Execução
Interpretação
Especificação da 
seqüência de ações
Avaliação
Formulação da 
intenção
Golfo de Avaliação
Golfo de Execução
DS
Mental
Físico
Quão próxima a minha
intenção está das 
funcionalidades
oferecidadas pelo
sistema?
A partir de uma
interpretação da
imagem do 
sistema,quão
próxima estou
da minha meta?
Distancia SemanticaDistancia Semantica
Formulação da 
intenção
Quero procurar a referência completa do livro Human-
Computer Interaction, editado por Preece
Especificação da 
seqüência de ações
Devo selecionar o comando de “busca” e entrar com os 
dados que eu tenho
Execução Ativo “busca” no menu;
Digito o nome do livro no campo “Nome do livro”;
Digito o nome do autor no campo “Nome do autor”;
Seleciono “Ok”
Percepção Apareceu uma nova tela com dados de livro
Interpretação Os dados apresentados correspondem à busca que eu fiz
Avaliação Encontrei as informações que eu queria. Completei a tarefa 
com sucesso
Mental
Físico
Distancia ArticulatóriaDistancia Articulatória
• Ocorre entre um estestáágiogio mental e um mental e um ffíísicosico
� Golfo de execução
o Dado tenho um plano de ação – quão diretamente posso
executá-lo? Funcionalidade – comandos
� Golfo de avaliação
o Dado que percebo a imagem do sistema, quão fácil é atribuir a 
ela uma interpretação?
Distancia ArticulatóriaDistancia Articulatória
Percepção
Execução
Interpretação
Especificação da 
seqüência de ações
Avaliação
Formulação da 
intenção
Golfo de Avaliação
Golfo de Execução
DSDA
Mental
Físico
Distancia ArticulatóriaDistancia Articulatória
Formulação da 
intenção
Quero procurar a referência completa do livro Human-
Computer Interaction, editado por Preece
Especificação da 
seqüência de ações
Devo selecionar o comando de “busca” e entrar com os 
dados que eu tenho
Execução Ativo “busca” no menu;
Digito o nome do livro no campo “Nome do livro”;
Digito o nome do autor no campo “Nome do autor”;
Seleciono “Ok”
Percepção Apareceu uma nova tela com dados de livro
Interpretação Os dados apresentados correspondem à busca que eu fiz
Avaliação Encontrei as informações que eu queria. Completei a tarefa 
com sucesso
Mental
Físico
• Exemplos de problemas que podem acontecer 
durante a travessia dos golfos:
� Usuários podem formar um objetivo inadequado
� Usuários podem não encontrar o elemento de 
interface correto
o Por ex. um label ou icone incompreensivel
� Usuários podem não saber como especificar ou 
executar uma ação desejada
� Usuários podem receber feedback inapropriado
Teoria da Ação – Exemplo 2Teoria da Ação – Exemplo 2
Formulação da intenção Quero iniciar o processo de compra de um livro on-line
Especificação da 
seqüência de ações
Devo selecionar o comando “comprar” e entrar com os dados do 
cartao de credito
Execução Ativo botão “comprar” no site;
Digito o nome do titular no campo “Nome do titular”;
Digito o n. Cartão no campo “Numero Cartao”;
Digito o validade do Cartão no campo “Validade Cartao”;
Clicar “Finalizar”
Estado atual da interface 
sistema
Tela com dados da compra, botão “voltar para a pagina inicial”, barra de 
status com mensagem de texto “compra finalizada com sucesso”
Percepção Apareceu uma nova tela com dados do pedido e um botão “voltar 
para a pagina inicial”
Interpretação Os dados apresentados correspondem ao pedido de compra que 
eu solicitei 
Avaliação Onde está a confirmação? Não consegui comprar!!!
Vou refazer 
a compra
Compra efetuada para o sistema 
Compra não realizada para o usuário
• Se o usuário não percebeu que o sistema mudou 
de estado através de uma sinalização clara, ele 
provavelmente interpretará que nada ocorreu e 
que sua meta inicial não foi atingida…
� Distancia semantica?
� Distancia articulatória?
• Para realizar a “travessia” dos golfos, o usuário 
pode ser auxiliado pelo designer, que pode 
diminuí-los
• Para isso, o designer precisa
� Determinar quais são as ações e as estruturas de 
comandos das funções do sistema mais indicadas
� Selecionar os elementos de interface mais eficientes 
para transmitir a informação desejada
� Escolher os feedbacks mais representativos
ExercícioExercício
1. Escolha algumas telas complexas de uma 
aplicação que você utilize com freqüência e 
verifique se os princípios de Gestalt estão sendo 
bem utilizados
Caso contrário, reprojete a tela para fazer melhor 
uso desses princípios
56