Ux para agencias de publicidade

408 visualizações

Publicada em

UX para agencia de publicidade

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

Ux para agencias 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 PESSOAS SISTEMAS INTERFACE DE USUÁRIO (UI)
  5. 5. UX não é só usabilidade
  6. 6. SALVAR PRINCESA PRESSIONE O BOTÃO PARA SALVAR A PRINCESA Matador de Dragões X ref: Why Usability Engineers Don’t Design Video Games - SmashingApps
  7. 7. FUNCIONAL trabalhar como o programado Foco em
 TAREFAS (produtos, características) CONFIÁVEL sempre disponível quando preciso USÁVEL pode ser usável sem dificuldade CONVENIENTE Funciona examente como você pensa AGRADÁVEL vale a pena compartilhar Foco em
 EXPERIÊNCIAS (pessoas, atividades, contexto) SIGNIFICATIVA possui significado pessoal ref: UX Hierarchy of neeeds - Stephen Anderson
  8. 8. DIGITAL ONTEM Anúncios Web
  9. 9. Anúncios Web Search Mobile Social Eventos PDV Embalagem DIGITAL HOJE
  10. 10. Garantir que a experiência seja positiva em todos os pontos de contato com a marca.
  11. 11. 1Desconhecido UX não é importante 2 Interessado UX é importante, mas recebe pequeno incentivo 3 Investido UX é muito importante e programas formais surgem 4 Praticado UX é crítico e executivos estão ativamente envolvidos 5 Comprometido UX é um dos principais princípios da estratégia organizacional 6 Embutido UX está no tecido da organização, não discutido separadamente MODELO DE MATURIDADEUX
  12. 12. DESIGNPESQUISA FRONT-END BACK-END Humano Tecnologia Diretor de Arte Desenvolvedor ? Planejamento MODELO DE MATURIDADE Fornecedor
  13. 13. DESIGNPESQUISA FRONT-END BACK-END Humano Tecnologia Arquiteto da Informação UI Designer Desenvolvedor MODELO DE MATURIDADE
  14. 14. DESIGNPESQUISA FRONT-END BACK-END Humano Tecnologia UI Designer DesenvolvedorArquiteto da Informação UX Designer MODELO DE MATURIDADE
  15. 15. CONTEÚDO USUÁRIO UX depende de... CONTEXTO
  16. 16. Contexto é ao mesmo tempo QUANTITATIVO & QUALITATIVO Tamanho da tela Conectividade Processamento Capacidade Métodos de entrada Objetivos do usuário Ambiente do usuário Atenção do usuário Capacidade do usuário
  17. 17. Como entregamos isso?
  18. 18. Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento
  19. 19. •Benchmark •Entrevistas •Pesquisa Quantitativa •Definição de KPI’s •Análise de Tarefas •Inventário de Conteúdo ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento
  20. 20. •Personas •Blueprint •Jornada de Consumidor •Ecossistema •Mapa do Site •Card Sorting •Wireframe •Protótipos Navegáveis ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento
  21. 21. •Moodboards ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento
  22. 22. •Especificações de Projeto •Recomendações de SEO ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento
  23. 23. •Controle de Qualidade ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento
  24. 24. •Teste de Usabilidade •Avaliação Heurística •Testes A/B •Análise de Métricas ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento
  25. 25. É sobre pessoas, e não dispositivos. Pesquisa e Análise
  26. 26. •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 ANTIGO CONTEXTO
  27. 27. •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 NOVO CONTEXTO
  28. 28. Mobile não é um nicho.
  29. 29. MOBILE 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 1.2bilhões de pessoas usuários conectados no mundo hoje 58% EUA JÁ POSSUI SMARTPHONES 2015 MOBILE ULTRAPASSA DESKTOP 15% DO TRÁFEGO GLOBAL É MOBILE 48% JÁ USOU PARA COMPRAR
  30. 30. 20% Nenhum tamanho de tela possui mais de de marketshare
  31. 31. Não ser otimizado para mobile é como fechar sua loja um dia por semana.
  32. 32. 3GNO BRASIL Vivo 724 Claro 421 Oi Brasil Telecom 429,6 Oi Telemar 368,7 Tim 363,6 Números em kilobits por segundo. Operadoras 3G no Brasil
  33. 33. Um iPad com 3G da TIM leva quase 2 minutos a página inicial do NãoSalvo. #significa 3GNO BRASIL
  34. 34. QR CODE
  35. 35. NÃO VEM INSTALADO NA MAIORIA DOS SMARTPHONES EXIGE CONEXÃO COM A INTERNET QR CODE
  36. 36. DA AUDIENCIA TOTAL NOS ESTADOS UNIDOS JÁ USOU QR CODE6.2% 53% homens 18-34 49% revistas ou jornais 35% embalagem de produto 58% escanearam em casa ref: 14 Million Americans Scanned QR Codes in june 2011 - comScore
  37. 37. 49% ref: Q3 Tablet Shipments Up 49.5% Vs. Yr Ago; Up 6.7% Vs.Q2 - FORBES / IDC Tablets cresceram 49.5% em 2012 em relação ao ano anterior. Cada vez mais mobilidade tablets
  38. 38. ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN Atividades consecutivas no tablet enquanto assistem televisão Buscaram informação de um produto que viram o anúncio na TV. 20% 33% Buscaram informação relacionada ao programa que assistiam. Buscaram cupons e ofertas relacionadas ao comercial que assistiram. 13% CONSUMO DE INFORMAÇÃO
  39. 39. Atividades consecutivas no tablet enquanto assistem televisão Buscaram informação de um produto que viram o anúncio na TV. 20% 33% Buscaram informação relacionada ao programa que assistiam. Buscaram cupons e ofertas relacionadas ao comercial que assistiram. 13% CONSUMO DE INFORMAÇÃO ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN
  40. 40. Buscaram informação de um produto que viram o anúncio na TV. 20% 33% Buscaram informação relacionada ao programa que assistiam. Buscaram cupons e ofertas relacionadas ao comercial que assistiram. 13% CONSUMO DE INFORMAÇÃO ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN Atividades consecutivas no tablet enquanto assistem televisão
  41. 41. dos consumidores simultâneos navegam motivados pela TV destes consumidores que também comentam assistem TV motivados pela internet 70% 80% CONSUMO SIMULTÂNEO INTERNET + TELEVISÃO
  42. 42. 10’’ 125 pageviews 9’’ 7’’ 5’’ 116 pageviews 90 pageviews 79 pageviews ref: Amazon Kindle Fire is 54% of US Android tablets 2012 - comScore / Luke Wroblewski TAMANHO FAZ DIFERENÇA
  43. 43. 17 30 39 43* ref: The Multi Screen World 2012 - Google / Sterling Brand / Ipsos(*) NÚMERO DE MINUTOS EM MÉDIA TAMANHO FAZ DIFERENÇA
  44. 44. “Você deve começar com a experiência do usuário e depois ir pra tecnologia. Steve Jobs
  45. 45. CRIAR UM APLICATIVO NÃO IRÁ RESOLVER O PROBLEMA. Estratégia e Conceito
  46. 46. Aplicativator CRIAR APLICATIVO OU SELECIONE PELO TIPO Geo-localização Fotos com filtros Mensagens instantâneas
  47. 47. ObjetivosdeNegócio Necessidades de Pessoas Enganando Destruindo Sonhando Equilibrando Negócio Usuário Negócio Usuário Negócio Usuário Negócio 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. Pão e Salsicha Mostarda Ketchup Purê Batata Palha Vinagrete O QUE É REALMENTE É OPCIONAL?
  51. 51. A MENSAGEM É ACESSÍVEL?
  52. 52. Galaxy S9 iPhone 8S NEM TODO MUNDO TEM UM...
  53. 53. Sistema operacional limitado Tamanho de tela Processador limitado Conectividade reduzida Aquilo que chamamos de mobile compreende mais que apenas celulares e smartphones, mas também tablets, jogos portáteis. MOBILE
  54. 54. 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. Uso desnecessário de Flash MOBILE
  55. 55. Conexão Limitada 3GA conexão 3G no Brasil não atinge 1 Mbps (megabit por segundo) MOBILE
  56. 56. A MENSAGEM É COMPREENSÍVEL?
  57. 57. A MENSAGEM É RELEVANTE?
  58. 58. Calma. Estamos quase lá.
  59. 59. BOM DESIGN BOA EXPERIÊNCIA ≠ Design
  60. 60. Passos antes de abrir o PSD 4
  61. 61. DESENVOLVA PROTÓTIPOS VALIDE INTERNAMENTE APRENDA COM O COMPORTAMENTO DO USUÁRIO TESTE EXTERNAMENTE
  62. 62. VALIDE INTERNAMENTE · Entreviste sua mãe · Entreviste seu vizinho · Não precisa gastar
  63. 63. Wireframe Protótipo Simulação Esboço Fluxograma Navegação Elementos Visuais Interação Funcionalidades Alta Fidelidade Processo Dinâmico DESENVOLVA PROTÓTIPOS
  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. 6 PENSAR RESPONSIVO Fazendo que o conteúdo seja acessível e seja entregue para vários dispositivos. 1 2 3 1 2 4 5 1024+ 7 1023-768 767-480 até-479 7
  79. 79. Botões Acessíveis 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. FÁCIL DIFÍCIL
  80. 80. Movimentos Fáceis Interfaces que utilizam gestos para desencadear ações devem levar em conta a usabilidade para o público em dispositivos conhecidos. FÁCIL DIFÍCIL
  81. 81. ref: How do users really hold mobile devices - Steven Hoober 49% 36% 15% A FORMA DE USAR
  82. 82. NÃO EXISTE BOM UX SEM BOM DESENVOLVIMENTO. Desenvolvimento
  83. 83. Usuários não querem saber de tecnologia
  84. 84. Não querem saber de esperar
  85. 85. Forbes: Web Performance is User Experience Akamai reportou 75% dos usuários com problemas de congelamento, crash ou muito tempo de carregamento de página simplesmente não compraram.
  86. 86. do tempo de carregamento de página reduz A cada 100 milissegundos das vendas no Amazon 1% Kohavi and Longbotham 2007
  87. 87. 0.4 para 0.9 segundos 20% Marissa Mayer - Web 2.0 Conference 2006 reduziu a receita de publicidade em Google ao aumentar de carregamento de
  88. 88. 2 Diminue o tempo de carregamento1 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. TUDO FUNCIONA COMO PLANEJADO? Implementação e QA
  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 •Maior chance de erro •Menor Aprendizado •Sem Continuidade IDEIA LANÇAMENTODESENVOLVIMENTO
  95. 95. •Menor chance de erro •Maior Aprendizado •Melhoria Continua IDEIA LANÇAMENTO VALIDAÇÃO ITERAÇÃO NOVO MODELO DESENVOLVIMENTO
  96. 96. UMA SOLUÇÃO QUE SIRVA PARA TODOS NÃO EXISTE
  97. 97. NÃO SE PODE MELHORAR O QUE NÃO SE MEDE. Monitoramento
  98. 98. QUE TESTE USAR?
  99. 99. QUANTOS? Se a pergunta é: Qual o preço que mais efetivo? Qual CTA recebe mais clicks? Qual email performa melhor? Qual layout gera mais vendas? 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 EXPERIÊNCIAPERTENCE AO USUÁRIO BOM PARA O USUÁRIO E BOM PARA O NEGÓCIO LIMITE AS DISTRAÇÕES FAÇA COISAS FUNCIONAIS TORNE AÇÕES REVERSÍVEIS SEJA CREDÍVEL E CONFIÁVEL DESENVOLVA EMPATIA ESTABELEÇA CONTEXTO FORNEÇA FEEDBACK USE PADRÕES APROPRIADOS SEJA CONSISTENTE MOSTRE COMO FUNCIONA

×