Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Palestra - Design de interação

Aula sobre Design de Interação para pós-graduação em IHC, Ergodesign e Usabilidade da PUC-Rio. Departamento de Artes e Design e CCE. Prof. Luiz Agner

Palestra - Design de interação

  1. 1. Design de interação Aula Disciplina da Pós em Ergodesign de Interfaces PUC-Rio/ CCE – maio 2010 LUIZ AGNER
  2. 2. Apresentação <ul><li>Formado pela ESDI-UERJ </li></ul><ul><li>Mestre em Design – PUC-Rio (2002) </li></ul><ul><li>Doutor em Design – PUC-Rio (2008) </li></ul><ul><li>Professor de graduação e pós-graduação em Design </li></ul><ul><li>Tecnologista e designer do IBGE: </li></ul><ul><ul><li>Design gráfico (comunicação e marketing) </li></ul></ul><ul><ul><li>Web design (Escola Virtual IBGE) </li></ul></ul><ul><ul><li>Design de interação: teste de software </li></ul></ul>
  3. 3. Apresentação <ul><li>Ergodesign e Arquitetura de Informação – Trabalhando com o Usuário Quartet, 2006,2009 </li></ul>
  4. 4. Plano <ul><li>Conceitos de Design de Interação </li></ul><ul><li>Mudança de paradigmas </li></ul><ul><li>Interdisciplinaridade </li></ul><ul><li>Metas de usabilidade </li></ul><ul><li>Metas de experiência </li></ul><ul><li>A experiência de Flow </li></ul><ul><li>Modelos da interação </li></ul><ul><li>Estudo de caso </li></ul><ul><li>Atividade </li></ul>
  5. 5. <ul><li>Para Preece, Rogers e Sharp (2005): </li></ul><ul><ul><li>Design de interação é o projeto de produtos interativos que fornecem suporte às atividades das pessoas, seja no lar ou no trabalho. </li></ul></ul>Design de interação
  6. 6. <ul><li>Para Preece, Rogers e Sharp (2005): </li></ul><ul><ul><li>O design de interação vai além das metas tradicionais de eficiência e produtividade no trabalho (usabilidade tradicional). </li></ul></ul>Design de interação
  7. 7. <ul><li>Além de enfocar a melhoria da eficiência e da produtividade, o design de interação está cada vez mais preocupado com o lúdico como agente incentivador da exploração. </li></ul>Design de interação
  8. 8. Educação online (EAD)
  9. 9. <ul><li>O objetivo está na experiência que os produtos proporcionarão ao usuário, isto é, como ele se sentirá na interação com o sistema. </li></ul><ul><li>Isso envolve pesquisar a natureza da experiência do usuário em termos subjetivos. </li></ul>Design de interação
  10. 10. Novos paradigmas <ul><li>Computação móvel </li></ul><ul><li>Computação ubíqua </li></ul><ul><ul><ul><li>Inserida no ambiente </li></ul></ul></ul><ul><li>Computação pervasiva </li></ul><ul><ul><ul><li>Integração total de tecnologias </li></ul></ul></ul><ul><li>Computação vestível </li></ul><ul><li>Inteligência ambiental </li></ul><ul><li>Realidade aumentada </li></ul><ul><ul><ul><li>Integração física/virtual </li></ul></ul></ul>
  11. 11. Computação ubíqua <ul><li>Ubiquitous Computing (ou ubicomp) é um termo usado para descrever a onipresença da informática no cotidiano das pessoas. </li></ul><ul><li>O termo foi usado pela primeira vez pelo cientista de informática estadunidense Mark Weiser (1952 — 1999) em 1988 e publicado em 1991 no seu artigo The Computer for the 21st Century. </li></ul><ul><li>______________________ </li></ul><ul><li>Também é conhecida pelos termos em língua inglesa de pervasive computing, calm technology, things that think e everyware </li></ul>
  12. 12. Computação ubíqua Orelhão com tecnologia de celular é instalado em ônibus em Porto Alegre
  13. 13. Computação ubíqua Para Weiser o termo computação ubíqua descreve um futuro em que computadores invisíveis, incorporados a objetos cotidianos, substituem PCs.
  14. 14. Computação ubíqua Para Weiser em Búzios (by Cora Rónai)
  15. 15. Realidade aumentada <ul><li>Integração de recursos computacionais aumentados no ambiente físico. </li></ul><ul><li>Representações virtuais sobrepostas a objetos físicos reais. </li></ul><ul><li>Objetivo - Combinar informações virtuais com objetos e superfícies físicas para que as pessoas possam realizar atividades diárias. ( Jornal da Globo ; Loja Lego - Londres ) </li></ul><ul><li>______________________ </li></ul><ul><li>Ex: Livros com informações digitais; cartões com animações digitais. </li></ul>
  16. 16. Novos paradigmas <ul><li>Artigo: From computing machinery to interaction design (Terry Winograd, 1997) In: Beyond calculation: The next fifty years of computing. </li></ul>
  17. 17. Direção da mudança <ul><li>Da computação à comunicação </li></ul><ul><li>Da máquina ao habitat </li></ul>
  18. 18. Direção da mudança <ul><li>Todos os aspectos da vida de um indivíduo – áreas a ser melhoradas ou extendidas. </li></ul><ul><li>Várias combinações de tecnologias de computação. </li></ul><ul><li>Novas formas de aprender, comunicar, trabalhar, descobrir e viver. </li></ul><ul><ul><ul><li>(Preece, Rogers e Sharp, 2005) </li></ul></ul></ul>
  19. 19. Direção da mudança <ul><li>IHC: “design, avaliação e implementação de sistemas computacionais interativos para uso humano, e o estudo dos fenômenos relacionados” (defin. ACM) </li></ul><ul><li>Até 1990, o foco da IHC era projetar interfaces para um único usuário. </li></ul><ul><li>Crescente preocupação com o suporte a diversos indivíduos trabalhando juntos e trabalho cooperativo (CSCW). </li></ul>
  20. 20. Previsões – 50 anos <ul><li>Campo da computação se tornará mais amplo. </li></ul><ul><li>A profissão da computação de tornará mais estreita, especializada. </li></ul>
  21. 21. Previsões para 50 anos <ul><li>Expansão dos aspectos da computação relacionados às pessoas, em detrimento de aspectos relacionados à máquina (hardware e software). </li></ul><ul><li>Métodos, técnicas e habilidades estranhos ao mainstream da ciência da computação. </li></ul><ul><li>Novo campo: “interaction design” </li></ul><ul><ul><ul><li>(Terry Winograd) </li></ul></ul></ul>
  22. 22. Fronteiras mutantes <ul><li>As companhias inovadoras serão as que se concentrarão na compreensão do contexto mais amplo onde as tecnologias serão introduzidas </li></ul><ul><li>Não na inovação técnica estritamente. </li></ul><ul><li>Mudança no foco comercial e prático. </li></ul><ul><li>Mudança no perfil dos profissionais. </li></ul><ul><ul><ul><li>(Terry Winograd) </li></ul></ul></ul>
  23. 23. Novo perfil <ul><li>Compreender, analisar e criar espaços de interação. </li></ul><ul><li>Disciplinas que focam em comunicação e em pessoas: </li></ul><ul><ul><li>Psicologia, comunicação, design gráfico, letras. </li></ul></ul><ul><li>A ciência da computação não vai se expandir, mas vai se contrair, aprofundando suas raízes. </li></ul>
  24. 24. Novo perfil <ul><li>A indústria de computadores vai abrigar o trabalho de diferentes profissões, uma das quais será a ciência da computação. </li></ul><ul><ul><ul><li>(Terry Winograd) </li></ul></ul></ul>
  25. 25. Nova profissão <ul><li>Preocupações e métodos próprios </li></ul><ul><li>Projetar a interação com (e a habitação em) sistemas baseados na computação. </li></ul><ul><li>Traz elementos do design gráfico, design de informação e IHC. </li></ul><ul><ul><ul><li>(Terry Winograd) </li></ul></ul></ul>
  26. 26. Interdisciplinaridade <ul><li>Multidisciplinaridade? </li></ul><ul><li>Interdisciplinaridade? </li></ul><ul><li>Transdisciplinaridade? </li></ul>
  27. 27. Interdisciplinaridade Preece, Rogers e Sharp CAMPOS INTERDISCIPLINARES PRÁTICAS EM DESIGN DISCIPLINAS ACADÊMICAS <ul><li>Ergonomia </li></ul><ul><li>Ciências Cognitivas </li></ul><ul><li>Informática </li></ul><ul><li>Engenharia </li></ul><ul><li>Ciência da Computação/ Engenharia de Software </li></ul><ul><li>Ciências Sociais (Antropologia, Sociologia) </li></ul><ul><li>Design gráfico </li></ul><ul><li>Design de produtos </li></ul><ul><li>Design visual </li></ul><ul><li>Design industrial </li></ul><ul><li>Motion design </li></ul><ul><li>Fatores Humanos </li></ul><ul><li>Engenharia Cognitiva </li></ul><ul><li>Interação Humano- Computador </li></ul><ul><li>Sistemas de Informação </li></ul><ul><li>Ergonomia Cognitiva </li></ul><ul><li>Trabalho Cooperativo (CSCW) </li></ul>DESIGN DE INTERAÇÃO
  28. 28. Design de interação <ul><li>O design de interação está para a engenharia de software como a arquitetura está para a engenharia civil. </li></ul><ul><li>Design de interação não se encaixa em nenhum dos campos pré-existentes do design. </li></ul><ul><ul><ul><li>(Terry Winograd) </li></ul></ul></ul>
  29. 29. Design de interação <ul><li>Web design: treinados em design gráfico X treinados técnicas de programação. </li></ul><ul><li>Ninguém treinado em compreender a interação como o fenômeno central . </li></ul><ul><ul><ul><li>(Terry Winograd) </li></ul></ul></ul>
  30. 30. Definição <ul><li>Design de interação é o “projeto de interações eficazes entre pessoas e máquinas e entre pessoas e pessoas utilizando máquinas”. </li></ul><ul><li>Visão mais ampla: interface X interespaço </li></ul><ul><ul><ul><li>(Terry Winograd) </li></ul></ul></ul>
  31. 31. Visão ampliada <ul><li>Compreender como as pessoas e a sociedade se adaptam às novas tecnologias. </li></ul><ul><li>Olhar para as vidas das pessoas utilizando as máquinas. </li></ul><ul><li>Difícil de quantificar, difícil de identificar </li></ul><ul><li>Complexidade: psicologia individual X sociologia da comunicação </li></ul><ul><ul><ul><li>(Terry Winograd) </li></ul></ul></ul>
  32. 32. Heranças/disciplinas <ul><li>Engenharias: </li></ul><ul><ul><ul><li>Aspecto prático e metódico </li></ul></ul></ul><ul><li>Design: </li></ul><ul><ul><ul><li>Necessidades e preocupações humanas </li></ul></ul></ul><ul><li>Disciplinas sociais: </li></ul><ul><ul><ul><li>Visão mais ampla das possibilidades e das responsabilidades sociais. </li></ul></ul></ul><ul><ul><ul><li>(Terry Winograd) </li></ul></ul></ul>
  33. 33. Discussão <ul><li>Que profissionais você acha que deveriam estar envolvidos no desenvolvimento de: </li></ul><ul><ul><li>Um website educacional interativo que acompanha um programa de TV? </li></ul></ul>
  34. 34. Discussão <ul><li>Que profissionais você acha que deveriam estar envolvidos no desenvolvimento de: </li></ul><ul><ul><li>Quiosque público de informações de um Planetário? </li></ul></ul>
  35. 35. Discussão <ul><li>Que profissionais você acha que deveriam estar envolvidos no desenvolvimento de: </li></ul><ul><ul><li>Um aplicativo para pesquisa e coleta de dados censitários para dispositivo móvel? </li></ul></ul>
  36. 36. Metas <ul><li>Metas de usabilidade </li></ul><ul><li>Metas da experiência </li></ul><ul><ul><ul><li>(Preece, Rogers e Sharp, 2005) </li></ul></ul></ul>
  37. 37. Metas de usabilidade <ul><li>Ser eficaz no uso (eficácia) </li></ul><ul><li>Ser eficiente no uso (eficiência) </li></ul><ul><li>Ser seguro no uso (segurança) </li></ul><ul><li>Ser de boa utilidade (utilidade) </li></ul><ul><li>Ser fácil de aprender ( learnability ) </li></ul><ul><li>Ser fácil de lembrar como se usa ( memorability ) </li></ul>
  38. 38. Metas de experiência <ul><li>Satisfatórios </li></ul><ul><li>Agradáveis </li></ul><ul><li>Divertidos </li></ul><ul><li>Interessantes </li></ul><ul><li>Úteis </li></ul><ul><li>Motivadores </li></ul><ul><li>Esteticamente apreciáveis </li></ul><ul><li>Incentivadores da criatividade </li></ul><ul><li>Compensadores </li></ul><ul><li>Emocionalmente adequados </li></ul><ul><ul><ul><li>Todas essas são metas subjetivas </li></ul></ul></ul>
  39. 39. A questão do prazer <ul><li>Muito do trabalho sobre o prazer vem da indústria de jogos e entretenimento. </li></ul><ul><li>Atenção, ritmo, jogo, interatividade, controle consciente e inconsciente, envolvimento e narrativa. </li></ul><ul><li>Experiências diferentes: sistemas podem até mesmo não ser fáceis de usar. </li></ul><ul><li>Mais esforço - mais divertido e agradável. </li></ul>
  40. 40. <ul><li>Sentimento experimentado por praticantes de esporte, artistas. </li></ul><ul><li>É o prazer pela execução de uma tarefa em si. </li></ul><ul><ul><ul><li>Mihaly Csikszentmihalyi Psicólogo, sociólogo e antropólogo húngaro Psicologia da felicidade e criatividade Psicologia positiva – florescer o gênio e o talento </li></ul></ul></ul>A experiência de Flow
  41. 41. A experiência de Flow
  42. 42. A experiência de Flow
  43. 43. <ul><li>Para esses amantes, apesar de haver um objetivo, a execução é prazerosa em si, </li></ul><ul><li>a execução representa o ápice do momento fundamental da experiência. </li></ul>A experiência de Flow
  44. 44. <ul><li>a percepção de objetivos claros; </li></ul><ul><li>o feedback imediato; </li></ul><ul><li>habilidades e desafios compatíveis. </li></ul>Pré-requisitos do flow
  45. 45. <ul><li>uma conjunção de ação e percepção * </li></ul><ul><li>concentração </li></ul><ul><li>sensação de controle. </li></ul><ul><ul><ul><li>(*) awareness - percepção periférica do contexto e ambiente </li></ul></ul></ul>Características do flow
  46. 46. <ul><li>perda de autoconsciência; </li></ul><ul><li>perda da noção do tempo; </li></ul><ul><li>percepção de que a atividade é motivadora por si. </li></ul>Efeitos do flow
  47. 47. <ul><li>A sensação de flow se relaciona com: </li></ul><ul><li>Estímulo </li></ul><ul><li>Organismo </li></ul><ul><li>Resposta </li></ul><ul><li>Moderadores </li></ul>Flow e internet
  48. 48. <ul><li>A importância da “usabilidade”, </li></ul><ul><li>facilidade de navegação, facilidade de operação e suporte. </li></ul><ul><li>Às vezes, podem ser necessários diferentes níveis de complexidade para comportar usuários com diferentes habilidades. </li></ul>Organismo
  49. 49. <ul><li>Aqui, busca-se como resultado a sensação de “ fluxo ”, excitação, interação. </li></ul><ul><li>Deve-se estar atento ao equilíbrio entre habilidades e desafios. </li></ul>Resposta
  50. 50. Habilidade X desafio
  51. 51. Habilidade X desafio
  52. 52. <ul><li>Como moderadores que podem influenciar negativamente a percepção do site, os autores citam falhas na navegação, downloads lentos, compromissos indesejados junto ao site, a presunção de que o usuário possui determinados scripts ou plug-ins . </li></ul><ul><li>São fatores que podem evitar ou interromper a sensação de “fluxo”. </li></ul>Moderadores do flow
  53. 53. <ul><li>Projetar um espaço para as pessoas, um espaço com um fluxo temporal. </li></ul><ul><li>Elemento temporal dialógico; projetar um diálogo humano com uma sequência e um fluxo de interação. </li></ul><ul><ul><ul><li>Terry Winograd </li></ul></ul></ul>Design de interação
  54. 54. <ul><li>Manipulação </li></ul><ul><li>Locomoção </li></ul><ul><li>Conversação </li></ul><ul><ul><ul><li>Terry Winograd Filme – Entrevista com Winograd </li></ul></ul></ul>Modelos de interação
  55. 55. <ul><li>Modelos baseados em atividades </li></ul><ul><li>Modelos baseados em objetos </li></ul><ul><ul><ul><li>Preece, Rogers e Sharp </li></ul></ul></ul>Modelos de interação
  56. 56. <ul><li>Instrução </li></ul><ul><li>Conversação (diálogo) </li></ul><ul><li>Manipulação e navegação </li></ul><ul><li>Exploração e pesquisa </li></ul><ul><ul><ul><li>Preece, Rogers e Sharp </li></ul></ul></ul>Modelos de interação baseados em atividades
  57. 57. <ul><li>Selecionar menus </li></ul><ul><li>Digitar comandos </li></ul><ul><li>Dar comandos de voz </li></ul><ul><li>Pressionar botões </li></ul><ul><li>Combinação de teclas de funções </li></ul><ul><li>Adequada para ações repetitivas realizadas com objetos múltiplos </li></ul>Instrução
  58. 58. Instrução
  59. 59. <ul><li>Reflete um diálogo em 2 vias </li></ul><ul><li>Sistema atua como um parceiro </li></ul><ul><li>Sistema projetado para responder como um ser humano faria. </li></ul><ul><li>Adequado para iniciantes. </li></ul>Conversação
  60. 60. Conversação
  61. 61. <ul><li>Manipular objetos </li></ul><ul><li>Navegar por espaços virtuais </li></ul><ul><li>Explorar o conhecimento que os usuários trazem do mundo físico </li></ul><ul><li>Objetos virtuais: mover, selecionar, abrir, fechar, aproximar, afastar. </li></ul><ul><li>Usuários se sentem no comando das ações; diminuição da ansiedade. </li></ul>Manipulação e navegação
  62. 62. Manipulação e navegação Star Xerox
  63. 63. Manipulação e navegação
  64. 64. Manipulação e navegação
  65. 65. <ul><li>Explorar e pesquisar informações como em mídias tradicionais </li></ul><ul><li>Livros, revistas, tv, bibliotecas... </li></ul><ul><li>Estruturar a informação de modo que forneçam suporte à navegação eficaz. </li></ul><ul><li>Permitir buscar e encontrar informações : “encontrabilidade”. </li></ul><ul><li>Arquitetura de informações </li></ul>Exploração e pesquisa
  66. 66. Exploração e pesquisa
  67. 67. Modelos de interação baseados em objetos Baseado no livro caixa usado no mundo financeiro (contadores)
  68. 68. <ul><li>Baseado em objeto ou artefato. </li></ul><ul><li>Analogia com algo do mundo físico. </li></ul><ul><li>Ex: livro, veículo, ou ferramenta. </li></ul>Modelos de interação baseados em objetos
  69. 69. <ul><li>Podem ser adequados para aplicações e interações específicas </li></ul><ul><li>Podem se tornar ambíguos, complexos ou mais difíceis de aprender </li></ul><ul><li>Exemplo: sistemas operacionais têm 3 modos de deletar arquivos. </li></ul>Modelos híbridos
  70. 70. <ul><li>Quando fazemos compras na Internet, recebemos o suporte de quais modelos de interação? </li></ul>Pergunta
  71. 71. Para saber mais: <ul><li>Design de interação - Preece, Rogers e Sharp, 2005. </li></ul><ul><li>Designing interactions – Bill Moggridge, fundador da IDEO. </li></ul><ul><li>Anais Congresso Interaction South America, 2009 </li></ul><ul><li>Flow: The Psychology of Optimal Experience - Mihaly Csikszentmihalyi </li></ul><ul><li>Site IDEO.Com </li></ul>

×