carladebona.com
VAMOS
ENTENDERUX?
UDESC
PUC/SP
CARLA DE BONA
Designer Gráfica
Mestre em
Comunicação e Semiótica
Startup
Aplicativo mobile
Projetos de criaçã...
USER EXPERIENCE
não é fazer um design bonito
As telas são só uma parte do processo...
UX?
O QUE É
DELETAR
QUANTOS
COISAS VOCÊ DEIXOU
DE USAR OU ACESSAR
PQ ELES ERAM RUINS?
REALIZADO
COM
SUCESSO!
DESIGN CENTRADO
NO USUÁRIO
FONTE: The Mobile PlayBook Google 2013
do usuários alegam menos
chance de retornar a um
site depois de uma
experiência de ...
é o custo às empresas
de sites que demoram
para carregar
$2,6 dos clientes mobile vão
abandonar o seu site se eles
tiverem...
dos julgamentos dos usuários
sobre a credibilidade de um
site estão baseados na
qualidade estética do site
75%
FONTE: HCI ...
DEU PRA TER
UMA IDEIA
DA IMPORTÂNCIA
DE INVESTIR
EM BOAS
EXPERIÊNCIAS
DE USO?
OW
YEAH!
#comoFaz
Feito por Envis Preciselt GmbH
(2009 | Redesign 2013)
Baseado no “As disciplinas de UX
do Dan Saffer - 2008”
MÉTODOS
E ENTREGÁVEIS
BLUEPRINT
CONSUMER JOURNEY MAP
USER STORIES
PERSONAS
ECOSYSTEM MAP
COMPETITIVE AUDIT
VALUE PROPOSITI...
QUEM É
O ILUMINADO
QUE FAZ
TUDO ISSO?
DESIGNER DE INTERFACES
ARQUITETO DE INFORMAÇÃO
PESQUISADOR
DESIGNER DE INTERAÇÃO
DESIGNER DE ESTRATÉGIAS
DESENVOLVEDOR
EMP...
TIME
MULTIDISCIPLINAR
CULTURA UX
#comoFaz
DE VERDADE AGORA
PESQUISA
PLANEJAMENTO
PROTOTIPAÇÃO
VALIDAÇÃO
PESQUISA
POR QUE
A PESQUISA
COM USUÁRIOS
É IMPORTANTE
PARA CRIAÇÃO DE
EXPERIÊNCIAS?
ESTUDAR
O USUÁRIO
ESTUDAR
O USUÁRIO
DENTRO
DE UM
CONTEXTO
ESTUDAR
O USUÁRIO
DENTRO
DE UM
CONTEXTO
USANDO
FERRAMENTAS
ESTUDAR
O USUÁRIO
DENTRO
DE UM
CONTEXTO
USANDO
FERRAMENTAS
PARA
EXECUTAR
TAREFAS
ESTUDAR
O USUÁRIO
DENTRO
DE UM
CONTEXTO
USANDO
FERRAMENTAS
PARA
EXECUTAR
TAREFAS
PARA
ATINGIR UM
OBJETIVO
ALÉM DISSO...
Estou feliz que todos concordam
Ops...
ah ha!
Estou feliz que todos concordam
ENTREVISTAS
NÃO
ESTRUTURADA (OPEN-ENDED)
ESTRUTURADA
NÃO ESTRUTURADA ESTRUTURADA
Uma conversa sobre
um assunto determinado
Tendem a ser aprofundadas
Perguntas abertas
Para obt...
DADOS
DADOS
E MAIS...
DADOS...
#comoFaz
Projetar com dados
Não é só seguir os números, envolve observação,
testes, empatia com o usuário.
Margaret Gould Stewart
U...
EMPATIA
Capacidade de compreender o sentimento ou reação
da outra pessoa imaginando-se nas mesmas circunstâncias.
PERSONAS
Um método de segmentação de mercado.
É uma ferramenta que utiliza pessoas fictícias
para representar usuários de ...
VANTAGENS EM SE USAR PERSONAS
Habilita o time
a trabalhar com
necessidades e desejos
do público alvo
Serve para comunicar
...
PLANEJAMENTO
FAZER ESCOLHAR
TOMAR DECISÕES
SITEMAP
CARD SORTING
USER STORIES
USER FLOW
SITE MAP
Ajuda a visualizar a estrutura básica
e a navegação geral entre as diferentes partes do sistema.
Um dos métodos m...
SITE MAP
Exemplo visual
CARD SORTING
conteúdo, organização e taxonomia
EXEMPLO DE CARD SORTING DE UM WEBSITE
USER STORIES
focam nos objetivos do usuário
e como o sistema alcança
esses objetivos
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 se...
USER FLOW
É o caminho que um usuário segue através
de sua interface do site para concluir uma
tarefa (fazer uma reserva, c...
USER FLOW
Recuperando
senha esquecida
MINISTÉRIO DE UX ADVERTE:
CONHEÇA OS MAIS DIVERSOS
MÉTODOS E FERRAMENTAS DE UX.
DESENVOLVA A HABILIDADE
DE ESCOLHER A MAIS...
PROTOTIPAÇÃO
CLARO
EXPLÍCITO
ACIONÁVEL
SE SUAS IDÉIAS NÃO PODE SER
DESENHADAS, NÃO PODE SER FEITAS.
ESBOÇOS
Sketching é um exercício de brainstorm
A técnica ajuda a definir melhor o nosso
entendimento do problema, ao mesmo...
TELAS FINAIS DO PROJETO
PRIMEIRO RABISCOFRAME
WIREFRAME
A planta baixa do site, seu esqueleto.
As disposições e orientações
de cada elemento.
existem muitas outras...
INVISION P.O.P. APP AXURE BALSAMIQ
PROTÓTIPOS
NAVEGÁVEIS
EXPERIÊNCIA DE NAVEGAÇÃO
DOCUMENTOS MAIS...
FERRAMENTAS
wireframes/protótipos
MARVEL APP WIREFRAME.CC SKETCH APP PROTO.IO
VALIDAÇÃO
UXITERATIVO
PROCESSO
um PRODUTO DIGITAL
nunca está
100% pronto...
PESQUISA
ACHÔ :D
TESTE DE USABILIDADE
É uma técnica de avaliação
São estes com usuários representativos.
(Não vale fazer com o seu colega d...
ALGUMAS FERRAMENTAS DE VALIDAÇÃO
HOTJAR.COM TESTR.COM.BR MIXPANEL SILVERBACK APP
QUASE NO FIM...
CHECKLIST
Use com moderação
BONUS
ixdchecklist.com
userium.com
goodui.org
uxchecklist.github.io
OI!
PODE
IR EMBORA?
FICA!!!!!
VAI TER BOLO!
EU ACHO...OI!AE!
OBRIGADA :) CABÔ.
FIM.
VLW.
FLWS.
carladebona.com
@carladebona
Palestra: Vamos entender ux? Uma visão geral
Palestra: Vamos entender ux? Uma visão geral
Palestra: Vamos entender ux? Uma visão geral
Próximos SlideShares
Carregando em…5
×

Palestra: Vamos entender ux? Uma visão geral

279 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, esta palestra vai ter dar 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
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

Palestra: Vamos entender ux? Uma visão geral

  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
  3. 3. USER EXPERIENCE não é fazer um design bonito As telas são só uma parte do processo...
  4. 4. UX? O QUE É
  5. 5. DELETAR QUANTOS COISAS VOCÊ DEIXOU DE USAR OU ACESSAR PQ ELES ERAM RUINS?
  6. 6. REALIZADO COM SUCESSO!
  7. 7. DESIGN CENTRADO NO USUÁRIO
  8. 8. 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
  9. 9. é 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
  10. 10. dos julgamentos dos usuários sobre a credibilidade de um site estão baseados na qualidade estética do site 75% FONTE: HCI 2009
  11. 11. DEU PRA TER UMA IDEIA DA IMPORTÂNCIA DE INVESTIR EM BOAS EXPERIÊNCIAS DE USO? OW YEAH!
  12. 12. #comoFaz
  13. 13. Feito por Envis Preciselt GmbH (2009 | Redesign 2013) Baseado no “As disciplinas de UX do Dan Saffer - 2008”
  14. 14. 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
  15. 15. QUEM É O ILUMINADO QUE FAZ TUDO ISSO?
  16. 16. DESIGNER DE INTERFACES ARQUITETO DE INFORMAÇÃO PESQUISADOR DESIGNER DE INTERAÇÃO DESIGNER DE ESTRATÉGIAS DESENVOLVEDOR EMPREENDEDOR
  17. 17. TIME MULTIDISCIPLINAR CULTURA UX
  18. 18. #comoFaz DE VERDADE AGORA
  19. 19. PESQUISA PLANEJAMENTO PROTOTIPAÇÃO VALIDAÇÃO
  20. 20. PESQUISA
  21. 21. POR QUE A PESQUISA COM USUÁRIOS É IMPORTANTE PARA CRIAÇÃO DE EXPERIÊNCIAS?
  22. 22. ESTUDAR O USUÁRIO
  23. 23. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO
  24. 24. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO USANDO FERRAMENTAS
  25. 25. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO USANDO FERRAMENTAS PARA EXECUTAR TAREFAS
  26. 26. ESTUDAR O USUÁRIO DENTRO DE UM CONTEXTO USANDO FERRAMENTAS PARA EXECUTAR TAREFAS PARA ATINGIR UM OBJETIVO
  27. 27. ALÉM DISSO...
  28. 28. Estou feliz que todos concordam
  29. 29. Ops...
  30. 30. ah ha!
  31. 31. Estou feliz que todos concordam
  32. 32. ENTREVISTAS NÃO ESTRUTURADA (OPEN-ENDED) ESTRUTURADA
  33. 33. 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
  34. 34. DADOS DADOS E MAIS... DADOS... #comoFaz
  35. 35. 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
  36. 36. EMPATIA Capacidade de compreender o sentimento ou reação da outra pessoa imaginando-se nas mesmas circunstâncias.
  37. 37. 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.
  38. 38. 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
  39. 39. PLANEJAMENTO
  40. 40. FAZER ESCOLHAR TOMAR DECISÕES
  41. 41. SITEMAP CARD SORTING USER STORIES USER FLOW
  42. 42. 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
  43. 43. SITE MAP Exemplo visual
  44. 44. CARD SORTING conteúdo, organização e taxonomia
  45. 45. EXEMPLO DE CARD SORTING DE UM WEBSITE
  46. 46. USER STORIES focam nos objetivos do usuário e como o sistema alcança esses objetivos
  47. 47. 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
  48. 48. 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
  49. 49. USER FLOW Recuperando senha esquecida
  50. 50. 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
  51. 51. PROTOTIPAÇÃO
  52. 52. CLARO EXPLÍCITO ACIONÁVEL
  53. 53. SE SUAS IDÉIAS NÃO PODE SER DESENHADAS, NÃO PODE SER FEITAS.
  54. 54. 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.
  55. 55. TELAS FINAIS DO PROJETO
  56. 56. PRIMEIRO RABISCOFRAME
  57. 57. WIREFRAME A planta baixa do site, seu esqueleto. As disposições e orientações de cada elemento.
  58. 58. 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
  59. 59. FERRAMENTAS wireframes/protótipos MARVEL APP WIREFRAME.CC SKETCH APP PROTO.IO
  60. 60. VALIDAÇÃO
  61. 61. UXITERATIVO PROCESSO
  62. 62. um PRODUTO DIGITAL nunca está 100% pronto...
  63. 63. PESQUISA ACHÔ :D
  64. 64. 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
  65. 65. ALGUMAS FERRAMENTAS DE VALIDAÇÃO HOTJAR.COM TESTR.COM.BR MIXPANEL SILVERBACK APP
  66. 66. QUASE NO FIM...
  67. 67. CHECKLIST Use com moderação BONUS ixdchecklist.com userium.com goodui.org uxchecklist.github.io
  68. 68. OI! PODE IR EMBORA? FICA!!!!! VAI TER BOLO! EU ACHO...OI!AE! OBRIGADA :) CABÔ. FIM. VLW. FLWS. carladebona.com @carladebona

×