Tópicos em Interface
Humano-Computador
M. Cecilia C. Baranauskas
Instituto de Computação
UNICAMP
Agenda






2
O que é IHC? Porquê estudar IHC?
Interfaces que nos fazem
ou
Os lados da Interação HC
Modelo de Usuário – Fatores Humanos
IHC como Ciência de Design
Entendendo a Evolução em IHC
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
IHC/HCI/CHI
Human-Computer Interaction is a discipline
concerned with the design, evaluation and
implementation of interactive computer
systems for human use and with the study of
major phenomena surrounding them
(ACM SIGCHI, 1992, p.6)
3
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Década de 90: Integração de IHC na
Ciência da Computação




4
1988 ACM enumera IHC como uma das
9 áreas centrais da CC
1991 ACM e IEEE recomendam a
inclusão de IHC nos curriculo de CC
1997 incluída como uma das 10
seções do Handbook of Computer
Science and Engineering
departamentos de CC incorporam IHC
como área de pesquisa
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Algumas aplicações
Internet
Web page design / E-commerce / E-government
Intranet
Aspectos organizacionais e sociais
TV Interativa
Novas formas de interação (nova mídia)
Dispositivos Móveis
Acesso em tempo real, tela pequena & alta
densidade
Kiosk & Bibliotecas Digitais
Acesso rápido e fácil à informação
…
5
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Demanda por IHC
Motorola – Research Engineers Usability & Human Factors
“… to investigate multimedia user requirements, interactions and interfaces,
taking an application-focused approach… The position will involve
fundamental human factors research, prototype design, implementation and
evaluation”
Microsoft – Usability Engineer
“Candidates should have a thorough knowledge of methods for gathering
usability data and be able to plan usability work in conjunction with the
product team and provide a user focus for the teams. The candidate must be
self sufficient and capable of leading the usability effort for a product with
millions of users in a highly competitive and complex environment.”
Buscas rápidas (8 Oct 2003)
Usability/Accessibility/HCI specialists
Human Factors (defence, transportation, mobile devices)
…
6
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Uma Coisa que me faz
Sublinhado
vermelho
para indicar erros
de grafia
Esforço zero do
usuário para
checagem
Aumenta
possibilidade de
aprender ?
7
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Deslocamento de toda linha de guias quando
uma delas é selecionada
 Seleção de uma das guias faz com que as demais guias da
mesma linha sejam deslocadas para o primeiro nível;
 Esforço
perceptual a cada acesso para recuperação das
posições a acessar;
 Solução:
deslocamento da guia de interesse pela permuta
com outra, da mesma coluna.
8
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Imagine como este problema pode
crescer!
9
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Senha no Macintosh: Problema com caixa-alta ativa
 Aplicativo alerta o usuário quanto ao possível esquecimento da



10
tecla Caps Lock ativada;
Mensagem bastante útil na medida em que este é um erro muito
comum de percepção, ou da falta dela;
Recurso fácil de ser implementado e auxilia o usuário a
perceber uma possível fonte de erro, evitando perda do seu
tempo ou bloqueio de acesso;
Recurso funciona como uma memória externa do usuário.
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Padrão Windows: Pré-visualização de imagem
 Recurso não demanda esforço de memória na identificação do
arquivo que deseja acessar;
 Evita necessidade de saber ou memorizar nome dentre um

11
conjunto disponível. Abstração, transparência de nomes,
acesso às imagens.
Possibilita acesso a arquivos que usuário desconhece. Ex.:
busca por figura para ilustração;
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Padrão Windows: Guia de documentos recentes
 Recurso facilita acesso aos arquivos recentemente utilizados
reduzindo o esforço de memória;
 Funciona como “memória adicional” na identificação do local de

12
armazenamento e nome do arquivo que usuário deseja
acessar;
Reduz o esforço de percepção pois somente apresenta ao
usuário arquivos que possam ser acessados pelo aplicativo.
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
MS Word 2000 ?
MS Word 2000 com as seguintes barras de ferramentas
visíveis: padrão, formatação, auto texto, banco de dados,
caixa de ferramentas de controle, desenho, ferramentas
da web, figuras, formulário, moldura, revisão, tabelas e
bordas, visual basic, web, word art
13
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Pine ?
14
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Website Ig ?
15
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Interação Humano-Computador
16
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Um Modelo Inicial do Usuário de
Computadores

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)




17
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
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
O Modelo do Processador de
Informação Humano


Memórias e Processadores
Princípios de Operação MLD
MIV
MIA
MCD/MT
PC
PP
PM
Card, Moran e Newell (1983)
18
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Eventos perceptuais que ocorrem dentro
de um único ciclo são combinados em um
único perceptum
- impressão mental percebida pelos sentidos

19
Cheatham e
Whote (1954).
Os sujeitos
ouvem o número
correto, quando
os estalidos são
apresentados
10/segundo (1
para cada tp)
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
O chunk

Função do usuário e da tarefa...
ativação de sua MLD
HSICAUIMPW
IHCUSAWIMP
20
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Recuperação da Informação na memória
humana...


umcd = 7 [5~9] chunks
Lembrando palavras de uma lista...
Ganzer e Cunitz (1966)
21
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Observando a performance de
usuários no teclado...

Quão rápido pode-se pressionar
determinada tecla repetitivamente com o
mesmo dedo?
tm (pressionar) + tm(soltar) = 140ms/toque

Resultados experimentais:


22
1000ms para o novato e 60ms para o experto
Datilografia em teclado alfabético 8% mais lenta
do que teclado qwerty (Sholes)
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
23
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Entendendo os mecanismos da
percepção...

 entender os processos psicológicos em
operação e as redes neurais envolvidas

Como os sinais externos que chegam aos
nossos órgãos sensoriais são convertidos em
experiências perceptuais significativas?


24
“truques” que revelam o fenômeno humano da
percepção
Nossos “erros” são reveladores...
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Como?



25
degrada-se a imagem completamente
tornando a interpretação difícil
colocam-se organizações competitivas,
tornando possível o conflito de
interpretações da mesma imagem
coloca-se uma organização sem sentido
para ver como a experiência passada
afeta o processo
[email protected] – II Workshop de Engenharia de Software UNESP Bauru

26
O surrealistas violam intencionalmente as
regras da construção da percepção
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Degradando a imagem...
27
Foto de R.C.James
[email protected] – II Workshop de Engenharia de Software UNESP Bauru

29
Uma imagem pode ser ambígua por falta
de informação relevante ou por excesso
de informação irrelevante
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Colocando organizações
competitivas...
M C Escher, Cavaleiros
30
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Salvador Dalí, The Slave Market with Disappearing
Bust of Voltaire
31
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
32
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Colocando uma organização sem
sentido...
Processos
perceptuais
impõem
uma
organização
à imagem....
B. Riley, Tremor
33
Escaninhos ou seqüência de triângulos?
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Organização sem sentido...

A interpretação da imagem visual é
realizada pela segregação de grupos que
tenham forma similar



A organização é flutuante

34
Estes são tratados como unidades ou “pontos
focais”
Um tipo de “quebra” no padrão repetitivo
Uma forma ou outra pode ser observada...
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Percepção do Espaço Profundidade

Vivemos e nos movemos em um mundo
3D...

35
Nosso aparato visual evoluiu de forma a criar
uma representação 3D no que vê
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
“figuras impossíveis”


As partes individualmente conflitam na
interpretação global
Não lidamos com as coisas
isoladamente...

36
Quando informação sensorial é colocada
junto, uma imagem consistente do mundo
deve ser produzida...
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
37
[email protected] – II Workshop de Engenharia de Software UNESP Bauru

Que informação o sistema nervoso extrai
dos sinais que chegam dos órgãos
sensoriais?


38
olhar as anomalias da percepção
Receptores de uma parte da imagem
visual são afetados pela operação de
receptores para partes vizinhas
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
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
39
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
40
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Efeito Posterior

O efeito das cores

Células neuronais são emparelhadas de
modo que células que respondem de um
modo são conectadas a células que
respondem do modo complementar
Suponha que o olho focalize determinada cor
 Por fadiga, células para essa cor perdem a
habilidade de responder
 Se o olho focaliza a luz branca, a cor
complementar responde normalmente, enquanto a
resposta à cor focalizada é inibida

41
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
42
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Paralaxe do
Movimento
43
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
IHC como uma ciência de design

O caminho de uma formiga atravessando
uma praia… Simon em The Sciences of the Artificial


44
a estrutura do comportamento da formiga é
derivado principalmente da praia
A tecnologia que o homem cria tem papel
fundamental na estruturação do
comportamento e experiência humanos.
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
A Tecnologia Centrada na
Máquina

“Science Finds, Industry Applies, Man
Conforms” *


75% dos acidentes aéreos são atribuídos
a “erro do piloto”
alto índice de erro humano nas indústrias

objetos desenhados do ponto de vista da
máquina

confundem, alteram as relações sociais normais
* Chicago Fair, 1933
45
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Visão orientada à Máquina

Máquinas são:





46
precisas
organizadas
não distraíveis
não emocionais
lógicas

Pessoas são:





vagas
desorganizadas
distraíveis
emocionais
ilógicas
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
A Tecnologia Centrada no
Humano

criação de artefatos que expandem
nossas capacidades

artefatos cognitivos (escrita, aritmética,
lógica, linguagem)

os artefatos da tecnologia são essenciais para
o crescimento do conhecimento humano e da
capacidade mental

47
o poder caminha em direção aos mais avançados
tecnologicamente...
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Visão Orientada ao Humano

Pessoas são:





48
criativas
flexíveis
sensíveis a mudança
imaginativas
decisões flexíveis
baseadas em
contexto

Máquinas são:





bobas
rígidas
insens. a mudança
sem imaginação
decisões consistentes
baseadas em
restrições
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Mudança de Paradigma

“Science Finds, Industry Applies, Man
Conforms”

“People Propose, Science
Studies,Technology Conforms” (D.
Norman, 1993)

?
49
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
O quê está errado com as
interfaces?

A interface é o “lugar” errado para
começar...



Cultivar sensibilidade ao design
O designer da interface é um designer de
sistema
Ter em mente o Ser Humano que quer usála.

50
A Tecnologia deve ser subserviente a essa
meta...
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Design Centrado no Usuário

o usuário deve saber o que fazer...

o usuário deve entender o que está
acontecendo...

qualquer instrução ou treinamento deve
ser necessário apenas uma vez...
51
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Affordances

Objetos físicos possuem affordances



52
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
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
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



53
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
realiza-las (até certo ponto)
São o que determina a usabilidade do objeto
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Affordance em Design
54
www.baddesigns.com
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Affordance em Design
55
www.baddesigns.com
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Qual o affordance do objeto a
direita?
56
www.baddesigns.com
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
57
www.baddesigns.com
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
58
www.baddesigns.com
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
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
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
60
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Torneiras com sensor eletrônico de movimento
61
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Design Universal
62
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Design Universal na Web ?!
Para quem
utiliza o
navegador
Internet
Explorer 6.0
em sua
configuração
padrão, parece
que sim.
63
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Acessibilidade ?
Para quem
utiliza o
navegador
Internet
Explorer 6.0
com o texto
ampliado ...
Único
texto
ampliado
64
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Acessibilidade?
Para quem
utiliza o
navegador
Internet Explorer
6.0 com a janela
redimensionada,
nem tanto!
65
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Acessibilidade?
Para quem
utiliza o
navegador
Internet
Explorer 6.0
com as
imagens
desabilitadas...
66
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Imaginem quem tem que utilizar um leitor
de tela...
?
?
?
?
?
?
?
?
?
?
67
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
Para quem
utiliza o
navegador
textual Lynx, ...
?
?
?
?
?
?
?
?
?
?
?
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Desenvolvimento iterativo e a natureza
do design

O que o diferencia da “Tentativa e erro” bem
intencionada?


Desenvolvimento iterativo é balizado por objetivos
mensuráveis: especificações de usabilidade
técnicas “low-tech” foram desenvolvidas para
participação do usuário


68
design participativo, design contextual, práticas etnográficas
efetividade financeira (custos)
[email protected] – II Workshop de Engenharia de Software UNESP Bauru

Ferramentas de comunicação e
atividades colaborativas

novos paradigmas para educação,
trabalho e lazer

69
novos desafios a IHC

sistemas computacionais poderão facilitar a
atividade e experiência humana somente
quando requisitos sociais e cognitivos
dirigirem o processo de design

“The proper study of mankind is the
science of design “ Simon
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Entendendo a evolução...
1950
1980
Computadores
para o
especialista
Computadores
integrados
ao trabalho
humano
Computadores
integrados à
vida
Perspectiva
Centrada no
Usuário
Perspectiva
Centrada na
Comunicação ?
Perspectiva
Centrada na
Máquina
70
2000
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Mainframe
1950
O Computador
como
Ferramenta
Para
automatizar
tarefas
humanas
71
PC
Internet
1980
2000
O computador
como
Ferramenta
Cognitiva
Para estender
a capacidade
humana
O Computador
como Mídia
Semiótica
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Agenda de Pesquisa

Ambientes Inclusivos


Semiótica


72
Design Universal e Acessibilidade
Semiótica Organizacional
Processos, Métodos e Artefatos fronteira
entre IHC e Engenharia de Software
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Qualidade em
Interface
SIGWEB
Domínios
Aplicação
Juliano Schimiguel
SIG
Banco de
Dados
Cláudio M. Zaina
ArcView GIS
73
Doutorando
SIG Web
MapObjects
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Representação/Visualização
de Resultados de Motores de
Busca
Cláudio M. Zaina
Mestrando
74
[email protected] – II Workshop de Engenharia de Software UNESP Bauru
Collabs CSCL
Aprendizado Colaborativo Mediado por Computador
(Marcos Borges, Doutor 2004)
75
[email protected] – II Workshop de Engenharia de Software UNESP Bauru

Obrigada ;)
M. Cecilia C. Baranauskas
[email protected]
76
[email protected] – II Workshop de Engenharia de Software UNESP Bauru