SlideShare uma empresa Scribd logo
1 de 15
Baixar para ler offline
• Temporalidade: diferença 

entre interação e interface
• Interação como música: 

possui ritmos e andamentos
• Interação como narrativa: 

revelar a estória ao longo do tempo
• Interação como dança: 

Conduzir e ser conduzido
DESIGN DE INTERAÇÃO
E O TEMPO
Parangolé
QUANDO?
interagir,
quando?
O Tempo no DxI (por Dave Malouf)
• Andamento ou Ritmo (narrativa)
• Reação (síncrono/assíncrono)
• Contexto
Segundo Alan Cooper & Robert Reimann
• Sovereign – toma toda sua atenção
•Transient – na periferia da sua atenção, chamando
apenas para curtos momentos
• Daemonic – sistemas de alerta
• Parasitic – modo de suporte à interação tanto para
aplicações soberanas quanto transitórias.
Texto
Interface gráfica do Guitar Hero.
Conduza seu corpo (dedos, olhos, mãos, braços...) de acordo com os sinais exibidos.
Interface gráfica do StepMania.
Conduza seu corpo (pés, olhos, pernas...) de acordo com os sinais exibidos.
Jogo multiplayer massivo. Espere até poder jogar novamente.
A dança dos dedos
Conduza a ponta dos seus dedos...
Interface do Gtalk. O “Pessoa está digitando...” indica que algo está acontecendo e também
de que algo está para acontecer (chegar a mensagem). Muda a forma de interagir.
Interface de Add-on no Firefox. Ele não permite que você clique instantaneamente no
botão “Instalar”, obrigando a esperar 3 segundos. Com isso sugere um breakdown.
Interface de instalação com jogo enquanto o download da instalação não termina.
Propõe uma atividade enquanto se espera o resultado de outra terminar.
Sites de download: versões pagas e gratuitas. Velocidade e lentidão como argumento para
compra de um serviço do site. O design visual força a ideia de que ter que esperar é ruim. Mas
porque 19 minutos é lento se, em alguns lugares (ou no passado), era rápido?
Antiga tela de erro do orkut
Feedback visual de novidade. A interface apresenta os tweets de modo sequencial a partir
do horário (com exceção de tweets patrocinados). Mostra aviso de tweets novos.
Interface do Plurk
Interface horizontal e vertical simultaneamente. Representação visual da temporalidade
na esquerda (mais antigo) para a direita (mais novo), e de cima (mais antigo) para baixo (mais
novo).

Mais conteúdo relacionado

Mais de Rodrigo Freese Gonzatto

Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019Rodrigo Freese Gonzatto
 
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...Rodrigo Freese Gonzatto
 
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...Rodrigo Freese Gonzatto
 
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...Rodrigo Freese Gonzatto
 
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...Rodrigo Freese Gonzatto
 
Design de Moda e Design Digital: o corpo como fulcro do projeto
Design de Moda e Design Digital: o corpo como fulcro do projetoDesign de Moda e Design Digital: o corpo como fulcro do projeto
Design de Moda e Design Digital: o corpo como fulcro do projetoRodrigo Freese Gonzatto
 
Interação, tecnologia e produção da existência em álvaro vieira pinto
Interação, tecnologia e produção da existência em álvaro vieira pintoInteração, tecnologia e produção da existência em álvaro vieira pinto
Interação, tecnologia e produção da existência em álvaro vieira pintoRodrigo Freese Gonzatto
 
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...Rodrigo Freese Gonzatto
 
Projetando interações opressivas e libertárias com o corpo inteiro
Projetando interações opressivas e libertárias com o corpo inteiroProjetando interações opressivas e libertárias com o corpo inteiro
Projetando interações opressivas e libertárias com o corpo inteiroRodrigo Freese Gonzatto
 
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]Rodrigo Freese Gonzatto
 
Internet: Descentralização ou Centralização?
Internet: Descentralização ou Centralização?Internet: Descentralização ou Centralização?
Internet: Descentralização ou Centralização?Rodrigo Freese Gonzatto
 
Rabiscando os rabiscos do modelo da ação de Bill Verplank
Rabiscando os rabiscos do modelo da ação de Bill VerplankRabiscando os rabiscos do modelo da ação de Bill Verplank
Rabiscando os rabiscos do modelo da ação de Bill VerplankRodrigo Freese Gonzatto
 
Alguns apontamentos sobre Arte Digital: Glitch Art, GIF Art e Vaporwave
Alguns apontamentos sobre Arte Digital: Glitch Art, GIF Art e VaporwaveAlguns apontamentos sobre Arte Digital: Glitch Art, GIF Art e Vaporwave
Alguns apontamentos sobre Arte Digital: Glitch Art, GIF Art e VaporwaveRodrigo Freese Gonzatto
 
Interações opressivas (Design & Opressão)
Interações opressivas (Design & Opressão)Interações opressivas (Design & Opressão)
Interações opressivas (Design & Opressão)Rodrigo Freese Gonzatto
 
Affordances (propiciação) em interfaces digitais
Affordances (propiciação) em interfaces digitaisAffordances (propiciação) em interfaces digitais
Affordances (propiciação) em interfaces digitaisRodrigo Freese Gonzatto
 
Prototipação para Design de Interfaces
Prototipação para Design de InterfacesPrototipação para Design de Interfaces
Prototipação para Design de InterfacesRodrigo Freese Gonzatto
 

Mais de Rodrigo Freese Gonzatto (20)

Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
 
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
 
Diagrama de afinidades
Diagrama de afinidadesDiagrama de afinidades
Diagrama de afinidades
 
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
 
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
 
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
 
Design de Moda e Design Digital: o corpo como fulcro do projeto
Design de Moda e Design Digital: o corpo como fulcro do projetoDesign de Moda e Design Digital: o corpo como fulcro do projeto
Design de Moda e Design Digital: o corpo como fulcro do projeto
 
Interação, tecnologia e produção da existência em álvaro vieira pinto
Interação, tecnologia e produção da existência em álvaro vieira pintoInteração, tecnologia e produção da existência em álvaro vieira pinto
Interação, tecnologia e produção da existência em álvaro vieira pinto
 
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
 
Projetando interações opressivas e libertárias com o corpo inteiro
Projetando interações opressivas e libertárias com o corpo inteiroProjetando interações opressivas e libertárias com o corpo inteiro
Projetando interações opressivas e libertárias com o corpo inteiro
 
Projetando interações com vídeo
Projetando interações com vídeoProjetando interações com vídeo
Projetando interações com vídeo
 
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
 
Música e Tecnologia
Música e TecnologiaMúsica e Tecnologia
Música e Tecnologia
 
Comida e Tecnologia
Comida e TecnologiaComida e Tecnologia
Comida e Tecnologia
 
Internet: Descentralização ou Centralização?
Internet: Descentralização ou Centralização?Internet: Descentralização ou Centralização?
Internet: Descentralização ou Centralização?
 
Rabiscando os rabiscos do modelo da ação de Bill Verplank
Rabiscando os rabiscos do modelo da ação de Bill VerplankRabiscando os rabiscos do modelo da ação de Bill Verplank
Rabiscando os rabiscos do modelo da ação de Bill Verplank
 
Alguns apontamentos sobre Arte Digital: Glitch Art, GIF Art e Vaporwave
Alguns apontamentos sobre Arte Digital: Glitch Art, GIF Art e VaporwaveAlguns apontamentos sobre Arte Digital: Glitch Art, GIF Art e Vaporwave
Alguns apontamentos sobre Arte Digital: Glitch Art, GIF Art e Vaporwave
 
Interações opressivas (Design & Opressão)
Interações opressivas (Design & Opressão)Interações opressivas (Design & Opressão)
Interações opressivas (Design & Opressão)
 
Affordances (propiciação) em interfaces digitais
Affordances (propiciação) em interfaces digitaisAffordances (propiciação) em interfaces digitais
Affordances (propiciação) em interfaces digitais
 
Prototipação para Design de Interfaces
Prototipação para Design de InterfacesPrototipação para Design de Interfaces
Prototipação para Design de Interfaces
 

Temporalidade e interação no design de experiências

  • 1. • Temporalidade: diferença 
 entre interação e interface • Interação como música: 
 possui ritmos e andamentos • Interação como narrativa: 
 revelar a estória ao longo do tempo • Interação como dança: 
 Conduzir e ser conduzido DESIGN DE INTERAÇÃO E O TEMPO Parangolé QUANDO?
  • 3. O Tempo no DxI (por Dave Malouf) • Andamento ou Ritmo (narrativa) • Reação (síncrono/assíncrono) • Contexto Segundo Alan Cooper & Robert Reimann • Sovereign – toma toda sua atenção •Transient – na periferia da sua atenção, chamando apenas para curtos momentos • Daemonic – sistemas de alerta • Parasitic – modo de suporte à interação tanto para aplicações soberanas quanto transitórias.
  • 4. Texto Interface gráfica do Guitar Hero. Conduza seu corpo (dedos, olhos, mãos, braços...) de acordo com os sinais exibidos.
  • 5. Interface gráfica do StepMania. Conduza seu corpo (pés, olhos, pernas...) de acordo com os sinais exibidos.
  • 6. Jogo multiplayer massivo. Espere até poder jogar novamente.
  • 7. A dança dos dedos Conduza a ponta dos seus dedos...
  • 8. Interface do Gtalk. O “Pessoa está digitando...” indica que algo está acontecendo e também de que algo está para acontecer (chegar a mensagem). Muda a forma de interagir.
  • 9. Interface de Add-on no Firefox. Ele não permite que você clique instantaneamente no botão “Instalar”, obrigando a esperar 3 segundos. Com isso sugere um breakdown.
  • 10.
  • 11. Interface de instalação com jogo enquanto o download da instalação não termina. Propõe uma atividade enquanto se espera o resultado de outra terminar.
  • 12. Sites de download: versões pagas e gratuitas. Velocidade e lentidão como argumento para compra de um serviço do site. O design visual força a ideia de que ter que esperar é ruim. Mas porque 19 minutos é lento se, em alguns lugares (ou no passado), era rápido?
  • 13. Antiga tela de erro do orkut
  • 14. Feedback visual de novidade. A interface apresenta os tweets de modo sequencial a partir do horário (com exceção de tweets patrocinados). Mostra aviso de tweets novos.
  • 15. Interface do Plurk Interface horizontal e vertical simultaneamente. Representação visual da temporalidade na esquerda (mais antigo) para a direita (mais novo), e de cima (mais antigo) para baixo (mais novo).