Post on 04-Jul-2015
description
ROI no front-end
vamos pensar em lucro?
Guilherme Serrano
Bacharel em Desenho Industrial (ULBRA)
Pós graduado em Gestão Empreendedora (SENAC)
Empreendedor
Programador
EXPERIÊNCIAS
ROI no front-end
LUCRO E ROI
também é responsabilidade
do time de desenvolvimento?
ROI
UXa experiência do usuário
Nós não temos um time de UX. Se o
problema com o seu serviço é que os
servidores estão lentos e o time de UX
não consegue atuar nisso, então eles
não estão no controle da experiência do
usuário e não deveriam ser chamados de
time de UX.
"
What’s the design process at Government Digital Service?
E o front-end?
1. PERFORMANCE
Cada 100ms de latência custa
para a Amazon 1% em vendas.
"
Greg Linden - Make Data Useful
Para o Google, 500ms a mais
para exibir o resultado de busca
significa uma queda de 20% de
tráfego.
"
Greg Linden - Make Data Useful
100 bilhões de buscas / mês (2014)
20% menos de trafego
20% menos de ads exibidas
- tempo de resposta
=
+ ROI
Users really respond to speed."
Marissa Mayer - Google VP
Latência importa!
Onde otimizar?
Entre 80% e 90% do tempo de
resposta é gasto no front-end
"
The performance gold rule, Steve Souders
The performance gold rule, Steve Souders
Mas "front-end"
não é apenas código
Renderizar 10 resultados: 0,4s
Renderizar 30 resultados: 0,9s
Marissa Mayer - Google VP
Renderizar 10 resultados: 0,4s
Renderizar 30 resultados: 0,9s
Alterar o número de respostas não é uma
otimização "de código"
Qual o time entende
de repaint / reflow?
Quem sabe mensurar
o tempo de renderização?
EFEITO
COLATERALredução do consumo de tráfego
UOL
42,4 milhões usuários/mês
991,4 bilhão pageviews/mês
Mídia KIT UOL
OTIMIZAÇÃO DE ~20Kb848Gb de transferência economizados
FERRAMENTASpara performance
- PageSpeed
- Browser Diet
- JS Perf
- GruntJS
- Minimizar redraw e reflow
- Otimização de imagens*
- Smush it
- ImageOptim
- Cache do navegador*
- Proponha e teste melhorias*
*Nem sempre no controle do front-end
A raiz de todo o mal!A raiz de todo o mal!
2. PRODUTIVIDADE
+ produtividade
=
+ tempo para estudar, café, ócio
criativo…
=
+ produtividade
50% do tempo de um programador
é gasto com refação
"
The ROI of User Experience, Susan Weinschenk
O custo de arrumar um erro antes do
desenvolvimento é 100 vezes menor
do que arrumar depois de
desenvolvido
"
The ROI of User Experience, Susan Weinschenk
ESPECIFICAÇÕESde forma clara
COMUNICAÇÃOcom todo o time
REUSOqualidade do código
modularização
FERRAMENTAS
E
FRAMEWORKS
Faça da melhor
maneira possível
METODOLOGIASGTD, inbox zero, scrum,
mandinga, meditação, pomodoro...
Teste o que funciona com você e seu time
Pense no framework como os foguetes de
lançamento de um ônibus espacial, quando o
objetivo for alcançado, não passarão de
sucata, um belo peso extra.
"
Scrum: seu time já deveria estar em outra, @jcemer
3. TESTE A/B
Porque as coisas são
como as coisas são?
Data-drivendesign / development
O USUÁRIO DECIDE
HiPPOHigh paid person opinion
ACHISMO e as vezes o ego
Tomam a decisão
1 - A HIPÓTESEo que será testado?
Foto por @torresfelipe
2 - FLIP COINoriginal vs variante
3 - ANÁLISE DE DADOSqual foi o resultado?
A opção que performa melhor se
torna a original
PIECE OF CAKE!
Foto por @torresfelipe
VOLTE PARA O PASSO 1Crie uma nova variante
Tudo deve ser testadonunca há regressão de performance
correlação
e
causalidade
KPIs
O que não é mensurado
não pode ser otimizado
AUMENTO DE PAGEVIEWS
CAPTURA DE DADOS
INTERAÇÃO SOCIAL
CADASTRO DE USUÁRIO
VENDAS
AFUNILAMENTO DE FUNIL
REDUÇÃO DE CHAMADOS
NO SUPORTE
REDUÇÃO DE TEMPO
PARA EXECUTAR TAREFAS
RETENÇÃO DE USUÁRIO
CASES
CAREER POINT COLLEGE
Hipótese
Remover o primeiro nível de navegação e colocar o formulário "acima da
dobra" vai aumentar as submissões
O que foi testado
Submissões do formulário
Resultado
336% do aumento da conversão
Career Point College
Informações
Site com versão mobile e versão desktop
A versão mobile não era otimizada para tablets - todos os usuários de
tablet eram direcionados para versão mobile
O que foi testado
Conversão e faturamento do site desktop no tablet
Conversão e faturamento do site mobile no tablet
Resultado
32% a mais de vendas na versão desktop
71,81% a mais de faturamento na versão desktop
Shirtnator
Informações
Na landing page tinha um formulário para captação de dados de
leadings, com 4 campos: nome, e-mail, site e faturamento.
O que foi testado
Troca do campo "faturamento" por um campo aberto "como podemos
ajudar?"
Resultado
Inconclusivo
NeilPatel #1
Informações
Na landing page tinha um formulário para captação de dados de
leadings, com 4 campos: nome, e-mail, site e faturamento.
O que foi testado
Remoção do campo faturamento, deixando o form com apenas 3
campos.
Resultado
Aumento de 26% no cadastro
NeilPatel #2
Informações
Landingpage com captação de e-mail para acesso a conteúdo.
O que foi testado
Captura de e-mails na original e na variante.
Na variante foi adicionado uma imagem de uma seta vermelha.
Viver de Blog
Informações
Landingpage com captação de e-mail para acesso a conteúdo.
O que foi testado
Captura de e-mails na original e na variante.
Na variante foi adicionado uma imagem de uma seta vermelha.
Resultado
10% a mais de conversão na variante
Viver de Blog
NETFLIX
Optimizely Blog
+ retenção
+ engajamento
Teste de hover
+ 15% de cliques
=
+ entradas no funil de conversão
$(".list-products").addClass("hover-red");
window['optimizely'].
push(["bucketVisitor", experimentId,
variationIndex]);