O documento discute conceitos fundamentais de design de interação, incluindo: (1) design de interação não é apenas computação ou interfaces, mas sim o projeto de interações mediadas por artefatos digitais; (2) o designer de interação pesquisa, projeta e avalia esses artefatos como websites e aplicativos; (3) design de interação é uma disciplina interdisciplinar que se desenvolveu a partir de campos como computação, design e psicologia.

1. o que é isto,
a interação?
rodrigo@gonzatto.com
rodrigo gonzatto
introdução a história
design de interação,
gonzatto.com
conceitos de
interação

2. O que não é Design de Interação?
• Não é Computação, mas também é.
• É Interação Humano-Computador (IHC),
mas também é outra coisa.
• É diferente de Design de Interfaces (GUI)
(ou de Webdesign, etc).

3. O que faz / estuda ?
• O designer de interação debate, pesquisa, projeta,
adapta, testa e avalia artefatos como websites,
softwares, celulares, tablets, painéis, videogames, etc.
• Seu objeto é o projeto das interações humanas
mediadas por artefatos interativos, ou seja, coisas
digitais que participam ativamente da ação humana
• O profissional em designer de interação:
de avaliador de telas e criador de interfaces até
pesquisador de nichos de mercado

4. O que é Design de Interação?
(é Disciplina?)
• Campo de pesquisa interdisciplinar
• Exemplos de campos influentes:
‣ Interação Humano Computador (Computação)
‣ Design Participativo (Sistemas de Informação)
‣ Design Gráfico + Design de Produto (Design)
‣ Cognição e Comportamento (Psicologia)
‣ entre outros…

5. Dan Saffer

6. Fazer “DESIGN”
em Design de Interação
• Prototipação: pensar com materiais
• Iteração: processo não-linear
• Colaboração e Participação: co-construção
• Pesquisa: com equipe, usuários, stakeholders, contexto,
artefatos, etc.
“Pensar artefatos de 'fora' para ‘dentro'."
“Um sistema não funciona
se quem o manuseia não dá sentido à ele.”

7. asinterações
ainteração

8. o que é
isto? imagem de
Wittgeinstein
(via. Matias Arvola)

9. “O significado de algo não depende apenas da
própria coisa. Se dá na interação.
E a interação não está somente no sistema ou
somente em quem usa. É mediação entre estes”
Pato! Coelho!

10. adaptado
de
Alex Primo
Interação reativa
Interação mútua
Marketing
onde se dá a
interação?

11. imagem de
Matias Arvola
múltiplos
interagires

12. A “INTERAÇÃO”
como encontro de ações
• Quando a ação de A e ação de B se encontram
A BAção Ação

13. A “INTERAÇÃO”
como todo maior que as partes
• A +B = C
• Na interação, os limites entre ações se confundem.
A ação é conjunta (C), não apenas duas ações isoladas
EntreAção Ação
C

14. “Quanta" interação?
“Qual" interação?
• Existe “mais" ou “menos" interação?
• “Interativo” pode ser uma ‘qualidade’ de algo? Podemos
falar de tipos de interação?
• A interatividade não tem fim em si mesma! (Interação por
interação,“adicionar interatividade num produto como se
fosse uma feature")

15. interação
com
computadores
na história

17. Breve histórico: as 3 "momentos"
Fatores Humanos
linha de comando
um computador para
muitos
Ergonomia
IHC
interface gráfica
um computador,uma
pessoa
Psicologia
Design de Interação /
UX
interfaces tangíveis,
dispositivos móveis,
afetividade...
uma pessoa,
vários computadores
Design
Ciências Sociais
Antropologia
Filosofia
Computação Ciências Cognitivas Arquitetura
Arte
ComunicaçãoSistemas de Informação
70’s

18. modelo de
Luiz Ernesto Merkle

19. abordagens
históricas
• Sistema
• Parceiro de discurso
• Ferramenta
• Mídia
• Mediação

20. Sistema
// @ #
& * %
usuário como
computador

23. ENIAC
Electronic Numerical Integrator And Computer
Computador e Integrador Numérico Eletrônico
1943: começou a ser desenvolvido
1947: começou a funcionar
ocupava 180 m²
pesava 30 toneladas
construção foi requisitada pelo exército EUA
custo de U$ 500 mil (+ ou - U$6 milhões hoje)

24. “bug” de computador
Grace Hopper em 1945 trabalhando no Mark II (Harvard)

26. ENIAC “girls” (década de 40)

27. usar = operar = programar
operadora = programadora

28. programando com a mão:
https://www.youtube.com/watch?v=P12r8DKHsak

30. Parceiro de discurso
computador
como pessoa
I.A.

31. IBM PC
Teclados!

32. ordene: mem(ória)
e como resposta terá informações sobre a memória do computador

33. peça: dir(etório) e como resposta terá informações sobre o diretório
peça: CD (Change Directory, ou CHDIR) e o computador obedece

34. CD PASTA
(C)hange (D)irectory
para PASTA
C:/ _Você está em C:/
C:/PASTA _Você esta em C:/PASTA/

37. filme: 2001 - Uma Odisséia no Espaço
noção de inteligência artificial

38. teste de turing, de Alan Turing
“Há como imaginar um computador digital que faria bem o jogo da imitação?”

39. crítica: quarto chinês de Searle
computadores podem entender a sintaxe mas não a semântica
não-chinês preso na China utilizando uma tabela para traduzir
não entende Chines mas consegue se comunicar

40. cartesianismo
humanos (sistema) = máquinas (sistema)

41. CB2 - Osaka University

42. uncanny valley

44. Será que a memória e a lógica humana
funciona como a memória e lógica computacional?
adaptado de slides
de Frederick van Amstel

45. + retroalimentação (feedback)
meio exterior

46. Flak 18 era um canhão antiaéreo
ilustração de Tartaglia (Nova scientia inventa) 1537

47. tabelas de tiro do exército dos EUA
para canhões de 3 polegadas
na 1ª Guerra Mundial:

50. Ferramenta
trabalho
ou produto
+ = = =

51. ferramenta-mouse: outra interação

52. Sistema STAR da Xerox

53. mother of all demos, 1968
Douglas Engelbart
GUI - graphic user interface
+ mouse + teclado

54. ferramentaVisiCalc
e planilhas eletrônicas

55. sketchpad, 1963
Ivan Sutherland

58. Mídia / Linguagem
DxI

59. Navegadores

62. QUAL O 1º SITE?
homepages
site de provedor e portais
e-mail e buscadores
redes sociais
notificação push

63. Comunicadores e conversa on-line

64. Web 2.0
Redes sociais, comunidades, blogs
user-generated content
ajax
Brasil:
fulano.com
beltrano.com
videolog.com
flogao.com

65. p2p

67. League of Legends
Intel Extreme Masters
2010

68. League of Legends
season 2014

71. Mediações
Significado, Valores, Discursos, Ideologia Cultura e

72. Curious Rituals, 2012
Media Design Program
Art Center College of Design in Pasadena, California.

73. Nipple Chair, Anthony Dunne
Prazeres complicados

75. Press X to make a Sanduich
Anjin

77.
rodrigo@gonzatto.com
rodrigo gonzatto
gonzatto.com