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.

Ux para alta performance

477 views

Published on

Webinar para evento Empreendedorismo Brasil 2016: http://www.brasilempreendedorismo.com.br/

Video: http://tv.acelerastartups.com/exibir/ux-para-alta-performance/410

Desconto de 10% no livro Marketing Digital para Alta Performance e em qualquer curso da ComSchool: http://socia.is/lis

Published in: Business
  • Be the first to comment

Ux para alta performance

  1. 1. UX - Experiência do Usuário com foco em Alta Perfor-ance Por Lisandra Maioli
  2. 2. Quem sou eu? https://ie.linkedin.com/in/lisandramaioli UXpressocafe e ComSchool Talenthouse, Terra, iG, Lance!, Senac SP e RJ, CDN, e-bit UCLA, UC Berkeley, PUC SP, Senac SP, UMESP https://ie.linkedin.com/in/lisandramaioli
  3. 3. UX - para Alta Performance http://socia.is/lis 10% de desconto Marketing Digital de Alta Performance Editora ComSchool (2016)
  4. 4. Botão de U$300MM Por Jared Spool • Formulário simples: dois campos ("email" e "senha"), dois botões ("registrar-se" e "logar-se ") e um link ( "esqueci a senha”) • Abandono de cerca de 75% na página do formulário Desafio Pesquisa O problema não estava no layout do formulário nem no próprio formulário em si, mas sim no que o cadastro representava para os consumidores
  5. 5. Botão de U$300MM A loja aumentou o número de vendas em 45%, lucrando U$300 milhões apenas mudando um botão e mensagens de um formulário! Por Jared Spool Registre-se Continue "Você não precisa criar uma conta para fazer compras em nosso site. Simplesmente clique em 'Continuar' para avançar para o checkout. Para fazer suas compras futuras ainda mais rápido, você pode criar uma conta durante o checkout".
  6. 6. UX - para Alta Performance • O que é UX? • UX para conversão • Dicas práticas
  7. 7. O que é UX? User EXperience ou, simplesmente, Experiência do Usuário Supermercado
 Loja Online
 burocracia, fila grande
  8. 8. O que é UX?
  9. 9. UX para Conversão Jennifer Winter "A conversão não é sobre como fazer alguém fazer algo, mas sim sobre oferecer um ambiente em que esse 'fazer algo' seja irresistível" Exemplo do cavalo: Não adianta, diz ela, conseguir levar o cavalo até a água se o mesmo não beber da água.
  10. 10. E como const56ir este ambiente ir5esistível para que "o cavalo beba da ág6a"? UX para Conversão
  11. 11. UX para Conversão Peter Morville Diag5ama e Peter MorCille
  12. 12. UX para Conversão • O quão fácil é para o cavalo encontrar a água? • Será que ele precisa, ou mesmo quer água? • Ele pode fisicamente chegar até à água? Exemplo do cavalo: Pensar nesse diagrama de Morville, lembra Jennifer, nos fará refletir sobre perguntas básicas que vão influenciar o desenvolvimento do nosso produto:
  13. 13. UX para Conversão Entenda seu Usuário Desenhe uma ExGeriência Incrível Não Relaxe!
  14. 14. UX para Conversão Entenda seu Usuário Desenhe uma ExGeriência Incrível Não Relaxe! • Analytics • Pesquisas • Entrevistas • Testes • Personas A ideia aqui é usar diferentes ferramentas e metodologias para entender ao máximo o usuário
  15. 15. UX para Conversão Entenda seu Usuário - AnalyPics Google Analytics (www.google.com/analytics) • links mais clicados, páginas mais acessadas, tempo de permanência no site, pontos de conversão e de saída/abandono
  16. 16. UX para Conversão Entenda seu Usuário - AnalyPics Hotjar (www.hotjar.com) • vídeos das ações (cliques, rolagem da página), heatmaps (mapas de calor), funis de conversão, criação de pesquisas, enquetes etc,
  17. 17. UX para Conversão Entenda seu Usuário - AnalyPics Mixpanel (www.mixpanel.com) • monitoramento de eventos no site ou aplicativo, ou seja, ações dos usuários que não geram visualização de página.
  18. 18. UX para Conversão Entenda seu Usuário - AnalyPics Formisimo (www.formisimo.com) • monitoramento de abandono de formulários de checkout, formulários de inscrição e de consulta; taxa de abandono
  19. 19. UX para Conversão Entenda seu Usuário - AnalyPics Lucky Orange (www.luckyorange.com) • grava a navegação de usuários, para analisar conversão e comportamento do usuário
  20. 20. • SessionCam (www.sessioncam.com) • CrazyEgg (www.crazyegg.com) • KISSmetrics (www.kissmetrics.com) UX para Conversão Entenda seu Usuário - AnalyPics Vale conversar com um consultor ou com seu profissional de Analytics da equipe. Outras ferramentas
  21. 21. • Ouça seu usuário ou potencial cliente • Entender mais profundamente, além da navegação • Online e/ou Presencial • Surveys: curto, perguntas rápidas e objetivas • User Interview: recrute corretamente, entenda também o contexto UX para Conversão Entenda seu Usuário - Pesquisas e Ent5evistas Pesquisas e Entrevistas
  22. 22. • Google Form (google.com/forms/about) • Survey Monkey (surveymonkey.com) • Typeform (www.typeform.com/) • Polldaddy (polldaddy.com) UX para Conversão Entenda seu Usuário - Pesquisas Online Ferramentas para Surveys Online
  23. 23. UX para Conversão Entenda seu Usuário - Ent5evista • User Interview • Etnografia • Contextual Inquiry • Diary Study Metodologias User Interview Contextual Inquiry Etnografia quando o pesquisador acompanha o dia-a-dia do usuário; Contextual Enquiry, quando o pesquisador vai até um local onde pode estar seu público-alvo como praia, shopping, livraria, restaurante (tenho o cuidado de pedir autorização no caso de ambiente comercial); Diary Study, quando o usuário se compromete a desenvolver um diário que contemple a utilização do site ou do aplicativo.
  24. 24. Ferramentas UX para Conversão Entenda seu Usuário - Ent5evista • Skype, Google Hangout, Messenger, Silverback, Morea • Gravador, Câmera, Call recorder, Quicktime • Bloco de anotações • Defina o objetivo • Defina o público (screener) • Tenha um roteiro (guia) • Considere tempo de warm-up • Grave as entrevistas e Faça anotações • Tenha consentimento do entrevistado por escrito e gravado • Compense o entrevistado com um valor em dinheiro, brinde ou gift card Pro Tips
  25. 25. Estrutura UX para Conversão Entenda seu Usuário - Teste de Usabilidade • Warm-up / Entrevista • Primeiras impressões / Apresentação do site pelo usuário • Análise de Tarefas (roteiro) • Combine com User Interview • 45-60 minutos • Lembre o usuário que não é ele que está sendo testado, mas sim o site ou aplicativo • Não interrompa as falas do usuário e dê espaço para o silêncio • Use outras metodologias como CardSorting e TreeTesting Pro Tips Teste de Usabilidade CardSorting
  26. 26. UX para Conversão Entenda seu Usuário - Teste de Usabilidade Jakob Nielsen
  27. 27. UX para Conversão Entenda seu Usuário - Personas Ferramentas • xtension.com • MakeMyPersona.com (do Hubspot) • userforge.com • Arquétipo do(s) usuário(s) • Informações de diferentes fontes (Analytics, Pesquisas, Entrevistas etc) - Nome, foto, idade - Onde vive, como é sua família - Estuda? Trabalha? - Pain Points / Desafios - Motivações / Soluções Desenvolva Personas
  28. 28. UX para Conversão Entenda seu Usuário - Personas
  29. 29. UX para Conversão Entenda seu Usuário - Personas
  30. 30. UX para Conversão Entenda seu Usuário - Personas https://vimeo.com/34961342https://vimeo.com/34961342
  31. 31. UX para Conversão Entenda seu Usuário Desenhe uma ExGeriência Incrível Não Relaxe! • Sites Responsivos • Tempo de Carregamento • Tendências de Design • Texto/Conteúdo • Tipografia • Iconografia
  32. 32. UX para Conversão Desenhe uma ExGeriência Incrível - Site Responsivo e Acessível • Penetração dos devices móveis • Contexto da Utilização • Tipos de atividade em cada device • Acessibilidade Considere • Google Resizer (design.google.com/resizer) • DesignModo.com (designmodo.com/responsive-test) • Semalt (semalt.design) • SmartScreenresolution (whatismyscreenresolution.net/multi-screen- test) • Web Acessibility Checker (achecker.ca) Ferramentas
  33. 33. UX para Conversão Desenhe uma ExGeriência Incrível - Site Responsivo
  34. 34. UX para Conversão Desenhe uma ExGeriência Incrível - Tempo de car5egamento • Tolerância de 2 segundos, abandono de 40% depois dos 3 segundos (Universidade de Massachusetts) • Cada 100 milissegundos de espera representam um declínio de 1% nas vendas da Amazon • Google perdeu 20% de lucratividade e tráfego de usuários por causa de um aumento de meio segundo no tempo de carregamento de suas páginas de resultados • 75% dos compradores on-line que experimentam um problema, não compra (Akamai)
  35. 35. UX para Conversão Desenhe uma ExGeriência Incrível - Tempo de car5egamento Pingdom (tools.pingdom.com/fpt/) • para conferir o tempo de carregamento de cada página/elemento
  36. 36. UX para Conversão Desenhe uma ExGeriência Incrível - Tempo de car5egamento PageSpeed Insights (developers.google.com/speed/pagespeed/insights) • dicas de como melhorar as páginas e verificar a otimização do site para dispositivos móveis
  37. 37. UX para Conversão Desenhe uma ExGeriência Incrível - Tempo na Navegação • Facilite os caminhos de navegação para o usuário completar as tarefas • Priorização e hierarquização do conteúdo • Navegação clara, Atalhos para voltar, Breadcrumb • Automatização de campos de formulários (como CEP) e autocomplete • Acesso fácil ao Chat de Ajuda e ao Suporte BreadCrumbs
  38. 38. UX para Conversão Desenhe uma ExGeriência Incrível - Tendências de DesigT • Palheta de cores adequada (e contrates) • Consistência e Estilo da Arte • Considere usuarios com daltonismo • Lembre-se: cores comunicam! Defina com o Webdesigner Daltonismo Contraste
  39. 39. UX para Conversão Desenhe uma ExGeriência Incrível - Tipog5afia • Fontes diferentes comunicam mensagens diferentes • Padrão e consistência • Hierarquização (formatação, tamanho, tipo de fontes) • Legibilidade (contraste, número de caracteres por linha, entrelinha, alinhamento) Defina com o Webdesigner Contraste Devices
  40. 40. UX para Conversão Desenhe uma ExGeriência Incrível - Tipog5afia
  41. 41. UX para Conversão Desenhe uma ExGeriência Incrível - Iconog5afia • Rápida interpretação • Facilitar a Navegação • Rápido aprendizado • Consistente e padronizada Ícones são importantes The Noun Project Ícones
  42. 42. UX para Conversão Desenhe uma ExGeriência Incrível - Qualidade de Conteúdo • Imagens com qualidade • Webwriter: textos bem escritos (claros, objetivos e revisados) • Organização, hierarquização • Verbos do CTA (call-to-action) • Mensagens de feedback Atenção ao conteúdo: CTA buttons Feedback messages
  43. 43. UX para Conversão Entenda seu Usuário Desenhe uma ExGeriência Incrível Não Relaxe! • Teste A/B • Atualização
  44. 44. UX para Conversão Não Relaxe! - Testes A/B A/b ou Split Test Optimizely Teste A/B • Visual Website Optimizer (vwo.com) • Optimizely (Optimizely.com) • Teste duas (ou mais) versões • A/B para elementos - Títulos - Imagens - Vídeos - Texto - Formulários - CTA - Cores Ferramentas
  45. 45. UX para Conversão Não Relaxe! - Est6de e Infor-e-se! Livros http://bit.ly/UXGoodreads
  46. 46. UX para Conversão Entenda seu Usuário Desenhe uma ExGeriência Incrível Não Relaxe!
  47. 47. UX - para Alta Performance http://socia.is/lis 10% de desconto Marketing Digital de Alta Performance Editora ComSchool (2016) lisandramaioli@gmail.com
  48. 48. UX - Experiência do Usuário com foco em Alta Perfor-ance Por Lisandra Maioli

×