Post on 05-Jan-2016
description
Tópicos em Interface Humano-Computador
M. Cecilia C. Baranauskas
Instituto de Computação UNICAMP
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru2
Agenda
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
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru3
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)
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru4
Década de 90: Integração de IHC na
Ciência da Computação 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
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru5
Algumas aplicaçõesInternet
Web page design / E-commerce / E-governmentIntranet
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 DigitaisAcesso rápido e fácil à informação
…
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru6
Demanda por IHCMotorola – 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 specialistsHuman Factors (defence, transportation, mobile devices)
…
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru7
Uma Coisa que me faz
Sublinhado vermelho para indicar erros de grafia
Esforço zero do usuário para checagem
Aumenta possibilidade de aprender ?
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru8
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.
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru9
Imagine como este problema pode crescer!
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru10
Senha no Macintosh: Problema com caixa-alta ativa
Aplicativo alerta o usuário quanto ao possível esquecimento da 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.
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru11
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 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;
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru12
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 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.
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru13
MS Word 2000 ?
MS Word 2000 com as seguintes barras de ferramentas MS Word 2000 com as seguintes barras de ferramentas visíveis: padrão, formatação, auto texto, banco de dados, visíveis: padrão, formatação, auto texto, banco de dados, caixa de ferramentas de controle, desenho, ferramentas caixa de ferramentas de controle, desenho, ferramentas da web, figuras, formulário, moldura, revisão, tabelas e da web, figuras, formulário, moldura, revisão, tabelas e bordas, visual basic, web, word artbordas, visual basic, web, word art
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru14
Pine ?
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru15
Website Ig ?
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru16
Interação Humano-Computador
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru17
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) 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
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru18
O Modelo do Processador de Informação Humano
Memórias e Processadores Princípios de Operação
PPPC
PM
MLD
MCD/MTMIAMIV
Card, Moran e Newell (1983)
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru19
Eventos perceptuais que ocorrem dentro de um único ciclo são combinados em um único perceptum - impressão mental percebida pelos sentidos
Cheatham e Whote (1954). Os sujeitos ouvem o número correto, quando os estalidos são apresentados 10/segundo (1 para cada tp)
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru20
O chunk
Função do usuário e da tarefa...ativação de sua MLD
HSICAUIMPW
IHCUSAWIMP
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru21
Recuperação da Informação na memória humana...
umcd = 7 [5~9] chunks Lembrando palavras de uma lista...
Ganzer e Cunitz (1966)
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru22
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: 1000ms para o novato e 60ms para o experto
Datilografia em teclado alfabético 8% mais lenta do que teclado qwerty (Sholes)
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru23
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru24
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?
“truques” que revelam o fenômeno humano da percepção
Nossos “erros” são reveladores...
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru25
Como?
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
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru26
O surrealistas violam intencionalmente as regras da construção da percepção
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru27
Degradando a imagem...
Foto de R.C.James
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru29
Uma imagem pode ser ambígua por falta de informação relevante ou por excesso de informação irrelevante
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru30
Colocando organizações competitivas...
M C Escher, Cavaleiros
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru31
Salvador Dalí, The Slave Market with Disappearing Bust of Voltaire
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru32
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru33
Colocando uma organização sem sentido...
Processos perceptuais impõem
uma organizaçã
o à imagem....
B. Riley, TremorEscaninhos ou seqüência de triângulos?
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru34
Organização sem sentido...
A interpretação da imagem visual é realizada pela segregação de grupos que tenham forma similar Estes são tratados como unidades ou “pontos
focais” Um tipo de “quebra” no padrão repetitivo
A organização é flutuante Uma forma ou outra pode ser observada...
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru35
Percepção do Espaço - Profundidade
Vivemos e nos movemos em um mundo 3D... Nosso aparato visual evoluiu de forma a criar
uma representação 3D no que vê
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru36
“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...
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru37
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru38
Que informação o sistema nervoso extrai dos sinais que chegam dos órgãos sensoriais? olhar as anomalias da percepção
Receptores de uma parte da imagem visual são afetados pela operação de receptores para partes vizinhas
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru39
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
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru40
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru41
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
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru42
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru43
Paralaxe do Movimento
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru44
IHC como uma ciência de design
O caminho de uma formiga atravessando uma praia… Simon em The Sciences of the Artificial
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.
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru45
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
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru46
Visão orientada à Máquina
Pessoas são: vagas desorganizadas distraíveis emocionais ilógicas
Máquinas são: precisas organizadas não distraíveis não emocionais lógicas
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru47
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
o poder caminha em direção aos mais avançados tecnologicamente...
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru48
Visão Orientada ao Humano Pessoas são:
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
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru49
Mudança de Paradigma
“Science Finds, Industry Applies, Man Conforms”
“People Propose, Science Studies,Technology Conforms” (D. Norman, 1993)
?
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru50
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. A Tecnologia deve ser subserviente a essa
meta...
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru51
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...
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru52
Affordances
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
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru53
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 realiza-las (até certo ponto)
São o que determina a usabilidade do objeto
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru54
Affordance em Design
www.baddesigns.com
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru55
Affordance em Design
www.baddesigns.com
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru56
Qual o affordance do objeto a direita?
www.baddesigns.com
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru57www.baddesigns.com
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru58www.baddesigns.com
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru59
O ajuste da altura do O ajuste da altura do assento é feito por uma assento é feito por uma complicada combinação de complicada combinação de uma alavanca que deve ser uma alavanca que deve ser puxada com uma mão e a puxada com uma mão e a utilização da outra mão para utilização da outra mão para puxar o assento para cima e puxar o assento para cima e o pé para segurar as rodas da o pé para segurar as rodas da cadeira.cadeira.
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru60
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru61
Torneiras com sensor eletrônico de movimento
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru62
Design Universal
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru63
Design Universal na Web ?!Para quem utiliza o navegador Internet Explorer 6.0 em sua configuração padrão, parece que sim.
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru64
Acessibilidade ?Para quem utiliza o navegador Internet Explorer 6.0 com o texto ampliado ...
Único texto ampliado
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru65
Acessibilidade?Para quem utiliza o navegador Internet Explorer 6.0 com a janela redimensionada, nem tanto!
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru66
Acessibilidade?Para quem utiliza o navegador Internet Explorer 6.0 com as imagens desabilitadas...
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru67
Imaginem quem tem que utilizar um leitor de tela...
Para quem utiliza o navegador textual Lynx, ...
?? ? ?
? ???
? ? ?? ??
? ?
?
?? ? ?
? ? ?? ? ?
?? ? ?
? ? ?? ? ?
? ? ?? ? ?
? ?
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru68
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 design participativo, design contextual, práticas etnográficas
efetividade financeira (custos)
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru69
Ferramentas de comunicação e atividades colaborativas novos paradigmas para educação,
trabalho e lazer 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
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru70
Entendendo a evolução...
1950 1980 2000
Computadores para o especialista
Perspectiva Centrada na Máquina
Computadores integrados ao trabalho humano
Perspectiva Centrada no Usuário
Computadores integrados à vida
Perspectiva Centrada na Comunicação ?
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru71
O Computador como Ferramenta
Para automatizar tarefas humanas
O computador como Ferramenta Cognitiva
Para estender a capacidade humana
O Computador como Mídia
Semiótica
1950 1980 2000
Mainframe PC Internet
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru72
Agenda de Pesquisa
Ambientes Inclusivos Design Universal e Acessibilidade
Semiótica Semiótica Organizacional
Processos, Métodos e Artefatos fronteira entre IHC e Engenharia de Software
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru73
Cláudio M. Zaina
Aplicação
Domínios
Área M
ilitar
Biodiversidade
Prefeitu
ras
Logística
Agricultu
ra
SIG
Banco de Dados
SIG Web
MapObjectsArcView GIS
Juliano Schimiguel
Doutorando
Qualidade em Interface SIGWEB
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru74
Cláudio M. Zaina
Mestrando
Representação/Visualização de Resultados de Motores de Busca
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru75
Collabs CSCL
Aprendizado Colaborativo Mediado por Computador (Marcos Borges, Doutor 2004)
cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru76
Obrigada ;)
M. Cecilia C. Baranauskas
cecilia@ic.unicamp.br