Segundo estimativas1, em 2022 o mercado global de e-commerce no varejo movimentou US$ 5,71 trilhões. E o crescimento pode ultrapassar os 40% nos próximos anos, chegando a US$ 8,14 trilhões em 2026.
São números impressionantes, mas que poderiam ser significativamente maiores. Um white paper publicado pela Career Foundry2 estima que até 35% do lucro potencial com e-commerce é “perdido” por causa de uma experiência do usuário (UX, User Experience) ruim, gerando um “problema de um trilhão de dólares”.
Podemos traçar um paralelo com o mundo real: se você visitar uma loja e for atendido rapidamente por um vendedor atencioso, que entende o que você procura e traz boas sugestões de produtos e ofertas, provavelmente fará uma compra, voltará à loja no futuro e irá recomendá-la aos seus amigos.
Por outro lado, se você demorar para ser atendido e for recebido por um vendedor rude, que não ouve e só quer empurrar um produto que não lhe interessa, irá sair da loja rapidamente e certamente contará a todos ao seu redor a experiência ruim que teve.
Da mesma forma, no e-commerce, clientes satisfeitos fazem compras, recomendam a loja e se tornam consumidores fiéis. E os insatisfeitos, frustrados por uma UX ruim, abandonam seus carrinhos e o site para nunca mais voltar, mas não sem antes deixar um review negativo em todas as plataformas ao seu alcance.
Há vários fatores que podem levar a uma UX ruim, como uma baixa velocidade de carregamento ou longo tempo de resposta, design pouco atraente, navegação confusa ou incompatibilidade com dispositivos móveis.
Felizmente, também há inúmeras ferramentas à disposição para evitar ou solucionar esses problemas. Muitas delas estão integradas à Plataforma de Edge Computing da Azion, permitindo que os desenvolvedores criem facilmente aplicações e experiências modernas, executadas no edge e acessíveis para qualquer dispositivo.
Três ferramentas para melhorar a UX do seu e-commerce
Testes A/B
Imagine o seguinte cenário: você é o responsável por um e-commerce e sabe que os usuários não estão convertendo. Sabe até que eles estão abandonando o processo de compra em um momento específico, mas ainda não consegue determinar o motivo.
Há duas formas de resolver esse quebra-cabeças: você pode apelar para o “achismo” e fazer mudanças às cegas até encontrar a solução, ou usar o método científico. Mais especificamente, um teste A/B.
Esse tipo de teste consiste em dividir parte da sua audiência aleatoriamente em dois grupos, oferecer versões ligeiramente diferentes de um conteúdo (ou experiência) a cada um e coletar dados para determinar qual delas traz o melhor resultado.
Além de provar categoricamente qual opção é a preferida, esse método elimina o risco de expor toda a base de usuários a mudanças que inadvertidamente tenham alta rejeição. Qualquer impacto negativo que elas possam ter será limitado ao tamanho da amostra nos testes.
Exemplo de teste A/B.
Imagem: Maxime Lorant, Wikimedia Commons (CC-BY-SA 4.0)
Um bom exemplo de teste A/B é um experimento feito pelo Google que se tornou conhecido como “50 tons de Azul”3. A dúvida era: “será que o tom de azul usado em um link patrocinado mostrado dentro do Gmail influencia na quantidade de cliques (CTR)?”
Para encontrar a resposta, a empresa engajou 1% dos usuários do serviço em uma série de experimentos, comparando dezenas de tons ligeiramente diferentes, até descobrir que um azul um pouco mais “arroxeado” era o preferido pelos usuários. O resultado da mudança foi, segundo um executivo da empresa, um aumento de US$ 200 milhões no lucro com anúncios ao longo de um ano.
No Azion Marketplace, você encontra uma solução serverless de teste A/B implementada como uma edge function, com regras de negócios e testes executados diretamente no edge que controlam e direcionam o tráfego para o seu site conforme a evolução do seu teste.
Quando uma requisição chega ao edge, um algoritmo a distribui de acordo com uma probabilidade definida pelo usuário nos argumentos da edge function. Em seguida, é definido um cookie com o tempo de expiração e os valores especificados para A ou B. A partir desse momento, todo o tráfego do cliente que originou a solicitação será direcionado para a versão selecionada do conteúdo.
Ou seja, a seleção é feita antes que o cliente inicie o carregamento da página, evitando qualquer penalidade de desempenho. Isso torna nossa edge function significativamente mais rápida que as soluções que utilizam JavaScript para realizar um teste A/B.
Content Targeting
A oferta de conteúdo personalizado para um usuário de acordo com seus interesses é mais uma forma de aumentar a taxa de conversão. Se o perfil indica que ele é interessado apenas por carros e marcenaria, não faz sentido exibir, por exemplo, uma landing page com ofertas de suprimentos de costura.
Assim como nos testes A/B, a Azion oferece uma solução serverless de Content Targeting implementada como uma edge function. Ela permite criar e manipular cookies e cabeçalhos para lógicas de uso flexíveis, seja para segmentação de conteúdo, seja para lidar com contextos de aplicativos específicos, regras de negócios ou algum outro cenário que o cliente queira avaliar.
Com ela você pode criar diferentes cenários, definindo variantes e percentuais de distribuição para cada um, com maior assertividade e sem onerar recursos e interações na fonte. Toda a lógica de seleção é executada no edge, o que permite definir qual versão do conteúdo deve ser apresentada antes que o usuário inicie o carregamento da página e sem interferir no tempo desse carregamento.
Image Processor
Imagens são um componente crucial de qualquer e-commerce. É através delas que os consumidores irão conhecer seus produtos, ser informados de novidades ou atraídos para ofertas. Por isso, é importante que elas tenham a melhor qualidade possível com o menor tamanho de arquivo, para não afetar negativamente o tempo de carregamento das páginas.
Gerenciar imagens é um trabalho mais árduo do que parece. Não basta ter uma boa imagem para cada produto, é preciso ter múltiplas versões. Computadores pessoais, tablets e smartphones têm telas com tamanho e resoluções diferentes, e uma imagem que parece ótima em um aparelho pode ficar horrível em outro. Idealmente, você precisará de uma variante otimizada para cada tipo de dispositivo.
Também pode ser interessante ter versões com diferentes níveis de compressão, para levar em conta diferenças na largura de banda durante o acesso. Assim você pode mostrar uma imagem em qualidade mais baixa (e com tamanho de arquivo menor) para quem tem conexões mais lentas.
E ainda nem mencionamos os vários formatos de imagem. O JPEG é o mais usado para fotografias, mas alternativas como o WebP entregam a mesma qualidade visual com um formato de arquivo menor. No entanto, nem todos os dispositivos ou navegadores suportam WebP.
Exemplo de compressão de imagem em três diferentes formatos.
Uma imagem de 1,5 MB em PNG é reduzida para 95,7 KB em WebP sem perda visível de qualidade.
Imagem: Christophe Mehay, Wikimedia Commons (CC-BY-SA 3.0)
Isso significa que, se você quiser tirar proveito desse formato, terá de manter versões em JPEG de cada imagem como alternativa, e implantar uma lógica de seleção capaz de exibir o formato adequado de acordo com as capacidades do navegador/dispositivo.
Vamos fazer uma conta simples: imagine que você tem uma imagem de um produto. Se quiser uma versão para cada tipo de dispositivo, são três imagens. Se quiser duas versões de cada para diferentes larguras de banda (vamos chamar de “baixa” e “alta”), são seis imagens. Adicione versões em WebP e JPEG e temos 12 variantes para cada imagem. Multiplique isso pelo número de produtos em sua loja, mais todos os banners, cabeçalhos, imagens de fundo e arte para landing pages, e você tem uma bola de neve rolando montanha abaixo.
O Image Processor da Azion permite automatizar o processamento e gerenciamento de imagens ao projetar workflows que realizam otimização de imagens sem a necessidade de intervenção manual.
Ele é capaz de cortar e redimensionar imagens, aplicar compressão sem perda de qualidade visual, converter para o melhor formato suportado pelo navegador do usuário ou aplicar marcas d’água e filtros automaticamente. Além disso, usando o Real-Time Metrics você pode acompanhar a economia na largura de banda.
A Dafiti, um e-commerce de moda com 7,7 milhões de clientes ativos, usa o Image Processor para otimizar o carregamento de imagens em seu site. A empresa já processou mais de 17 milhões de imagens, reduzindo o tamanho dos arquivos em 75% em média e economizando dezenas de TB de dados transferidos por mês.
Conclusão
Para otimizar a UX do seu e-commerce, é importante considerar também o uso de tecnologias como Edge Functions e Next.js para tornar o site mais rápido e responsivo. Além de melhorar a experiência do usuário, isso também pode impulsionar o SEO da sua página, ajudando a aumentar sua visibilidade e, consequentemente, suas vendas.
Em resumo, uma boa UX é fundamental para os negócios, já que aumenta a conversão, a retenção dos clientes e a propaganda boca-a-boca. E os resultados são palpáveis: segundo a Forbes, um estudo da Forrester Research mostra que cada US$ 1 investido em UX traz, em média, um retorno de US$ 100, ou 9.900%. Não há muitos investimentos com esse retorno.
Crie uma conta grátis e experimente por conta própria como a Azion pode otimizar a experiência do usuário do seu e-commerce, ou fale com nossos experts para saber mais.
Referências
1 Retail e-commerce sales worldwide from 2014 to 2026
2 The Trillion Dollar UX Problem
3 Why Google has 200m reasons to put engineers over designers
