Campus Party_Design do dia a dia #Cpbr7

1. DESIGN DO DIA A DIA Arquitetura de Informação e User Experience #Cpbr7 2014 !1

2. Melina Alves Bianca Brancaleone Ex-UX Líder da Insula e NeogamaBBH, iThink,   Razorfish. Ex-Atrativa Games, Virgula, MMCafé, iG, iThink, Webgoal.

3. Melina Alves Bianca Brancaleone

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. Nymi by Bionym play

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. 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. 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. 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. 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. 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. ESTAMOS CRIANDO PRODUTOS

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 #ﬁcaadica ! ! ! ! ! BANCO  DE REFERÊNCIAS “Todos os sites, exposições, filmes, informações para montar sua rede de pesquisa, benchmarking  e banco de ideias” ! ! ! ! !

14. EXPERIÊNCIA REAL

15. "20

16. "21

17. "22

18. "23

19. "24

20. "25

21. EXPERIÊNCIA DIGITAL OU INTERATIVA

22. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "27

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

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. USER EXPERIENCE DESIGN  ponto de vista da Arquitetura da Informação

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. The User Experience Honeycomb ! ! ● ● ● ● ● ● ● Útil Desejável Acessível Confiável Encontrável Utilizável Valioso http://semanticstudios.com/publications/semantics/000029.php

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. 10 Heurítiscas de Nielsen by JAKOB NIELSEN 1995 http://www.nngroup.com/articles/ten-usability-heuristics

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. usabilitygeek.com USER EXPERIENCE DESIGN  ponto de vista Humano _ IHC

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. Out of the box from Vitamins play

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. Affordance “Propiciação real é fornecida pelo teclado (apertar de teclas), pelo mouse (clique), pelo monitor touchscreen (apontar) e etc.”

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. 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. 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. "70

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. Melina Alves melina@duxcoworking.com @melinalves melinaalves.com duxcoworking.com Bianca Brancaleone contato.bianca@gmail.com fb.com/bianca.brancaleone  slideshare.com/bibia1010

68. Obrigada! #Cpbr7

Campus Party_Design do dia a dia #Cpbr7

Esté a ler uma amostra.

Confira estes a seguir

Campus Party_Design do dia a dia #Cpbr7

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Campus Party_Design do dia a dia #Cpbr7 (20)

Mais de Melina Alves (8)

Mais recentes (20)