WORKSHOP - VAMOS ENTENDER UX - 8h

154 visualizações

Publicada em

Se você é um empreendedor 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.

Conteúdos:
● O que é User Experience?
● A importância do UX
● Entendendo os usuários
● Métodos e entregáveis de UX
● Como fazer pesquisa e levantamento de dados
● Sintetizando Pesquisa e desenvolvimento de uma estratégia de design
● Prototipação como parte do processo de criação de umproduto
● Processos de Validação de um produto

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
154
No SlideShare
0
A partir de incorporações
0
Número de incorporações
0
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

WORKSHOP - VAMOS ENTENDER UX - 8h

  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 OLÁ :)
  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 Usar um post-it para cada ideia
  27. 27. Votação Zen INDIVIDUAL 1 3pts 2pts 1pt 2 3
  28. 28. ATIVIDADE PRÁTICA APLICAR O ZEN VOTING E ESCOLHER A IDEIA
  29. 29. PESQUISA COM USUÁRIOS
  30. 30. POR QUE A PESQUISA COM USUÁRIOS É IMPORTANTE PARA CRIAÇÃO DE INTERFACES?
  31. 31. ESTUDAR O USUÁRIO
  32. 32. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO
  33. 33. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO USANDO FERRAMENTAS
  34. 34. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO USANDO FERRAMENTAS PARA EXECUTAR TAREFAS
  35. 35. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO USANDO FERRAMENTAS PARA EXECUTAR TAREFAS PARA ATINGIR UM OBJETIVO
  36. 36. ALÉM DISSO...
  37. 37. Estou feliz que todos concordam
  38. 38. Ops...
  39. 39. ah ha!
  40. 40. Estou feliz que todos concordam
  41. 41. 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
  42. 42. EMPATIA Capacidade de compreender o sentimento ou reação da outra pessoa imaginando-se nas mesmas circunstâncias.
  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. PLANEJAMENTO E IDEAÇÃO
  54. 54. FAZER ESCOLHAR TOMAR DECISÕES
  55. 55. ATIVIDADE PRÁTICA FAZER O CANVAS PRODUTO O QUE É/O QUE NÃO É FAZ/NÃO FAZ OBS: TEM QUE SER UM APP
  56. 56. UX CANVAS Composto de 9 blocos dividido em três grandes áreas:Cliente, Usuário e Experiência. Baseado na teoria do Business Model Canvas. Flexível o suficiente para ser aplicado em qualquer tipo de artefato que tenha como foco a experiência do usuário. www.uxcanvas.com
  57. 57. www.uxcanvas.com
  58. 58. ATIVIDADE PRÁTICA FAZER O UX CANVAS DO SEU PRODUTO
  59. 59. Além de aspectos funcionais, é preciso avaliar aspectos emocionais do produto Está preocupado com a manipulação e transformação da informação
  60. 60. SITEMAP CARD SORTING JORNADA DO USUÁRIO USER STORIES USER FLOW
  61. 61. 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
  62. 62. SITE MAP Exemplo visual
  63. 63. CARD SORTING conteúdo, organização e taxonomia
  64. 64. EXEMPLO DE CARD SORTING DE UM WEBSITE
  65. 65. ATIVIDADE PRÁTICA BRAINSTORMING DE FUNCIONALIDADES CARDSORTING FUNCIONALIDADES ZEN VOTING FUNCIONALIDADES
  66. 66. 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.
  67. 67. https://medium.com/@harrybr/
  68. 68. USER STORIES focam nos objetivos do usuário e como o sistema alcança esses objetivos.
  69. 69. 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
  70. 70. 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
  71. 71. USER FLOW Recuperando senha esquecida
  72. 72. 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
  73. 73. ATIVIDADE PRÁTICA CRIAR O USER FLOW DO OBJETIVO PRINCIPAL DA PROTO-PERSONA
  74. 74. PROTOTIPAÇÃO
  75. 75. CLARO EXPLÍCITO ACIONÁVEL
  76. 76. SE SUAS IDÉIAS NÃO PODE SER DESENHADAS, NÃO PODE SER FEITAS.
  77. 77. 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.
  78. 78. CRAZY EIGHTS 8uma técnica rápida e visual para explorar ideias com seu time
  79. 79. 8 IDEIAS 5 MINUTOS
  80. 80. 1 IDEIA 40 S
  81. 81. STORYBOARD OU FLUXO DE IDEIAS
  82. 82. ATIVIDADE PRÁTICA CADA UM INTEGRANTE DO GRUPO FAZER O CRAZY EIGHTS 5 MINUTOS
  83. 83. CRAZY EIGHTS Tomar decisões melhores Ter mais opções (obvias e inovadoras) Desligar a auto edição
  84. 84. ATIVIDADE PRÁTICA ESTRUTURAS AS TELAS DESENHAS NO CRAZY EIGHTS NO FLUXO DE USO OBS: SE PRECISAR DESENHAR AS TELAS QUE FALTAM
  85. 85. 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. NÍVEL DE FIDELIDADE BAIXA MÉDIA ALTA
  87. 87. FERRAMENTAS wireframes/protótipos MARVEL APP WIREFRAME.CC SKETCH APP FIGMA INVISION POP APP AXURE BALSAMIQ existem muitas outras...
  88. 88. ATIVIDADE PRÁTICA USAR O POP APP OU O MARVEL APP PARA FAZER UM PROTÓTIPO DE BAIXA FIDELIDADE
  89. 89. TESTAR MEDIR VALIDAR
  90. 90. UXITERATIVO PROCESSO
  91. 91. um PRODUTO DIGITAL nunca está 100% pronto...
  92. 92. PESQUISA ACHÔ :D
  93. 93. 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)
  94. 94. MAS COM QUANTOS USUÁRIOS TESTAR?
  95. 95. 100%100% 75%75% 50%50% 25%25% 0%0% 00 33 66 99 1212 1515 ERROSENCONTRADOS NÚMERO DE USUÁRIOS A PORCENTAGEM DE ERROS DE USABILIDADE ENCONTRADA POR UM GRUPO DE CINCO USUÁRIOS É DE 85% NIELSEN NORMAN GROUP
  96. 96. MÉTRICASO que o os usuários estão fazendo? Trabalhar com números nem sempre é fácil… (mas precisa começar o quanto antes)
  97. 97. FRAMEWORK (EXEMPLO) H E A R T Obs: cuidado com as métricas de vaidade http://www.dtelepathy.com/ux-metrics/
  98. 98. ALGUMAS FERRAMENTAS DE VALIDAÇÃO HOTJAR.COM TESTR.COM.BR MIXPANEL CRAZYEGG
  99. 99. QUASE NO FIM...
  100. 100. 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). “
  101. 101. CHECKLIST Use com moderação BONUS ixdchecklist.com userium.com goodui.org uxchecklist.github.io
  102. 102. OI! PODE IR EMBORA? FICA, VAI TER BOLO! EU ACHO...OI!AE! OBRIGADA :) CABÔ. FIM. VLW. FLWS. carladebona.com @carladebona

×