View
366
Download
0
Embed Size (px)
Citation preview
UX - Experiência do Usuário com foco em Alta Perfor-ance
Por Lisandra Maioli
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
UX - para Alta Performance
http://socia.is/lis10% de desconto
Marketing Digital de Alta Performance Editora ComSchool (2016)
Botão de U$300MMPor 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
PesquisaO 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
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".
UX - para Alta Performance
• O que é UX?
• UX para conversão
• Dicas práticas
O que é UX?
User EXperience ou, simplesmente, Experiência do Usuário
SupermercadoLoja Onlineburocracia, fila grande
O que é UX?
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.
E como const56ir este ambiente ir5esistível para que
"o cavalo beba da ág6a"?
UX para Conversão
UX para Conversão
Peter Morville
Diag5ama e Peter MorCille
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:
UX para Conversão
Entenda seu Usuário
Desenhe uma ExGeriência Incrível
Não Relaxe!
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
UX para ConversãoEntenda 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
UX para ConversãoEntenda 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,
UX para ConversãoEntenda 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.
UX para ConversãoEntenda 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
UX para ConversãoEntenda 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
• SessionCam (www.sessioncam.com)
• CrazyEgg (www.crazyegg.com)
• KISSmetrics (www.kissmetrics.com)
UX para ConversãoEntenda seu Usuário - AnalyPics
Vale conversar com um consultor ou com seu profissional de Analytics da equipe.
Outras ferramentas
• 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ãoEntenda seu Usuário - Pesquisas e Ent5evistas
Pesquisas e Entrevistas
• Google Form (google.com/forms/about)
• Survey Monkey (surveymonkey.com)
• Typeform (www.typeform.com/)
• Polldaddy (polldaddy.com)
UX para ConversãoEntenda seu Usuário - Pesquisas Online
Ferramentas para Surveys Online
UX para ConversãoEntenda seu Usuário - Ent5evista
• User Interview • Etnografia • Contextual Inquiry • Diary Study
Metodologias
User Interview
Contextual Inquiry
Etnografiaquando 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.
Ferramentas
UX para ConversãoEntenda 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
Estrutura
UX para ConversãoEntenda 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 TipsTeste de Usabilidade
CardSorting
UX para ConversãoEntenda seu Usuário - Teste de Usabilidade
Jakob Nielsen
UX para ConversãoEntenda 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
UX para ConversãoEntenda seu Usuário - Personas
UX para ConversãoEntenda seu Usuário - Personas
UX para ConversãoEntenda seu Usuário - Personas
https://vimeo.com/34961342 https://vimeo.com/34961342
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
UX para ConversãoDesenhe 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
UX para ConversãoDesenhe uma ExGeriência Incrível - Site Responsivo
UX para ConversãoDesenhe 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)
UX para ConversãoDesenhe uma ExGeriência Incrível - Tempo de car5egamento
Pingdom (tools.pingdom.com/fpt/)• para conferir o tempo de carregamento de cada página/elemento
UX para ConversãoDesenhe 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
UX para ConversãoDesenhe 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
UX para ConversãoDesenhe 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
UX para ConversãoDesenhe 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
UX para ConversãoDesenhe uma ExGeriência Incrível - Tipog5afia
UX para ConversãoDesenhe uma ExGeriência Incrível - Iconog5afia
• Rápida interpretação • Facilitar a Navegação • Rápido aprendizado • Consistente e padronizada
Ícones são importantesThe Noun Project
Ícones
UX para ConversãoDesenhe 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
UX para Conversão
Entenda seu Usuário
Desenhe uma ExGeriência Incrível
Não Relaxe!• Teste A/B • Atualização
UX para ConversãoNã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
UX para ConversãoNão Relaxe! - Est6de e Infor-e-se!
Livros
http://bit.ly/UXGoodreads
UX para Conversão
Entenda seu Usuário
Desenhe uma ExGeriência Incrível
Não Relaxe!
UX - para Alta Performance
http://socia.is/lis10% de desconto
Marketing Digital de Alta Performance Editora ComSchool (2016)
UX - Experiência do Usuário com foco em Alta Perfor-ance
Por Lisandra Maioli