Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Raio X de UX

07ac697bcff40050a82cb4503de9eb68?s=47 Alda Rocha
October 06, 2018

Raio X de UX

Palestra apresentada no evento CEJS 2018

Links da palestra:

Mapeamento de cliente - http://www.uxbooth.com/articles/complete-beginners-guide-to-web-analytics-and-measurement/

Para testar e ter feedbacks:
https://developers.google.com/web/tools/lighthouse/
https://developers.google.com/speed/pagespeed/
https://www.usertesting.com/
https://screenhero.com/

Empatia:
https://www.youtube.com/watch?v=6ic8OO4ORI8
https://blog.marvelapp.com/practicing-empathy-product-design/
https://www.youtube.com/watch?v=UzPMMSKfKZQ
https://www.youtube.com/watch?v=1Evwgu369Jw
https://shop.smashingmagazine.com/products/inclusive-design-patterns-by-heydon-pickering-ebook
https://abookapart.com/products/design-for-real-life
https://abookapart.com/products/designing-for-emotion
https://medium.freecodecamp.org/5-principles-for-designing-delightful-digital-experiences-for-seniors-8ece28229653
https://uxdesign.cc/design-is-diversity-its-time-to-talk-about-our-role-as-designers-323781b10b6f
www.criesuapersona.com.br
www.xtensio.com
Flowcharts:
www.uxflowcharts.com
www.uiuxassets.com
www.ui8.net
http://uxkits.com/products/website-deck-of-cards
Sketching - https://uxplanet.org/everything-you-need-to-know-about-ux-sketching-4ab8e66902e
Microcopy:
https://blog.usejournal.com/where-microcopy-and-video-games-meet-862efb1532c9
https://www.alura.com.br/curso-online-introducao-ao-microcopy
https://uxdesign.cc/the-magic-of-microcopy-a56c5decbe1f
https://uxplanet.org/microcopy-tiny-words-with-a-huge-ux-impact-90140acc6e42

Outros links:

https://docs.google.com/document/d/1NJa1Thj0kWlSVLvBZjlkIX7-6nHp0dzGesfK8s4nILc/edit?usp=sharing

https://docs.google.com/document/d/1DmbbHFPATNdrsMf6HHnKwHQTApMa6vzKeGsW_fMVwxM/edit?usp=sharing

07ac697bcff40050a82cb4503de9eb68?s=128

Alda Rocha

October 06, 2018
Tweet

Transcript

  1. Alda Rocha Senior UX designer & Research Head CX na

    Beetech https:/ /www.beetech.global
  2. Alda Rocha HTML, CSS and UX Instructor Creator of @CodamosClub

    https:/ /mjcoffeeholick.github.io/
  3. RAIO X DE UX

  4. 1993: Don Norman - Primeiro UXP Um engenheiro e cientista

    que se juntou a Apple para ajudar com a pesquisa e o design de uma linha de produtos centrada no ser humano (Human-centered design). Ele criou o termo User Experience Architect, marcando o primeiro uso do termo em um título de trabalho.
  5. Livro essencial para difundir e defender o design focado na

    usabilidade e funcionalidade em vez da estética. É um dos mais lidos sobre o tema. Ele escreveu o livro “The Design of everyday things”.
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. que lindo…

  18. UX designers

  19. Full PISTOLA!

  20. O que é UX? UXD x UID Como é essa

    profissão?
  21. None
  22. UXD - User experience designer: Desenha a experiência e interações

    do usuário com o site/produto
  23. None
  24. UID - User interface designer: Desenha o layout das interações

    que acontecem no site/produto
  25. None
  26. None
  27. None
  28. SUXD - Spatial User experience designer: Desenha a experiência e

    interações no ambiente real ou virtual
  29. None
  30. Designing Experiences Not Screens

  31. O que é UX? Perfil de pessoas que exercem a

    profissão Quem pode ser UXD?
  32. Qualquer pessoa pode ser um UXD Nem todo mundo gosta

    de ser um UXD. Alguns gostam e migram para a profissão, mas todo mundo que trabalha com tecnologia DEVE ter alguma noção de UX.
  33. O que é UX? Na timeline de um projeto ou

    produto Em que momento se aplica?
  34. None
  35. None
  36. None
  37. O que é UX? O que podemos produzir em UX

    Quais são seus entregáveis?
  38. UX Pesquisa de usuários* Arquitetura de informação* Template design* Visual

    design Teste A/B feedback* Lançamento/On-line Mapeamento do cliente
  39. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line
  40. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line
  41. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Mapeamento do cliente Exemplos de perguntas para traçar perfil do cliente Quem é o meu cliente? Qual a cultura da empresa? Qual a sua reputação? Qual é a identidade da sua marca? Como eles tocam seu negócio? O que o mercado e os meios de comunicação falam sobre ele? Quais são os problemas que eles resolvem?* Quem são seus concorrentes? O que seus clientes falam sobre?
  42. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Mapeamento do cliente Ferramentas e ações Internet - Pesquisas em google para saber SEO e ranqueamento Redes sociais e canais - Acessas redes sociais e ler comentários Entrevista - Entrevistar pessoas ligadas ao cliente Feedbacks - Pedir feedbacks através de formulários SAC e atendimento ao cliente - Ouça as reclamações e dúvidas Documentação - Olhar o legado do cliente Analytics/métricas - Pedir acesso a ferramentas do cliente
  43. None
  44. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Mapeamento do cliente Dados reais Pare de usar tendências, use dados e métricas!
  45. UX + CX + Data: Usa dados e métricas para

    fazer melhorias e resolver problemas
  46. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Mapeamento do cliente Analytics e métricas Google analytics
  47. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Mapeamento do cliente Analytics e métricas Twitter analytics
  48. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Mapeamento do cliente Analytics e métricas Facebook analytics
  49. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Mapeamento do cliente Analytics e métricas Youtube analytics Youtube analytics
  50. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Mapeamento do cliente Analytics e métricas http:/ /www.uxbooth.com/articles/complete-beginners-guide-to-web-analytics-and-measurement/
  51. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Mapeamento do cliente Algumas perguntas que respondemos com métricas Como é a audiencia do cliente? De qual cidade, estado e país esses usuários acessam? O cliente pretende guardar e-mails pra leads? As pessoas vão ter que fazer login e assinatura? Os usuários querem comprar alguma coisa? Como seu site/produto/app performa no mobile? Precisa ser responsivo? Onde o cliente perde audiência? Quanto tempo as pessoas ficam no seu site/produto/app?
  52. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line
  53. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Exemplos de perguntas para definir seu público alvo Quem são os clientes target*? - Quem são esses usuários? - Quais são a suas necessidades? - Quais são os padrões de interação deles? - Quais são suas atitudes na Web? - Quais são seus estilos? - E suas personalidades?
  54. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Target
  55. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Target
  56. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Ferramentas e ações Testes de usabilidade no site/app existente Criar Personas* (baseado nas pesquisas, métricas e entrevistas) Criar Jornada do usuário Criar Storyboard* Criar Mind mapping Fazer Design sprint/thinking* ajuda identificar público alvo
  57. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Ache sua audiência Se você tem um alvo, o site/produto/conteúdo deve refletir isso!
  58. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Para testar e ter feedback https:/ /developers.google.com/web/tools/lighthouse/
  59. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Para testar e ter feedback https:/ /developers.google.com/speed/pagespeed/
  60. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Para testar e ter feedback https:/ /www.usertesting.com/
  61. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Para testar e ter feedback https:/ /screenhero.com/
  62. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Para testar e ter feedback Redes sociais
  63. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Personas www.pinterest.com www.behance.net
  64. None
  65. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Personas www.xtensio.com
  66. None
  67. None
  68. None
  69. A experiência de cada um importa!

  70. https:/ /www.youtube.com/watch?v=6ic8OO4ORI8

  71. None
  72. None
  73. Stackoverflow https:/ /insights.stackoverflow.com/survey/2017

  74. None
  75. oh no…

  76. None
  77. None
  78. EMPATIA

  79. https://blog.marvelapp.com/practicing-empathy-product-design/

  80. https://www.youtube.com/watch?v=UzPMMSKfKZQ

  81. https://www.youtube.com/watch?v=1Evwgu369Jw

  82. https://shop.smashingmagazine.com/products/inclusive-design-patterns

  83. https://abookapart.com/products/design-for-real-life

  84. https://medium.freecodecamp.com/5-principles-for-designing-delightful- digital-experiences-for-seniors-8ece28229653#.jrbx7q59q

  85. http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha- w3cbr-acessibilidade-web-fasciculo-II.pdf

  86. https:/ /uxdesign.cc/design-is-diversity-its-time-to-talk-about- our-role-as-designers-323781b10b6f

  87. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Personas www.criesuapersona.com.br
  88. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Personas www.xtensio.com
  89. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Jornada do usuário
  90. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Storyboard
  91. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Storyboard
  92. None
  93. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Mind mapping
  94. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Design sprint/thinking
  95. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Algumas perguntas que respondemos pesquisando o target Quem é seu público alvo? Qual o propósito do seu produto? O que justifica a escolha do seu público alvo? O seu público se alinha com a visão e missão do produto? Seu site/produto/app vende coisas para seu público? Seu site/produto/app presta serviços para seu público? Precisa ter informações off-line? Em que momento do dia seu público vai acessar? Precisa de atendimento 24hs?
  96. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Pesquisa de usuários Coisas ruins sobre pesquisas e métricas Não precisamos de pesquisas, confiamos nas suas skills! Não faça pesquisas, use boas práticas! Já sabemos tudo sobre nossos usuários! Nós já temos personas, não precisamos de mais pesquisas! Nós não temos dinheiro para isso!
  97. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line
  98. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Exemplos de perguntas sobre a AI O que pode ser removido ou agrupado? Quais partes do produto funciona muito bem? Precisamos criar novos conteúdos? Precisamos usar mais ícones? Como está a parte de acessibilidade? Como o site/app funciona em outros devices? É responsivo? Qual a importância do Mobile?
  99. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Ferramentas e ações Mapear todo o conteúdo existente Faça uma analise e categorize todo o conteúdo de acordo com suas pesquisas Crie uma nova proposta de arquitetura usando Balsamiq, Photoshop, Xmind, Axure, Sketch, etc Teste essa nova proposta usando flowcharts e card sorting* Valide, obtenha feedback e faça ajustes Mapeie microinterações Avance para o rabiscoframe* do novo site
  100. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação CRAP - Contraste, Repetição, Alinhamento, Proximidade Agrupando coisas e funções que fazem sentido!
  101. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Flowcharts
  102. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Flowcharts
  103. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Flowcharts www.uxflowcharts.com
  104. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Flowcharts www.uiuxassets.com
  105. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Flowcharts www.ui8.net
  106. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Card sorting
  107. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Card sorting
  108. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Flowcharts http:/ /uxkits.com/products/website-deck-of-cards
  109. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Rabiscoframe - fidelidade baixa
  110. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Rabiscoframe - fidelidade baixa https:/ /uxplanet.org/everything-you-need-to-know-about-ux-sketching-4ab8e66902e
  111. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Arquitetura de informação Algumas questões que resolvemos agrupando AI Definir fluxos e abordagem rapidamente. Decidir o que vem depois. Possibilidade de desenhar alternativas infinitas de baixo custo. Pensar em fluxos alternativos. Acrescentar anotações, detalhes e observações. Feedback rápido do time. Da para validar inúmeras plataformas. Podemos prever transições. É barato e pode ser validado em papel ou digitalmente.
  112. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line
  113. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Ferramentas e ações Ajude o pessoal de conteúdo a definir o que deve conter em cada página: Microcopy, Call to action. Desenhe a estrutura do conteúdo, como ele vai ficar distribuído e crie padrões de interação. Crie um wireframe navegável, protótipos* e valide navegação e fluxo: Balsamiq, Axure, Sketch, HTML, Photoshop, Invision, Marvelapp, etc. Envolva todo o time para entenderem toda a navegação, interação e decisão proposta.
  114. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Wireframe - fidelidade baixa
  115. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Wireframe - fidelidade média
  116. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Wireframe - fidelidade alta
  117. UX WRITING Desenha a experiência contextual e comunicativa da interface

  118. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Microcopy
  119. None
  120. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Narrativa em Games Microcopy https:/ /blog.usejournal.com/where-microcopy-and-video-games-meet-862efb1532c9
  121. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Microcopy
  122. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Microcopy
  123. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Microcopy
  124. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Microcopy
  125. None
  126. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Microcopy https:/ /www.alura.com.br/curso-online-introducao-ao-microcopy
  127. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Microcopy https:/ /uxdesign.cc/the-magic-of-microcopy-a56c5decbe1f
  128. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line Template design Microcopy https:/ /uxplanet.org/microcopy-tiny-words-with-a-huge-ux-impact-90140acc6e42
  129. None
  130. NATURAL LANGUAGE PROCESSING ux & CX Desenha a experiência e

    interações emocionais entre AI e pessoas
  131. None
  132. NATURAL LANGUAGE PROCESSING ux & CX Desenha a experiência e

    interações emocionais entre AI e pessoas
  133. None
  134. - Perguntas + Mão na massa

  135. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line
  136. UX in MOTION Desenha a experiência das interações, micromomentos na

    interface
  137. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line
  138. UX Mapeamento do cliente Pesquisa de usuários* Arquitetura de informação*

    Template design* Visual design Teste A/B feedback* Lançamento/On-line
  139. None
  140. Acabou?

  141. None
  142. None
  143. None
  144. @mjcoffeeholick https:/ /mjcoffeeholick.github.io/ Obrigada!