Slides que costumo usar para apresentar o design de interação a meus alunos.

1. Introdução ao Design de
Interação
Frederick van Amstel
www.usabilidoido.com.br

2. Quem fala
• Prof. Fred
• Grad. Comunicação Social UFPR
• MsC. Tecnologia UTFPR
• Blog www.usabilidoido.com.br
• Instituto Faber-Ludens
www.faberludens.com.br

3. Conteúdo
• DESIGN E TECNOLOGIA
• Design estratégico no mercado de tecnologia
• Retorno do Investimento em Design
• Processo criativo
• INTRODUÇÃO AO DESIGN DE INTERAÇÃO
• Delineando a experiência de uso
• Pesquisa com usuários
• Ecologia de sistemas

4. Conteúdo
• ARQUITETURA DA INFORMAÇÃO
• Estruturas de classificação e navegação
• Documentação da experiência do usuário
• Metodologia de projetos Web
• DESIGN DE INTERFACES
• Padrões de interação
• Prototipação de interfaces
• Ícones e semiótica

5. O que é
Design de Interação?
Design de Interação é uma área profissional,
uma sub-disciplina do Design e um processo
voltado ao projeto das interações entre pessoas
e sistemas.

6. sistema usuário
Engenharia de Software

7. sistema usuário
Interação Humano-
Computador

8. Diferencial
Engenharias
IHC / Design de Interface
Design de Interação
Antropologia / Marketing

9. Design de Interação como
artefato

10. Design de Interação como
comunicação
usuário artefato usuário

11. Design de Interação como redes
sociotécnicas
U A
U
U
U
A
U
A
U
A
U
U
A

12. Aplicações do Design de
Interação

13. Publicidade e Marketing

14. Urbanismo

15. Brinquedos

16. Lojas conceito

17. Tecnologias Educacionais

18. Medicina

19. Jogos

20. Música

21. Por que esses exemplos
ainda são raros?

22. o que o marketing o que a administração o que foi projetado
sugeriu aprovou pela engenharia
o que foi produzido como foi montado o que o consumidor
queria...
Falta um objetivo comum!

23. Objetivos de
Negócio
Objetivos de
Negócio
Design
Vácuo Valor
Acaso
Objetivos do
Usuário
Objetivos do
Usuário
Design Centrado no Valor, Jess McMullin

24. Engenharia
Marketing Marketing
Processo de desenvolvimento comum

25. Vantagens/Desvantagens
• Economiza planejamento
• Tentativa e erro
• Design não é importante
• O produto é um
frankestein de
funcionalidades
Office XP

26. Marketing
Engenharia Design
Marketing
Design como embelezamento

27. Vantagens/Desvantanges
• Beleza vende
• Que inovação é possível
a essa altura do
campeonato?
Windows Vista

28. Design
Marketing Engenharia
Marketing
Design como inovação

29. Vantagens/Desvantagens
• Melhora a qualidade
• Economiza retrabalho
• Diminui a velocidade
• Risco de não obter
retorno
Office 2007

30. Design
Engenharia
Marketing Marketing
Design como estratégia

31. Vantagens/Desvantagens
• Integra Pesquisa &
Desenvolvimento
• Aumenta o ritmo de inovação
• Fortalece a marca
• Custo elevado
• Depende da cultura
organizacional
Loja Apple em Nova Iorque

32. Discurso da Microsoft

33. inovação
qualitativa
competição pela
sem competição
qualidade
novo mercado
mercado saturado
início da
competição competição pela
inovação quantidade
quantitativa
Como o mercado de produtos evolui

34. Modelos imaginados pela Motorola nos
anos 70 e o que foi comercializado

35. De ferramenta de trabalho a comunicador pessoal

36. Razr Dolce&Gabbana: celular como acessório fashion

37. O diferencial do iPhone é a interface

38. Bebê ensina a usar o iPhone

39. Limites: iPhone não permite muita customização

40. Exercício
• Discussão geral
• Como o Design está ou não integrado aos
processos de sua empresa?
• Como deveria estar?
• 20 minutos

41. Design é inovação?
De qual tipo?

42. Inovação técnica

43. Inovação formal

44. Inovação social

45. Situação atual do mercado de
tecnologia brasileiro
• Sempre correndo atrás do déficit
• Competir em hardware é impossível
• Competir em software é possível, mas
• Ninguém sabe mais o que inventar

46. Outra possibilidade
• Investir em design
• Aproveitar a criatividade do povo brasileiro
• Terceirizar a produção
• Novos meios de distribuição (on demand,
Internet, redes P2P)

47. Exercício
• Esboçar uma crítica à pretensa inovação de
algum produto tecnológico
• Discussão em grupo, apresentação oral
• 5 minutos

48. Características do Design
“Design é a alma das criações humanas”,
Steve Jobs

49. Atividades
Pessoas
Artefatos
Modelo Triádico

50. Multilingüe
Visual Sonora Olfativa
Gestual Tátil

51. Futurologia aplicada
• A diferença entre a
abelha e o arquiteto é
que este último imagina
o todo antes de
construir
• Visão holística
• Observar tendências é a
melhor forma de prever
o futuro

52. Articulação de interesses
• Design é deliberação,
mesmo que implícita
• Desejos e necessidades
são culturais
• Cada um tem uma
história distinta

53. Idealista Materialista
Positivista Crítico
Lógico Dialético
Individualista Coletivo

54. Entrevista com Paulo Melo e Felipe Neri (CESAR)

55. Processo de Design
Design é o design de um design para um design.
John Heskett

56. Modelo Linear

57. Modelo Errático

58. Criando possibilidades

59. Recursos para criar
• Rabiscos
• Brainstorming
• Cenários hipotéticos
• Prototipação rápida
• Abdução

60. Exercício
• Criar conceito de jogo para o BRGames 2009
• Proibido criticar
• Trabalhar em cima das idéias dos outros
• Dinâmica
• 10 minutos

61. Processo dialético
Lowgren e Stolterman
Thoughtful Interaction Design, MIT Press
Tempo
Visão Visão
Img. Operante
Imagem Especificação
Especificação
Operante

62. Modelo Espiralado

63. “O Design não está lá, nem cá; está no meio, ora
pendendo para um lado, ora para o outro, num
movimento que se assemelha à uma dança graciosa. É
preciso saber o momento e o lugar certo para ser rígido
ou flexível, de acordo com as intenções da performance e
com a guia musical. O Design é assim: não cria, mas
recombina; não define, mas propõe; não julga, mas
avalia; não é arte, mas também gosta de dançar…
Para entendê-lo, é preciso dar o primeiro passo!”
Instituto Faber-Ludens de Design de Interação

64. Aspectos e métodos de Design
“Design é uma atividade criativa cuja finalidade
é estabelecer as qualidades multifacetadas de
objetos, processos, serviços e seus sistemas,
compreendendo todo seu ciclo de vida.”
The International Council of Design Societies

65. Meta
Método
how will i get there? explodingdog

66. Metodologia e método
• Metodologia é o estudo crítico dos métodos a
partir de uma perspectiva teórica
• Método é uma estrutura coerente de técnicas
necessárias para atingir um resultado

67. Metodologia Ágil
• Ver funcionando é melhor do
que prever
• Evoluir por iterações
• Diálogo com usuários
• Equipe enxuta
• Compartilhar conhecimento

68. Métodos de
Design de Interaçao
• Prototipação
• Teste de Usabilidade
• Entrevista
• Shadowing
• etc...

69. Guia Colaborativo de Design de Interação

70. Utilidade
Produtos Google

71. Usabilidade
Jitterburg

72. Significado
Charmr

73. Beleza
Sony Digital Walkman

74. Sustentabilidade
Carona USP

75. Crítica: Metodologia Moebius

76. Exercício
• Escolher e adaptar métodos para formar um
processo ideal de desenvolvimento
• 1 hora

77. Balanceando aspectos
• Uma coisa não exclui a outra
• Os aspectos não devem ser tomados em
separado > visão holística
• O critério final deve ser a apropriação para a
situação específica

78. Sistemas não se restringem à funcionalidades

79. Sistemas são ecologias

80. Exercício
• Mapear um ecossistema que vocês tenham
experiência
• Entidades, relações, atividades, entrada-saída
• 20 minutos

81. Importância da pesquisa
• Perceber e compreender a diferença entre as
pessoas
• Mapear as atividades
• Descobrir oportunidades para inovação
• “Botar o pé no chão”

82. Expansão da consciência

83. Esse é nosso diferencial!
Engenharias
IHC / Design de Interface
Design de Interação
Antropologia / Marketing

84. Empresas que investem

85. Nokia: oportunidades em mercados emergentes

86. Motorola: correndo atrás da concorrência

88. Apple: esconder pesquisa e patentear tudo

89. Estudos de Caso

90. Stobag do Brasil
• Customização em massa
de toldos
• Venda complexa
• Especificação dos
sistemas de apoio à
revenda

91. Visitas e entrevistas
• Compreender o negócio
sob múltiplas
perspectivas
• Funcionários e
revendedores (usuários)
• Identificação de
situações de baixa
eficiência

92. Processo de venda

93. Design do ecossistema

94. Financeiro Web - Brame

95. ADM - Análise de Helpdesk

96. Automação do Lar - Specto

97. Visualização de atividade em prédios

98. Ozonin - Spherical

99. CIMM

100. Proposta de redesign

101. Exercício
• Escolher uma atividade a ser estudada
• Criar um conceito de serviço web 2.0 inspirado
nessa atividade
• Planejar uma pesquisa com usuários potenciais

102. Análise da atividade
Cuidado intensivo de bebês prematuros
Objeto compartilhado Resultado
Processos, Ações
Photo © 2000 Vilma Vainikainen
Photo © 2000 Vilma Vainikainen
Baseado em Korpela (2004)

104. Análise das ações
Meio de coordenação entre as ações
Ator
Ação
Meio de ação
Objeto da ação
oto © 2000 Vilma Vainikainen
Shared object
of activity

106. Análise da rede
O resultado de uma atividade se torna o objeto de outra
Photo © 2000 Vilma Vainikainen
Meio de conexão
entre as
atividades

108. Cristalização nos instrumentos
Yrjo Engeström
instrumentos
pessoas objeto resultado
regras divisão do trabalho
comunidade

109. Mudança na atividade
Yrjo Engeström
instrumentos
pessoas objeto resultado
regras divisão do trabalho
comunidade

110. Steve Jobs na MacWorld 2007

111. Crise no sistema
Clay Spinuzzi
Blackberry
pessoas objeto resultado
regras divisão do trabalho
comunidade
Botões não se adaptam aos múltiplos objetos

112. Teclado on-screen do iPhone

113. Reconfiguração do sistema
iPhone
pessoas objeto resultado
regras divisão do trabalho
comunidade
Teclado on-screen é impreciso

114. Resumindo o Processo
atividade atividade
artefatos artefatos

115. A base para seu projeto deve ser a atividade humana

116. A base para seu projeto deve ser a atividade humana

117. Exercício
• Grupos de 2 separados por facilidades
geográficas
• Definir a atividade
• Criar o conceito de serviço Web 2.0
• Expor numa cartolina apenas
• Convencer outra equipe a aderir ao projeto

118. Obrigado! Dúvidas?
Frederick van Amstel
www.usabilidoido.com.br
www.faberludens.com.br