Ux para alta performance

157 visualizações

Publicada em

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

Publicada em: Negócios
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

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

×