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

UX Design – Primeiros Passos

5fc5804101f0367b6faeee18a6cebe30?s=47 Daniel Fosco
September 23, 2017

UX Design – Primeiros Passos

Palestra apresentada no IED-RJ em evento organizado pelo time do http://trama.cc

5fc5804101f0367b6faeee18a6cebe30?s=128

Daniel Fosco

September 23, 2017
Tweet

Transcript

  1. UX Design Primeiros Passos Daniel Fosco @dfosco

  2. UX designer na VTEX (até a semana passada) Fosco

  3. UX designer na Booking.com (a partir de Novembro) Fosco

  4. UX e Produtos Digitais Menu Qual o papel do UX

    Designer Processos de Design Métodos de Design
  5. UX e Produtos Digitais Menu Qual o papel do UX

    Designer Processos de Design Workshop ⚡ ⚡ ⚡ Métodos de Design
  6. http://bit.ly/ux-workshop-fosco

  7. None
  8. UX e produtos digitais

  9. None
  10. None
  11. None
  12. Serviços digitais que oferecem valor para os usuários e para

    o negócio
  13. Serviços digitais que oferecem valor para os usuários e para

    o negócio
  14. objetivos do negócio objetivos dos usuários UX

  15. “Experiência do usuário” engloba todos os aspectos da interação do

    usuário final com uma empresa, seus serviços e produtos. Don Norman
  16. None
  17. None
  18. Quem faz UX?

  19. UX Designer Designer de Produto UI / UX Designer Interaction

    Designer
  20. UX Designer Designer de Produto UI / UX Designer Interaction

    Designer
  21. UX Designer Designer de Produto UI / UX Designer Interaction

    Designer
  22. UX Designer Designer de Produto UI / UX Designer Interaction

    Designer
  23. Não existe nenhum consenso

  24. Não existe nenhum consenso Varia entre diferentes empresas (e meio

    que é tudo a mesma coisa)
  25. Não existe nenhum consenso Varia entre diferentes empresas (e meio

    que é tudo a mesma coisa)
  26. Designer de Produto = UI/UX = UX Designer Mas leia

    bem a descrição da vaga e pesquise o processo de design da empresa!
  27. Qual o papel do UX Designer?

  28. Aumentar a receita da empresa

  29. ou qualquer que seja o principal objetivo do negócio Aumentar

    a receita da empresa
  30. None
  31. Criminosos clássicos

  32. A landing page excelente mas que não fala com o

    público-alvo certo
  33. A feature elegante mas que não é útil para os

    clientes assinantes
  34. UX Designer à deriva Conduzindo processos que não impactam no

    produto final
  35. Design como disciplina de negócio Identificar e executar oportunidades

  36. objetivos do negócio objetivos dos usuários UX

  37. Qual o papel do UX Designer na prática?

  38. Garantir que o time construa o produto certo

  39. None
  40. None
  41. None
  42. Fazer as perguntas difíceis e tomar responsabilidade pelos resultados

  43. Processo de Design Centrado no Usuário (UDC)

  44. Pesquisa Arquitetura de Informação Prototipagem & Validação Design Visual Desenvolvimento

    Análise
  45. Pesquisa Arquitetura de Informação Prototipagem & Validação Design Visual Desenvolvimento

    Análise
  46. Pesquisa Arquitetura de Informação Prototipagem & Validação Design Visual Desenvolvimento

    Análise
  47. Pesquisa & Análise Arquitetura de Informação Prototipagem & Validação Design

    Visual Desenvolvimento de Software
  48. None
  49. Conceito Protótipo Validar Internamente Testar Externamente Aprender com os usuários

    Iterar
  50. Conceito Protótipo Validar Internamente Testar Externamente Aprender com os usuários

    Iterar
  51. None
  52. None
  53. Métodos de Design

  54. Pesquisa Arquitetura de Informação Prototipagem & Validação Design Visual Desenvolvimento

    Análise
  55. Pesquisa Mapear a realidade para definir um problema

  56. None
  57. None
  58. None
  59. Por quê fazer pesquisa?

  60. Por quê fazer pesquisa? Alinhar o time Economizar $$$ Para

    fazer UX
  61. Entrevistas com Usuários + Informação aprofundada + Formato flexível +

    Boa para explorar novas áreas
  62. Entrevistas com Usuários + Informação aprofundada + Formato flexível +

    Boa para explorar novas áreas - Cansativo para organizar e analizar - Pode não representar todo o grupo de usuários
  63. Entrevistas com Usuários + Informação aprofundada + Formato flexível +

    Boa para explorar novas áreas - Cansativo para organizar e analizar - Pode não representar todo o grupo de usuários Download Gratuito https://trvrs.co/book
  64. Enquete + Grandes quantidades de informação + Permite feedback quantitativo

    e qualitativo + Complementa outros métodos
  65. Enquete + Grandes quantidades de informação + Permite feedback quantitativo

    e qualitativo - Difícil de conseguir boas respostas - Amostra de respostas pode ter um viés + Complementa outros métodos
  66. Enquete + Grandes quantidades de informação + Permite feedback quantitativo

    e qualitativo - Difícil de conseguir boas respostas - Amostra de respostas pode ter um viés
  67. Observação Contextual + Transparece informações que você não perguntaria… +

    Representa o uso real
  68. Observação Contextual + Transparece informações que você não perguntaria… +

    Representa o uso real - Bem cansativo para organizar e analizar - Depende de visitar usuários fisicamente
  69. Observação Contextual + Transparece informações que você não perguntaria… +

    Ou que o usuário não falaria + Representa o uso real - Bem cansativo para organizar e analizar - Depende de visitar usuários fisicamente
  70. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando
  71. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Mostra o que aconteceu, mas não por quê - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código
  72. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código Serviços de Analytics Google Analytics Mixpanel Hotjar Intercom
  73. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código Num mundo ideal Todo UX Designer sabe usar o Google Analytics
  74. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código
  75. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código https://analytics.google.com/analytics/academy
  76. None
  77. Erika Hall Just Enough Research

  78. Pra fechar pesquisa

  79. Design Participatório Extende a pesquisa envolvendo usuários e stakeholders no

    processo de descoberta para visualizar problemas e soluções
  80. Card Sorting Entender o modelo mental dos usuários • Ordenar

    itens em categorias • Relacionar temas a ícones • Testar opções de copywriting
  81. Card Sorting

  82. Concept Mapping

  83. None
  84. Somar a visão de cada um em uma única visão

    comum Sketching
  85. Sketching

  86. Sketching Sketches são peças de comunicação que permitem visualizar conceitos

  87. Sketching Unflattening Design https://blog.intercom.com/unflattening-design/

  88. Arquitetura de Informação Explorar estruturas visuais e de conteúdo

  89. Mapeia estruturas técnicas Sitemap •Páginas •Templates •Estados (login, offline, etc)

  90. Mapeia estruturas técnicas Sitemap

  91. Mapeia estruturas técnicas Sitemap

  92. Sitemap

  93. Sitemap

  94. Sitemap JJG Visual Vocabulary http://www.jjg.net/ia/visvocab/

  95. Mapeia os fluxos do usuário User Flow •Entender o “happy

    path” •Mapear estados de erro •Discutir cenários específicos
  96. User Flow

  97. User Flow

  98. User Flow #Bizu

  99. User Flow

  100. Mapeia a jornada individual de um usuário Customer Journey •Segue

    unicamente o comportamento do usuário •Mapeia estado emocional ao longo da jornada •Não precisa estar limitado ao produto
  101. Customer Journey

  102. Customer Journey •Segue unicamente o comportamento do usuário •Mapeia estado

    emocional ao longo da jornada •Não precisa estar limitado ao produto
  103. Customer Journey •Segue unicamente o comportamento do usuário •Mapeia estado

    emocional ao longo da jornada •Não precisa estar limitado ao produto How to Create a Customer Journey Map https://uxmastery.com/how-to-create-a-customer-journey-map/
  104. E agora, o melhor livro sobre Arquitetura de Informação que

    vocês vão ler
  105. None
  106. Abby Covert How to Make a Sense of Any Mess

    www.howtomakesenseofanymess.com De graça em
  107. UI Design Definindo o tom do produto

  108. Testando volumes Wireframes •Comunica de forma mais clara (média fidelidade)

    •Experimentar com a hierarquia visual da página •Requer certa capacidade de abstração
  109. Wireframes

  110. Wireframes Encontre sua próxima cerveja Contém Cerva é o maior

    site de cervejas artesanais brasileiras Procure cervejas ou cervejarias Cervejas Cervejarias Blog Sobre Entrar
  111. Wireframes Encontre sua próxima cerveja Contém Cerva é o maior

    site de cervejas artesanais brasileiras Procure cervejas ou cervejarias Cervejas Cervejarias Blog Sobre Entrar
  112. Wireframes Destaques Procure cervejas ou cervejarias próxima cerveja Encontre sua

    próxima cerveja Contém Cerva é o maior site de cervejas artesanais brasileiras Cervejas Cervejarias Blog Sobre Entrar 2 Ça Va Saison Saison Barco 4.0 Pilsner 3.8 Jeffrey Red Pilsen 3 Witbier 3.75 Jeffrey Ninã 4 Ça Va Saison Saison Barco 3.7 5 Pilsner 3.7 Jeffrey Red Pilsen 6 Witbier 4.2 Jeffrey Ninã 1 Melhores Avaliações Ver todas
  113. Refinando a visão Mockups •Ideal para experimentação visual detalhada •Pode

    ocupar muito tempo de preparo •Visão muito clara do produto (alta fidelidade)
  114. Mockups Refinando a visão •Ideal para experimentação visual detalhada •Pode

    ocupar muito tempo de preparo •Visão muito clara do produto (alta fidelidade) Mockups O que não fazer •Começar pelo digital •Fazer um layout sem ter ideia do conteúdo •Fazer um layout sem antes ter uma estrutura
  115. Ferramentas Mockups •Sketch •Affinity Designer •Figma •Adobe XD

  116. Ferramentas Mockups •Sketch •Affinity Designer •Figma •Adobe XD •Compositor.io •Subform

  117. Mockups Refinando a visão •Ideal para experimentação visual detalhada •Pode

    ocupar muito tempo de preparo •Visão muito clara do produto (alta fidelidade) Web Design in 4 minutes
  118. Prototipagem & Validação Hora da verdade

  119. Protótipos são ferramentas de teste ou de visualização

  120. Protótipos são ferramentas de teste ou de visualização

  121. E devem ter fidelidade o suficiente para provar suas hipóteses

    ou comunicar suas funcionalidades
  122. E devem ter fidelidade o suficiente para provar suas hipóteses

    ou comunicar suas funcionalidades
  123. Baixa Fidelidade Protótipos

  124. Média Fidelidade Protótipos

  125. Alta Fidelidade Protótipos

  126. Ferramentas Protótipos •Papel e Caneta •Marvel App •InVision •Keynote •Flinto

    •Framer •Principle •HTML/CSS
  127. Testando seus protótipos

  128. Feedback dói.

  129. Feedback dói. Você vai estar errado.

  130. Feedback dói. Você vai estar errado. Vai ter coisa pra

    mudar no seu design.
  131. Feedback dói. Você vai estar errado. Vai ter coisa pra

    mudar no seu design. Sim, de última hora.
  132. Faça já o seu! Teste de Usabilidade •Um protótipo •Uma

    ação a ser realizada •Uma hipótese •Um a cinco usuários •Um parceiro
  133. Faça já o seu! Teste de Usabilidade •Um protótipo •Uma

    ação a ser realizada •Uma hipótese •Um a cinco usuários •Um parceiro para os testes Assista User Research, Quick 'n' Dirty
  134. Teste de Usabilidade

  135. Teste de Usabilidade

  136. Teste de Usabilidade

  137. Outra forma de validação

  138. Heurísticas de Usabilidade Checklists para um design melhor

  139. Heurísticas de Usabilidade Todo sistema pode ter sua usabilidade avaliada

    em cinco qualidades •Capacidade de Aprendizado •Memorabilidade •Eficiência •Gestão de Erros •Satisfação
  140. Heurísticas de Nielsen •Visibility of system status •User control and

    freedom •Match between system and the real world •Consistency and standards •Error prevention •Recognition rather than recall •Aesthetic and minimalist design •Flexibility and efficiency of use •Help and documentation •Help users recognize, diagnose, and recover from errors
  141. Heurísticas de Nielsen •Visibility of system status •User control and

    freedom •Match between system and the real world •Consistency and standards •Error prevention •Recognition rather than recall •Aesthetic and minimalist design •Flexibility and efficiency of use •Help and documentation •Help users recognize, diagnose, and recover from errors NN Group Jakob Nielsen & Don Norman
  142. Heurísticas de Nielsen •Visibility of system status •User control and

    freedom •Match between system and the real world •Consistency and standards •Error prevention •Recognition rather than recall •Aesthetic and minimalist design •Flexibility and efficiency of use •Help and documentation •Help users recognize, diagnose, and recover from errors Don Norman O Design do Dia-a-dia
  143. Pra encerrar

  144. Criar bons produtos não requer só habilidade técnica ou talento

  145. Se importar com os usuários e tomar responsabilidade pelo processo

  146. Obrigado Daniel Fosco @dfosco

  147. http://bit.ly/ux-workshop-fosco Daniel Fosco @dfosco