t picos em interface humano computador n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Tópicos em Interface Humano-Computador PowerPoint Presentation
Download Presentation
Tópicos em Interface Humano-Computador

Loading in 2 Seconds...

play fullscreen
1 / 76

Tópicos em Interface Humano-Computador - PowerPoint PPT Presentation


  • 110 Views
  • Uploaded on

Tópicos em Interface Humano-Computador. M. Cecilia C. Baranauskas Instituto de Computação UNICAMP. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Tópicos em Interface Humano-Computador' - dai


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
t picos em interface humano computador

Tópicos em Interface Humano-Computador

M. Cecilia C. Baranauskas

Instituto de Computação UNICAMP

agenda
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 Bauru

ihc hci chi
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 Bauru

d cada de 90 integra o de ihc na ci ncia da computa o
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 Bauru

algumas aplica es
Algumas aplicações

InternetWeb page design / E-commerce / E-government

IntranetAspectos organizacionais e sociais

TV Interativa Novas formas de interação (nova mídia)

Dispositivos MóveisAcesso 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 Bauru

demanda por ihc
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 specialistsHuman Factors (defence, transportation, mobile devices)

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

uma coisa que me faz
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 Bauru

slide8

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 Bauru

slide9

Imagine como este problema pode crescer!

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

slide10

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 Bauru

slide11

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 Bauru

slide12

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 Bauru

ms word 2000
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

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

slide14
Pine ?

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

website ig
Website Ig ?

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

intera o humano computador
Interação Humano-Computador

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

um modelo inicial do usu rio de computadores
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 Bauru

o m odelo do p rocessador de i nforma o h umano

MLD

MCD/MT

MIV

MIA

PC

PP

PM

O Modelo do Processador de Informação Humano
  • Memórias e Processadores
  • Princípios de Operação

Card, Moran e Newell (1983)

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

slide19
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 Bauru

o chunk
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 Bauru

recupera o da informa o na mem ria humana
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 Bauru

observando a performance de usu rios no teclado
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 Bauru

entendendo os mecanismos da percep o
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 Bauru

slide25
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 Bauru

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

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

degradando a imagem
Degradando a imagem...

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

Foto de R.C.James

slide29
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 Bauru

colocando organiza es competitivas
Colocando organizações competitivas...

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

M C Escher, Cavaleiros

salvador dal the slave market with disappearing bust of voltaire
Salvador Dalí, The Slave Market with Disappearing Bust of Voltaire

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

colocando uma organiza o sem sentido
Colocando uma organização sem sentido...

Processos perceptuais impõem uma organização à imagem....

Escaninhos ou seqüência de triângulos?

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

B. Riley, Tremor

organiza o sem sentido
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 Bauru

percep o do espa o profundidade
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 Bauru

figuras imposs veis
“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 Bauru

slide38
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 Bauru

anomalias da percep o
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 Bauru

efeito posterior
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 Bauru

slide43

Paralaxe do Movimento

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

ihc como uma ci ncia de design
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 Bauru

a tecnologia centrada na m quina
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 Bauru

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

Visão orientada à Máquina

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

a tecnologia centrada no humano
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 Bauru

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

Visão Orientada ao Humano

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

mudan a de paradigma
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 Bauru

o qu est errado com as interfaces
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 Bauru

design centrado no usu rio
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 Bauru

affordances
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 Bauru

affordance n o uma propriedade do objeto
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 ausabilidade do objeto

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

affordance em design
Affordance em Design

www.baddesigns.com

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

affordance em design1
Affordance em Design

www.baddesigns.com

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

qual o affordance do objeto a direita
Qual o affordance do objeto a direita?

www.baddesigns.com

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

slide57

www.baddesigns.com

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

slide58

www.baddesigns.com

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

slide59

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.

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

slide61

Torneiras com sensor eletrônico de movimento

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

design universal
Design Universal

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

design universal na web
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 Bauru

acessibilidade
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 Bauru

acessibilidade1
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 Bauru

acessibilidade2
Acessibilidade?

Para quem utiliza o navegador Internet Explorer 6.0 com asimagens desabilitadas...

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

imaginem quem tem que utilizar um leitor de tela
Imaginem quem tem que utilizar um leitor de tela...

Para quem utiliza onavegador textualLynx, ...

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

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

desenvolvimento iterativo e a natureza do design
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 Bauru

slide69
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 Bauru

entendendo a evolu o

1950

1980

2000

Entendendo a evolução...

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 Bauru

slide71

1950

1980

2000

Mainframe

PC

Internet

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

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

agenda de pesquisa
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 Bauru

slide73

Domínios

Biodiversidade

Área Militar

Prefeituras

Agricultura

Logística

Aplicação

SIG

SIG Web

Banco de

Dados

ArcView GIS

MapObjects

Qualidade em Interface SIGWEB

Juliano Schimiguel

Doutorando

Cláudio M. Zaina

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

slide74

Representação/Visualização de Resultados de Motores de Busca

Cláudio M. Zaina

Mestrando

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

slide75

Collabs CSCL

Aprendizado Colaborativo Mediado por Computador (Marcos Borges, Doutor 2004)

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

slide76
Obrigada ;)

M. Cecilia C. Baranauskas

cecilia@ic.unicamp.br

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