UX para agências de publicidade

18.149 visualizações

Publicada em

Os processos de UX, entregas e desafios da experiência de usuário (UX) em agências de publicidade.

Publicada em: Marketing
10 comentários
198 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
18.149
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.559
Ações
Compartilhamentos
0
Downloads
555
Comentários
10
Gostaram
198
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

UX para agências de publicidade

  1. 1. UX para agências de publicidade Richard Jesus @richardrx
  2. 2. Antes de qualquer coisa...
  3. 3. UI não é UX
  4. 4. INTERFACE DE USUÁRIO (UI) PESSOAS INTERFACE SISTEMAS
  5. 5. UX não é só usabilidade
  6. 6. Matador de Dragões X SALVAR PRINCESA PRESSIONE O BOTÃO PARA SALVAR A PRINCESA ref: Why Usability Engineers Don’t Design Video Games - SmashingApps
  7. 7. Foco em
 EXPERIÊNCIAS (pessoas, atividades, contexto) SIGNIFICATIVA possui significado pessoal AGRADÁVEL vale a pena compartilhar CONVENIENTE Funciona examente como você pensa USÁVEL pode ser usável sem dificuldade CONFIÁVEL sempre disponível quando preciso FUNCIONAL trabalhar como o programado Foco em
 TAREFAS (produtos, características) ref: UX Hierarchy of neeeds - Stephen Anderson
  8. 8. DIGITAL ONTEM Anúncios Web
  9. 9. DIGITAL HOJE Anúncios Web Search Mobile Social Eventos PDV Embalagem
  10. 10. Garantir que a experiência seja positiva em todos os pontos de contato com a marca.
  11. 11. UX MODELO DE MATURIDADE 5 4 3 2 1 6 Embutido UX está no tecido da organização, não discutido separadamente Comprometido UX é um dos principais princípios da estratégia organizacional Praticado UX é crítico e executivos estão ativamente envolvidos Investido UX é muito importante e programas formais surgem Interessado UX é importante, mas recebe pequeno incentivo Desconhecido UX não é importante
  12. 12. MODELO DE MATURIDADE Humano Tecnologia DESIGN PESQUISA FRONT-END BACK-END ? Planejamento Fornecedor Diretor de Arte Desenvolvedor
  13. 13. MODELO DE MATURIDADE Humano Tecnologia PESQUISA DESIGN FRONT-END Arquiteto da Informação UI Designer BACK-END Desenvolvedor
  14. 14. MODELO DE MATURIDADE Humano Tecnologia PESQUISA DESIGN FRONT-END Arquiteto da Informação UI Designer UX Designer BACK-END Desenvolvedor
  15. 15. UX depende de... CONTEXTO CONTEÚDO USUÁRIO
  16. 16. Contexto é ao mesmo tempo QUANTITATIVO & QUALITATIVO Tamanho da tela Objetivos do usuário Conectividade Ambiente do usuário Processamento Atenção do usuário Capacidade Capacidade do usuário Métodos de entrada
  17. 17. Como entregamos isso?
  18. 18. Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento
  19. 19. ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento •Benchmark •Entrevistas •Pesquisa Quantitativa •Definição de KPI’s •Análise de Tarefas •Inventário de Conteúdo
  20. 20. ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento •Personas •Blueprint •Jornada de Consumidor •Ecossistema •Mapa do Site •Card Sorting •Wireframe •Protótipos Navegáveis
  21. 21. ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento •Moodboards
  22. 22. ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento •Especificações de Projeto •Recomendações de SEO
  23. 23. ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento •Controle de Qualidade
  24. 24. ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento •Teste de Usabilidade •Avaliação Heurística •Testes A/B •Análise de Métricas
  25. 25. Pesquisa e Análise É sobre pessoas, e não dispositivos.
  26. 26. ANTIGO CONTEXTO •TELA GRANDE •CONEXÃO RÁPIDA •NAVEGADOR CAPAZ •HARDWARE POTENTE •POSIÇÃO ESTACIONÁRIA •AMBIENTE CONFORTÁVEL •SISTEMA OPERACIONAL ROBUSTO •ENTRADA EFICIENTE DE INFORMAÇÃO
  27. 27. NOVO CONTEXTO •MÚLTIPLAS TELAS •CONEXÕES DIVERSAS •NAVEGADORES VARIADOS •HARDWARE VARIÁVEL •INÚMERAS POSIÇÕES •QUALQUER AMBIENTE •SISTEMAS OPERACIONAIS LIMITADOS •ENTRADA LIMITADA DE INFORMAÇÃO
  28. 28. Mobile não é um nicho.
  29. 29. 2015 MOBILE ULTRAPASSA DESKTOP MOBILE usuários conectados no mundo hoje 1.2 bilhões de pessoas 15% DO TRÁFEGO GLOBAL É MOBILE 58% EUA JÁ POSSUI SMARTPHONES 48% JÁ USOU PARA COMPRAR Brasil já possui 14% de adoção representando um total de 27 milhões de pessoas. 28% Android 13% Symbian 12% iOS ref: ThinkwithGoogle 2012 - Ipsos, iab and Mobile Marketing Association
  30. 30. Nenhum tamanho de tela possui mais de 20% de marketshare
  31. 31. Não ser otimizado para mobile é como fechar sua loja um dia por semana.
  32. 32. Operadoras 3G no Brasil Vivo 724 Claro 421 Oi Brasil Telecom 429,6 Oi Telemar 368,7 Tim 363,6 Números em kilobits por segundo. 3G NO BRASIL
  33. 33. #significa Um iPad com 3G da TIM leva quase 2 minutos a página inicial do NãoSalvo. 3G NO BRASIL
  34. 34. QR CODE
  35. 35. NÃO VEM INSTALADO NA MAIORIA DOS SMARTPHONES QR CODE EXIGE CONEXÃO COM A INTERNET
  36. 36. 6.2% DA AUDIENCIA TOTAL NOS ESTADOS UNIDOS JÁ USOU QR CODE 53% 49% homens 18-34 revistas ou jornais 35% 58% embalagem de produto escanearam em casa ref: 14 Million Americans Scanned QR Codes in june 2011 - comScore
  37. 37. 49% tablets Cada vez mais mobilidade Tablets cresceram 49.5% em 2012 em relação ao ano anterior. ref: Q3 Tablet Shipments Up 49.5% Vs. Yr Ago; Up 6.7% Vs.Q2 - FORBES / IDC
  38. 38. CONSUMO DE INFORMAÇÃO 33% Buscaram informação relacionada ao programa que assistiam. 20% Buscaram informação de um produto que viram o anúncio na TV. 13% Buscaram cupons e ofertas relacionadas ao comercial que assistiram. Atividades consecutivas no tablet enquanto assistem televisão ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN
  39. 39. CONSUMO DE INFORMAÇÃO 33% Buscaram informação relacionada ao programa que assistiam. 20% Buscaram informação de um produto que viram o anúncio na TV. 13% Buscaram cupons e ofertas relacionadas ao comercial que assistiram. Atividades consecutivas no tablet enquanto assistem televisão ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN
  40. 40. CONSUMO DE INFORMAÇÃO 33% Buscaram informação relacionada ao programa que assistiam. 20% Buscaram informação de um produto que viram o anúncio na TV. 13% Buscaram cupons e ofertas relacionadas ao comercial que assistiram. Atividades consecutivas no tablet enquanto assistem televisão ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN
  41. 41. CONSUMO SIMULTÂNEO INTERNET + TELEVISÃO 70% dos consumidores simultâneos navegam motivados pela TV 80% destes consumidores que também comentam assistem TV motivados pela internet
  42. 42. TAMANHO FAZ DIFERENÇA 10’’ 9’’ 7’’ 125 pageviews 116 pageviews 90 pageviews 5’’ 79 pageviews ref: Amazon Kindle Fire is 54% of US Android tablets 2012 - comScore / Luke Wroblewski
  43. 43. TAMANHO FAZ DIFERENÇA 17 30 39 (*) NÚMERO DE MINUTOS EM MÉDIA 43* ref: The Multi Screen World 2012 - Google / Sterling Brand / Ipsos
  44. 44. “Você deve começar com a experiência do usuário e depois ir pra tecnologia. Steve Jobs
  45. 45. Estratégia e Conceito CRIAR UM APLICATIVO NÃO IRÁ RESOLVER O PROBLEMA.
  46. 46. Aplicativator CRIAR APLICATIVO OU SELECIONE PELO TIPO Geo-localização Fotos com filtros Mensagens instantâneas
  47. 47. Objetivos de Negócio Enganando Negócio Usuário Destruindo Negócio Usuário Equilibrando Negócio Usuário Sonhando Negócio Necessidades de Pessoas Usuário
  48. 48. Quais são os objetivos do negócio e como eles se conectam nas necessidades das pessoas.
  49. 49. O QUE É REALMENTE É NECESSÁRIO? Pão e Salsicha Mostarda Ketchup Purê Batata Palha Vinagrete
  50. 50. O QUE É REALMENTE É OPCIONAL? Pão e Salsicha Mostarda Ketchup Purê Batata Palha Vinagrete
  51. 51. A MENSAGEM É ACESSÍVEL?
  52. 52. NEM TODO MUNDO TEM UM... Galaxy S9 iPhone 8S
  53. 53. MOBILE Tamanho de tela Processador limitado Conectividade reduzida Sistema operacional limitado Aquilo que chamamos de mobile compreende mais que apenas celulares e smartphones, mas também tablets, jogos portáteis.
  54. 54. MOBILE Uso desnecessário de Flash Um caso clássico de tecnologia não acessível para alguns dispositivos móveis, mas que pode se repetir com outras tecnologias que não considerem dispositivos móveis.
  55. 55. MOBILE Conexão Limitada A conexão 3G no Brasil não atinge 1 Mbps (megabit por segundo) 3G
  56. 56. A MENSAGEM É COMPREENSÍVEL?
  57. 57. A MENSAGEM É RELEVANTE?
  58. 58. Calma. Estamos quase lá.
  59. 59. Design BOM DESIGN ≠ BOA EXPERIÊNCIA
  60. 60. Passos antes 4 de abrir o PSD
  61. 61. VALIDE INTERNAMENTE DESENVOLVA PROTÓTIPOS TESTE EXTERNAMENTE APRENDA COM O COMPORTAMENTO DO USUÁRIO
  62. 62. VALIDE INTERNAMENTE · Entreviste sua mãe · Entreviste seu vizinho · Não precisa gastar
  63. 63. DESENVOLVA PROTÓTIPOS Navegação Esboço Fluxograma Wireframe Interação Elementos Visuais Funcionalidades Protótipo Alta Fidelidade Simulação Processo Dinâmico
  64. 64. TESTE EXTERNAMENTE · Teste com a faxineira · Teste com o mecânico · Teste com o entregador
  65. 65. APRENDA COM O USUÁRIO · Observe e ouça · Pergunte e tome notas · Não influencie decisões
  66. 66. Torne a mensagem clara.
  67. 67. Contraste Fonte Idioma Call to action Use baixo contraste de cores para restrições
  68. 68. Contraste Fonte Idioma Call to action Use fontes legíveis
  69. 69. Contraste Fonte Idioma Call to action Use linguagem apropriada
  70. 70. Contraste Fonte Idioma Call to action Uma ação primária por tela
  71. 71. Comparação é como as pessoas tomam decisões
  72. 72. Interfaces existem para possibilitar interação.
  73. 73. Mantenha os usuários no controle
  74. 74. Promova um próximo passo natural ao usuário
  75. 75. A forma segue a função.
  76. 76. ADEQUAR A MENSAGEM?
  77. 77. PENSE MOBILE PRIMEIRO Mobile First Design
  78. 78. PENSAR RESPONSIVO Fazendo que o conteúdo seja acessível e seja entregue para vários dispositivos. 1024+ 1 1023-768 4 1 2 767-480 2 7 5 7 3 6 até-479
  79. 79. Botões Acessíveis FÁCIL DIFÍCIL A localização dos elementos deve ser levada em conta na criação de soluções onde o uso mobile seja foco da ação.
  80. 80. Movimentos Fáceis FÁCIL DIFÍCIL Interfaces que utilizam gestos para desencadear ações devem levar em conta a usabilidade para o público em dispositivos conhecidos.
  81. 81. A FORMA DE USAR 15% 49% 36% ref: How do users really hold mobile devices - Steven Hoober
  82. 82. Desenvolvimento NÃO EXISTE BOM UX SEM BOM DESENVOLVIMENTO.
  83. 83. Usuários não querem saber de tecnologia
  84. 84. Não querem saber de esperar
  85. 85. Akamai reportou 75% dos usuários com problemas de congelamento, crash ou muito tempo de carregamento de página simplesmente não compraram. Forbes: Web Performance is User Experience
  86. 86. A cada 100 milissegundos do tempo de carregamento de página reduz 1% das vendas no Amazon Kohavi and Longbotham 2007
  87. 87. Google ao aumentar de carregamento de 0.4 para 0.9 segundos reduziu a receita de publicidade em 20% Marissa Mayer - Web 2.0 Conference 2006
  88. 88. 1 Diminue o tempo de carregamento 2 Pode economizar dinheiro 3 Pode auxiliar em melhor posicionamento em motores de busca.
  89. 89. Carregue Progressivamente
  90. 90. Reduza todos os arquivos possíveis
  91. 91. Implementação e QA TUDO FUNCIONA COMO PLANEJADO?
  92. 92. TUDO É RASCUNHO. TUDO É TESTE. TUDO É BETA.
  93. 93. ITERAÇÃO Ato de repetir o processo com a intenção de se aproximar de um objetivo, meta ou resultado desejado.
  94. 94. MODELO ATUAL IDEIA •Maior chance de erro •Menor Aprendizado •Sem Continuidade DESENVOLVIMENTO LANÇAMENTO
  95. 95. NOVO MODELO •Menor chance de erro •Maior Aprendizado •Melhoria Continua IDEIA DESENVOLVIMENTO VALIDAÇÃO LANÇAMENTO ITERAÇÃO
  96. 96. NÃO EXISTE UMA SOLUÇÃO QUE SIRVA PARA TODOS
  97. 97. Monitoramento NÃO SE PODE MELHORAR O QUE NÃO SE MEDE.
  98. 98. QUE TESTE USAR?
  99. 99. QUANTOS? Se a pergunta é: Qual o preço que mais efetivo? Qual CTA recebe mais clicks? Qual layout gera mais vendas? Qual email performa melhor? TESTE A/B
  100. 100. PORQUE? Se a pergunta é: Porque não usam meu produto? Porque estão navegando nessa página? Onde as pessoas estão presas no site? Porque as pessoas não compram? TESTE DE USABILIDADE
  101. 101. Publicitários que ignoram pesquisa são tão perigosos como generais que ignoram sinais do inimigo. David Ogilvy
  102. 102. MENSURE SEUS KPI’S LIMITE AS DISTRAÇÕES USE PADRÕES APROPRIADOS FAÇA COISAS FUNCIONAIS TORNE AÇÕES REVERSÍVEIS EXPERIÊNCIA PERTENCE AO USUÁRIO SEJA CREDÍVEL E CONFIÁVEL DESENVOLVA EMPATIA ESTABELEÇA SEJA CONSISTENTE CONTEXTO FORNEÇA FEEDBACK BOM PARA O USUÁRIO E BOM PARA O NEGÓCIO MOSTRE COMO FUNCIONA

×