1. Design de Interação
em Produtos Eletrônicos
Frederick van Amstel @usabilidoido
Edyd Junges @edyd
Instituto Faber-Ludens de Design de Interação

2. A complexidade dos produtos eletrônicos aumenta ao
longo do tempo.

3. Nossa visão sobre Design de
Interação

4. Design de Interação como Artefato

5. U A
U
U
U
A
U
A
U
A
U
U
A
Design de Interação como Rede Sociotécnica

6. Relação entre áreas
Design
Design Design de
Gráfico Design de Interação Produto
Design de Interface
Design Digital
Web Design
GUI Design

7. O desenvolvimento de Tecnologia
é Multidiscplinar

8. Contexto em foco das disciplinas
Engenharias
Usabilidade / Design de Interface
Design de Interação
Antropologia / Marketing

9. A briga toda começou porque o Pedro emprestou o chip
para copiar músicas para a namorada e não quiz devolver
depois.

10. Perfil do Designer de Interação

11. Conhecimento na cabeça: como abrir estas portas?
(Norman, 2006)

12. Conhecimento no mundo: barras indicam onde puxar

13. Conhecimento no mundo: barras indicam onde puxar

14. Conhecimento no mundo: barras indicam onde puxar

15. Propiciação em interfaces
gráficas (Eaton, 2002)

16. Propiciação como objeto
compartilhado
Design de Design
O quê? Como?
Produto Gráfico
Propiciação
Design de Onde? Porque? Design de
Serviços Interação

17. A importância da Colaboração

18. Os Três Pilares do produto,
Donald Norman
Produto
Marketing Design
Engenharia

19. O objetivo do Marketing é que o consumidor compre.

20. Design é que o produto seja bonito e fácil de usar.

21. O objetivo da Engenharia é que o produto funcione.

22. Todas as áreas de uma organização
precisam ter bem claro seus
objetivos compartilhados, senão...

23. o que o o que a administração o que foi
marketing aprovou projetado pela
sugeriu engenharia
o que foi como foi montado o que o
produzido consumidor
queria...

24. Experiência do Usuário não é requisito. É estratégia.

25. Os nove pilares de times web de
sucesso, JJ Garret

27. Regras do jogo da colaboração
• O objetivo é chegar com o máximo de peças ao
mesmo tempo na marca “End”
• Todas as peças precisam pular uma ponte por
turno
• A ponte só pode ser usada uma vez por turno
• Dependendo do tamanho da ponte, podem se mover
várias peças de uma vez
• Se uma pessoa não puder se mover, ela deve ser
retirada do jogo e o jogo se tornará mais
difícil

28. Condições para a Colaboração
• Feedback rápido
• Transparência
• Comprometimento
• Fechamento

29. Método The Bridge

30. Objetivo do método
• Promover a colaboração na análise de
requisitos em software
• Partir dos objetivos dos usuários e não
da descrição do sistema

31. Processo
1. Análise da 2. Criação de
3.Prototipação
Tarefa Objetos

32. 1. Defina uma tarefa

33. 2. Extraia os objetos

34. 3. Rascunhe as telas

35. Criando uma Linguagem Icônica
Objetos Limitadores
Ações Qualificadores

36. Resultado

37. Documentação para Design de
Interação

38. Texto

39. Características da Documentação
• Demorado
• Polissemia
• Desatualização
• Precisão
• Referência estavel

40. Mapa mental

41. Curva de aprendizado
90 Adobe Photoshop
Corel Photopaint
67,5
45
22,5
0
1 semana 2 semanas 3 semanas 4 semanas

42. Diagrama de Etapas

43. Diagrama Situacional

44. Relação entre objetos
associativo

45. Relação entre objetos com verbos

47. Especificação de funcionalidades
Mural do usuário
Na página do perfil do usuário, haverá
um pequeno mural para outros usuários
deixarem recados como, por exemplo,
convidando o usuário dono do perfil a
responder uma pergunta sua. O dono do
perfil poderá optar por desligar o
mural.

48. Diagrama Sequencial

49. Diagrama Sequencial Negativo

50. Swimlane

51. Molic
SERG - PucRio

52. Vocabulário Visual

53. Wireframe

54. Wireframes anotados

55. Gesturecons

56. Gesture Stencils

57. Processo de Design de Interação
“Design é o design de um design para um design.”
John Heskett

58. Modelo Linear

59. Modelo Errático

60. Modelo convergente
criação
análise
criação
análise
análise
análise criação análise
criação
criação
análise análise
criação
análise análise
criação
criação

61. Explorando o espaço de
possibilidades

62. Recursos para criar
• Fala
• Rabiscos
• Brainstorming
• Cenários hipotéticos

63. Focalizando no que é viável

64. Recursos para Analisar
• Teste de Usabilidade
• Heurísticas
• Entrevistas
• Protótipos

65. Modelo Espiralado