Ux design antes do wireframe

34.869 visualizações

Publicada em

Há muito pensamento de UX em um projeto digital antes da fase de wireframes, dentro de uma agência de publicidade. Por exemplo: contribuir para a visão holística da presença digital da marca e entender qual a real função do produto digital que está sendo construído.

Esta apresentação mostra alguns aspectos da transição de um trabalho focado em Arquitetura de Informação para um trabalho mais amplo, de User Experience Design. Ela foi compartilhada no WIAD (World Information Architecture Day), no dia 11/fev, em São Paulo.

Criada e apresentada por Fabricio Teixeira (@fabriciot).

Agradecimentos a: Elisa Volpato e Caio Braga.

Publicada em: Tecnologia
8 comentários
275 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
34.869
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7.614
Ações
Compartilhamentos
0
Downloads
4
Comentários
8
Gostaram
275
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Meunomeé Fabricio e eutrabalhoháalgunsanosemagências de publicidade. Essassão as empresasondeeutrabalhei.
  • Essasempresastêmemcomum o fato de seremagências de publicidade. Entãosópradeixarclaro, tudo o queeudisser a partir de agora é o ponto de vista de alguémquesótrabalhouemagências de publicidade.
  • Essasempresastêmemcomum o fato de seremagências de publicidade. Entãosópradeixarclaro, tudo o queeudisser a partir de agora é o ponto de vista de alguémquesótrabalhouemagências de publicidade.
  • E apesar de eusempreterfeitobasicamente a mesmacoisaemtodaselas, minhaprofissãomudou de nomealgumasvezes.
  • E apesar de eusempreterfeitobasicamente a mesmacoisaemtodaselas, minhaprofissãomudou de nomealgumasvezes.
  • E apesar de eusempreterfeitobasicamente a mesmacoisaemtodaselas, minhaprofissãomudou de nomealgumasvezes.
  • E apesar de eusempreterfeitobasicamente a mesmacoisaemtodaselas, minhaprofissãomudou de nomealgumasvezes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
  • Ux design antes do wireframe

    1. 1. UX Design antes do wireframe Fabricio Teixeira @fabriciot
    2. 2. Empresas onde eu trabalhei: AgênciaClickCrispin Porter + Bogusky R/GA
    3. 3. O que elas têm em comum? AgênciaClickCrispin Porter + Bogusky R/GAAgências de publicidade
    4. 4. O que elas têm em comum? AgênciaClickCrispin Porter + Bogusky R/GAAgências de publicidade digital
    5. 5. O que elas têm em comum? Médio e grande porte. AgênciaClick 200+Crispin Porter + Bogusky 900+ R/GA 900+
    6. 6. O que elas têm em comum? Uma área de UX consolidada. AgênciaClick 200+ 6-7 UX DesignersCrispin Porter + Bogusky 900+ 28 Experience Designers R/GA 900+ 89 Interaction Designers
    7. 7. O que elas NÃO têm em comum? O nome da área. AgênciaClick Arquiteto de Informação User Experience DesignerCrispin Porter + Bogusky Experience Designer R/GA Interaction Designer
    8. 8. Sobre o que trata esta palestra: AI AgênciaClick Arquiteto de Informação User Experience DesignerCrispin Porter + Bogusky Experience Designer R/GA Interaction Designer UX
    9. 9. O que me motivou a falar sobre isso?Um movimento recente na comunidade de AI brasileira: criticar o wireframe.
    10. 10. Convenhamos, o Axure é incrível.
    11. 11. Convenhamos, os wireframes vão existir por muito tempo.
    12. 12. Por isso, ao invés de chamar a palestra de: UX Design sem wireframe Preferi chamar de:UX Design antes do wireframe
    13. 13. Outro motivo que me levou a falar sobre isso foi uma pergunta muito comum em vários dos projetos dos quais participo. (a pergunta está no próximo slide)
    14. 14. "Quando você consegueentregar a primeira tela de wireframe?" PROJETOS, Gerente de
    15. 15. E por mais que eu tentasse argumentar,eles sempre vinham com um contra-argumento muito mais inteligente:
    16. 16. "Mas é só a home e uma interna!"
    17. 17. E aí que se a gente olhar para a lista de entregáveis que nossa área consegue produzir…
    18. 18. CONCEPÇÃO IMPLEMENTAÇÃORoad Map Casos de UsoBenchmark Documento de EspecificaçãoMétricas de Sucesso (KPIs) Análise HeurísticaPersonas Teste de UsabilidadeModelo Conceitual Controle de QualidadeBlueprint Análise de AcessibilidadeEcossistema Recomendações de SEOConsumer JourneyEntrevistaObservação etnográficaPesquisa QuantitativaCard Sorting VERIFICAÇÃOInventário de Conteúdo Teste de UsabilidadeAnálise de Tarefas Teste A/BMapa do Site Eye TrackingFluxograma Análise de MétricasWireframes Análise Quantitativa e QualitativaProtótipos NavegáveisStoryboardsMoodboards http://tinyurl.com/entregaveisdeux http://corais.org
    19. 19. O Wireframe é apenas uma pequena parte dela.(calma, a lista do slide anterior não é exaustiva)
    20. 20. Quem disse que tem que ser um site? app de celular? app de Facebook? hotsite?
    21. 21. E aí que no estágio inicial do projeto, o trabalho de um profissional de UX é justamenteIr atrás das perguntas, e não das respostas.
    22. 22. E existe, sim, uma série de entregáveis que nos ajuda exatamente a ir atrás das perguntas.
    23. 23. CONCEPÇÃO IMPLEMENTAÇÃORoad Map Casos de UsoBenchmark Documento de EspecificaçãoMétricas de Sucesso (KPIs) Análise HeurísticaPersonas Teste de UsabilidadeModelo Conceitual Controle de QualidadeBlueprint Análise de AcessibilidadeEcossistema Recomendações de SEOConsumer JourneyEntrevistaObservação etnográficaPesquisa QuantitativaCard Sorting VERIFICAÇÃOInventário de Conteúdo Teste de UsabilidadeAnálise de Tarefas Teste A/BMapa do Site Eye TrackingFluxograma Análise de MétricasWireframes Análise Quantitativa e QualitativaProtótipos NavegáveisStoryboardsMoodboards http://tinyurl.com/entregaveisdeux http://corais.org
    24. 24. Vou mostrar dois deles aqui.
    25. 25. 1. Brand Ecosystem
    26. 26. Os projetos digitais há alguns anos:Web Anúncios
    27. 27. Os projetos digitais, agora: Web Mobile Social BuscaEventos PDV Embalagem Anúncios
    28. 28. Nosso papel, nessa confusão toda: Web Mobile Social BuscaGarantir que a experiência seja positiva em todos os pontos de contato com a marca.Eventos PDV Embalagem Anúncios
    29. 29. Web Mobile Social BuscaPor mais que você esteja desenhando, agora, somente uma peça desse ecossistema.Eventos PDV Embalagem Anúncios
    30. 30. Brand EcosystemPara que serve?• Entender a presença digital da marca• Entender os assets que já existem para utilizá-los damelhor forma possível• Identificar possíveis falhas dentro desse ecossistema• Garantir que qualquer modificação que seja feita estejaalinhada com os KPIs do projeto
    31. 31. Brand Ecosytems podem ser bem simples:
    32. 32. Ou mega complexos:
    33. 33. 2. Consumer Journey
    34. 34. Ativação Aprendizado Engajamento Decisão Compra Share
    35. 35. Nosso papel, nessa longa jornada: Ativação Aprendizado Engajamento Decisão Compra ShareGarantir que a experiência seja positiva em todos os momentos da jornada.
    36. 36. Ativação Aprendizado Engajamento Decisão Compra SharePor mais que você esteja desenhando, agora, somente uma peça dessa jornada.
    37. 37. Consumer JourneyPara que serve?• Entender o caminho que diferentes personaspercorrem na experiência com a marca.• Entender quais são as necessidades, emoções,problemas, desejos e angústias do consumidor em cadaetapa dessa experiência.
    38. 38. Consumer JourneyPara que serve?• Entender o caminho que diferentes personaspercorrem na experiência com a marca.• Entender quais são as necessidades, emoções,problemas, desejos e angústias do consumidor em cadaetapa dessa experiência.Com a marca, não com o site.
    39. 39. Consumer JourneyAtivação Aprendizado Engajamento Decisão Compra Share User Flow Página de Página de Carrinho de Home Categoria Produto Compras
    40. 40. Consumer Journeys podem ser bem simples:
    41. 41. Ou bem complexas:
    42. 42. CONCEPÇÃO IMPLEMENTAÇÃORoad Map Casos de UsoBenchmark Documento de EspecificaçãoMétricas de Sucesso (KPIs) Análise HeurísticaPersonas Teste de UsabilidadeModelo Conceitual Controle de QualidadeBlueprint Análise de AcessibilidadeEcossistema Recomendações de SEOConsumer JourneyEntrevistaObservação etnográficaPesquisa QuantitativaCard Sorting VERIFICAÇÃOInventário de Conteúdo Teste de UsabilidadeAnálise de Tarefas Teste A/BMapa do Site Eye TrackingFluxograma Análise de MétricasWireframes Análise Quantitativa e QualitativaProtótipos NavegáveisStoryboardsMoodboards http://tinyurl.com/entregaveisdeux http://corais.org
    43. 43. O que eu descobri depois de começar a utilizá-los: Passada a etapa de UX thinking,o wireframe fica quase automático.
    44. 44. Isso porque eu já sei:De onde ele O que ele vem precisa (Brand Ecosystem) (Consumer Journey)
    45. 45. E esses documentos me mostram as perguntas que os wireframes têm que responder.
    46. 46. A essa altura você deve estar pensando: "não dá tempo""realidade do mercado" "budget"
    47. 47. A má notícia é que não existe uma fórmula mágica.
    48. 48. Combinações de entregáveisEcossistema Consumer da marca + Journey + Wireframes
    49. 49. Combinações de entregáveisConsumer Pesquisa Journey + Online + Rabiscoframes
    50. 50. Menos tempo discutindo o wireframe. Mais tempo discutindo a estratégia.
    51. 51. AI >>> UX
    52. 52. Onde AI se encaixa no fluxo de trabalho? AIInsights Estratégia Ideias Document. Execução Observação
    53. 53. Onde UX se encaixa no fluxo de trabalho? UX AIInsights Estratégia Ideias Document. Execução Observação
    54. 54. Entender o Fortalecer e Documentar ausuário filtrar ideias execução• Ecossistema • Descritivo das ideias • Cardsorting• Consumer Journey • Consumer Journey • Sitemap• Personas • Sketches • Wireframes Ajudar a definir a Documentar e Observar estratégia validar o uso • Ecossistema • Sitemap • Teste de usabilidade • Personas • Wireframes • Análise de métricasInsights Estratégia Ideias Document. Execução Observação
    55. 55. UX antes do wireframeEntender o Fortalecer e Documentar ausuário filtrar ideias execução• Ecossistema • Descritivo das ideias • Cardsorting• Consumer Journey • Consumer Journey • Sitemap• Personas • Sketches • Wireframes Ajudar a definir a Documentar e Observar estratégia validar o uso • Ecossistema • Sitemap • Teste de usabilidade • Personas • Wireframes • Análise de métricasInsights Estratégia Ideias Document. Execução Observação
    56. 56. O UX Designer deve aproveitar a visão sistemática que possuipela própria natureza da profissão.
    57. 57. Essa transição de AI para UX pode significar um passo em direção ao Planejamento (e menos à Criação)Planejamento UX <<< AI Criação
    58. 58. Mas tenho observado alguns movimentos em agências que talvez ajudem a justificar essa transição:
    59. 59. PlanejamentoMarcas criando mais plataformas e menos campanhas.
    60. 60. PlanejamentoMarcas criando mais plataformas e menos campanhas. Exemplo: Nike +
    61. 61. PlanejamentoMarcas criando mais plataformas e menos campanhas. Exemplo: Nike Fuel Band
    62. 62. Planejamento Marcas criando mais plataformas e menos campanhas.Agências influenciando cada vez mais no business do cliente.
    63. 63. Planejamento Marcas criando mais plataformas e menos campanhas.Agências influenciando cada vez mais no business do cliente. Exemplo: Domino’s Pizza
    64. 64. CriaçãoPadrões de interaçõescada vez mais nítidos.
    65. 65. Criação Padrões de interações cada vez mais nítidos.Exemplo: Pattern Tap
    66. 66. CriaçãoPadrões de interaçõescada vez mais nítidos. Visual Designerscom mais noções de AI.
    67. 67. Criação Padrões de interações cada vez mais nítidos. Visual Designers com mais noções de AI.Exemplo: Criando uma landing page perfeita
    68. 68. Planejamento <<< UX >>> Criação
    69. 69. Mas é claro: essa passagem de AI para UX é apenas uma das opções. Sempre haverá espaço para o especialista. <<<<<<<<<<<<<< Generalista >>>>>>>>>>>>>> >>>>>> Especialista <<<<<<
    70. 70. "Legal, e agora?" Ou “3 lições que aprendi na marra”
    71. 71. 1. Nunca começar a desenhar uma interface semantes ter a visão de todo o ecossistema
    72. 72. 2. Fazer os documentos circularem entretodos do time
    73. 73. 3. Mostrar como o pensamento de UX pode ajudarnas diversas etapas do projeto
    74. 74. Designing Structures for Understanding
    75. 75. Obrigado! Fabricio Teixeira @fabriciotarquiteturadeinformacao.com @blogdeai

    ×