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


• 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



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


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,


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.


Formisimo (www.formisimo.com)• monitoramento de abandono de formulários de checkout,

formulários de inscrição e de consulta; taxa de abandono


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)


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

http://userforge.com


https://vimeo.com/34961342 https://vimeo.com/34961342

UX para Conversão



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)


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


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



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



Não Relaxe!


http://socia.is/lis10% de desconto

Marketing Digital de Alta Performance Editora ComSchool (2016)

[email protected]

mailto:[email protected]?subject=

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

Por Lisandra Maioli

ux para alta performance

Business