Introdução ao Design de Interação
1
Design deO
Interação
que é Design de Interação?
Principais pontos da unidade
O que é Design de
Interação? Metas do Design de
Interação
Imagem: Shutterstock
19 de Fevereiro de 2013 2
O que é Design de Interação?
3
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Quantos produtos interativos existem em nossa vida cotidiana?
Telefone celular, computador, agenda telefônica, controle remoto, máquina de
refrigerantes, cafeteira, caixa eletrônico, sistema eletrônico da biblioteca, fotocopiadora,
relógio, smart tv, calculadora, videogame ....
...a lista é interminável!
19 de Fevereiro de 2013 4
Design de Interação
O que é design de interação?
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Quantos desses produtos são fáceis e agradáveis de serem usados?
Imagem: Shutterstock
19 de Fevereiro de 2013 6
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Algumas vezes acontecem comportamentos não esperados... Vamos discutir
sobre o exemplo da utilização de uma fotocopiadora e de uma Smart tv.
Imagem: Shutterstock Imagem: Shutterstock
19 de Fevereiro de 2013 7
Design deO
Interação
que é Design de Interação?
O que é design de interação?
As vezes acontecem comportamentos inesperados! Fotocopiadora que não
funciona como esperávamos ou tv que trava, não responde a comandos, difícil de
ser utilizada.
Imagem: Shutterstock Imagem: Shutterstock
19 de Fevereiro de 2013 8
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Imagem: Shutterstock Imagem: Shutterstock
19 de Fevereiro de 2013 9
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Mas por que isso acontece?
• Muitos produtos não foram projetados levando em consideração os usuários
• Priorização da perspectiva da engenharia: Realização correta de funções
independente do sentimento do usuário final.
19 de Fevereiro de 2013 10
Design deO
Interação
que é Design de Interação?
O que é design de interação?
• O Design de Interação propõe uma mudança de perspectiva
• Do produto para o usuário.
• Do funcionamento correto para o funcionamento correto, fácil e agradável.
Produto
Sistema Computacional
Ação
Usuário Interface Aplicação
Interpretação
19 de Fevereiro de 2013 11
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Vamos conversar um pouco sobre o seguinte produto interativo: smartphone.
Imagem: Shutterstock
19 de Fevereiro de 2013 12
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Telefones celulares no início eram grandes e possuíam displays de caracteres.
Imagem: Shutterstock
19 de Fevereiro de 2013 13
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Em seguida, a tendência foi a miniaturização dos celulares:
• Qual o impacto no tamanho das teclas?
• Qual o impacto no tamanho dos visores?
Imagem: Shutterstock
19 de Fevereiro de 2013 14
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Em paralelo, surgiram:
• Mais funcionalidades;
• Visores coloridos;
• Toques monofônicos, polifônicos e em MP3.
Imagem: Shutterstock
19 de Fevereiro de 2013 15
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Qual a tendência de hoje?
• Poucos botões;
• Telas sensíveis ao toque (touch screen), coloridas e maiores;
Imagem: Shutterstock
19 de Fevereiro de 2013 16
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Qual a tendência de hoje?
• Atingir nichos de público
• Celulares específicos para a 3ª idade
• Teclas maiores, letras maiores, funções básicas.
• Celulares infantis
• Uso de cores, desenhos animados,
jogos, etc.
19 de Fevereiro de 2013 17
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Os projetos interativos requerem que consideremos:
• Quem irá utilizá-lo?
• Onde será utilizado?
• (Para quê) Quais atividades serão realizadas?
19 de Fevereiro de 2013 18
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Preocupação central do Design de Interação
• Desenvolver produtos interativos utilizáveis
• Fáceis de aprender
• Eficazes no uso
• Agradáveis ao usuário
19 de Fevereiro de 2013 19
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Mau Exemplo: Sistema de correio
de voz
• Cenário
• Cliente de um hotel
percebeu que esqueceu o
celular
• O hotel dispõe de um
sistema de correio de voz
para cada quarto
Imagem: Shutterstock
19 de Fevereiro de 2013 20
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Mau Exemplo: Sistema de correio de voz
• Interação
• O cliente pega o telefone e ouve o sinal.
• Se o aparelho faz “bip bip”, tem mensagem.
• O cliente lê as instruções impressas ao lado do telefone para tentar acessar as
mensagens.
• O cliente disca 491.
• O sistema responde “Você discou para o centro de mensagens do hotel Sunny.
Por favor, digite o número do quarto para o qual você deseja deixar uma
mensagem”
19 de Fevereiro de 2013 21
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Mau Exemplo: Sistema de correio de voz
• Interação
• O cliente espera para ouvir instruções de como escutar mensagens gravadas,
mas não acontece nada.
• O cliente lê as instruções impressas novamente e percebe que tem que
pressionar “*” + o número do quarto + “#”.
• “Você discou para a caixa de mensagens do quarto 106, para deixar uma
mensagem, digite sua senha”.
19 de Fevereiro de 2013 22
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Mau Exemplo: Sistema de correio de voz
• Interação
• O cliente não sabe qual é sua senha, tenta o número do seu quarto, sem
sucesso.
• O cliente desiste e liga para a recepção.
• O funcionário explica que o cliente deve digitar, na hora certa, o número do
quarto e o número da extensão do telefone (que é sua senha).
• Além disto, são 6 passos para acessar uma mensagem e 5 passos para deixar
uma mensagem.
19 de Fevereiro de 2013 23
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Mau Exemplo: Sistema de correio de
voz
• Interação
• O cliente decide sair e comprar
um celular novo!
Imagem: Shutterstock
19 de Fevereiro de 2013 24
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Mau Exemplo: Sistema de correio de voz
• Qual o problema deste sistema de voz:
• É irritante
• É confuso
• É ineficiente (exige muitos passos para tarefas básicas)
• É difícil de utilizar
• Os procedimentos não são óbvios
19 de Fevereiro de 2013 25
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Bom Exemplo: Secretária eletrônica projetada por Durrel Bishop (1995)
Fonte: PREECE, ROGERS, SHARP, 2005
19 de Fevereiro de 2013 26
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Bom Exemplo: Secretária eletrônica projetada por Durrel Bishop (1995)
• Descrição do funcionamento:
• As mensagens que chegam são representadas pelas esferas
• Ao colocar um esfera em um determinado orifício do produto, aciona-se a mensagem
gravada
• Ao colocar no outro orifício, disca-se pra quem deixou a mensagem.
19 de Fevereiro de 2013 27
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Bom Exemplo: Secretária eletrônica projetada por Durrel Bishop (1995)
• Características:
• Indica visualmente, de forma rápida, quantas mensagens existem;
• É esteticamente fácil e agradável de usar;
• Requer ações de apenas um passo;
• Apresenta um design simples, mas elegante;
• Oferece menos funcionalidades e permite que qualquer um ouça as mensagens.
19 de Fevereiro de 2013 28
Design deO
Interação
que é Design de Interação?
O que é design de interação?
O que é Design de interação?
“Design de produtos interativos que fornecem suporte às atividades cotidianas das
pessoas, seja no lar ou no trabalho”
(Preece et al., 2005)
“É o projeto de espaços para comunicação e interação humana”
(Winograd, 1997)
19 de Fevereiro de 2013 29
Design deO
Interação
que é Design de Interação?
O que é design de interação?
• A Engenharia foca na solução do problema.
• O Design de Interação foca na interação/no uso da solução pelos usuários,
• Exemplo: Software Computacional
• Engenharia de Software:
• Corretude das funções/cálculos; Desempenho;
• Processo de construção do software; Etc.
• Design de Interação
• Elementos de interface utilizados;
• Estruturação de funções em menus, barras de tarefa, etc;
• Etc.
)
19 de Fevereiro de 2013 30
Design deO
Interação
que é Design de Interação?
O que é design de interação?
• Exemplo: Liquidificador (Engª Eletrônica):
• Funcionamento correto;
• “Poder” de trituração;
• Proteção de contra curtos;
• Dentre outras preocupações.
Imagem: Shutterstock
19 de Fevereiro de 2013 31
Design deO
Interação
que é Design de Interação?
O que é design de interação?
• Exemplo: Liquidificador (Design de Interação)
• Forma e cores do copo;
• Forma e cores da base;
• Tamanho dos botões de funcionamento;
• Força necessária para ativação do botão;
• Etc..
Imagem: Shutterstock
19 de Fevereiro de 2013 32
Design deO
Interação
que é Design de Interação?
O que é design de interação?
• O que é interface?
“Parte de um dispositivo que, ao interligar dois sistemas (o homem e a máquina),
permite ao usuário administrar e supervisionar o funcionamento do dispositivo”
(Oliveira Netto, 2004)
“Esforço conjunto de hardware e software que atuam simultaneamente para
possibilitar e descomplicar a comunicação entre o usuário e a aplicação”
(Oliveira Netto, 2004)
19 de Fevereiro de 2013 33
Design deO
Interação
que é Design de Interação?
O que é design de interação?
Agora que sabemos conceituar o Design de Interação...
... Vamos estudar as suas Metas!
Imagem: Shutterstock
19 de Fevereiro de 2013 34
Metas do design de interação
35
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Para um bom design de interação, precisamos de dois tipos de metas:
• Metas de Usabilidade
• Foco em critérios específicos de usabilidade
• Metas decorrentes da Experiência do Usuário
• Foco na qualidade da experiência do usuário com o sistema
19 de Fevereiro de 2013 36
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Podemos associar a 06 metas principais:
• Eficácia;
• Eficiência;
• Segurança;
• Utilidade;
• Capacidade de aprendizado (learnability);
• Capacidade de memorização (memorability).
19 de Fevereiro de 2013 37
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Eficácia
• Sinônimo de Efetividade;
• Está relacionada à precisão e completude com as quais o sistema faz o que se
espera dele;
• Pergunta:
• O sistema realiza as tarefas às quais se propõe?
• Por exemplo:
• O terminal de autoatendimento bancário é capaz de realizar saques?
19 de Fevereiro de 2013 38
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Eficácia
Que legal, consegui
executar a tarefa ...este
Vou executar que eu pretendia... produto é
a tarefa X. eficaz.
Produto
Interativo
Usuário Usuário
19 de Fevereiro de 2013 39
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Eficácia
– Critérios de Usabilidade para Eficácia:
• Número de tarefas/metas alcançadas;
• Percentual de tarefas/metas alcançadas;
• Percentual de usuários que completaram a tarefa com sucesso;
• Etc.
19 de Fevereiro de 2013 40
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Eficiência
• Meta relacionada aos recursos necessários para que o sistema realize suas tarefas
com precisão e completude;
• Pergunta:
• A tarefa é executada da melhor maneira?
• A tarefa é executada utilizando os recursos necessários de maneira
adequada?
• Por exemplo:
• O terminal de autoatendimento bancário é capaz de realizar saques de
maneira direta?
19 de Fevereiro de 2013 41
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
-- de forma rápida;
-- de forma econômica:
-- financeiramente;
-- no uso de recursos.
• Eficiência -- Etc.
Bom! Consegui
executar a tarefa
que eu pretendia ...este
rapidamente... produto é
eficiente.
Produto
Interativo
Usuário Usuário
19 de Fevereiro de 2013 42
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Eficiência
– Critérios de Usabilidade para eficiência:
• Tempo gasto para completar a tarefa;
• Custo financeiro para completar a tarefa;
• Uso de outros recursos para completar a tarefa
19 de Fevereiro de 2013 43
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Segurança
• Meta relacionada à proteção do usuário de condições perigosas ou situações
indesejáveis;
• Perguntas:
• O sistema previne os usuários de cometerem erros graves?
• salvamento automático;
• caixa de diálogo para confirmação.
• O sistema possibilita a recuperação de situações de erro?
• desfazer (undo).
19 de Fevereiro de 2013 44
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Segurança
Hummmm,
Este produto
consegui
“passa”
Droga! Cometi recuperar-me
segurança
um erro. E deste erro.
para mim.
agora?
Produto
Interativo
Usuário Usuário
19 de Fevereiro de 2013 45
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
Fonte: [Link]
mensagens/
19 de Fevereiro de 2013 46
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Segurança
• Critério de Usabilidade para Segurança;
• Número de situações indesejáveis sem possibilidade de retorno;
• Número de situações onde o usuário recuperou-se do erro;
• Tempo gasto para corrigir erros;
• Número de consultas à ajuda (manual ou online);
• Número do consultas ao serviço de suporte;
• Etc.
19 de Fevereiro de 2013 47
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Segurança
• Como recuperar-se do seguinte erro emitido por um sistema?
• “O valor -3238,92 não é válido com o respectivo padrão ((0)*(,)?([0-9])*)|(([0-
9])*(,)?([0-9])*) para o tipo doubleType.”
• Para que o usuário recupere-se do erro, precisamos fornecer:
• Mensagens/indicações claras;
• Ajuda online (Help, F1).
19 de Fevereiro de 2013 48
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Utilidade
• Refere-se ao mapeamento das necessidades dos usuários com as funcionalidades
do produto;
• Pergunta:
• O sistema fornece funções que permite aos usuários realizar todas as suas
tarefas da maneira que desejam?
19 de Fevereiro de 2013 49
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Utilidade
Ah, encontrei
a função de
Preciso de uma raiz cúbica... ...este
função para cálculo produto é
de raiz cúbica nesta útil.
calculadora.
Produto
Interativo
Usuário Usuário
19 de Fevereiro de 2013 50
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Utilidade
• Critérios de usabilidade para utilidade
• Número de funcionalidades não disponibilizadas;
• Por exemplo...
• Software de automação para hotéis...
19 de Fevereiro de 2013 51
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Capacidade de Aprendizado (learnability)
• Refere-se à facilidade de aprendizado ao utilizar o sistema;
• Perguntas:
• Quão fácil e quanto tempo se leva para:
• iniciar o uso das tarefas fundamentais do sistema?
• aprender um conjunto mais amplo de tarefas?
• Quanto tempo os usuários têm disponível para conhecer o sistema?
19 de Fevereiro de 2013 52
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Capacidade de Aprendizado
Este produto
Nunca utilizei este é fácil de
sistema. Será que Hummmm, aprender.
consigo realizar uma consegui.
operação simples?
Produto
Interativo
Usuário Usuário
19 de Fevereiro de 2013 53
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Capacidade de Aprendizado (learnability)
• Por exemplo:
• aprender a utilizar as funções básicas da maioria dos celulares de hoje em dia
é bastante rápido e fácil.
• Critérios de Usabilidade para Capacidade de Aprendizado:
• Número de opções de menu selecionadas incorretamente;
• Carga horária de treinamento;
• Etc.
19 de Fevereiro de 2013 54
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Capacidade de Memorização (memorability)
• Refere-se à facilidade de lembrar como utilizar um sistema, após já se ter
aprendido como fazê-lo;
• Útil para sistemas que são utilizadas com pouca frequência.
19 de Fevereiro de 2013 55
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Capacidade de Memorização
Este produto é
fácil de
Lembrei!!! memorizar
como utilizá-lo.
Produto
Interativo
Usuário Usuário
19 de Fevereiro de 2013 56
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Capacidade de Memorização (memorability)
• Perguntas:
• Quais estratégias de interface foram utilizadas para auxiliar os usuários a
lembrar como realizar as tarefas?
• Ícones são utilizados para facilitar a memória visual?
• Funções similares estão agrupadas?
• Exemplo: Recortar, Copiar, Colar
19 de Fevereiro de 2013 57
Design deMetas
Interaçãode Usabilidade
Metas do Design de Interação
• Capacidade de Memorização (memorability)
• Critérios de usabilidade para capacidade de memorização:
• Tempo gasto para completar tarefas utilizadas com pouca frequência;
• Percentual de tarefas pouco utilizadas que foram completadas;
• Etc.
19 de Fevereiro de 2013 58
Design deMetas
Interaçãodecorrentes da Experiência do Usuário
Metas do Design de Interação
• Metas decorrentes da Experiência do Usuário
divertido
satisfatório emocionalmente
eficiente adequado
seguro eficaz
agradável compensador
Metas do
Design de
Interação
incentivador
interessante de criatividade
fácil de útil
aprender
fácil de
proveitoso lembrar esteticamente
apreciável
motivador
19 de Fevereiro de 2013 59
Design de Interação
Conclusão da Unidade I
Imagem: Shutterstock
Obrigado!
[Link]@[Link]