...

UX para agências de publicidade

by richard-jesus

on

Report

Category:

Marketing

Download: 1

Comment: 0

12,213

views

Comments

Description

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

Transcript

  • 1. UX para agências de publicidade Richard Jesus @richardrx
  • 2. Antes de qualquer coisa...
  • 3. UI não é UX
  • 4. INTERFACE DE USUÁRIO (UI) PESSOAS INTERFACE SISTEMAS
  • 5. UX não é só usabilidade
  • 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. 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. DIGITAL ONTEM Anúncios Web
  • 9. DIGITAL HOJE Anúncios Web Search Mobile Social Eventos PDV Embalagem
  • 10. Garantir que a experiência seja positiva em todos os pontos de contato com a marca.
  • 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. MODELO DE MATURIDADE Humano Tecnologia DESIGN PESQUISA FRONT-END BACK-END ? Planejamento Fornecedor Diretor de Arte Desenvolvedor
  • 13. MODELO DE MATURIDADE Humano Tecnologia PESQUISA DESIGN FRONT-END Arquiteto da Informação UI Designer BACK-END Desenvolvedor
  • 14. MODELO DE MATURIDADE Humano Tecnologia PESQUISA DESIGN FRONT-END Arquiteto da Informação UI Designer UX Designer BACK-END Desenvolvedor
  • 15. UX depende de... CONTEXTO CONTEÚDO USUÁRIO
  • 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. Como entregamos isso?
  • 18. Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento
  • 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. 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. ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento •Moodboards
  • 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. ENTREGÁVEIS Pesquisa e Análise Estratégia e Conceito Design Desenvolvimento Implementação Monitoramento •Controle de Qualidade
  • 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. Pesquisa e Análise É sobre pessoas, e não dispositivos.
  • 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. 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. Mobile não é um nicho.
  • 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. Nenhum tamanho de tela possui mais de 20% de marketshare
  • 31. Não ser otimizado para mobile é como fechar sua loja um dia por semana.
  • 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. #significa Um iPad com 3G da TIM leva quase 2 minutos a página inicial do NãoSalvo. 3G NO BRASIL
  • 34. QR CODE
  • 35. NÃO VEM INSTALADO NA MAIORIA DOS SMARTPHONES QR CODE EXIGE CONEXÃO COM A INTERNET
  • 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. 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. 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. 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. 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. 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. 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. 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. “Você deve começar com a experiência do usuário e depois ir pra tecnologia. Steve Jobs
  • 45. Estratégia e Conceito CRIAR UM APLICATIVO NÃO IRÁ RESOLVER O PROBLEMA.
  • 46. Aplicativator CRIAR APLICATIVO OU SELECIONE PELO TIPO Geo-localização Fotos com filtros Mensagens instantâneas
  • 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. Quais são os objetivos do negócio e como eles se conectam nas necessidades das pessoas.
  • 49. O QUE É REALMENTE É NECESSÁRIO? Pão e Salsicha Mostarda Ketchup Purê Batata Palha Vinagrete
  • 50. O QUE É REALMENTE É OPCIONAL? Pão e Salsicha Mostarda Ketchup Purê Batata Palha Vinagrete
  • 51. A MENSAGEM É ACESSÍVEL?
  • 52. NEM TODO MUNDO TEM UM... Galaxy S9 iPhone 8S
  • 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. 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. MOBILE Conexão Limitada A conexão 3G no Brasil não atinge 1 Mbps (megabit por segundo) 3G
  • 56. A MENSAGEM É COMPREENSÍVEL?
  • 57. A MENSAGEM É RELEVANTE?
  • 58. Calma. Estamos quase lá.
  • 59. Design BOM DESIGN ≠ BOA EXPERIÊNCIA
  • 60. Passos antes 4 de abrir o PSD
  • 61. VALIDE INTERNAMENTE DESENVOLVA PROTÓTIPOS TESTE EXTERNAMENTE APRENDA COM O COMPORTAMENTO DO USUÁRIO
  • 62. VALIDE INTERNAMENTE · Entreviste sua mãe · Entreviste seu vizinho · Não precisa gastar
  • 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. TESTE EXTERNAMENTE · Teste com a faxineira · Teste com o mecânico · Teste com o entregador
  • 65. APRENDA COM O USUÁRIO · Observe e ouça · Pergunte e tome notas · Não influencie decisões
  • 66. Torne a mensagem clara.
  • 67. Contraste Fonte Idioma Call to action Use baixo contraste de cores para restrições
  • 68. Contraste Fonte Idioma Call to action Use fontes legíveis
  • 69. Contraste Fonte Idioma Call to action Use linguagem apropriada
  • 70. Contraste Fonte Idioma Call to action Uma ação primária por tela
  • 71. Comparação é como as pessoas tomam decisões
  • 72. Interfaces existem para possibilitar interação.
  • 73. Mantenha os usuários no controle
  • 74. Promova um próximo passo natural ao usuário
  • 75. A forma segue a função.
  • 76. ADEQUAR A MENSAGEM?
  • 77. PENSE MOBILE PRIMEIRO Mobile First Design
  • 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. 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. 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. A FORMA DE USAR 15% 49% 36% ref: How do users really hold mobile devices - Steven Hoober
  • 82. Desenvolvimento NÃO EXISTE BOM UX SEM BOM DESENVOLVIMENTO.
  • 83. Usuários não querem saber de tecnologia
  • 84. Não querem saber de esperar
  • 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. A cada 100 milissegundos do tempo de carregamento de página reduz 1% das vendas no Amazon Kohavi and Longbotham 2007
  • 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. 1 Diminue o tempo de carregamento 2 Pode economizar dinheiro 3 Pode auxiliar em melhor posicionamento em motores de busca.
  • 89. Carregue Progressivamente
  • 90. Reduza todos os arquivos possíveis
  • 91. Implementação e QA TUDO FUNCIONA COMO PLANEJADO?
  • 92. TUDO É RASCUNHO. TUDO É TESTE. TUDO É BETA.
  • 93. ITERAÇÃO Ato de repetir o processo com a intenção de se aproximar de um objetivo, meta ou resultado desejado.
  • 94. MODELO ATUAL IDEIA •Maior chance de erro •Menor Aprendizado •Sem Continuidade DESENVOLVIMENTO LANÇAMENTO
  • 95. NOVO MODELO •Menor chance de erro •Maior Aprendizado •Melhoria Continua IDEIA DESENVOLVIMENTO VALIDAÇÃO LANÇAMENTO ITERAÇÃO
  • 96. NÃO EXISTE UMA SOLUÇÃO QUE SIRVA PARA TODOS
  • 97. Monitoramento NÃO SE PODE MELHORAR O QUE NÃO SE MEDE.
  • 98. QUE TESTE USAR?
  • 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. 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. Publicitários que ignoram pesquisa são tão perigosos como generais que ignoram sinais do inimigo. David Ogilvy
  • 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
Fly UP