aula 4. Área multidisciplinar

A

Prof. Dra. Sílvia Dotta

Aula 4. IHC – Área Multidisciplinar

IHM Interface Humano-Máquina

CogniçãoPercepçãoSemióticaErgonomia Ergonomia

Psicologia CognitivaEstuda 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 Perceptivaestudo da percepção (visão, audição, tato)estudo da percepção (visão, audição, tato)

Semióticacomunicação através de signosSigno é algo que representa alguma coisa para alguém (palavras, simbolos...), Serve para avaliar a comunicação entre o designer e o usuário

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

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

• Como os sinais externos que chegam aos nossos

órgãos sensoriais são convertidos em experiências

perceptuais significativas?

5

ceci

lia@

ic.u

nic

amp

.br

–II

Wo

rksh

op

de

Enge

nh

aria

de

Soft

war

e U

NES

P B

auru

6

ceci

lia@

ic.u

nic

amp

.br

Wo

rksh

op

de

Enge

nh

aria

de

Soft

war

e U

NES

P B

auru

Degradando a imagem...

7

Foto de R.C.James

degrada-se a imagem completamente tornando a interpretação difícil

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

Confundindo a interpretação

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

9

Colocando organizações competitivas...

10

M C Escher, Cavaleiros

colocam-se organizações competitivas, tornando possível o conflito de interpretações da mesma imagem

Salvador Dalí, The Slave Market with Disappearing Bust of

Voltaire

11

12

“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

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

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

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 é

ordem alfabética ordem por região (Norte, Nordeste, ...)

Em qual alternativa é mais rápido localizar um estado que você não conhece? Por quê?

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

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, como no MAC OS

menu no topo da janela, como no Windows

Processador Humano de Informação

Princípios de Gestalt (1/2)

• 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

22

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;

Princípios de Gestalt (2/2)

• similaridade: objetos semelhantes são percebidos como um grupo;

• destino comum: objetos com a mesma direção de movimento são percebidos

23

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

Engenharia Cognitiva (1/11)

• mundo psicológico X mundo físico

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.

Engenharia Cognitiva (3/11)

• controle da temperatura e fluxo de água na torneira

problemas de mapeamento,

dificuldade de controle,

dificuldade de avaliação

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 HSLdificuldade de controle das componentes HSL

dificuldade de avaliação, pois não se vê a cor definida

Engenharia Cognitiva (5/11)

reduz problemas de mapeamento e dificuldade de controle das

• definição de cor via componentes [Red, Green e Blue] e [Hue (matiz), Saturation , Luminance]

dificuldade de controle das componentes RGB e HSL

Engenharia Cognitiva (6/11)• Teoria da Ação - golfos

variáveis

psicológicasvariáveis

e controles

físicosdistância entre

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

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

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

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

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.

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• análise da conversação entre pessoas

• estudo da comunicação usuário-sistema

• estudos de campo no trabalho, em casa, em movimento etc.

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.

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.

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

Cognição Distribuída (1/2)

• amplia a semântica de cognitivo para abranger as interações entre pessoas, recursos e materiais no ambiente

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.

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

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.

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

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;

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;

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.

Engenharia Semiótica (7/7)

objetivo do designer

introduzirproduzir + introduzirproduzir +

o sistema interativo para os usuários através da interface

Relembrando Affordance

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] é • O conjunto de possíveis ações [relativas ao sujeito] é chamado de “affordance” do objeto

49

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

Affordance em Design

51

www.baddesigns.com

Affordance em Design

52

www.baddesigns.com

53

www.baddesigns.com

54

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

www.baddesigns.com

Torneiras com sensor eletrônico de movimento

55

Design Universal

56

Como

“ajustar”

cadeiras?cadeiras?

Como ajustar uma cadeira?

O ajuste da altura do assento O ajuste da altura do assento

é feito por uma complicada é feito por uma complicada

combinação de uma alavanca combinação de uma alavanca

que deve ser puxada com que deve ser puxada com que deve ser puxada com que deve ser puxada com

uma mão e a utilização da uma mão e a utilização da

outra mão para puxar o outra mão para puxar o

assento para cima e o pé assento para cima e o pé

para segurar as rodas da para segurar as rodas da

cadeira.cadeira.

1 1 -- Situação : Ajustar a Situação : Ajustar a

altura da cadeiraaltura 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.

Para se abaixar a cadeira,

deve-se levantar a alavanca e

a cadeira ao mesmo tempo e

depois empurrá-la.

Procedimento corretoProcedimento correto

depois empurrá-la.

Para levantar a cadeira, deve-

se puxar com força o assento,

segurando com o pé as rodas

da cadeira.

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.

Colocação do galão no bebedouro

Fatores

• Peso elevado do galão;

• Tampa necessariamente aberta antes da colocação.

Galão de água

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

Como ajustar o relógio?

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, maior número de funcionalidades em um objeto, também a complica tornando-a muito mais difícil de aprender e usar

Quantos produtos interativos existem em nossa vida cotidiana?

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 Sistemas computacionais poderão facilitar a atividade e experiência humana somente quando requisitos sociais e cognitivos dirigirem o processo de design

1950 1980 2000

Mainframe PC Internet

Lembrando das gerações…

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

comunicação

Relembrando os princípios…

O primeiro princípio do design de interfaces, tanto parauma maçaneta quanto para um computador, é manterem mente o ser humano que quer usá-la. A tecnologia é um meio àquele objetivo.

…. Mais ênfase em design centrado no usuário. Menos em…. Mais ênfase em design centrado no usuário. Menos emtecnologia; mais nas pessoas, e grupos, e interaçõessociais. E tarefas. (Norman, D)

Objetivos de IHM

• Produzir sistemas usáveis, seguros e funcionais

• Desenvolver ou melhorar a segurança, utilidade, efetividade e segurança, utilidade, efetividade e USABILIDADE de sistemas computacionais

Aceitabilidade de um Sistema

Para próxima aulaAtividade 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 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.

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ítuloTí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?