Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Loading in …3
×
1 of 77

Ux design antes do wireframe

292

Share

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Ux design antes do wireframe

  1. 1. UX Design antes do wireframe Fabricio Teixeira @fabriciot
  2. 2. Empresas onde eu trabalhei: AgênciaClick Crispin Porter + Bogusky R/GA
  3. 3. O que elas têm em comum? AgênciaClick Crispin Porter + Bogusky R/GA Agências de publicidade
  4. 4. O que elas têm em comum? AgênciaClick Crispin Porter + Bogusky R/GA Agê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 Designers Crispin 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 Designer Crispin 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 Designer Crispin 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ê consegue entregar 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ÇÃO Road Map Casos de Uso Benchmark Documento de Especificação Métricas de Sucesso (KPIs) Análise Heurística Personas Teste de Usabilidade Modelo Conceitual Controle de Qualidade Blueprint Análise de Acessibilidade Ecossistema Recomendações de SEO Consumer Journey Entrevista Observação etnográfica Pesquisa Quantitativa Card Sorting VERIFICAÇÃO Inventário de Conteúdo Teste de Usabilidade Análise de Tarefas Teste A/B Mapa do Site Eye Tracking Fluxograma Análise de Métricas Wireframes Análise Quantitativa e Qualitativa Protótipos Navegáveis Storyboards Moodboards 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 é justamente Ir 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ÇÃO Road Map Casos de Uso Benchmark Documento de Especificação Métricas de Sucesso (KPIs) Análise Heurística Personas Teste de Usabilidade Modelo Conceitual Controle de Qualidade Blueprint Análise de Acessibilidade Ecossistema Recomendações de SEO Consumer Journey Entrevista Observação etnográfica Pesquisa Quantitativa Card Sorting VERIFICAÇÃO Inventário de Conteúdo Teste de Usabilidade Análise de Tarefas Teste A/B Mapa do Site Eye Tracking Fluxograma Análise de Métricas Wireframes Análise Quantitativa e Qualitativa Protótipos Navegáveis Storyboards Moodboards 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 Busca Eventos PDV Embalagem Anúncios
  28. 28. Nosso papel, nessa confusão toda: Web Mobile Social Busca Garantir 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 Busca Por mais que você esteja desenhando, agora, somente uma peça desse ecossistema. Eventos PDV Embalagem Anúncios
  30. 30. Brand Ecosystem Para que serve? • Entender a presença digital da marca • Entender os assets que já existem para utilizá-los da melhor forma possível • Identificar possíveis falhas dentro desse ecossistema • Garantir que qualquer modificação que seja feita esteja alinhada 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 Share Garantir que a experiência seja positiva em todos os momentos da jornada.
  36. 36. Ativação Aprendizado Engajamento Decisão Compra Share Por mais que você esteja desenhando, agora, somente uma peça dessa jornada.
  37. 37. Consumer Journey Para que serve? • Entender o caminho que diferentes personas percorrem na experiência com a marca. • Entender quais são as necessidades, emoções, problemas, desejos e angústias do consumidor em cada etapa dessa experiência.
  38. 38. Consumer Journey Para que serve? • Entender o caminho que diferentes personas percorrem na experiência com a marca. • Entender quais são as necessidades, emoções, problemas, desejos e angústias do consumidor em cada etapa dessa experiência. Com a marca, não com o site.
  39. 39. Consumer Journey Ativaçã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ÇÃO Road Map Casos de Uso Benchmark Documento de Especificação Métricas de Sucesso (KPIs) Análise Heurística Personas Teste de Usabilidade Modelo Conceitual Controle de Qualidade Blueprint Análise de Acessibilidade Ecossistema Recomendações de SEO Consumer Journey Entrevista Observação etnográfica Pesquisa Quantitativa Card Sorting VERIFICAÇÃO Inventário de Conteúdo Teste de Usabilidade Análise de Tarefas Teste A/B Mapa do Site Eye Tracking Fluxograma Análise de Métricas Wireframes Análise Quantitativa e Qualitativa Protótipos Navegáveis Storyboards Moodboards 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áveis Ecossistema Consumer da marca + Journey + Wireframes
  49. 49. Combinações de entregáveis Consumer 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? AI Insights Estratégia Ideias Document. Execução Observação
  53. 53. Onde UX se encaixa no fluxo de trabalho? UX AI Insights Estratégia Ideias Document. Execução Observação
  54. 54. Entender o Fortalecer e Documentar a usuá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étricas Insights Estratégia Ideias Document. Execução Observação
  55. 55. UX antes do wireframe Entender o Fortalecer e Documentar a usuá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étricas Insights Estratégia Ideias Document. Execução Observação
  56. 56. O UX Designer deve aproveitar a visão sistemática que possui pela 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. Planejamento Marcas criando mais plataformas e menos campanhas.
  60. 60. Planejamento Marcas criando mais plataformas e menos campanhas. Exemplo: Nike +
  61. 61. Planejamento Marcas 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ção Padrões de interações cada vez mais nítidos.
  65. 65. Criação Padrões de interações cada vez mais nítidos. Exemplo: Pattern Tap
  66. 66. Criação Padrões de interações cada vez mais nítidos. Visual Designers com 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 sem antes ter a visão de todo o ecossistema
  72. 72. 2. Fazer os documentos circularem entre todos do time
  73. 73. 3. Mostrar como o pensamento de UX pode ajudar nas diversas etapas do projeto
  74. 74. Designing Structures for Understanding
  75. 75. Obrigado! Fabricio Teixeira @fabriciot arquiteturadeinformacao.com @blogdeai

Editor's Notes

  • 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.
  • ×