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?
• 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
From: www.baddesigns.com
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
Práticas de design
(ciência da computação,
(design gráfico)
psicologia)

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 eficaz no uso (eficácia)

• Ser eficiente no uso (eficiência)
• Ser seguro no uso (segurança)
• Ser der boa utilidade (utilidade)
• Ser fácil de aprender como se usar
• Ser 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
• 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
www.baddesigns.co
m
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

(B) Cores são

utilizadas para
associar os
conectores com
as respectivas
legendas
www.baddesigns.com
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 (b) calculadoras e
controles remotos teclados de computador

1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
0 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.