O que

1
O que é Design de Interação?
2
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)

3
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

4
Exemplos de umbom 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ê?

5
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 qualquer convenção

From www.baddesigns.com
6
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

7
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.

8

• 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

9
O que é interface?

• ?

10
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

11
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.

12
Relação entre DI, IHM e outros campos
Disciplinasacadêmicas (ciência da
computação, psicologia)
Práticas de design (design gráfico)
Design daInteração
Campos interdisciplinares (IHM, trabalho
cooperativo suportado por computador)
13
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

14
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

15
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

16
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.

17
Design da interaçãoem 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

18
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

19
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

20
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

21
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

22
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?

23
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

24
Metas de usabilidade e asdecorrentes 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?

25
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

26
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 devemos fazer?
• Não é explicito o que devemos fazer!

www.baddesigns.com
27
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

28
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
29
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

30
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?

31
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

32
Design lógico ou ambíguo?

• Onde conectar o mouse?
• Onde conectar o teclado?
• Conector de cima ou o debaixo?
• O ícones coloridos ajudam?

www.baddesigns.com
33
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
34
Design lógico ou ambíguo?
35
Design lógico ou ambíguo?
36
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.

37
Quais são universais e quais são culturalmente
específicos?
38
Mapeamento

• Relação entre os controles, suas ações e o
  resultado no mundo real
• Por quê o mapeamento dos botões abaixo é pobre?

39
Mapeamento

• Por quê o mapeamento abaixo é melhor?
• Os botões estão mapeados de acordo com a
  seqüência de ações

40
Mapeamento

• Quais botões correspondem a quais queimadores?

A
B
C
D
41
Mapeamento
42
Por quê o designabaixo é melhor?
43
Mapeamento
44
Mapeamento
45
Consistência

• Projete interfaces para ter operações similares e
  utilizar elementos similares para tarefas
  similares
• Por exemplo
• ctrlC, ctrlS, ctrlO
• O maior benefício é que as interfaces tornam-se
  fáceis de se aprender de de se utilizar.

46
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 ctrlS, ctrlSp, ctrlshiftL
• Aumenta o esforço para o usuário aprender e
  aumenta a probabilidade de erros (CTRL B
  negrito / salvar).

47
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.

48
Layout do teclado numérico

• Um caso de consistência externa

(a) telefones e controles remotos
(b) calculadoras e teclados de computador
8
9
1
2
7
3
4
5
6
4
5
6
8
9
1
2
7
3
0
0
49
Consistência
50
Consistência
51
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.

52
O que affordance tem aoferecer 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

53
Affordance
54
Affordance

• Affordances físicos
• Como é o affordance dos objetos aqui
  apresentados? São óbvios?

55
Affordance
56
Affordance

• Affordance virtual
• Quais dos seguintes objetos tem affordance?
• E se você for um usuário novato?
• Você saberia como utilizá-los?

57
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.

58
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.

59
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!

60
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.