BCC

Interação Humano-
Computador
2019.2
Professor Rodrigo Andrade
Objetivo da aula

Engenharia Cognitiva
 Engenharia Cognitiva
• Aplicar conhecimentos de ciência cognitiva e
fatores humanos ao design e construção de
sistemas interativos
• Objetivos
• Entender os princípios fundamentais da
ação e desempenho humano
• Elaborar sistemas agradáveis de usar
 Cognição
• O que passa na mente do usuário enquanto
realiza suas atividades?
Experiencial Reflexiva
• Quando pensamos, agimos e • Quando pensamos, tomamos
reagimos de forma eficiente e decisões
sem esforço • Quando fazemos algo certo por
• Quando fazemos algo certo e bem termos raciocinado
sem nos darmos conta de que o • Importante diante de imprevistos
fazemos e do desconhecido
• Ações rápidas e intuitivas
• Requer experiência e
engajamento
 Processos cognitivos
1. Atenção
2. Percepção (e reconhecimento)
3. Memória
4. Aprendizado
5. Ler, escrever, falar e ouvir
6. Raciocinar e decidir
1- Atenção
 Facilitar a atenção

Por objetivo Por apresentação

• Atenção focada e • Influencia no foco
dividida das informações
• Selecionamos o que
vamos nos
concentrar
Por objetivo
Por apresentação
 Implicações para o design
• Informação na interface deve ser estruturada
para capturar a atenção dos usuários para os
itens importantes a cada momento
• Torne a informação saliente quando requerer
atenção em determinado momento
• Quais são esses "momentos"?
• O que é importante a cada momento?
 Implicações para o design
• Como chamar a atenção?
• Cores, agrupamento e ordenação de itens,
espacejamento, sublinhado, sequenciação de
diferentes informações, animação, fronteiras de
percepção (janelas, quadros), som, luzes piscantes
• Evite sobrecarregar a interface com informação
demais (poluição visual) ou utilizar recursos “demais”,
só porque o software permite
• Variação excessiva de cor, som, gráficos
• “Quanto mais simples, melhor”
• Google
Encontre o preço do quarto duplo
no Holiday Inn em Bradley
Encontre o preço do quarto double
no Quality Inn em Columbia
Qual das duas atividades exigiu
menos esforço cognitivo?

Por quê?
2- Percepção
 Percepção
• Como a informação é adquirida do mundo e
transformada em experiências
• Por meio dos sentidos
• (visão, audição, tato)
• Pessoas que enxergam: visão é o sentido
dominante, seguido de audição e tato
Qual opção é mais fácil se
concentrar?
Só acontece com nossos
sistemas?
O que mesmo eu busquei?
Onde estou? O que eu já fiz? O
que ainda falta?
3- Memória
 Memória
• Envolve codificar e recuperar vários tipos de
conhecimento que nos permitam agir de
forma adequada
• Reconhecemos melhor do que lembramos
• Vantagens de GUIs sobre interfaces
baseadas em comandos
 Implicações para o design
• Não sobrecarregue a memória dos usuários
• Evite procedimentos complicados para
realizar tarefas
• Promova o reconhecimento em vez de
lembrança
 Memória “Short-term”
• Humanos só conseguem guardar 7 pedaços
de informação em um curto tempo
• Esquecem depois de 20 segundos
• No entanto, menus podem ter mais de 7
itens
• Usuários não precisam decorar os itens
 Dicas gerais para contornar a
limitação de memória
• Respostas rápidas
• Evita que o usuário esqueça o que está
fazendo
• Alterar a cor dos links visitados
• Facilidade na comparação de produtos
• Ofereça ajuda no contexto do uso
• Evita ter que memorizar passos em uma
tela separada
Exemplo: comparação de
produtos
Exemplo: ferramenta de criação
de sites do google
https://www.nngroup.com/articles/recognition-and-recall/
Assistência no contexto
Exemplo: Menu gigantesco
Qual imagem tem no segundo
slide desta aula?
4- Aprendizado
 Aprendizado
• Muitas pessoas têm dificuldade de aprender
um conjunto de instruções num manual
• Preferem “aprender fazendo”
 Implicações no design
• Projete interfaces que motivem a exploração
• Ações facilmente reversíveis (undo)
• Projete interfaces que limitem e orientem os
usuários a selecionarem ações adequadas
• Assistentes (wizards)
• Ofereça instruções contextualizadas e em
diferentes mídias
Exemplo: ações adequadas
Exemplo: não consigo deletar
Exemplo: ask toolbar
 5- Ler, Escrever, Falar e Ouvir
• Formas diferentes de processar a linguagem
• Semelhanças: o significado das sentenças
• Diferenças: facilidade de processamento e
preferências
• Algumas pessoas preferem ler a ouvir
• Algumas pessoas preferem falar a escrever
• Pessoas com dificuldades de audição ou
visão têm restrições sobre como processam a
linguagem
 Linguagem
• Diferenças entre linguagem falada e escrita
• Impacto no projeto de sistemas que
podem ser acessados pela web ou por
telefone
• Pessoas com dificuldades para ouvir e
enxergar têm algumas restrições na maneira
de processar a linguagem
• Impacto no projeto de um website de
órgãos públicos
Acesso por telefone x acesso pela
web
 Implicações para o design
• Mantenha o comprimento de menus de voz
reduzido
• Pessoas têm dificuldade de acompanhar
menus de voz com mais do que 4 opções,
e não se lembram de instruções que
tenham muitas partes
• Ofereça oportunidades de tornar o texto
maior numa tela, sem afetar a formatação,
para as pessoas que não conseguem ler
textos em letras pequenas (acessibilidade)
6- Raciocinar e Decidir
 Raciocinar e decidir
• Resolver problemas, planejar, raciocinar e
decidir são processos que envolvem a
cognição reflexiva
• Pensar sobre o que fazer, quais são as
opções, comparar as opções e pensar nas
consequências de realizar uma ação
• Envolve processos conscientes
• Explorar diferentes cenários e decidir qual
é a melhor opção ou solução para um
problema
 Implicações para o design
• Novatos x experientes
• Como ajudar um novato a se tornar
experiente?
 Novatos x experientes
• Novatos tendem a agir na “tentativa-e-erro”,
explorando e experimentando, agindo
"irracionalmente"
• Experientes são capazes de selecionar
estratégias otimizadas para realizar suas
tarefas; podem planejar com antecedência,
considerar as consequências antes de optar
por uma solução particular
 Novato -> Experiente
• Forneça informações e opções adicionais
para os usuários que quiserem saber mais
sobre como realizar uma atividade de forma
mais eficiente
Exemplo: busca na web
 Pontos-chave
• Cognição envolve muitos processos,
incluindo atenção, memória, percepção e
aprendizado
• A forma como uma interface é projetada
pode afetar muito o quanto os usuários
conseguem perceber, focar, aprender e se
lembrar sobre como realizar suas tarefas
Engenharia Semiótica
 Definição
• Teoria de IHC centrada na comunicação
• Caracteriza IHC como um caso particular de
comunicação humana mediada por sistemas
computacionais
• Foco na comunicação entre designers,
usuários e sistemas
• Aplicações computacionais como artefatos
de metacomunicação
 Definição
• Semiótica é uma disciplina que estuda como
e por que as pessoas atribuem significado às
coisas, e como usam as coisas para significar
o que querem dizer
• Tudo o que ‘tem significado’ para alguém
é um signo
• Tudo pode ter significado, portanto, tudo
pode ser um signo
 Exemplos
• Exemplos:
• Palavras têm significado (‘semiótica’
significa algo)
• Imagens têm significado (->)
• Lugares, pessoas, aromas, sensações,
lembranças...
Significados de logos famosos
 Ontologia da Engenharia
Semiótica
• Processos de significação
• Signos e semiose
• Processos de comunicação
• Envolvem intenção, conteúdo e expressão de
comunicação
• Interlocutores
• Envolvidos nos processos de significação e
comunicação
• Espaço de design
• Caracteriza a comunicação em termos de
emissores, receptores, contextos, códigos e
mensagens
Sistemas de significação

Espaço de possibilidades
de significação é infinito

Qual o significado que

Edward Munch quer
passar com “O grito”?
 Interfaces e Sistemas de
Significação
• As interfaces de artefatos computacionais
interativos são repletas de sistemas de
significação:
• Associam certas expressões (textos,
imagens, sons...) a certos conteúdos
estabelecidos
Comunicação de designers com
usuários
https://www.nngroup.com/articles/bridging-the-designer-user-gap/
 Artefatos de metacomunicação
• Comunicam uma mensagem do designer
para os usuários sobre a comunicação
usuário-sistema
 Design: metamensagem
• Designer elabora a metamensagem
codificando-a em palavras, gráficos,
explicações...
• Única e unidirecional (designer para
usuários)
 Interação
• Usuários decodificam e interpretam a
metamensagem do designer
• Designer deve “falar” por meio do sistema
Signo, Significação, Comunicação
e Semiose
• Estudo de signos, processos de significação e
processos de comunicação
• Signo
• Coisa que serve para veicular
conhecimento de uma outra coisa que ele
representa
• Algo que representa alguma coisa para
alguém (interpretante)
Exemplo de signo
 Nem tudo são signos
• Deve possuir uma relação triádica com seu
objeto e com seu interpretante
 Processo de comunicação
• Utilizar sistemas de significação
• Base em convenções sociais e culturais
• Escolher formas de representar seus
significados pretendidos e alcançar
variedade de objetivos
 Signo de interface
• Codificado pelo designer visando comunicar
sua intenção de design aos usuários

Clicando nesse botão, eu consigo

salvar o documento

<<salvar arquivo>>
objeto
 Processo de Semiose
• Processo interpretativo que nos leva a
associar cadeias de significados a um signo
• Processo potencialmente ilimitado
• Interrompida quando o intérprete fica
satisfeito com o interpretante gerado
• Influenciado pelo conhecimento prévio,
hábitos e experiência pessoal do intérprete
Exemplo de processo de semiose
 Espaço de design de IHC
• Engenharia semiótica utiliza um modelo de
espaço de comunicação
• Contexto, emissor, receptor, mensagem,
código e canal
 Comunicação
• Guiada por uma intenção e efeitos que o
emissor quer provocar
• Visa transmitir o conteúdo da sua mensagem
ao receptor
• Escolher cuidadosamente uma expressão
para o conteúdo que deseja comunicar
 Decisões sobre cada elemento
• Quem é o emissor (designer)?
• Quem é o receptor (usuários)?
• Qual é o contexto da comunicação?
• Qual é o código da comunicação?
• Qual é o canal?
• Qual é a mensagem?
 Quem é o emissor?
• Tentar responder quais aspectos das
limitações, motivações, crenças e
preferências do designer devem ser
comunicados ao usuário
• Objetivo é beneficiar a metacomunicação
 Quem é o receptor?
• Tentar responder quais aspectos das
limitações, motivações, crenças e
preferências do usuário devem ser
comunicados aos usuários reais
• Usuários reais devem assumir papel de
interlocutor do sistema
 Qual é o contexto da
comunicação?
• Identifica elementos do contexto de
interação que devem ser processados pelo
sistema
• Envolve elementos psicológicos,
sociocultural, tecnológico, físico...
Qual é o código da comunicação?
• Identifica quais códigos computáveis podem
ser utilizados para apoiar a
metacomunicação eficiente
• Qual a linguagem da interface?
 Qual é o canal?
• Identifica quais canais de comunicação estão
disponíveis para a metacomunicação
designer-usuário
• Como eles devem ser utilizados?
 Qual é a mensagem?
• O que o designer quer contar aos usuários?
• Qual a intenção comunicativa do designer?
 Classificação dos signos
• Signos estáticos
• Signos dinâmicos
• Signos metalinguísticos
 Signos estáticos
• Expressam o estado do sistema
• Significado é intepretado independente de
relações temporais da interface
• Interpretados por um retrato da interface
num momento do tempo
Exemplo
Exemplo
Exemplo
 Signos dinâmicos
• Expressam o comportamento do sistema
• Envolvem aspectos temporais da interface
Exemplo
Exemplo
 Signos metalinguísticos
• Signos verbais
• Explicam outros signos
• Referem-se a outros signos da interface
Exemplo
 Engenharia Cognitiva x
Engenharia Semiótica
Engenharia Cognitiva Engenharia Semiótica
• OBJETIVO • OBJETIVO
• Gerar e organizar • Gerar e organizar
conhecimentos sólidos conhecimentos sólidos
para favorecer o para favorecer o
desenvolvimento de desenvolvimento de
bons projetos de IHC bons projetos de IHC
• BASE e FOCO • BASE & FOCO
• Cognitiva / • Semiótica /
Aprendizado e Comunicação e
Compreensão Expressão
• Quem está em cena na • Quem está em cena na
interação? interação?
• Usuário • Usuário e Designer
 Referência

Capítulo 3.4 e 3.8

Barbosa, S. D. J.; Silva, B. S. Interação Humano-
Computador. Rio de Janeiro: Elservier, 2010.