aula_05_Teorias_IHC

Prévia do material em texto

Interface Homem/Máquina 
 
Aula 5 
Profa. Daniela Gorski Trevisan 
daniela@ic.uff.br 
Material elaborado a partir dos slides do Prof. Leandro Fernandes 
 
Capitulo 3 do livro BARBOSA, S.D.J.; SILVA, B.S. Interação Humano-Computador 
Editora Campus-Elsevier, 2010 
Engenharia Semiótica 
•  Semiótica 
§  Disciplina devotada ao estudo dos sinais e como eles 
são utilizados na comunicação 
•  Engenharia Semiótica 
§  Originalmente proposta como uma abordagem para o 
design de linguagens de interfaces 
§  Evoluiu para uma teoria semiótica da IHC 
2 
Engenharia Semiótica 
•  Teoria explicativa e não preditiva 
•  Aplicações computacionais são 
artefatos de metacomunicação 
§  Artefatos que comunicam uma mensagem 
•  Investiga a comunicação entre designers, 
usuários e sistemas 
3 
O Designer se Comunica com o Usuário 
•  Metamensagem do designer para os usuários 
§  Como os usuários podem e devem utilizar o sistema 
§  Por que 
§  Com que efeitos 
•  Dois níveis de comunicação 
§  Direta usuário-sistema 
§  Metacomunicação do designer para o usuário 
via interface 
4 
Comunicação Direta e Metacomunicação 
5 
Comunicação Usuário-Sistema 
Mensagem de Metacomunicação 
Designer Usuário 
Conteúdo da Metamensagem 
•  Este é meu entendimento, como designer, 
de quem você, o 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 é a forma como você pode ou deve utilizá-lo 
para alcançar uma gama de objetivos que se 
encaixam nesta visão. 
6 
Esforço do Designer (Tempo de Design) 
•  Estudar os usuários 
§  Indivíduo 
§  Atividades 
§  Ambiente 
•  Conceber sua visão sobre 
§  O que os usuários desejam ou necessitam 
§  Como os usuário, suas atividades e seu ambiente podem ou 
devem mudar 
•  Expressar sua visão na forma de tecnologia 
§  O designer só tem uma chance! 
7 
Esforço do Usuário (Tempo de Interação) 
•  Decodificar e interpretar a metamensagem 
do designer 
•  Atribuir sentido aos significados codificados 
•  Responder de forma apropriada 
8 
Comunicabilidade 
•  Comunicabilidade é um conceito de qualidade dos 
sistemas computacionais interativos 
•  Sistema com alta comunicabilidade 
§  Auxilia usuários a interpretarem e atribuírem sentido à 
metamensagem do designer 
§  Sentido compatível com o pretendido pelo designer 
•  Métodos de avaliação 
§  Método de inspeção semiótica 
§  Método de avaliação de comunicabilidade 
9 
Processo de Comunicação em IHC 
10 
Designer Usuário 
Operação mal-
sucedida 
Canal 
Codificação Decodificação 
Sucesso!? 
Não, 
indica erro 
Tenho que 
tentar de novo 
Interpretante 
Interpretante 
Interpretante 
Mensagem (Signo) 
Objeto 
Relação entre Objeto, Signo e Interpretante 
11 
O S 
I 
Interpretante 
(idéia de) 
maçã 
Objeto Signo 
Signo 
•  Signo é uma coisa que serve para vincular 
conhecimento de outra coisa (o objeto do signo) 
•  Pode ser um(a) 
§  Imagem 
§  Diagrama 
§  Memória 
§  Sintoma, etc. 
•  Para ser signo, uma representação deve possuir uma 
relação triádica com seu objeto e seu interpretante 
12 
O S 
I 
maçã 
Exemplo de Signo de Interface 
13 
O S 
I 
Interpretante 
clicando nesse botão, 
eu consigo salvar o 
documento 
Objeto Signo 
<< salvar arquivo >> Salvar 
Semiose Ilimitada 
•  Engenharia Semiótica é uma teoria explicativa 
e não preditiva 
•  O processo interpretativo humano está em 
constante evolução 
•  O significado pode ser revisto e corrigido 
•  O interpretante é por si só um signo 
14 
canal 
Processo de Comunicação Entre Duas 
Pessoas 
“Meu tipo ideal é ...” 
codificação 
Mensagem (signos) 
decodificação 
interpretante 
interpretante interpretante 
Se
m
io
se
 il
im
ita
da
 
Exemplo de Semiose Ilimitada 
16 
clicando aqui eu 
salvo o arquivo 
<< salvar arquivo >> Salvar 
com o arquivo salvo posso 
desligar o computador 
I 
O S 
Semiose 
Ilimitada 
 
O processo não pode ser 
completamente determinado, 
apenas motivado 
Tipos de Signos 
•  Signos estáticos 
•  Signos dinâmicos 
•  Signos metalingüísticos 
17 
Signos Estáticos 
•  Expressam o 
estado do sistema 
•  Interpretado independente 
das relações causais e 
temporais da interface 
•  Podem ser interpretados a partir de um screenshot 
§  Ex. 1: a janela principal do aplicativo 
§  Ex. 2: o menu arquivo 
§  Ex. 3: a janela de configuração de página 
18 
Signos Dinâmicos 
•  Expressam o comportamento do sistema 
•  Envolvem aspectos temporais 
e causais da interface 
§  Ex.: Barra de progresso 
§  Ex.: Escolha de um item de menu 
19 
Signos Metalingüísticos 
•  Signos principalmente verbais 
•  Referem-se a outros signos da interface 
•  Utilizados para explicitamente comunicar aos 
usuários os significados codificados no sistema 
§  Exs.: Mensagens de ajuda e de erro, alertas, 
diálogos, dicas e assemelhados 
20 
Exemplo 
Identificação e Classificação de Signos 
21 
O ícone “Read Book” 
foi escolhido como meio de 
acesso a “Simple Search” 
Adaptado de Salgado, L.C.C.; de Souza, C.S.; Leitão, C.F. (2009) 
A Semiotic Inspection of ICDL. In C.J.P. Lucena (Editor) Monografias em Ciência da Computação no. 31/09. 
Departamento de Informática, PUC-Rio. 14 p. 
22 
Adaptado de Salgado, L.C.C.; de Souza, C.S.; Leitão, C.F. (2009) 
A Semiotic Inspection of ICDL. In C.J.P. Lucena (Editor) Monografias em Ciência da Computação no. 31/09. 
Departamento de Informática, PUC-Rio. 14 p. 
Sign 1: The interface language drop-down list 
Sign 2: The book category buttons 
Sign 3: The ‘more choices’ button 
Sign 4: The book’s language drop down list 
Sign 5: The keyword search text box 
Sign 6: The book’s title and language 
Sign 7: The featured reviews 
Sign 8: The featured books 
Eng Semiótica vs Eng. Cognitiva 
Contexto 
 
 
 
 
 
 
 
 Designer Usuário 
Contexto 
 
 
 
 Meio 
Contexto 
 
 
 
 
Engenharia Semiótica 
Engenharia Cognitiva 
Engenharia Semiótica X Engenharia 
Cognitiva 
•  Têm em comum o fato de ambas considerarem que o fator 
determinante para o início do processo de design é a 
criação de um modelo mental da aplicação por parte do 
designer 
§  É com base nesse modelo que há a posterior implementação da 
aplicação 
•  Após a implementação da aplicação, há uma interação do 
usuário com ela 
§  A partir dessa relação interativa, o usuário formula o próprio 
modelo mental da aplicação 
Engenharia Semiótica X Engenharia 
Cognitiva 
•  É na relação entre usuário e sistema, segunda 
etapa do processo, que a engenharia cognitiva 
está baseada 
§  Destaca o sistema, produto do processo, bem como a 
forma como ele é interpretado pelo usuário 
§  Oferece as ferramentas que ajudam a definir o objetivo 
final buscado pelo designer: desenvolver um produto 
devidamente compatível com a cognição do usuário 
Engenharia Semiótica X Engenharia 
Cognitiva 
•  A engenharia semiótica reúne as duas etapas, 
fazendo com que seu ponto de vista seja mais 
abstrato, a partir do envio de uma meta-
mensagem do designer ao usuário 
§  Afasta-se um pouco do processo de design ao incluir 
nele a engenharia cognitiva – todos os resultados 
obtidos por meio da engenharia cognitiva também 
valem para a engenharia semiótica 
Engenharia Semiótica X Engenharia 
Cognitiva 
•  Na engenharia semiótica a relação entre usuário e 
sistema deixa de ser a principal preocupação ao 
cederseu lugar ao projetista de sistemas e ao 
processo de criação de sistemas 
•  Na engenharia cognitiva o designer/projetista está 
presente em tempo de design. 
•  Na engenharia semiotica o designer/projetista está 
presente em tempo de interação. 
Atividade 3 
•  Baixe o jogo JECRIPE http://jecripe.wordpress.com/ 
•  Identifique os signos estaticos, dinamicos e metalinguisticos 
nos seguintes ambientes: 
•  Enviar arquivo com resposta via INTERAGIR (prazo para 
entrega de 1 semana) 
28 
29 
Tela de entrada 
Tela de escolha dos 
ambientes Casa das Bolhas 
Casa bebe Samuca Casa da Música Tela de saída