Ux para alta performance

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/lis
10% de desconto
Marketing Digital de Alta
Performance
Editora ComSchool
(2016)

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
Desaﬁo
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

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".

• O que é UX?
• UX para conversão
• Dicas práticas

O que é UX?
User EXperience
ou, simplesmente, Experiência do Usuário
Supermercado 
Loja Online 
burocracia, ﬁla grande

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
Desenhe uma
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ã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

UX para Conversão
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ão
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ão
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ão
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ão
Vale conversar com um consultor ou
com seu proﬁssional 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ão
Entenda 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ão
Entenda seu Usuário - Pesquisas Online
Ferramentas para Surveys Online

UX para Conversão
Entenda seu Usuário - Ent5evista
• User Interview
• Etnograﬁa
• Contextual Inquiry
• Diary Study
Metodologias
User Interview
Contextual Inquiry
Etnograﬁa

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.

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
• Deﬁna o objetivo
• Deﬁna 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ã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

UX para Conversão
Entenda seu Usuário - Teste de Usabilidade
Jakob Nielsen

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 / Desaﬁos
- Motivações / Soluções
Desenvolva Personas

UX para Conversão

UX para Conversão
https://vimeo.com/34961342https://vimeo.com/34961342

UX para Conversão
Desenhe uma
Não Relaxe!
• Sites Responsivos
• Tempo de Carregamento
• Tendências de Design
• Texto/Conteúdo
• Tipograﬁa
• Iconograﬁa

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

UX para Conversão
Desenhe uma ExGeriência Incrível - Site Responsivo

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)

UX para Conversão
Pingdom (tools.pingdom.com/fpt/)
• para conferir o tempo de carregamento de cada página/elemento

UX para Conversão
PageSpeed Insights (developers.google.com/speed/pagespeed/insights)
• dicas de como melhorar as páginas e veriﬁcar a otimização do site
para dispositivos móveis

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

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!
Deﬁna com o Webdesigner
Daltonismo
Contraste

UX para Conversão
Desenhe uma ExGeriência Incrível - Tipog5aﬁa
• 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)
Deﬁna com o Webdesigner Contraste
Devices

UX para Conversão
Desenhe uma ExGeriência Incrível - Tipog5aﬁa

UX para Conversão
Desenhe uma ExGeriência Incrível - Iconog5aﬁa
• Rápida interpretação
• Facilitar a Navegação
• Rápido aprendizado
• Consistente e padronizada
Ícones são importantes
The Noun Project
Ícones

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

UX para Conversão
Desenhe uma
Não Relaxe!
• Teste A/B
• Atualização

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

UX para Conversão
Não Relaxe! - Est6de e Infor-e-se!
Livros
http://bit.ly/UXGoodreads

http://socia.is/lis
10% de desconto
Marketing Digital de
Alta Performance
Editora ComSchool
(2016)
lisandramaioli@gmail.com

Ux para alta performance

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Lisandra Maioli

Mehr von Lisandra Maioli (20)

Ux para alta performance