View
1.492
Download
0
Category
Preview:
Citation preview
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?
Recommended