WORKSHOP - Vamos entender UX?

754 visualizações

Publicada em

Se você é um designer e está começando a lidar com o complexo mundo digital ou um desenvolvedor que, às vezes, precisa tomar decisões sobre a experiência do usuário, este curso foi pensando para que você aprenda sobre UX Design e dê seus primeiros passos.

Através de uma abordagem prática, você vai ter uma visão geral sobre um projeto de UX, o que é, qual a importância de UX para produtos, como os UX designers pensam, quais ferramentas são usadas e quais etapas fundamentais de um projeto UX.

Publicada em: Design

WORKSHOP - Vamos entender UX?

  1. 1. carladebona.com VAMOS ENTENDERUX?
  2. 2. UDESC PUC/SP CARLA DE BONA Designer Gráfica Mestre em Comunicação e Semiótica Startup Aplicativo mobile Projetos de criação de marcas e UX/UI design em empresas e startups Mentora de competidores de web e DG para o WorldSkills carladebona.com Instrutora de UX na caelum Instrutora na alura Apoia diversas iniciativas de empoderamento da mulher na tecnologia Professora de Graduação da FIAP AGORA É MINHA VEZ :)
  3. 3. OBJETIVOS PRA ONDE VAMOS E PRA ONDE NÃO VAMOS COM ESSA OFICINA? ?
  4. 4. ESGOTAR O TEMA As interfaces estão sempre mudando, a tendência hoje é a variação de formato, num futuro próximo as interfaces flexíveis, e por aí vai. SEM COMPUTADORES! O Ministério do UX adverte, você pode projetar experiências sem computadores :O ENSINAR FÓRMULAS MÁGICAS QUE RESOLVEM TODOS OS PROBLEMAS Não dá, cada caso é um caso! Cada interface uma interface, cada projeto um projeto... NÃO VAMOS
  5. 5. VAMOS SIM! ENTENDER O QUE É UX? Afinal esse é o nome de curso né? O mínimo que se espera... ¯_(ツ)_/¯ APRESENTAR FERRAMENTAS/MÉTODOS Explica-lás e mostrar como algumas funcionam na prática ESTIMULAR O APROFUNDAMENTO Apontar referências que podem lhe ajudar a continuar os estudos ou a implantação de um projeto.
  6. 6. USER EXPERIENCE não é fazer um design bonito As telas são só uma parte do processo...
  7. 7. UX? O QUE É
  8. 8. DELETAR QUANTOS COISAS VOCÊ DEIXOU DE USAR OU ACESSAR PQ ELES ERAM RUINS?
  9. 9. REALIZADO COM SUCESSO!
  10. 10. DESIGN CENTRADO NO USUÁRIO
  11. 11. FONTE: The Mobile PlayBook Google 2013 do usuários alegam menos chance de retornar a um site depois de uma experiência de uso negativa 88% vão para um site concorrente depois de uma experiência ruim no site mobile 41% FONTE: ECONSULTANCY 2012
  12. 12. é o custo às empresas de sites que demoram para carregar $2,6 dos clientes mobile vão abandonar o seu site se eles tiverem que esperar 3 segundos para uma página para carregar 57% FONTE: ECONSULTANCY 2012 FONTE: MoPowered 2014 BILHÕES DE DÓLARES
  13. 13. dos julgamentos dos usuários sobre a credibilidade de um site estão baseados na qualidade estética do site 75% FONTE: HCI 2009
  14. 14. DEU PRA TER UMA IDEIA DA IMPORTÂNCIA DE INVESTIR EM BOAS EXPERIÊNCIAS DE USO? OW YEAH!
  15. 15. #comoFaz
  16. 16. Feito por Envis Preciselt GmbH (2009 | Redesign 2013) Baseado no “As disciplinas de UX do Dan Saffer - 2008”
  17. 17. MÉTODOS E ENTREGÁVEIS BLUEPRINT CONSUMER JOURNEY MAP USER STORIES PERSONAS ECOSYSTEM MAP COMPETITIVE AUDIT VALUE PROPOSITION STAKEHOLDERS INTERVIEWS KEY PERFORMANCE INDICATORS BRAINSTORMING MOODBOARDS STORYBOARDS USER FLOW TASK ANALYSIS TAXONOMIES HEURISTIC ANALYSIS SITEMAP FEATURES ROADMAP USE CASES AND SCENARIOS METRICS ANALYSIS FOCUS GROUP QUANTITATIVE SURVEYUSABILITY TEST CARD SORTING A/B TEST EYETRACKING ACCESSIBILITY ANALYSIS SKETCHES WIREFRAMES PROTOTYPES PATTERN LIBRARY
  18. 18. QUEM É O ILUMINADO QUE FAZ TUDO ISSO?
  19. 19. DESIGNER DE INTERFACES ARQUITETO DE INFORMAÇÃO PESQUISADOR DESIGNER DE INTERAÇÃO DESIGNER DE ESTRATÉGIAS DESENVOLVEDOR EMPREENDEDOR
  20. 20. TIME MULTIDISCIPLINAR CULTURA UX
  21. 21. #comoFaz DE VERDADE AGORA
  22. 22. PESQUISA PLANEJAMENTO PROTOTIPAÇÃO VALIDAÇÃO
  23. 23. MINISTÉRIO DE UX ADVERTE: CONHEÇA OS MAIS DIVERSOS MÉTODOS E FERRAMENTAS DE UX. DESENVOLVA A HABILIDADE DE ESCOLHER A MAIS ADEQUADA E DE ESCULPIR SUAS PRÓPRIAS FERRAMENTAS E PROCESSOS
  24. 24. ATIVIDADE PRÁTICA
  25. 25. QUAL PROBLEMA VAMOS RESOLVER?
  26. 26. ATIVIDADE PRÁTICA BRAINSTORMING DE PROBLEMAS RELACIONADOS AO TEMA Usar um post-it para cada ideia
  27. 27. Relaxem! Não é decisão final das suas vidas… É apenas um exercício prático Decidir é díficil Toda escolha envolve uma renúncia
  28. 28. Votação Zen INDIVIDUAL 1 3pts 2pts 1pt 2 3
  29. 29. ATIVIDADE PRÁTICA APLICAR O ZEN VOTING E ESCOLHER A IDEIA
  30. 30. PESQUISA COM USUÁRIOS
  31. 31. POR QUE A PESQUISA COM USUÁRIOS É IMPORTANTE PARA CRIAÇÃO DE INTERFACES?
  32. 32. ESTUDAR O USUÁRIO
  33. 33. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO
  34. 34. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO USANDO FERRAMENTAS
  35. 35. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO USANDO FERRAMENTAS PARA EXECUTAR TAREFAS
  36. 36. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO USANDO FERRAMENTAS PARA EXECUTAR TAREFAS PARA ATINGIR UM OBJETIVO
  37. 37. ALÉM DISSO...
  38. 38. Estou feliz que todos concordam
  39. 39. Ops...
  40. 40. ah ha!
  41. 41. Estou feliz que todos concordam
  42. 42. ENTREVISTAS PERSONAS PERSONA EMPATHY MAPPING ALGUNS MÉTODOS
  43. 43. ENTREVISTAS NÃO ESTRUTURADA (OPEN-ENDED) ESTRUTURADA
  44. 44. NÃO ESTRUTURADA ESTRUTURADA Uma conversa sobre um assunto determinado Tendem a ser aprofundadas Perguntas abertas Para obter primeiras impressões Visão geral do problema Novos insights dificil de tabular e analisar Perguntas fechadas e respostas precisas Perguntas curtas e claras Estudo padronizado Obter feedback Dados mais rapidos e fáceis de analisar Validar informações anteriores Não oferece novos insights
  45. 45. FERRAMENTAS entrevistas estruturadas
  46. 46. DADOS DADOS E MAIS... DADOS... #comoFaz
  47. 47. PERSONAS Um método de segmentação de mercado. É uma ferramenta que utiliza pessoas fictícias para representar usuários de um serviço ou produto.
  48. 48. VANTAGENS EM SE USAR PERSONAS Habilita o time a trabalhar com necessidades e desejos do público alvo Serve para comunicar características do usuário de maneira sintética e fácil de ser compreendida Traz mais “humanidade” (um rosto humano!) para dados fatuais
  49. 49. COMO CRIAR PERSONAS? Personas NÃO devem ser inventadas A partir desse levantamento de várias informações você encontrará os chamados PADRÕES, que podem então ser compilados nesse personagem fictício. Reuna padrões de comportamento de decisões de compra, uso de tecnologia ou produtos, preferências de atendimento ao cliente, estilo de vida, etc.
  50. 50. PROTO-PERSONAS Esboço do indivíduo Nome Caractéristicas demográficas Comportamentos Necessidades e objetivos
  51. 51. PROTO-PERSONAS Professora e mãe (dupla-jornada) 34 anos de idade Mora e trabalha na Zona Leste - SP Casado, 2 filhos 50 mil/por ano Tem uma faxineira Passa o dia fora de casa Frequentemente se sente sobrecarregado quando ela "esquece" algo Socorro! Preparação de aula, cuidar das crianças, mantendo as coisas funcionando da casa Queria mais tempo para suas amigas (social) "Clonar a si mesma!" Organizar melhor sua agenda para sobrar mais tempo pro social CARACTERÍSTICASDEMOGRÁFICASESBOÇODOINDIVÍDUO COMPORTAMENTOSNECESSIDADESEOBJETIVOS MARIA
  52. 52. ATIVIDADE PRÁTICA CONSTRUIR UMA PROTO PERSONA A4 DOBRADA EM 4 PARTES COMPARAR RESULTADOS
  53. 53. Projetar com dados Não é só seguir os números, envolve observação, testes, empatia com o usuário. Margaret Gould Stewart User experience master
  54. 54. EMPATIA Capacidade de compreender o sentimento ou reação da outra pessoa imaginando-se nas mesmas circunstâncias.
  55. 55. http://uxmag.com/ PERSONA EMPATHY MAPPING
  56. 56. Ajuda a pensar como outras pessoas estão pensando e sentindo. Considera as emoções e experiências dos usuários também. Três atos: pensar, sentir e fazer Situação específica relevante para o domínio do produto. PERSONA EMPATHY MAPPING http://uxmag.com/
  57. 57. PERSONA EMPATHY MAPPING PERSONA: SITUAÇÃO: PENSAR SENTIR AÇÃO
  58. 58. ATIVIDADE PRÁTICA PERSONA EMPATHY MAPPING
  59. 59. PLANEJAMENTO DO PRODUTO
  60. 60. FAZER ESCOLHAR TOMAR DECISÕES
  61. 61. VISÃO DO PRODUTO
  62. 62. PARA [CLIENTE FINAL], CUJO [PROBLEMA QUE PRECISA SER RESOLVIDO], O [NOME DO PRODUTO] É UM [CATEGORIA DO PRODUTO] QUE [BENEFÍCIO-CHAVE, RAZÃO PARA ADQUIRI-LO]. DIFERENTEMENTE DA [ALTERNATIVA DA CONCORRÊNCIA], O NOSSO PRODUTO [DIFERENÇA-CHAVE].
  63. 63. Imagem retirada do livro Direto ao Ponto - Paulo Caroli
  64. 64. ATIVIDADE PRÁTICA CONSTRUIR A VISÃO DO PRODUTO USANDO O TEMPLATE
  65. 65. Além de aspectos funcionais, é preciso avaliar aspectos emocionais do produto Está preocupado com a manipulação e transformação da informação
  66. 66. SITEMAP CARD SORTING JORNADA DO USUÁRIO USER STORIES USER FLOW
  67. 67. SITE MAP Ajuda a visualizar a estrutura básica e a navegação geral entre as diferentes partes do sistema. Um dos métodos mais conhecidos de UX Consiste em um diagrama das áreas de um site/app organizadas hierarquicamente
  68. 68. SITE MAP Exemplo visual
  69. 69. CARD SORTING conteúdo, organização e taxonomia
  70. 70. EXEMPLO DE CARD SORTING DE UM WEBSITE
  71. 71. JORNADA DO USUÁRIO Explora os múltiplos (e algumas vezes invisíveis) passos tomados pelo consumidor à medida que eles se engajam com o serviço.
  72. 72. https://medium.com/@harrybr/
  73. 73. USER STORIES focam nos objetivos do usuário e como o sistema alcança esses objetivos.
  74. 74. USER STORIES Como um(a) Eu quero... Para que... um leitor um glossário para me ajudar a entender as palavras que eu não sei eu possa entender melhor a história Como um(a) Eu quero... Para que... um usuário eu quero ter um login eu possa acessar meu painel
  75. 75. USER FLOW É o caminho que um usuário segue através de sua interface do site para concluir uma tarefa (fazer uma reserva, comprar um produto, inscrever-se a alguma coisa). Construir um fluxo que atenda às necessidades do usuário
  76. 76. USER FLOW Recuperando senha esquecida
  77. 77. USER FLOW Detalhes do Carro Datas disponíveis Clique em "Reservar" Formulário de inscrição Msg de confirmação da reserva Preenche dados válidos Serviço de aluguel de carro
  78. 78. ATIVIDADE PRÁTICA CRIAR O USER FLOW DO OBJETIVO PRINCIPAL DA PROTO-PERSONA
  79. 79. PROTOTIPAÇÃO
  80. 80. CLARO EXPLÍCITO ACIONÁVEL
  81. 81. SE SUAS IDÉIAS NÃO PODE SER DESENHADAS, NÃO PODE SER FEITAS.
  82. 82. ESBOÇOS Sketching é um exercício de brainstorm A técnica ajuda a definir melhor o nosso entendimento do problema, ao mesmo tempo em que nos ajuda a pensar nas possíveis soluções.
  83. 83. ATIVIDADE PRÁTICA ESBOÇAR TELAS PARA O PROJETO
  84. 84. WIREFRAME A planta baixa do site, seu esqueleto. As disposições e orientações de cada elemento.
  85. 85. existem muitas outras... INVISION P.O.P. APP AXURE BALSAMIQ PROTÓTIPOS NAVEGÁVEIS EXPERIÊNCIA DE NAVEGAÇÃO DOCUMENTOS MAIS ENXUTOS MAIS FACILIDADE PARA TESTAR COM USUÁRIOS
  86. 86. FERRAMENTAS wireframes/protótipos MARVEL APP WIREFRAME.CC SKETCH APP PROTO.IO INVISION POP APP AXURE BALSAMIQ
  87. 87. TESTAR MEDIR VALIDAR
  88. 88. UXITERATIVO PROCESSO
  89. 89. um PRODUTO DIGITAL nunca está 100% pronto...
  90. 90. PESQUISA ACHÔ :D
  91. 91. TESTE DE USABILIDADE É uma técnica de avaliação São estes com usuários representativos. (Não vale fazer com o seu colega designer!) Tem um roteiro de tarefas E um analista observando (na maior parte dos casos) Teste com 5 usuários - Nielsen
  92. 92. ALGUMAS FERRAMENTAS DE VALIDAÇÃO HOTJAR.COM TESTR.COM.BR MIXPANEL SILVERBACK APP
  93. 93. QUASE NO FIM...
  94. 94. WHITNEY HESS Empathy Coach A maioria das pessoas acredita que User Experience é somente encontrar a melhor solução para os seus usuários, mas não é. UX se trata sobre definir o problema que precisa ser resolvido (o porquê), definir para quem esse problema precisa ser resolvido (o quem), e definir o caminho que deve ser percorrido para resolvê-lo (o como). “
  95. 95. CHECKLIST Use com moderação BONUS ixdchecklist.com userium.com goodui.org uxchecklist.github.io
  96. 96. OI! PODE IR EMBORA? FICA, VAI TER BOLO! EU ACHO...OI!AE! OBRIGADA :) CABÔ. FIM. VLW. FLWS. carladebona.com @carladebona

×