Campus Party_Design do dia a dia #Cpbr7

4,215 views

Published on

Palestra Melina Alves na Campus Party 2014. Arquitetura da Informação e User Experience na influência de design de produtos do dia a dia.

Published in: Technology, Business

Campus Party_Design do dia a dia #Cpbr7

  1. 1. DESIGN DO DIA A DIA Arquitetura de Informação e User Experience #Cpbr7 2014 !1
  2. 2. Melina Alves Bianca Brancaleone Ex-UX Líder da Insula e NeogamaBBH, iThink, 
 Razorfish. Ex-Atrativa Games, Virgula, MMCafé, iG, iThink, Webgoal.
  3. 3. Melina Alves Bianca Brancaleone
  4. 4. + 30 
 Pesquisadores, 
 Filósofos e Psicólogos coworkers Arquitetos 
 da Informação Infografistas Designers 
 de Interação Gerentes 
 de Projetos Sound and Video
 Designers Redatores; 
 SEM & SEO Visual 
 Designers Arquitetos e Urbanistas Designers de estratégias
  5. 5. Nymi by Bionym play
  6. 6. As pessoas gostam isso? De que forma elas desejam? Envolve aspectos culturais? Qual a rotina dessas pessoas? E onde encaixar um sistema? Qual a hierarquia das informações em cada necessidade? O acesso é simplificado? Quando elas acessam é confortável, emociona, compartilha? …
  7. 7. 2006 October 10th, 2006 by Kimmy Paluch Print-Friendly Version Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência ! ! ● ● ● ● Arquitetura da Informação Interação Humano Computador Design de Interação Usabilidade http://www.montparnas.com/articles/what-is-user-experience-design/
  8. 8. 2008 by DAN SAFFER Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência ! ! ● ● ● ● Arquitetura da Informação Interação Humano Computador Design de Interação Usabilidade http://www.kickerstudio.com/2008/12/the-disciplines-of-userexperience/
  9. 9. 2008 by DAN SAFFER Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência ! ! ● ● ● ● ● ● ● ● ● ● ● Arquitetura da Informação Interação Humano Computador Design de Interação Usabilidade Visual Design Arquitetura Engenharia Design Industrial Criação de Conteúdo Engenharia Elétrica Engenharia Mecânica ! ! http://www.kickerstudio.com/2008/12/the-disciplines-of-userexperience/
  10. 10. 2009|2013 by DAN SAFFER (redesigned by envis precisely GmbH 2009 | 2013 Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência ! • • • • • • • • • • • • • ! Arquitetura da Informação Interação Humano Computador Design de Interação Ergonomia Usabilidade Visual Design Arquitetura Engenharia Design Industrial Criação de Conteúdo Engenharia Elétrica Engenharia Mecânica Ciência da Computação http://www.envis-precisely.com
  11. 11. BENEFÍCIOS DE USER EXPERIENCE DESIGN • UXD é um componente essencial para produção e iniciativas em softwares, porque gera cases de negócio mais efetivos ! • Promove engajamento e experiências interativas entre consumidores e negócio, ou entre os negócios das pessoas e seus sistemas de informação ! • Cuida da maneira como as pessoas trabalham, pensam, e consomem informações ! • Estabelece significados mais ricos e comunicação mais colaborativas ! • Reduz frustrações e cria processos mais intuitivos ! • Distingue produtos, serviços e marcas para que possam ganhar mais competitividade ! • Desenvolve sistemas que possam crescer em escala e se adaptar as mudanças que os usuários precisam e com foco em comportamento ANDERSON, MCREE, John; WILSON; ROBB Wilson; Effective UI: The Art of Building Great User Experience in Software - O’REILLY - 2010
  12. 12. ESTAMOS CRIANDO PRODUTOS
  13. 13. UX + COMPORTAMENTO APRENDIZADO/ COMPORTAMENTO “Comportamentalismo:
 Psicologia.” “Froid: ! RELAÇÃO SÓCIOCULTURAL “...linguagens são reveladoras de nossas marcas e das mudanças que somos capazes
 de empreender…” ! MELO, Eliana; PRADOS, Rosália; GRARCIA, Wilton: Linguagens, tecnologias, culturas: discursos contemporâneos. Ed.Fatash Editora- 2008 - pg. 11 e 135 @melinalves #ficaadica ! ! ! ! ! BANCO
 DE REFERÊNCIAS “Todos os sites, exposições, filmes, informações para montar sua rede de pesquisa, benchmarking
 e banco de ideias” ! ! ! ! !
  14. 14. EXPERIÊNCIA REAL
  15. 15. "20
  16. 16. "21
  17. 17. "22
  18. 18. "23
  19. 19. "24
  20. 20. "25
  21. 21. EXPERIÊNCIA DIGITAL OU INTERATIVA
  22. 22. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "27
  23. 23. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "28
  24. 24. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "29
  25. 25. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "30
  26. 26. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "31
  27. 27. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "32
  28. 28. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "33
  29. 29. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "34
  30. 30. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "35
  31. 31. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "36
  32. 32. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "37
  33. 33. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "38
  34. 34. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "39
  35. 35. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "40
  36. 36. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "41
  37. 37. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "42
  38. 38. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "43
  39. 39. “experiência do 
 usuário está 
 cada vez 
 mais próxima da imersão entre soluções 
 digitais e reais” Melina Alves PUC-RS - 2012 #Cpbr - 2014 "44
  40. 40. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "45
  41. 41. HISTÓRIAS (informações que as pessoas contam que vem carregadas de ideias) - ! VALOR PRÁTICO 
 (notícias que podem ser usadas) ! PÚBLICO
 (“built to show, built to grow”) ! EMOCIONAIS 
 (“when we care we share”) ! TRIGGERS 
 (top of mind, tip of tongue) ! CAPITAL SOCIAL 
 (o que faz as pessoas parecerem melhores) http://www.maximsherstobitov.com/6-secrets-that-make-people-share/#sthash.q80xypc3.dpuf "46
  42. 42. USER EXPERIENCE DESIGN
 ponto de vista da Arquitetura da Informação
  43. 43. Arquitetura da Informação Os três círculos da Arquitetura de Informação ! ! ● Conteúdo (o que vai usado?) ● Contexto (como vai ser usado?) ● Usuário (por quem vai ser usado?) http://semanticstudios.com/publications/semantics/000029.php
  44. 44. The User Experience Honeycomb ! ! ● ● ● ● ● ● ● Útil Desejável Acessível Confiável Encontrável Utilizável Valioso http://semanticstudios.com/publications/semantics/000029.php
  45. 45. Diagrama da Experiência do usuário - Do mais ao menos consciente ! ● ● ● ● ● ● ● ● Linguagem escrita Design gráfico Som Movimento Design da Informação Design da Interface Design de Interação Programação
  46. 46. 10 Heurítiscas de Nielsen by JAKOB NIELSEN 1995 http://www.nngroup.com/articles/ten-usability-heuristics
  47. 47. 1 - Visibilidade do status do sistema Feedback O sistema deve sempre manter os usuários informados sobre o que está acontecendo, através de feedback apropriado e dentro de um tempo razoável.
  48. 48. 2 - Combinação entre o sistema e o mudo real Linguagem adequada O sistema deve falar a linguagem do usuário, com palavras, frases e conceitos familiares ao usuário no lugar de termos orientados ao sistema. Siga convenções do mundo real, fazendo as informações aparecerem em uma ordem natural e lógica.
  49. 49. 3 - Controle do usuário e liberdade Usuários sempre escolhem funções erradas e vão precisar de uma “saída de emergência” claramente marcada para sair do estado indesejado sem maiores problemas. Permita desfazer e refazer.
  50. 50. 4 - Consistência e padrões Usuários não devem ter que se preocupar se palavras diferentes, situações ou ações significam a mesma coisa. Siga as convenções.
  51. 51. 5 - Prevenção de erro Melhor que ter boas mensagens de erro é ter um design cuidadoso que previne um problema antes de acontecer. 
 Elimine condições de erro ou os conheça e apresente aos usuários uma opção de confirmação antes dele prosseguir com a ação. ! “NESSE MUNDO MOBILE, SOMOS TODOS DALTÔNICOS E SOFREMOS MAL DE PARKINSON”
 Luli Radfahrer Digital Talks RJ - 2013
  52. 52. 6 - Reconhecimento é melhor que lembrança Reduza a carga de memória do usuário Objetos, ações e opções devem estar visíveis. ! O usuário não deve ter que lembrar informação de uma parte do diálogo em outra parte. ! Instruções para o uso do sistema devem estar visíveis ou facilmente recuperáveis sempre que necessário.
  53. 53. 7 - Flexibilidade e eficiência no uso Atalhos Atalhos que não são vistos pelos usuários leigos - podem aumentar a velocidade na interação para usuários experientes. Assim, o sistema pode atender tantos os usuários inexperientes como os experientes.
 Permita que os usuários configurem ações frequentes.
  54. 54. 8 - Estética e design minimalista Diálogos não devem ter informações irrelevantes ou raramente usados. 
 Cada unidade de informação extra em um diálogo compete com unidades relevantes de informação e diminui a sua visibilidade.
  55. 55. 9 - Ajude o usuário a reconhecer, diagnosticar e recuperar erros Mensagens de erro devem ser expressadas em linguagem (sem código) indicando precisamente o problema, e sugerir uma solução construtiva.
  56. 56. 10 - Ajuda e documentação É melhor que o sistema possa ser usado sem documentação, mas pode ser necessário ter um para oferecer ajuda. Qualquer informação deve ser fácil de procurar, focando na tarefa do usuário, listando passos concretos e sem ser muito extenso.
  57. 57. usabilitygeek.com USER EXPERIENCE DESIGN
 ponto de vista Humano _ IHC
  58. 58. Donald Norman “Um método importante de tornar os sistemas mais fáceis de aprender e usar é torná-los exploráveis, encorajar o usuário a fazer experiências e aprender as possibilidades através de exploração ativa. É assim que muitas pessoas aprendem a usar utensílios domésticos ou um novo sistema de som, aparelho de televisão ou videogame: apertando os botões enquanto escutam e observam, para ver o que acontece.”
  59. 59. Out of the box from Vitamins play
  60. 60. Convidando a experimentação “Em cada estado do sistema, o usuário tem de ver prontamente e ser capaz de fazer todas as ações permissíveis. 
 
 A visibilidade atua como uma sugestão, recordando ao usuário as possibilidades e convidando à exploração de novas idéias e métodos.”
  61. 61. Affordance “Propiciação real é fornecida pelo teclado (apertar de teclas), pelo mouse (clique), pelo monitor touchscreen (apontar) e etc.”
  62. 62. Affordance para Design de Interação “Propiciação percebida são as dicas visuais exibidas na tela do monitor para que essas ações sejam executadas. ! Para Norman, o designer deve se concentrar mais na propiciação percebida do que na real, pois esta está além do seu alcance.”
  63. 63. Convidando a experimentação • visível • fácil de interpretar. “A imagem de sistema desempenha um papel crítico para possibilitar esse aprendizado.” • usuários aprendem os efeitos
 de cada ação (aprender causa/ consequência). • deve reversível (imediatamente para sistemas) • deve deixar muito claro o efeito que a ação pretendida • haver tempo suficiente para cancelar o plano. • ações difíceis de executar, não exploráveis. • explorável e passível de descoberta ! NFC Cards - http://vitaminsdesign.com/projects/nfc-cards- for-samsung
  64. 64. Resumão 1 - Dar sempre feedback pro usuário do que está acontecendo no sistema 6 - Reduza a carga de memória do usuário, não crie menus com vários níveis nem esconda funcionalidades 2 - Usar sempre linguagem apropriada pro seu público 7 - Flexibilidade e eficiência, atalhos (botões configuráveis, atalhos no teclado são ótimos) 3 - Liberdade e controle do usuário para ir onde quiser e precisar no sistema 8 - Mostrar o que precisa ser mostrado na hora que precisa ser mostrado 4 - Sistema precisa ter consistência e seguir padrões é sempre recomendado 9 - Ajude o usuário a resolver caso haja problemas 5 - Previna os erros de acontecerem - veja pontos críticos e trabalhe neles 10 - Crie um sistema tão bom que não precise de documentação (mas como sempre tem que ter, que seja fácil de encontrar o que precisa e que mostre de maneira fácil o que se quer).
  65. 65. "70
  66. 66. REFERÊNCIAS E INSPIRAÇÕES ! Propiciação e clicabilidade http://www.usabilidoido.com.br/ propiciacao_e_clicabilidade.html ! Corais http://corais.org/knowledge ! Affordances: Clarifying and Evolving a Concept http://www.cs.ubc.ca/~joanna/papers/ GI2000_McGrenere_Affordances.pdf Service Design Tools http://www.servicedesigntools.org/ ! Affordances and Design http://www.interaction-design.org/encyclopedia/ affordances_and_design.html 
 Design como linguagem: não basta projetar, tem que parecer projetado? http://www.gonzatto.com/linguagem-design-projetado/ Apresentação: Quanto custa arquitetura da informação? http://www.slideshare.net/bibia1010/quantocusta-a-arquitetura-da-informao ! Livro: The design of everyday things http://www.amazon.com/Design-EverydayThings-Donald-Norman/dp/0465067107 ! Livro: Information Architecture for the World Wide Web http://shop.oreilly.com/product/ 9781565922822.do
  67. 67. Melina Alves melina@duxcoworking.com @melinalves melinaalves.com duxcoworking.com Bianca Brancaleone contato.bianca@gmail.com fb.com/bianca.brancaleone
 slideshare.com/bibia1010
  68. 68. Obrigada! #Cpbr7

×