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)

lisandramaioli@gmail.com

UX - Experiência do Usuário com foco em Alta Perfor-ance

Por Lisandra Maioli