1. A
IHM
Interface Humano-Máquina
Prof. Dra. Sílvia Dotta
Aula 4. IHC – Área Multidisciplinar

2. Cognição
Percepção
Semiótica
Ergonomia

3. Psicologia Cognitiva
Estuda estrutura e funcionamento da mente (atenção,
memória, aprendizagem, experiência, solução de
problemas, pensamento). Construção e avaliação com
percurso cognitivo (raciocínio dedutivo e intuitivo)
Psicologia Perceptiva
estudo da percepção (visão, audição, tato)
Semiótica
comunicação através de signos
Signo é algo que representa alguma coisa para alguém
(palavras, simbolos...), Serve para avaliar a comunicação
entre o designer e o usuário

4. Ergonomia
• A ergonomia é a disciplina relacionada ao entendimento
das interações entre seres humanos e outros elementos
de um sistema
• É a capacidade que um sistema interativo oferece ao
usuário em determinado contexto de operação, para
realizar tarefas (ação) de maneira eficaz, eficiente e
agradável (usabilidade)
• Um problema de ergonomia é identificado quando um
aspecto da interface está em desacordo com as
características dos usuários e da maneira pela qual ele
realiza sua tarefa.

5. Entendendo os mecanismos da percepção...
• Do ponto de vista cognitivo, a percepção envolve os
processos mentais, a memória e outros aspectos que
podem influenciar na interpretação dos dados
percebidos.
• Como os sinais externos que chegam aos nossos
órgãos sensoriais são convertidos em experiências
perceptuais significativas?
5

6. cecilia@ic.unicamp.br – II
Workshop de Engenharia de
6
Software UNESP Bauru

7. Degradando a imagem...
7
degrada-se a imagem completamente
tornando a interpretação difícil
Foto de R.C.James

8. O surrealistas violam intencionalmente as regras da
construção da percepção

9. Confundindo a interpretação
• Uma imagem pode ser ambígua por falta de
informação relevante ou por excesso de
informação irrelevante
9

10. Colocando organizações competitivas...
colocam-se organizações competitivas, 10
tornando possível o conflito de interpretações
da mesma imagem
M C Escher, Cavaleiros

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

12. 12

14. “Figuras Impossíveis”
• As partes individualmente conflitam na interpretação global
• Não lidamos com as coisas isoladamente...
• Quando informação sensorial é colocada junto, uma imagem
consistente do mundo deve ser produzida...
14

15. 15

16. Abordagens Teóricas de IHC
• fundamentos de base psicológica, etnográfica e semiótica:
• leis de Hick-Hyman e de Fitts
• processador humano de informação
• princípios da Gestalt
• engenharia cognitiva
• abordagens etnometodológicas
• teoria da atividade
• cognição distribuída
• engenharia semiótica

17. Lei de Hick-Hyman
• relaciona o tempo que uma pessoa leva para tomar uma
decisão com o número de possíveis escolhas que ela possui

18. Lei de Hick-Hyman
• relaciona o tempo que uma pessoa leva para tomar uma
decisão com o número de possíveis escolhas que ela possui
Em qual alternativa é
mais rápido localizar
um estado que você
não conhece?
Por quê?
ordem alfabética ordem por região
(Norte, Nordeste, ...)

19. Lei 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 da pessoa e esse objeto-alvo

20. Lei de Fitts – exemplos em IHC
Em qual alternativa é
mais rápido alcançar o
botão salvar? Por quê?
Em qual alternativa é
mais rápido alcançar o
menu? Por quê?
menu no topo da tela, menu no topo da janela,
como no MAC OS como no Windows

21. Processador Humano de Informação

22. Princípios de Gestalt (1/2)
22
• proximidade: as entidades visuais que estão
próximas umas das outras são percebidas
como um grupo ou unidade;
• boa continuidade: traços contínuos são
percebidos mais prontamente do que
contornos que mudem de direção
rapidamente;
• simetria: objetos simétricos são mais
prontamente percebidos do que objetos
assimétricos;

23. Princípios de Gestalt (2/2)
23
• similaridade: objetos semelhantes são
percebidos como um grupo;
• destino comum: objetos com a mesma
direção de movimento são percebidos
como um grupo;
• fecho: a mente tende a fechar contornos
para completar figuras regulares,
“completando as falhas” e aumentando a
regularidade

24. Engenharia Cognitiva (1/11)
• mundo psicológico X mundo físico

25. Engenharia Cognitiva (2/11)
• controle da temperatura e fluxo de água na torneira
• problemas de mapeamento (a): Qual é o controle de água quente
e qual é o de água fria? De que maneira cada controle deve ser
girado para aumentar ou reduzir o fluxo da água?
• dificuldade de controle (b): Para aumentar a temperatura da água
mantendo o fluxo constante, é necessário manipular
simultaneamente as duas torneiras.
• dificuldade de avaliação (c): Quando há dois bicos de torneira, às
vezes se torna difícil avaliar se o resultado desejado foi alcançado.

26. Engenharia Cognitiva (3/11)
• controle da temperatura e fluxo de água na torneira
problemas de mapeamento,
dificuldade de controle,
dificuldade de avaliação

27. Engenharia Cognitiva (4/11)
• definição de cor via componentes [Red, Green e Blue] ou
[Hue (matiz), Saturation , Luminance]
problemas de mapeamento das componentes RGB e HSL
dificuldade de controle das componentes HSL
dificuldade de avaliação,
pois não se vê a cor definida

28. Engenharia Cognitiva (5/11)
• definição de cor via componentes [Red, Green e Blue] e
[Hue (matiz), Saturation , Luminance]
reduz problemas de
mapeamento e
dificuldade de controle das
componentes RGB e HSL

29. Engenharia Cognitiva (6/11)
• Teoria da Ação - golfos
variáveis variáveis
psicológicas distância entre e controles
físicos

30. Engenharia Cognitiva (7/11)
• Teoria da Ação – travessia dos golfos

31. Engenharia Cognitiva (8/11)
• Teoria da Ação – travessia dos golfos
• estabelecimento do objetivo: mudar a cor de fundo do retângulo selecionado
• formulação da intenção: definir uma cor verde oliva com os valores R=85,
G=107, B=47
• especificação das ações:
1. acionar o item de menu Formatar > Cor de fundo
2. informar o valor 85 para a componente R
3. informar o valor 107 para a componente G
4. informar o valor 47 para a componente B
5. confirmar a cor definida pelos valores informados
• execução: ação #1 - acionar o item de menu Formatar > Cor de fundo
• percepção: observou que apareceu uma janela de diálogo
• interpretação: o título da janela de diálogo é “Selecionar cor” e há controles
de definição de cada componente de cor individual
• avaliação: me aproximei do meu objetivo.
A especificação de ações parece correta e portanto posso prosseguir para o
próximo passo.
• continua...

32. Engenharia Cognitiva (9/11)
• Teoria da Ação – travessia dos golfos
• execução: ação #2 - informar o valor 85 para a componente R, digitando esse
valor na caixa de texto correspondente
• percepção: o valor na caixa de texto correspondente à componente R mudou,
assim como a cor da imagem de pré-visualização
• interpretação: o novo valor corresponde ao valor digitado
• avaliação: me aproximei do meu objetivo. A especificação de ações parece
correta e portanto posso prosseguir para o próximo passo.
• execução: ação #3 - informar o valor 107 para a componente G, digitando
esse valor na caixa de texto correspondente
• percepção: o valor na caixa de texto correspondente à componente G
mudou, assim como a cor da imagem de pré-visualização
• interpretação: o novo valor corresponde ao valor digitado
• avaliação: me aproximei do meu objetivo.
A especificação de ações parece correta e portanto
posso prosseguir para o próximo passo.
• continua...

33. Engenharia Cognitiva (10/11)
• Teoria da Ação – travessia dos golfos
• execução: ação #4 - informar o valor 47 para a componente B, digitando esse
valor na caixa de texto correspondente
• percepção: o valor na caixa de texto correspondente à componente B mudou,
assim como a cor da imagem de pré-visualização
• interpretação: o novo valor corresponde ao valor digitado e a cor da imagem
de pré-visualização corresponde à cor desejada
• avaliação: me aproximei do meu objetivo. A especificação de ações parece
correta e portanto posso prosseguir para o próximo passo.
• execução: ação #5 (confirmar a cor definida pelos valores informados,
clicando em OK)
• percepção: a janela de diálogo foi ocultada; a cor do retângulo mudou
• interpretação: a nova cor do retângulo é verde oliva
• avaliação: alcancei meu objetivo

34. Engenharia Cognitiva (11/11)
• Modelos da engenharia cognitiva
• O usuário deve ser capaz de elaborar um modelo conceitual
compatível com o modelo de design através da sua interação com
a imagem do sistema. Para isso, o designer deverá produzir uma
imagem de sistema explícita, inteligível e consistente com seu
modelo de design.

35. Abordagens Etnometodológicas
• enfatizam as influências entre contexto físico e sociocultural e
o uso de sistemas computacionais interativos
• algumas das principais iniciativas
• ações situadas (Suchman) × ações planejadas (Norman)
• análise da conversação entre pessoas
• estudo da comunicação usuário-sistema
• estudos de campo no trabalho, em casa, em movimento etc.

36. Teoria da Atividade (1/3)
A atividade é realizada através de ações conscientes
direcionadas a objetivos do sujeito. As ações são realizadas
através de operações inconscientes, disparadas pela
estrutura da atividade e as condições do ambiente.

37. Teoria da Atividade (2/3)
• a atividade humana possui três características básicas:
• é dirigida a um objeto material ou ideal;
• é mediada por artefatos;
• é socialmente constituída dentro de uma cultura.

38. Teoria da Atividade (3/3)
• alguns pontos abordados em IHC
• análise e design de uma prática de trabalho específica,
considerando as qualificações, o ambiente de trabalho, a divisão
de trabalho e assim por diante;
• análise e design com foco no uso real e na complexidade da
atividade multiusuário e, em particular, na noção essencial do
artefato como mediador da atividade humana;
• o desenvolvimento da experiência e do uso em geral;
• a participação ativa do usuário no design, e foco no uso como
parte do design.

39. Cognição Distribuída (1/2)
• amplia a semântica de cognitivo para abranger as interações
entre pessoas, recursos e materiais no ambiente

40. Cognição Distribuída (2/2)
• descreve o contexto da atividade, os objetivos do sistema funcional
e seus recursos disponíveis;
• identifica as entradas e saídas do sistema funcional;
• identifica as representações e processos disponíveis;
• identifica as atividades de transformação que ocorrem durante a
resolução de problemas para atingir o objetivo do sistema
funcional.

41. Engenharia Semiótica (1/7)
• caracteriza a interação humano-computador como um caso
particular de comunicação humana mediada por sistemas
computacionais
• foco na comunicação entre designers, usuários e sistemas

42. Engenharia Semiótica (2/7)
• investiga processos de comunicação em dois níveis distintos:
• a comunicação direta usuário–sistema e
• a metacomunicação do designer para o usuário mediada pelo
sistema, através da sua interface.

43. Engenharia Semiótica (3/7)
• paráfrase da metamensagem:
Este é o meu (designer) entendimento de quem você
(usuário) é, do que aprendi que você quer ou precisa
fazer, de que maneiras prefere fazer, e por quê. Este,
portanto, é o sistema que projetei para você, e esta é
a forma como você pode ou deve utilizá-lo para
alcançar uma gama de objetivos que se encaixam
nesta visão.

44. Engenharia Semiótica (4/7)
• espaço de design de IHC
• quem é o emissor (designer)? Que aspectos das limitações,
motivações, crenças e preferências do designer devem ser
comunicados ao usuário para o benefício da metacomunicação;
• quem é o receptor (usuário)? Que aspectos das limitações,
motivações, crenças e preferências do usuário, tal como
interpretado pelo designer, devem ser comunicados aos usuários
reais para que eles assumam seu papel como interlocutores do
sistema;

45. Engenharia Semiótica (5/7)
• espaço de design de IHC
• qual é o contexto da comunicação? Que elementos do contexto
de interação — psicológico, sociocultural, tecnológico, físico etc.
— devem ser processados pelo sistema, e como;
• qual é o código da comunicação? Que códigos computáveis
podem ou devem ser utilizados para apoiar a metacomunicação
eficiente, ou seja, qual deve ser a linguagem de interface;

46. Engenharia Semiótica (6/7)
• espaço de design de IHC
• qual é o canal? Quais canais de comunicação estão disponíveis
para a metacomunicação designer–usuário, e como eles podem
ou devem ser utilizados;
• qual é a mensagem? O que o designer quer contar aos usuários,
e com que efeito, ou seja, qual é a intenção comunicativa do
designer.

47. Engenharia Semiótica (7/7)
objetivo do designer
produzir + introduzir
o sistema interativo para os usuários através da interface

48. Relembrando Affordance

49. Affordances (todas as possibilidades de ação
(acesso) latente no ambiente)
• Objetos físicos possuem affordances
• Uma pedra pode ser movida, rolada, chutada, atirada, usada para
nos sentarmos...
• Não todas as pedras, apenas aquelas no tamanho certo para
mover, rolar, chutar, atirar, sentar sobre.
• O conjunto de possíveis ações [relativas ao sujeito] é
chamado de “affordance” do objeto
49

50. Affordance não é uma propriedade do
objeto,
• É uma relação estabelecida entre o objeto e o
organismo que age sobre o objeto.
• O conceito foi criado por J. Gibson em sua teoria
sobre a percepção humana
• Norman estendeu o termo à aplicação em design
• Affordances “percebidas” contam ao usuário que
ações devem ser realizadas sobre um objeto e como
realizá-las (até certo ponto)
• São o que determina a usabilidade do objeto
50

51. Affordance em Design
51
www.baddesigns.com

52. Affordance em Design
52
www.baddesigns.com

53. 53
www.baddesigns.com

54. 54
cecilia@ic.unicamp.br – II Workshop de www.baddesigns.com
Engenharia de Software UNESP Bauru

55. Torneiras com sensor eletrônico de movimento
55

56. Design Universal
56

57. Como
“ajustar”
cadeiras?

58. Como ajustar uma cadeira?
O ajuste da altura do assento
é feito por uma complicada
combinação de uma alavanca
que deve ser puxada com
uma mão e a utilização da
outra mão para puxar o
assento para cima e o pé
para segurar as rodas da
cadeira.

59. 1 - Situação : Ajustar a
altura da cadeira
O usuário tenta abaixar ou
levantar a cadeira enquanto está
sentado, mexendo na alavanca.
Problema: o usuário puxa e
empurra a alavanca porém a cadeira
não se move.

60. Procedimento correto
Para se abaixar a cadeira,
deve-se levantar a alavanca e
a cadeira ao mesmo tempo e
depois empurrá-la.
Para levantar a cadeira, deve-
se puxar com força o assento,
segurando com o pé as rodas
da cadeira.

61. Galão de água
Remoção da tampa
Fatores
• Tampa extremamente rígida e de difícil remoção;
• Nenhuma estrutura auxiliar para ajudar a remoção da tampa.
“Erros” esperados
• A pessoa precisará, obrigatoriamente utilizar de um instrumento
cortante, como uma faca - que não foi desenhada especificamente para
este tipo de uso, podendo ocasionar acidentes;
• Dependendo do instrumento utilizado, pode-se contaminar a água.

62. Galão de água
Colocação do galão no bebedouro
Fatores
• Peso elevado do galão;
• Tampa necessariamente aberta antes da colocação.
“Erros” esperados
• É praticamente impossível virar o galão com sua tampa aberta e seu
peso sem deixar a água cair;
• Não é raro a pessoa deixar o galão cair neste momento, fazendo aquela
aguaceira quando o galão “explode” no chão.

63. Como ajustar o relógio?

66. Paradoxo da Tecnologia
• Sempre que o número de funções excede o número de
controles, o design torna-se arbitrário e não natural, e
complicado.
• A mesma tecnologia que simplifica a vida provendo um
maior número de funcionalidades em um objeto,
também a complica tornando-a muito mais difícil de
aprender e usar

67. Quantos produtos interativos existem em nossa
vida cotidiana?

68. Design de Interfaces
Observar e analisar as características de design do ambiente
cotidiano é um modo de desenvolver uma sensibilidade ao
mundo desenhado em que vivemos e trabalhamos
Sistemas computacionais poderão facilitar a atividade e
experiência humana somente quando requisitos sociais e
cognitivos dirigirem o processo de design

69. Lembrando das gerações…
Mainframe PC Internet
1950 1980 2000
O Computador como O computador como O Computador
Ferramenta Ferramenta Cognitiva como Mídia
Para automatizar Para estender a
tarefas humanas capacidade humana
Semiótica
comunicação

70. Relembrando os princípios…
O primeiro princípio do design de interfaces, tanto para
uma maçaneta quanto para um computador, é manter
em mente o ser humano que quer usá-la. A tecnologia é
um meio àquele objetivo.
…. Mais ênfase em design centrado no usuário. Menos em
tecnologia; mais nas pessoas, e grupos, e interações
sociais. E tarefas. (Norman, D)

71. Objetivos de IHM
• Produzir sistemas usáveis, seguros e
funcionais
• Desenvolver ou melhorar a
segurança, utilidade, efetividade e
USABILIDADE de sistemas
computacionais

72. Aceitabilidade de um Sistema

73. Para próxima aula
Atividade individual: Escrevendo o artigo
Agora que você já está familiarizado com o seu tema, você deve
iniciar a atividade de escrita de seu artigo. Comece
escrevendo um texto de no máximo 5 (cinco) linhas
discorrendo sobre o objetivo de seu trabalho. Continue seu
texto apresentando uma justificativa para o seu trabalho. A
justificativa deve ser teórica e prática. Utilize fontes
bibliográficas que auxiliem a compreensão de sua justificativa.
Este texto deve ser publicado no Fórum do grupo IHC em
Convergência.
Para atingir seu objetivo, você vai precisar ampliar a pesquisa
bibliográfica. Visite os artigos publicados por seus colegas,
pesquise outros artigos na internet, procure livros sobre o
assunto.

74. Para próxima aula
Atividade em grupo: Projeto de interface
Agora que vocês já têm uma análise aprofundada dos sistemas
estudados, é o momento de iniciar o seu projeto. Preparem
um descritivo do seu projeto. Este descritivo deve conter:
Título
Resumo da interface: o que é?
Atividades: para que serve? Que atividades serão realizadas com
essa interface?
Contextos de uso: espaço, tempo.
Usuários: quem são os usuários? Quais suas características?
Preferências?