Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Design de Interação - Capítulos 3, 4 e 5

Seminário DI - EGC 2015.2 - Paulo, Graziela, Natana e Lane
by

Lane Primo

on 6 August 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Design de Interação - Capítulos 3, 4 e 5

Para visualizar, ampliar ou reduzir partes do mapa use o mouse ou...
... o toque na tela do tablet
Nossos agradecimentos
Graziela Sombrio, Natana Souza, Paulo Roberto Almeida e Lane Primo
As pessoas se comunicam e colaboram em seu trabalho, na vida social e no cotidiano
Novas tecnologias
Novas formas de comunicação
Fenômenos sociais emergentes
Referências
Imagens

Emocional - https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNiNP5lut93iqhOY6hwzA7ObU1P3_aO_kE4HbI1_fbH6Dbvv8c
Social - https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTPcmKPOJFSosAl3O2gUEZ1uZihcz9esUXlLJm-271kSiXKZZEc
Aspecto cognitivo - https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQKEgBwmRENukAnNt-Yd_xZoN3V8GRthNOd8ZK75lvLcQN405qL
Ser humano = Ser social
"Somos seres sociais não apenas porque dependemos de outros para viver, mas porque os outros influenciam na maneira como convivemos conosco mesmo e com aquilo que fazemos."


Eugenio Mussak

Natana, Paulo, Graziela e Lane
Mundo conectado - http://leticiaseoane.com/wp-content/uploads/2012/02/110_20120123092343.jpg
Rosie - http://asboasnovas.com/arquivos/noticias/detalhe/rosie_jetsons_4732.png
UX
Design de Interação
Metas
Provocar reações positivas
Sintam-se à vontade e confortáveis
Aproveitem a experiência de uso
Preocupação dos Designers
Criar produtos interativos que estimulem respostas emocionais dos usuários
aprender
jogar
ser criativo
ser social
comprar
...
Emoções e a experiência do usuário
Interação emocional
sente
reage
experiência
do usuário
1.º uso
Substituição
Descarte
robôs
animais virtuais
respostas emotivas
ligação das pessoas com certos produtos
Desafios
Humor das pessoas muda constantemente
Entender como as emoções afetam comportamentos e como os comportamentos afetam as emoções
Projetar produtos e sistemas que representem habilidades emocionais
capacidade de expressar
reconhecer emoções
Entendendo o usuário
Importância de entender os usuários, especialmente os aspectos cognitivos
Mapear aspectos cognitivos e físicos dos usuários
O que é a cognição?
É o que acontece em nossas mentes quando realizamos nossas atividades diárias.
Envolve processos cognitivos, tais como:
pensar
lembrar
aprender
fantasiar
tomar decisões
ver
ler
escrever
falar
entre outras
Cognição
Atividade mental
Experiencial
Processos
Reflexiva
Processos
Atenção
Percepção e reconhecimento
Aprendizado
Memória
Leitura, fala e audição
Resolução de problemas, planejamento, raciocínio, tomada de decisão.
Atenção
Objetivos
Seleção da informação
Apresentação da informação
Foco
Clareza
Organização
Estrutura
Percepção
Memória
Atenção
Linguagem
Aquisição da informação
Visão
Audição
Tato
Olfato
Paladar
Experiência
refere-se a como a informação é adquirida do ambiente pelos diferentes órgãos sensitivos (olhos, ouvidos, dedos) e transformada em experiências com objetos, eventos, sons e gostos.
Qualidade
Sabor
consiste no processo de selecionar coisas em que se concentrar, num certo momento, dentre a variedade de possibilidades disponível.
Implicações do Design
Os ícones e outras representações gráficas devem possibilitar aos usuários descobrir rapidamente seu significado
Os sons devem ser claros e compreensíveis
O texto deve ser legível e de cor diferentes do fundo
Memória
Representação da informação
Codificação e tipificação da informação
Interpretação
Filtragem
implica recordar vários tipos de conhecimentos que permitem agir adequadamente, por exemplo, reconhecer alguém, lembrar do nome das pessoas.

Implicações do Design
Não sobrecarregar a memória dos usuários com procedimentos complicados para a realização das tarefas;
Projetar interfaces que promovam o reconhecimento, em vez da memorização, utilizando menus, ícones e objetos consistentemente posicionados;
Oferecer aos usuários maneiras de codificar a informação eletrônica (exemplo: arquivos, e-mails, imagens) para ajudá-los a lembrar onde as armazenaram.
Quanto mais se presta atenção a algo e quanto mais isso é processado em termos de pensamento e comparação com outro conhecimento, maior a probabilidade de ser lembrado.

Aprendizado
Utilizar o aplicativo
Como utilizar o aplicativo
Implicações do Design
Projetar interfaces que encorajem a exploração;
Projetar interfaces que restrinjam e guiem os usuários na seleção das ações mais adequadas;
Vincular dinamicamente representações e abstrações que necessitem ser aprendidas.
Manuais
Aprender fazendo
Modelo exploratório
Bicicleta com rodinhas
Ler, ouvir e falar
Semelhantes
Diferentes
Ouvir exige menos esforço cognitivo do que ler ou falar.
essas três formas de processamento da linguagem tem propriedades
Uma similaridade diz respeito ao significado das sentenças ou frases ser o mesmo, seja ela lida, falada ou ouvida.
Implicações do Design
Os menus e as instruções comandadas por voz devem ser mínimos;
Acentuar a entonação das vozes de discursos gerados artificialmente, pois eles são mais difíceis de entender do que a voz humana;
Oferecer a possibilidade de ampliar o texto na tela, sem alterar a formatação.
Resolução de problemas
A
resolução de problemas
, o
planejamento
, o
raciocínio
e a
tomada de decisões
implicam pensar sobre o que fazer, quais as opções e quais podem ser as consequências de se realizar uma dada ação.
Implicações do Design
Fornecer informações adicionais que fiquem escondidas, mas que sejam fáceis de acessar para os que desejarem saber mais a respeito de como realizar uma atividade com mais eficiência (exemplo: pesquisar na web).
Resolução de problemas
O que fazer?
Planejamento
Consequência
Raciocínio
Opções
Tomada de decisão
Ações
Aplicando conhecimentos do mundo físico ao mundo digital
Além de entender os diferentes processos cognitivos dos usuários ao interagirem com os sistemas, também é produtivo entender a maneira como as pessoas lidam com as demandas do dia-a-dia.
Mundo Físico
Digital
emular estratégias e métodos
compreender a complexidade das atividades
Real
Virtual
Frameworks conceituais para a cognição
Modelos mentais
as principais vantagens de
frameworks
conceituais e de teorias cognitivas referem-se ao fato de poderem explicar a interação com o usuário e de prever o seu desempenho
Cada uma destas três abordagens apresentam perspectivas diferentes acerca da cognição: modelos mentais, processamento da informação e cognição externa
Cognição externa
Os modelos mentais são utilizados para se saber o que fazer quando:
ocorrer algo inesperado com um sistema
e ao deparar-se com sistemas com os quais não se está familiarizado.
preocupa-se em explicar os processos cognitivos envolvidos na interação com diferentes representações externas.
Modelo mental
Como utilizar
Como funcional
Previsões e inferências
Sistema transparente
Entendimento
Feedback útil, em resposta à entrada do usuário
Maneiras intuitivas e fáceis de entender e interagir com o sistema
Instruções claras e fáceis de seguir
Ajuda on-line e tutoriais adequados
Orientação sensível ao contexto para os usuários, estabelecida de acordo com o nível de experiência deles.
Processamento da informação
Previsões sobre o desempenho
Entrada ou estímulo
codificação
comparação
seleção da resposta
execução da resposta
Saída ou resposta
Cognição externa
Estender ou ampliar a cognição
Representação externa
Exteriorização
Redução da carga mnemônica
Liberação da carga computacional
Rastreamento cognitivo
Alterar a ordem ou estrutura
Anotação
Modificar uma representação
Exteriorizar
pode auxiliar a reduzir a carga de memória das pessoas da seguinte forma:
Lembrando-as...
... de fazer algo
... do que fazer
... de quando fazer algo
A
liberação da carga computacional
ocorre quando utilizamos uma ferramenta ou um dispositivo, junto com uma representação externa, para nos ajudar a realizar um cálculo.

Anotação
envolve modificar representações externas, como riscar ou sublinhar itens.
Rastreamento cognitivo
envolve manipular itens externamente, para colocá-los em ordem ou estruturas diferentes.
O
framework
conceitual de modelos mentais oferece uma forma de conceitualizar o entendimento que o usuário tem do sistema
3. Aspectos Cognitivos
4. Interação Social
5. Interação Emocional
Para entender, como as emoções afetam o comportamento e vice-versa:
Examinar como as pessoas
expressam
e fazem
a leitura das expressões
uma das outras
compreender a relação entre:
as expressões faciais
a linguagem corporal
os gestos
tom de voz
Experiências
Computação afetiva
Robô flor - http://ulbra-to.br/encena/uploads/image005.jpg
Kismet - MIT
Reconhecimento face - http://www.technologyreview.com/sites/default/files/images/affectivax299_0.jpg
Reconhecimento expressões - MIT
Kismet (MIT A.I. Lab) - Plastic Pals - http://www.youtube.com/attribution_link?a=7uoGZC8o32I&u=/watch%3Fv%3D8KRZX5KL4fA%26feature%3Dem-share_video_user
Wall-e - http://www.pixartalk.com/wp-content/uploads/2009/06/walleoscar4.jpg
Interfaces expressivas
Emoticons
Sons
Ícones
Agentes virtuais
Macintosh ícones - http://cfile28.uf.tistory.com/image/1135F9355035989916FFFB
são usados para
transmitir estados emocionais
provocar respostas emocionais
Sistema
Formas de transmitir o estado ou ocorrência
Ícones dinâmicos
Animações
Mensagens faladas
Sons indicando ações e eventos
Feedback vibrotátil
Feedback informativo ou divertido que tranquiliza o usuário
Nem todos gostam
Pode ser intrusivo
Gerar irritação ou raiva
Usuários
Emoticons - Método universal
Impacto emocional
Interface jogo - http://static.koramgame.com/tk/uploadfile/ninja/uploadfile/201110/20111025014845871.jpg
Estilo de uma interface:
Formas
Fontes
Cores
Harmonia
Espaço em branco
Elementos gráfico
Impacto emocional
Design de interfaces é tema central do design de interação
Efeito positivo sobre a percepção das pessoas a respeito da usabilidade do sistema, quando:
Imagens resultam em experiências mais atraentes e agradáveis (Mullet e Sano, 1995)
Há equilíbrio entre estética e uso no design de interfaces (Tractinsky et al, 2000)
Gato Microsoft - https://s3.amazonaws.com/clippy.js/diagram.png
Interfaces frustrantes
provocam respostas emocionais negativas como raiva e aversão
algo que era simples de usar ou definir acaba complexo
controles remoto
impressoras
relógios despertadores digitais
sistemas de tv digital
Campeões de frustração
Tentativas para minimizar a frustração
Agentes amigáveis
1990 - Bob
1998 - Clippy
Bob Microsoft - http://i1-news.softpedia-static.com/images/news2/Bill-Gates-Hints-at-the-Return-of-Microsoft-Bob-2.jpg?1373951905
Rejeição
Infantil
Intrusivo
Difícil
Provocava distração
Interfaces mal projetadas
As pessoas
parecem bobas
sentem-se ofendidas ou ameaçadas
ficam irritadas
perdem a calma
ocorre quando:
aplicação não funciona
sistema não faz o que o usuário deseja ou ele não sabe o que fazer
as mensagens de erro são vagas ou confusas
aparência é confusa, espalhafatosa ou muito paternalista
sistema requer muitos passos para cumprir a tarefa
Resposta emocional
Frustração
pode vir de design:
ruim
inadvertido
mal pensado
ou nenhum design
Site em construção - http://grupowr3.com.br/imagem/image_1.jpg
Tela azul - http://www.baboo.com.br/wp-content/uploads/2012/04/tela-azul-640x359.gif
Erro impressora - https://lh5.googleusercontent.com/-L6KDUAlGC-w/UyjUfC10xQI/AAAAAAAAJx8/FfRAA0jppAw/s323/erro-impressora.jpg
Tecnologias persuasivas e mudança de comportamento
métodos para chamar a atenção para certos tipos de informação
Propagandas pop-ups
Mensagens de aviso
Lembretes
Mensagens personalizadas
Recomendações
Um clique - http://www.grobsch.com.br/1-click-buy2.jpg
WaterBot- http://ecofeedback.ca/wp-content/uploads/2014/08/WaterBot.jpg
Na Web, usadas para:
atrair
seduzir
convencer
The fun theory - http://www.thefuntheory.com/
The fun theory - http://www.thefuntheory.com/
Técnicas interativas
Forma direcionada e personalizada de publicidade, de provocar mudança de comportamentos
WaterBot
The Fun Theory
Antropomorfismo e Zoomorfismo
Atribuição de qualidade humana a animais e objetos
Projeto ou modelagem de um objeto na forma de animal
Antropomorfismo
Amazing Amanda
Barney
Zoomorfismo
Zoomorfismo - https://m2.behance.net/rendition/pm/4019789/disp/c22f30388cfa8b5088768765c80a91cd.jpg
Design
Criação de diálogos humano computador inspirados nas falas dos seres humanos
Experiências
Display com rostos falantes e só com textos
Preferência pelos rostos
Usuários cometeram menos erros
Escreveram mais comentários
Agentes virtuais e brinquedos
Irritantes em certos contextos
Respostas sem variabilidade emocional (falta sutileza humana)
Design de agentes de interface
Concepção mais realista
Movimentos
Traços de personalidade mais distintos
Expressões faciais
Movimentos dos lábios
Lu - Magazine Luiza
Regras de revezamento

A: Oi, pessoal.
B: Oi!
C: Oi.
A: Tudo bem?
C: Tudo certo, e você?
A: Bem, e vocês?
C: Tudo bem.
B: Tudo bem. Como tem passado?
Conversação coordenada

A: Então podemos nos encontrar às 8 horas?
B: Humm, pode ser um pouco mais tarde, 8h30?
Modelos de emoção
Teorias importadas de outras disciplinas ou desenvolvidas no design de interação
Meta dos Designers
Entender como as pessoas reagem e respondem em diferentes contextos
Saber projetar para esses contextos ou tentar reduzir certas emoções
Design Emocional -
Look and feel
agradável - experiência positiva
Norman (2004)
Foco no contexto do produto e nas tarefas do produto
Lazer
+ agradável e divertido
- informação
Atenção
+ informação direta e rápida
- distração
Modelo de emoção e comportamento
(Ortony et al, 2005)
Expresso em diferentes níveis do cérebro:
Reflexivo
Relacionado ao significado e valor atribuído pela pessoa em determinada cultura
Comportamental
Relacionada à usabilidade - como as atividades humanas ocorrem
Visceral
Resposta automática do cérebro
Julga agradável e repugnante
Modelo de prazer
Jordan (2000):
Aspectos agradáveis
Benefícios potenciais que o produto pode oferecer
Tiger (1992)
Framework sobre o prazer
- Fisioprazer (físico)
- Socioprazer (social)
- Psicoprazer (psicológico)
- Ideoprazer (ideológico, cognitivo)
Modelo Tecnologia como framework da experiência (McCarthy e Wright, 2004)
Representa a experiência do usuário em termos de como ela é sentida:
Descrição em termos holísticos - equilíbrio sensorial, cerebral e emocional
Quatro linhas:
-
Sensorial
- envolve medo, dor e conforto
-
Emocional
- situação em que ocorrem
-
Composicional
- pensamento interno durante a experiência
-
Espaço temporal
- quando ocorre e seu efeito
http://www.grupoa.com.br/livros/fundamentos-da-computacao-e-tecnologia-da-informacao/design-de-interacao/9788582600061#
Capítulos do livro de Yvonne Rogers, Helen Sharp e Jennifer Preece
3a. edição
Full transcript