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
– Sharp, Rogers e Preece (2002)
• O projeto de espaços para
comunicação e interação humana
– Winograd (1997)
Objetivos do design de interação
• Desenvolver produtos com boa
usabilidade
– Usabilidade significa fácil de aprender,
efetivo de se usar e proporciona uma
experiência agradável ao utilizar-se
• Envolver os usuários no processo
de design
Exemplos de um
bom e mau design
– Os botões do elevador e suas respectivas
legendas na linha inferior são do mesmo
tamanho e forma, induzindo o usuário a
erros.
– As pessoas não cometem os mesmos erros
na linha de cima. Por quê?
Por quê esta máquina de
vendas é tão ruim?
From: www.baddesigns.com
• Precisa-se
pressionar o botão
para ativar o
display;
• Normalmente é
necessário inserir
uma moeda antes
de selecionar-se o
produto
• Quebra toda e
qualquer convenção
O que projetar
• Devemos considerar:
– Quem são os usuários
– Quais atividades eles desempenham
– Aonde a interação tem lugar
• Necessidade de otimizar a interação que
o usuário tem com o produto
– Considerar como essa interação pode ajudar
em suas tarefas e quais são as
necessidades dos usuários
Entendendo as necessidades
dos usuários
– Considerar no que as pessoas são boas
ou não;
– Considerar o que pode auxiliar as
pessoas na sua atual maneira de fazer as
coisas;
– Pensar o que pode proporcionar
experiências de qualidade ao usuário;
– Ouvir o que as pessoas querem e
envolvê-las no design;
– Utilizar técnicas baseadas no usuário
“testadas e aprovadas” durante o
processo de design.
• Qual é a diferença de fazer uma
chamada usando-se:
– um telefone celular
– um telefone público
• Considere os tipos de usuário, o
tipo de atividade e o contexto de
uso
O que é interface?

Evolução das interfaces IHM
• anos 50 - interface a nível de hardware, com
painel de chaves
• anos 60 a 70 - Interface a nível de
programador (Cobol, Fortran)
• anos 70 a 90s - Interface a nível de terminal
com linha de comando
• 80s - Interface a nível de diálogo como
interação (GUIs, multimídia)
• 90s - Interface a nível de grupos de trabalhos
e sistemas distribuídos
• 00s - A interface torna-se pervasiva
– tags RF, tecnologia bluetooth, dispositivos
móveis, telas interativas, tecnologia
embarcada
IHM e o design da interação
• Interface Homem-Máquina (IHM) é:
“o design, a avaliação e a implementação de sistemas
computacionais interativos para uso humano e com o
estudo de fenômenos importantes que os rodeiam”
(ACM SIGCHI, 1992, p.6)
• Design da Interação (DI) é:
“o projeto de espaços para comunicação e interação
humana”
– Winograd (1997)
• Uma equipe multidisciplinar significa muito mais idéias
sendo geradas, novos métodos sendo desenvolvidos e
designs mais criativos e originais sendo produzidos.
Relação entre DI, IHM e
outros campos
Disciplinas
acadêmicas
(ciência da computação,
psicologia)
Práticas de design
(design gráfico)
Design da
Interação
Campos interdisciplinares
(IHM, trabalho cooperativo
suportado por computador)
Relação entre DI, IHM e
outros campos
• Disciplinas acadêmicas que
contribuem para o DI:
– Psicologia
– Ciências sociais
– Ciência da Computação
– Engenharia
– Ergonomia
– Informática
Relação entre DI, IHM e
outros campos
• Práticas de design que contribuem
para o DI:
– Design gráfico
– Design de produto
– Design artístico
– Design industrial
– Indústria cinematográfica
Relação entre DI, IHM e
outros campos
• Campos interdiciplinares que fazem DI:
– IHM
– Fatores humanos
– Engenharia cognitiva
– Ergonomia cognitiva
– Trabalho cooperativo suportado por computador
– Sistemas de informação
Quais as dificuldades ao
trabalhar-se com equipes
multidisciplinares?
• Reunir tantas pessoas com formações e
treinamentos diferentes significa muito
mais idéias sendo geradas… mas…
• A maior dificuldade pode ser a
comunicação e o desenvolvimento em
uma única direção diante de inúmeros
designs e propostas.
Design da interação
em negócios
• O design de interação é agora um grande negócio:
– Grupo Nielsen-Norman: “ajuda as companhias a
entrarem na era do consumidor, projetando produtos
e serviços centrados no usuário”
– Swim: “proporciona uma visão detalhada da
usabilidade e do design do produto feita por um
especialista”
– IDEO: “criar produtos, serviços e ambientes para as
companhias é uma forma pioneira de agregar valor
aos seus clientes”
O que os profissionais
fazem no negócio de DI?
• designers de interação - pessoas envolvidas em
todos os aspectos interativos de um produto
• engenheiros de usabilidade - pessoas que avaliam
produtos utilizando métodos e princípios de usabilidade
• web designers - pessoas que desenvolvem e criam o
design visual de websites
• arquitetos da informação - pessoas que tem idéias
de como planejar e estruturar produtos interativos,
especialmente websites
• designers de novas experiências ao usuário pessoas que realizam todas as tarefas anteriores, mas
que também podem realizar estudos de campo a fim de
fomentar o design de produtos
O que está envolvido no
processo de DI?
• Identificar necessidades e estabelecer
requisitos
• Desenvolver designs alternativos
• Construir versões interativas dos designs de
maneiras que possam ser comunicados e
analisados
• Avaliar o que está sendo construído durante
o processo
Características-chave em DI
• Os usuários devem estar envolvidos no
desenvolvimento do projeto
• A usabilidade específica e as metas
decorrentes da experiência do usuário
devem ser identificadas, claramente
documentadas e acordadas no início do
projeto
• A interação é inevitável
Metas de usabilidade
• Ser
• Ser
• Ser
• Ser
• Ser
• Ser
eficaz no uso (eficácia)
eficiente no uso (eficiência)
seguro no uso (segurança)
der boa utilidade (utilidade)
fácil de aprender como se usar
fácil de lembrar como se usa
Usabilidade
• Quanto de tempo deveria ser
necessário e quanto de tempo é
necessário atualmente para:
– usar um VCR para assistir um vídeo?
– Usar um VCR para gravar 2
programas?
– Usar um software de autoria para
criar um website?
Metas decorrentes da
experiência do usuário
– Satisfatórios
– Agradáveis
– Divertidos
– Interessantes
– Úteis
– Motivadores
– Compensadores
– Estéticamente agradáveis
– Icentivadores de criatividade
– Emocionalmente adequados
Metas de usabilidade e as
decorrentes da experiência do
usuário
• Como as metas de usabilidade podem ser
diferentes das decorrentes da experiência do
usuário?
• Existe uma interação entre os 2 tipos?
– e.g. pode um produto ser divertido e seguro?
• É possível reconhecer e entender o equilíbrio
entre as metas de usabilidade e as
decorrentes da experiência do usuário?
Princípios de design
• Generalizar abstrações destinadas a
orientar os designers a pensar sobre os
aspectos diferentes de seus designs
• Orientar os designers o que utilizar e o
que evitar em uma interface
• Derivado de um conjunto de
conhecimentos baseados em um
conjunto de teorias, experiência e senso
comum
Visibilidade
www.baddesigns.co
m
• Este é um painel de
controle de um elevador.
• Como ele funciona?
• Aperta-se o botão
correspondente ao andar
que você deseja?
• Nada acontece. Aperta-se
qualquer outro botão?
Ainda nada! O que nós
devemos fazer?
Não é explicito o que
devemos fazer!
Visibilidade
…você deve inserir o seu crachá com código de barras ou
tarja magnética para que o elevador funcione!
Como podemos tornar isso mais visível?
• tornar a leitora mais óbvia
• utilizar uma mensagem de alerta, a qual indica o
que fazer (em qual linguagem?)
• disponibilizar uma etiqueta com cores de alerta
com instruções de como utilizar o crachá para
acionar o elevador
• tornar as partes mais relevantes visíveis
• tornar óbvio o que deve ser feito
Feedback
• Retornar ao usuário a informação do
que foi executado
• Inclui sons, brilhos, animações e a
combinação de todos esses elementos
– exemplo: quando o botão é clicado ele
retorna um som ou apresenta uma borda
vermelha ao redor:
“ccclichhk”
Restrições
• Restrições que permitem apena que
alguns tipos de ações possam ser
executadas
• Ajuda para previnir que o usuário
selecione opções incorretas
• 3 tipos de restrições (Norman, 1999)
– física
– cultural
– lógica
Restrições físicas
• Refere-se como os objetos ou formas
restringem o movimento
– Exemplo: apenas um lado correto para
inserir um disquete no drive ou um
dispositivo na porta USB
• Quantas formas possíveis nós temos
para inserir um CD ou um DVD no
respectivo drive no computador?
• Qual é a restrição física que existe?
• Qual a diferença entre o drive de CD e o
disquete quanto às formas de inserir a
mídia?
Restrições lógicas
• Dependem do senso comum dos
indivíduos a respeito das ações e suas
conseqüências. Dependem do
entendimento que as pessoas tem
sobre a maneira que o mundo funciona
Design lógico ou ambíguo?
• Onde conectar o
mouse?
• Onde conectar o
teclado?
• Conector de cima ou
o debaixo?
www.baddesigns.com
• O ícones coloridos
ajudam?
Como projetar de forma
mais lógica?
(A) Mapeamento
direto entre a
legenda e o
conector
www.baddesigns.com
(B) Cores são
utilizadas para
associar os
conectores com
as respectivas
legendas
Design lógico ou ambíguo?
Design lógico ou ambíguo?
Restrições culturais
• Aprendemos
convenções
arbitrárias como por
exemplo, um
triângulo vermelho
para alertas e avisos.
• Podem ser universais
ou culturalmente
específicas.
Quais são universais e quais
são culturalmente específicos?
Mapeamento
• Relação entre os controles, suas
ações e o resultado no mundo
real;
• Por quê o mapeamento dos botões
abaixo é pobre?
Mapeamento
• Por quê o mapeamento abaixo é
melhor?
• Os botões estão mapeados de acordo
com a seqüência de ações
Mapeamento
– Quais botões correspondem a quais
queimadores?
A
B
C
D
Mapeamento
Por quê o design
abaixo é melhor?
Mapeamento
Mapeamento
Consistência
• Projete interfaces para ter operações
similares e utilizar elementos similares
para tarefas similares;
• Por exemplo:
– ctrl+C, ctrl+S, ctrl+O
• O maior benefício é que as interfaces
tornam-se fáceis de se aprender de de
se utilizar.
Quando a consistência
é quebrada
• O que acontece se houver mais de um
comando começando com a mesma
letra?
– exemplo: save, spelling, select, style
• Temos que encontrar outras iniciais ou
quebrar a consistência encontrando
outras combinações de teclas.
– Exemplo: ctrl+S, ctrl+Sp, ctrl+shift+L
• Aumenta o esforço para o usuário
aprender e aumenta a probabilidade de
erros (CTRL + B
negrito / salvar).
Consistência interna e externa
• Consistência interna refere-se ao design
de operações que terão um
comportamento padrão na mesma
aplicação;
– Dificuldade de implementar em interfaces
complexas;
• Consistêcia externa refere-se ao design
de operações, interfaces, etc., que serão
as mesmas independentemente da
aplicação
– Caso muito raro por causa das preferências
pessoais do designer.
Layout do teclado numérico
• Um caso de consistência externa
(a) telefones e
controles remotos
(b) calculadoras e
teclados de computador
1
4
2
5
3
6
7
8
9
4
5
6
7
8
9
1
0
2
3
0
Consistência
Consistência
Affordances
• Refere-se ao atributo de um objeto que
permite às pessoas saber como utilizá-lo
– exemplo: o botão do mouse convida a clicar, o trinco
da porta convida a ser rotacionado, etc.
• Norman (1988) definiu o termo como “dar
uma pista” e introduziu o termo para falar
sobre o design de objetos de uso diário
• Desde então, o conceito foi muito
popularizado, sendo utilizado para descrever
como objetos de interface deveriam ser
projetados de maneira a tornar óbvio o que se
pode fazer com eles
– exemplo: scrollbars, ícones, etc.
O que affordance tem a
oferecer ao design de interação?
• Interfaces são virtuais e não possuem
affordances como os objetos físicos
• Norman diz que infelizmente o termo
affordance tornou-se uma espécie de clichê,
perdendo muito de sua força como princípio de
design
• Ao invés de interfaces é melhor conceitualizar
como affordances percebidas
– O mapeamento entre uma representação virtual e o
seu comportamento é arbitrário e o usuário terá que
aprender as conveções estabelecidas
– Alguns mapeamentos são melhores que outros
Affordance
Affordance
– Affordances físicos:
Como é o affordance dos objetos
aqui apresentados? São óbvios?
Affordance
Affordance
– Affordance virtual
Quais dos seguintes objetos tem affordance?
E se você for um usuário novato?
Você saberia como utilizá-los?
Princípios de usabilidade
• Similares aos princípios de design,
porém mais prescritivos;
• São utilizados principalmente para
a avaliação de sistemas;
• Fornecem um framework para a
avaliação heurística.
– Os princípios de design quando usados na prática,
normalmente são conhecidos como heurística.
Princípios de usabilidade
•
•
•
•
•
•
•
•
•
•
(Nielsen 2001)
Visibilidade do status do sistema;
Compatibilidade do sistema com o mundo real;
Controle do usuário e liberdade;
Consistência e padrões;
Ajuda os usuários a reconhecer, diagnosticar e
recuperar-se de erros;
Prevenção de erros;
Reconhecimento em vez de memorização;
Flexibilidade e eficiência de uso;
Estética e design minimalista;
Ajuda e documentação.
Pontos principais
• O DI preocupa-se com o projeto de
produtos interativos que apóiem os
indivíduos em sua vida diária e em seu
trabalho;
• O DI é multidisciplinar, envolvendo
muitas contribuições de uma ampla
variedade de disciplinas e áreas;
• O DI é um grande negócio. Muitas
empresas o querem, mas poucas sabem
como fazê-lo!
Pontos principais
• O DI requer que se leve em consideração
vários fatores interdependentes, incluindo o
contexto de uso, o tipo de tarefa e o tipo de
usuário;
• As metas decorrentes da experiência do
usuário estão preocupadas em criar
sistemas que melhorem esta experiência;
• Os princípios de design e de usabilidade
constituem heurísticas úteis para analisar e
avaliar aspectos de um produto interativo.