Quando as melhores práticas de design se tornam as piores em performance

em fev 21, 2014:por

Victor Ferrante

Victor Ferrante é formado em Publicidade e Propaganda pela PUC-SP, fascinado por e-Commerce e design. Colaborador da eNext e NextEcommerce.
Views40
usaheck

O protótipo está incrível está nos conformes de todas melhores práticas de usabilidade conhecidas, e nos testes os resultados foram inspiradores. Agora manda para a equipe de design, sobe e a conversão não está do jeito que foi previsto.

Tudo está certo, seguindo os padrões do mercado, perfeito.. o que aconteceu? Talvez o mercado não esteja com os padrões tão lapidados assim. Talvez seu layout esteja tão desenvolvido que está afetando o carregamento das páginas, gerando rejeição antes mesmo de verem o magnífico layout. Todas horas desprendidas para desenvolver o site foi por água a baixo com rejeição alta, dificilmente você terá uma conversão respeitável, ou uma taxa de page views bacana, ou qualquer outra métrica que te interesse.

A relação entre a velocidade de carregamento da página e as métricas de seu negócio é tangente, ou seja, 1 segundo de carregamento a mais te custará receita líquida e ponto final. Um estudo feito no walmart.com, comprova o que digo: a cada segundo extra de carregamento 2% a menos de conversão.

O google recomenda que a primeira parte das páginas (antes do primeiro scroll) sejam carregadas em menos de 1 seg, claro que essa meta é relativamente agressiva, e bastante complicada de se atingir, então na comunidade de usabilidade o valor de 3 segundos é considerado razoável.

Isso não acontece no e-commerce, nem mesmo nos grandes. a média de carregamento da index das 100 maiores varejistas do mundo é de 5,3s com somente 11% deles seguindo o valor de 3 segundos ou menos; e um valor exorbitante de 28% demorou mais de 8s (!!!!) para carregar a página. (RadWare)

Listo aqui 3 práticas que são bastante comuns, e consideradas valiosas para o design, mas que se não as usarmos cautelosamente prejuízos ocorrerão:

#1 – Carrosséis

Os carrosséis estão caindo em desuso, contudo esse recurso é muito requisitado no e-commerce. Na maioria das páginas que existem carrosséis, esse elemento é o último a carregar, dobrando o tempo de carregamento total da página, em alguns casos a index carrega em 4 ou 5s e fica com um espaço vazio por mais 4, ou 5 segundos só esperando os banners aparecerem, como no caso da netshoes:

vitao3
A Nielsen fez um estudo ano passado que analisava justamente esse aspecto, levando em consideração que o banner é o maior call-to-action de qualquer e-commerce, um delay de 7, 8, 10 segundo para prender a atenção de quem está navegando certamente trará resultados negativos para sua conversão, no mesmo estudo, os sites que tiveram seu main-content carregado entre 2-3s tiveram 20% mais interações com o usuário.

Esses números levantados pela Nielsen comprovam o quão imaturo está o comércio eletrônico, e somos nós que devemos trabalhar para amadurecê-lo. Nem mesmo uma .png comprimida é utilizada, nem mesmo uma renderização progressiva é utilizada.

 

#2 – Call to action no pé do banner

90% dos banners possuem um botãozinho de call-to-action certo? Óbvio, mas quantos deles são bem diagramados?

Seguindo o raciocínio anterior, é claro, que as vezes os banners demoram um bocadinho a mais para carregar, e muitas vezes eles carregam aos poucos, e por “aos poucos” eu quero dizer que a renderização começa de cima e termina embaixo. Então concluímos que a parte debaixo do banner é a última a ser vista pelo usuário, desde a entrada na página até a >>aparição<< do botão o qual a pessoa tem que interagir passaram 10s (!!).

 

No caso do boticário temos um carregamento comum, onde o banner é carregado de cima para baixo, é bem visível o que quero apontar aqui, nesse caso em particular, os pngs estão comprimidos, então teve um carregamento relativamente leve, mas mesmo as gigantes do ecommerce, como a netshoes tem um tempo de carregamento prejudicado.

vitao2

A simples técnica de posicionar o call-to-action no topo do banner, pode diminuir o tempo percebido de espera do consumidor em 4, 5 segundos. Outra coisa que pode ser feita é apelar para a renderização progressiva, para quem não está muito familiarizado, a imagem em renderização progressiva carrega por completo com, vamos dizer 1% de qualidade, e aos poucos vai pegando definição; ao invés de carregar já em definição máxima aos pouquinhos.

 

#3 – Fazer testes e designs em ultra máquinas

 

Desenhar e testar para o seu supercomputador somente diz a respeito das suas funcionalidades em seu potencial máximo, mas esse potencial, no dia-a-dia dos seus consumidores raramente aparece. Quantas vezes algum familiar ou até mesmo amigo de outras áreas ficam surpresos, com a alta definição, velocidade e configuração de cores do seu computador? Comigo é recorrente. Claro, eu tenho um monitor de 23” led full hd, com uma placa de vídeo dedicada.

Em uma conexão de 512k, 1 mb qual o tempo de resposta do seu site? Às vezes você pensou em tudo para fazê-lo carregar em 5 segundos, mas quando lidamos com conexões sem fio, com baixo sinal e taxas de download reduzidas, isso pode se tornar 25s, 30s. Obviamente você não vai conseguir fazer um site nessas condições carregar em 5s, e o consumidor também não espera que carregue, mas tente levar em consideração que o que acontece nos testes e em sua máquina, (quase) nunca é o que acontece com quem está lá para comprar efetivamente.

Aqui ponho exemplo de três testes, um rodando a 20mbps (Fibra ótica), outro à 2mbps (DSL) e um último a 56k (mobile em velocidade mínima) e vocês mesmo tirem suas conclusões:

 

vitao4

vitao5

vitao6

 

A maior complicação que vemos é o fato de uma equipe jogar a responsabilidade da performance para a outra: os profissionais de usabilidade comprovam os defeitos e propõe soluções, mas ao entrar em contato com o front-end, por exemplo, é informado que para tal alteração é necessário intervenção do back-end, ou que é necessário alteração de um script x que acarretaria em dezenas de horas de trabalho, entre outros. O resultado deste toma lá dá cá geralmente é o que vemos hoje: 10s, 20s de carregamento de landing pages, essa algazarra que está transbordando o mercado.

A realidade é que não deve existir um responsável pela melhora de performance, isso é job description de qualquer profissional de e-commerce, hoje então, com o avanço do mercado mobile (e não avanço do 3g) pensar em páginas “ultra-rápidas” para desenvolver seu próximo projeto PRECISA entrar no roadmap.

Para finalizar coloco à disposição quatro cases gringos que comprovam o que segundos de carregamento fazem com sua conversão:

Deixe um comentário

O que achou do conteúdo? Compartilhe sua opinião:

Gostou do nosso conteúdo?

Deixe seu e-mail aqui e receba as novidades do mercado

2 Comentários :

  1. Nossa cara, parabéns pelo post, muito bem explicado e muito útil.

  2. muito bom o artigo Vitor. Parabéns!

eNext Dashboard

eNext Dashboard

SLI Systems

SLI Systems

Calendário

 
JUL 25