tópicos em interface humano-computador

Tópicos em Interface Humano-Computador

M. Cecilia C. Baranauskas

Instituto de Computação UNICAMP

[email protected] – 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


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)


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


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

…


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)

…


Uma Coisa que me faz

Sublinhado vermelho para indicar erros de grafia

Esforço zero do usuário para checagem

Aumenta possibilidade de aprender ?


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.


Imagine como este problema pode crescer!


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.


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;


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.


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


Pine ?


Website Ig ?


Interação Humano-Computador


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


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)


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)


O chunk

Função do usuário e da tarefa...ativação de sua MLD

HSICAUIMPW

IHCUSAWIMP


Recuperação da Informação na memória humana...

umcd = 7 [5~9] chunks Lembrando palavras de uma lista...

Ganzer e Cunitz (1966)


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)


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...


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


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


Degradando a imagem...

Foto de R.C.James


Uma imagem pode ser ambígua por falta de informação relevante ou por excesso de informação irrelevante


Colocando organizações competitivas...

M C Escher, Cavaleiros


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


Colocando uma organização sem sentido...

Processos perceptuais impõem

uma organizaçã

o à imagem....

B. Riley, TremorEscaninhos ou seqüência de triângulos?


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...


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ê


“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...


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


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


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


Paralaxe do Movimento


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.


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


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


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...


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


Mudança de Paradigma

“Science Finds, Industry Applies, Man Conforms”

“People Propose, Science Studies,Technology Conforms” (D. Norman, 1993)

?


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...


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...


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


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


Affordance em Design

www.baddesigns.com


Qual o affordance do objeto a direita?

www.baddesigns.com

[email protected] – II Workshop de Engenharia de Software UNESP Bauru57www.baddesigns.com

[email protected] – II Workshop de Engenharia de Software UNESP Bauru58www.baddesigns.com


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.


Torneiras com sensor eletrônico de movimento


Design Universal


Design Universal na Web ?!Para quem utiliza o navegador Internet Explorer 6.0 em sua configuração padrão, parece que sim.


Acessibilidade ?Para quem utiliza o navegador Internet Explorer 6.0 com o texto ampliado ...

Único texto ampliado


Acessibilidade?Para quem utiliza o navegador Internet Explorer 6.0 com a janela redimensionada, nem tanto!


Acessibilidade?Para quem utiliza o navegador Internet Explorer 6.0 com as imagens desabilitadas...


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

Para quem utiliza o navegador textual Lynx, ...

?? ? ?

? ???

? ? ?? ??

? ?

?

?? ? ?

? ? ?? ? ?

?? ? ?

? ? ?? ? ?

? ? ?? ? ?

? ?


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)


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


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 ?


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


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


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


Cláudio M. Zaina

Mestrando

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


Collabs CSCL

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


Obrigada ;)

M. Cecilia C. Baranauskas

[email protected]

tópicos em interface humano-computador

Documents