Interação Emocional (Entendendo como as interfaces afetam os usuários)

Prévia do material em texto

Design de Interface Humano-Computador
05 – Interação Emocional
 (Entendendo como as interfaces afetam os usuários)
IFPA
Tecnologia em Análise e Desenvolvimento de Sistemas (TADS)
 
PROFESSOR: Claudio Roberto de Lima Martins
claudiomartins2000@gmail.com
Assuntos
Introdução
Emoções e a experiência do usuário
Interfaces expressivas 
Interfaces frustrantes 
Tecnologias persuasivas e mudança de comportamento 
Antropomorfismo e zoomorfismo
Modelos de emoção 
2
Visão Geral
Nesta aula veremos:
Interfaces expressivas 
como a aparência de uma interface
pode influir em uma reação positiva do usuário
Aspectos negativos
 como os computadores podem frustar os usuários
Antropoformismo e agentes de interface
Os prós e os contras
Projetando agentes (personagens sintéticos)
3
Aspectos afetivos
IHC geralmente leva em consideração o desenvolvimento de sistemas eficientes e efetivos
Recentemente há estudos que consideram o quanto um sistema interativo pode fazer/influenciar para que as pessoas respondam de determinadas maneiras
 feliz, com credibilidade, interessadas em aprender, motivadas
A interação emocional está relacionada à maneira como nos sentimos e reagimos ao interagir com as tecnologias
4
Design Emocional
Um Design (emocional) busca:
uma expressão estética, algo a ser observado
um valor simbólico, criação de um apego emocional.
 O design cria objetos com os quais nos identificamos ou associamos às nossas lembranças.
... o design propicia um posicionamento social 
5
Quem nunca se pegou desejando algum produto que nem mesmo sabe muito bem para que serve, mas achou lindo e precisa ter em casa? Ou quem nunca achou que aquela máquina de café toda bonitinha é mais fácil de usar do que aquela outra menos atraente? 
Pois saber se as coisas bonitas realmente funcionam melhor do que as feias é um dos assuntos explorados em Design Emocional.
 		Donald Norman (2004, em Design Emocional)
Design Emocional (exemplos da vida real)
6
Funcional
Emocional
Design Emocional (exemplos da vida real)
Até mesmo o descascador de batatas pode ser projetado para emoção. 
7
https://www.toptal.com/designers/product-design/design-for-emotion-to-increase-user-engagement 
Design Emocional (exemplos da vida real)
8
Produtos da Apple primam pelo design emocional
Power Mac G3 
Mini Tower (1997)
Apple II (1977)
eMate 300 (1996)
Apple
Studio Display 15-inch 
Flat Panel (1998)
Bondi blue iMac (1998),
Translúcido.
https://www.macworld.com/article/2013960/the-unexplored-history-of-translucent-apple-design.html 
Design Emocional (exemplos da vida real)
9
O Fiat 500 foi relançado em 2007 com um design atualizado, porém mantendo as linhas originais e curvas. Este modelo foi inspirado no iMac (de 1998)
Design Emocional (exemplos da vida real)
10
O Volkswagen New Beetle é a reedição do Fusca. Foi produzido de 1998 a 2010 (1ª Geração)
O consagrado Volkswagen Fusca (1938), o carro mais vendido no mundo até sua fabricação ser interrompida em 1996 no Brasil e em 2003, no México. 
Interfaces expressivas em IHC
Cores, ícones, sons, elementos gráficos e animações são usados para um apelo mais emocional da interface com o usuário
Transporta o estado emocional
Por sua vez, isso pode afetar a usabilidade de uma interface
As pessoas são tolerantes com sistemas que são projetados considerando o feedback emocional.
As pessoas estão preparadas para certos aspectos de uma interface (tempo elevado de download, por exemplo) se o resultado final for compensador
11
11
Interfaces amigáveis
A Microsoft é pioneira em interfaces amigáveis para tecnofóbicos, com o software “At home with Bob” (1995)
Metáforas 3D são baseadas em lugares familiares (por exemplo, salas de estar)
Agentes na forma de animais de estimação (coelho, cachorro) são utilizados para interagir com os usuários
Faz com que os usuários considerem a interface mais fácil e mais amigável
12
Assistente Bob (da Microsoft)
Lançado em 1995 para Windows 3.11 e Windows 95, o BOB era uma espécie de camada/interface que se sobrepunha à padrão do Windows. Com aspecto bastante infantil e seguindo a quase sempre malfadada tendência de criar representações do mundo real em interfaces de computadores, O BOB foi um fracasso retumbante.
13
Interface do Microsoft BOB.
O BOB transformava o computador numa ilustração de uma casa. Tinha seu assistente chato (cãozinho Bob), e trazia alguns programas embutidos, como um editor de textos, calendário/agenda e um guia financeiro. 
Lançado junto ao “boom” da Internet, também contava com um serviço de email, que custava US$ 5/mês e limitava o envio de 15 mensagens no período, cada uma com até 5 mil caracteres.
Clippy (Microsoft)
www.id-book.com
14
Por que Clippy não agradou?
Foi chato, inconveniente, paternalista ou outro?
Que tipo de usuário gostou do Clippy?
14
14
Expressividade criada pelos usuários
Os usuários criaram os emoticons para compensar a falta de expressões emocionais na escrita:
Feliz 		:)
Triste 		:<
Passando mal 	:X
Brabo 		>:
Muito irritado	>:-(
15
Expressividade criada pelos usuários
O uso de ícones e estenografia no texto e em mensagens em conotações emocionais
- Fui hj na academia tb. Vc vai ao churras?
- Naum sei...
Estenografia: técnica de escrita que utiliza caracteres abreviados especiais, permitindo que se anotem as palavras com a mesma rapidez com que são pronunciadas. 
Essa técnica é base para o Braile e Taquigrafia, além de útil na comunicação em redes sociais usando celulares (onde o teclado reduzido, a limitação de texto e velocidade baixa de banda estão presentes).
No exemplo:
	hj = hoje
	tb = também
	vc = você
	churras = churrasco 
	naum = não 	(neste caso, usa-se para evitar o acento ~)
16
Frustração do usuário (Interfaces Frustantes)
Muitas causas:
Quando a aplicação não funciona corretamente e trava
Quando o sistema não faz aquilo que o usuário gostaria que ele fizesse
Quando as expectativas do usuário não são atendidas
Quando o sistema não fornece informações suficientes para que o usuário saiba o que fazer 
Quando as mensagens de erro são vagas, obtusas ou condenatórias
Quando a aparência da interface for ruim, pobre, sem estética e emocionalmente inadequada
17
Gimmicks
Divertido para o designer, mas não para o usuário, por exemplo
Ex: Clicar em um link para um site apenas para descobrir que ele ainda está "em construção"
18
Gimmick é um jargão em inglês que representa um artifício ou ideia concebida principalmente para atrair atenção ou aumentar o apelo, muitas vezes com pouco valor intrínseco. 
Quando aplicado ao marketing de varejo, é um recurso único ou peculiar projetado para fazer com que um produto ou serviço "se destaque" de seus concorrentes.
	Ex: os brinquedos oferecidos nos lanches infantis do McDonald´s.
18
18
Mensagens de erros
“The application Word Wonder has unexpectedly quit due to a type 2 error.”
Por quê não:
“the application has expectedly quit due to poor coding in the operating system”
O guia de Shneiderman’s para mensagens de erros inclui:
evite usar termos como FATAL, INVALID, BAD
avisos sonoros são úteis em certos casos 
evite CAIXA ALTA e longos códicos numéricos
as mensagens de erro devem ser precisas e não vagas
fornecer um help sensitivo ao contexto
19
A tela azul (Windows) – Desafio dos 10 anos
20
Blue Screen of Death (BSoD) – Windows 7 
Blue Screen of Death  (BSoD) – Windows 10 
Mensagem de erro da web…
21
Uma mensagem de erro útil (mas exagerada)
“The requested page /helpme is not available on the web server. 
If you followed a link or bookmark to get to this page, please let us know, so that we can fix the problem. Please include the URL of the referring page as well as the URL of the missing page. 
Otherwise check that you have typed the address of the web page correctly. 
The Web site you seek
Cannot be located, but
Countless more exist.”
22
Nofinal, uma mensagem de erro em forma de Haiku ( formato curto de poesia japonesa)
Os computadores deveriam pedir desculpas?
 A “humanização” das máquinas foi explorado no clássico filme “2001: Uma Odisséia no Espaço” (1968), quando o computador HAL 9000 enfrenta o astronauta Dave...
23
Os computadores deveriam pedir desculpas?
24
I'm sorry, Dave. 
I'm afraid, I can't do that
Open the pod bay doors, HAL...
 HAL responde:
https://pt.wikipedia.org/wiki/2001:_A_Space_Odyssey 
Os computadores deveriam pedir desculpas?
Reeves and Naas (1996) argumentaram que os computadores deveriam se desculpar em caso de erro
Deveriam emular a etiqueta humana (serem “educados”)
As pessoas perdoariam o computador como elas perdoam outras pessoas que se desculpam?
Como elas considerariam a sinceridade de um computador que se desculpa? Por exemplo, depois do sistema “travar”:
Eu sinto muito pelo meu erro. Prometo que não acontecerá novamente.
De que outra forma deveriam os computadores comunicarem-se com as pessoas?
25
Detectando emoções e tecnologia emocional
Tecnologia Emocional são tecnologias de sensoriamento usadas para medir o suor da pele (GSR - Galvanic Skin Response), expressões faciais, gestos, movimentos corporais
O objetivo é prever as emoções do usuário e os aspectos do comportamento deles
Por exemplo. o que é mais provável comprar on-line quando se sentir triste, entediado ou feliz
26
Galvanic Skin Response (GSR) ou Electrodermal Activity (EDA)
Ex de tecnologia emocional: Kinect (Microsoft)
27
Jornalistas experimentam o novo Kinect, sensor de movimentos do Xbox One, videogame da Microsoft (2013)
https://www1.folha.uol.com.br/tec/2013/07/1310375-sensor-do-videogame-xbox-one-conseguira-captar-expressoes-faciais-e-batimentos-cardiacos.shtml 
Kinect é um sensor de movimentos desenvolvido para o Xbox 360 e Xbox One, junto com a empresa Prime Sense.
Funcionamento do Kinect (Microsoft, v. 2013)
28
https://developer.microsoft.com/pt-br/windows/kinect 
Codificação Facial
A Codificação Facial mede as emoções de um usuário ao interagir com um computador ou tablet
.Analisa imagens captadas por uma webcam de seu rosto
Usa isso para avaliar o nível de envolvimento do usuário ao assistir a filmes, sites de compras on-line e anúncios
6 expressões centrais: tristeza, felicidade, repulsa, medo, surpresa e raiva
www.id-book.com
29
30
https://www.researchgate.net/publication/321660388_Facial_expression_analysis_with_AFFDEX_and_FACET_A_validation_study 
30
Como usar os dados “emocionais”?
Se o usuário pressionar o rosto quando um anúncio aparecer 
-> sinta repulsa
Se começar a sorrir 
-> ele está se sentindo feliz
O website pode adaptar o anúncio, o enredo do filme ou o conteúdo para corresponder ao estado emocional do usuário, usando:
Rastreamento ocular, pulso do dedo, fala, palavras e frases.
Também podem ser analisados os textos em blogs, posts no Twitter e no Facebook. Neste caso, a técnica é chamada “Análise de Sentimentos” (com outras de mineração de dados)
31
http://www.cienciaedados.com/analise-de-sentimentos-e-machine-learning/ 
Tecnologias persuasivas e mudança de comportamento
www.id-book.com
32
Sistemas de computação interativos são projetados deliberadamente para mudar as atitudes e os comportamentos das pessoas (Fogg, 2003)
Uma diversidade de técnicas são usadas para mudar o comportamento das pessoas, no que elas fazem ou pensam
Ex:
Anúncios pop-up, mensagens de aviso (notificações), lembretes, prompts, mensagens personalizadas, recomendações, Amazon “1-click”
Comumente chamado de “nudging” (Cutucar)
32
32
Pokémon Pikachu (Pocket Pikachu da Nintendo)
Tentativa de mudar os maus hábitos e melhorar o bem estar das crianças.
Projetado para motivar as crianças a serem fisicamente mais ativas em uma base regular
O proprietário do animal de estimação digital que "vive" no dispositivo precisa andar, correr ou pular
Se o dono não se exercitar, o bichinho virtual fica irritado e se recusa a jogar mais
www.id-book.com
33
33
33
This use of positive rewarding and sulking can be a powerful means of persuasion, given that children often become emotionally attached to their virtual pets, especially when they start to care for them. 
Antropoformismo
Atribuir qualidades humanas a objetos inanimados (por exemplo, carros, computadores, etc.)
34
Antropoformismo
Um fenômeno muito conhecido em publicidade 
Mascotes relacionados com as atividade da empresa, mascotes em caixas de cereais, etc
Muito explorado na interação homem-computador
Faz com que a interação seja mais agradável, mais motivadora, faz com que as pessoas achem mais fácil interagir, reduzem a ansiedade
35
O quê você prefere: 1 ou 2?
Como uma mensagem de boas vindas
1 - “Olá Cris! Que bom vê-la novamente. Seja bem-vinda. Onde foi mesmo que nós paramos na última vez? Oh sim, exercício 5. Vamos continuá-lo.”
2 - “Usuário 95368, iniciando o exercício 5.” 
36
O quê você prefere: 1 ou 2? 
Feedback quando executa alguma ação ou resposta errada
1 - “Agora Cris, não está correto. Você pode fazer melhor que isto. Tente novamente.”
2 - “Incorreto. Tente novamente.”
	Há uma diferença nas suas preferências dependendo do tipo de mensagem? Por quê?
37
Evidência para suportar o antropoformismo
Reeves e Naas (1996) consideraram que os computadores poderiam analisar e elogiar os usuários em softwares educativos 
-> impacto positivo sobre eles
“Sua pergunta foi muito oportuna e importante. Bom trabalho de observação! O que você notou foi...”
Os estudantes sentiam-se mais dispostos a continuar os exercícios com esse tipo de feedback
38
Críticas ao antropoformismo
Decepcionante. Faz as pessoas se sentirem ignorantes, inferiores ou estúpidas
As pessoas tendem a rejeitar sistemas interativos que “apontem o seu dedo para o usuário” e digam:
“Agora Cris, não está correto. Você pode fazer melhor que isso. Tente novamente.”
Muitas preferem algo mais impessoal:
“Incorreto. Tente novamente.”
Estudos revelaram que o feedback personificado é considerado menos honesto e faz com que os usuários sintam-se menos responsáveis por suas ações (por exemplo: Quintanar, 1982)
39
 Personagens virtuais (agentes)
Cada vez mais aparecendo em nossas telas
Web, personagens em videogames (avatares), tutoriais, wizards...
Uma personalidade dá as boas vindas ao sistema e faz com que o usuário sinta-se envolvido com ele
40
Desvantagens
Conduz as pessoas a uma falsa realidade, seduzindo-as a confiar em “robôs”
Irritante e frustrante
Por exemplo, o Clippy (o Assistente do Microsoft Office)
 O recurso foi removido completamente no Office 2007, pois atraiu críticas de clientes e da própria Microsoft. 
Não confiável
assistentes virtuais de e-commerce?
41
Agentes virtuais (bots) são inteligentes?
42
https://huggy.io/pt-br
https://www.gvp.com.br/agente-virtual 
Agentes virtuais de vendas
O quê os agentes virtuais deveriam fazer?
Eles provocam uma resposta emocional em você?
Você confia neles?
O estilo de interação deve ser diferente para venda de roupas femininas e masculinas?
Qual é a expressão facial da Miss.boo?
Ela é confiável e útil?
Seria diferente se fosse a figura de um homem?
43
Personagens (caracteres) virtuais: agentes
Podem ser classificados de acordo com o grau de antropoformismo que utilizam:
 Personagens (caracteres) sintéticos;
 Agentes animados; 
 Agentes emocionais;
 Agentes de conversação personificados.
44
Personagens sintéticos
• Um agenge sintético é autônomo, com estados internos e capaz de responder aos eventos externos.
45
https://www.media.mit.edu/videos/329-silas-synthetic-dog/ 
: Ex: O cachorro Silas (Bloomberg, 1996 – MIT): 
http://characters.media.mit.edu/Papers/aa97-2.pdf e https://www.nada.kth.se/kurser/kth/2D1381/ArtificialLifeMaes.pdf 
Agentes animados
Exercem um papel colaborativo na interface
São frequentemente parecidos com cartoons,explicando coisas e aconselhando os 
usuários (wizards e bots)
46
Agentes emocionais
Personalidades e conjunto de emoções pré-definidas que o usuário pode mudar
The Woggles, Bates, 1994
47
Tamagotchi (1996) e Pou (2013) 
O Tamagotchi é um brinquedo virtual japonês. É um jogo que consiste em cuidar do animalzinho virtual como se fosse real, dando-lhe carinho virtual, comida virtual, banho virtual, cuidados virtuais etc
Pou é um jogo em que se cria um animal de estimação virtual (o Pou). Desenvolvido primeiramente para Android (2013) e depois em IPhone.
48
Um tamagotchi de primeira versão
Agentes de conversação personificados
Rea (Real-Estate Agent) 
mostrando um imóvel 
Corpo semelhante ao de
um ser humano
Gesticula, faz uso da
comunicação não verbal
(expressões faciais, winks) 
enquanto conversa
Técnicas sofisticadas de IA são utilizadas
nesta forma de comunicação
Cassell, 2000, MIT
49
Bots (robôs) de conversação
50
www.roboed.com.br
https://www.gvp.com.br/agente-virtual 
Qual agente é o mais confiável?
A credibilidade de um agente está relacionada com a forma que os usuários acreditam nas intenções e personalidade deste
A aparência é muito importante
Os agentes mais realísticos são mais confiáveis do que os agentes em forma de cartoons?
O ambiente (cenário) é muito importante 
Como o agente se movimenta, gesticula ou interage com os objetos na tela
Exagero de expressões faciais e de gestos podem prejudicar a credibilidade
51
Modelo de Interface Emocional
Norman, Ortony and Revelle (2004) apresentam um Modelo de Emoções:
www.id-book.com
52
52
52
Sobre o modelo de emoções
Nosso estado emocional muda a forma como pensamos
Quando assustados ou com raiva nos concentramos no foco apenas, e o corpo responde tensionando os músculos e suando
- mais provável que seja menos tolerante
Quando felizes somos menos focados e o corpo relaxa
- mais propensos a ignorar problemas menores e ser mais criativo
53
Para entender melhor, veja o vídeo de Don Norman: 3 ways good design makes you happy (Vídeo com legendas em PT-br).
http://www.ted.com/talks/don_norman_on_design_and_emotion/transcript 
53
53
Pontos-chave (Resumo)
Os aspectos afetivos em sistemas interativos devem considerar de que forma as pessoas vão reagir a estes
Uma interface bem projetada pode trazer sentimentos agradáveis ao usuário
Interfaces expressivas podem fornecer um feedback interessante
Interfaces ruins podem deixar as pessoas irritadas e frustradas
O antropoformismo é cada vez mais utilizado em interfaces
54
Referências
Design de Interação: Além da Interação Humano-Computador. por Yvonne Rogers,‎ Helen Sharp,‎ Jenny Preece. Ed Bookman. 3ª Ed. 2013. 
Capitulo 5 – Compreendendo como as Interfaces afetam os Usuários (2ª edição)
Norman, Don. Design Emocional: Porque Adoramos (ou detestamos) os objetos do dia-a-dia. Ed Rocco. 2008.
TED presentation - Don Norman: 3 ways good design makes you happy (Vídeo com legendas em PT-br).
http://www.ted.com/talks/don_norman_on_design_and_emotion/transcript 
55
55