Como as ferramentas de design podem ajudar a melhorar a conversão no e-commerce - Startupi
*Por Rafael Pradella
Que o design é um dos pilares fundamentais para o bom desempenho de uma loja virtual, isto já não é segredo para muitos empreendedores. No entanto, o que algumas equipes costumam ignorar é que no e-commerce o design vai muito além de um layout "bonitinho", é um conceito em que cada detalhe pode fazer a diferença na experiência do consumidor. O posicionamento dos botões, cores, formatos das imagens, fontes, o tempo de carregamento das páginas… Tudo no site precisa estar direcionado para a conversão do usuário.
É importante ter em mente também que, quando se trata de design no e-commerce mudanças podem acontecer de forma muito dinâmica, considerando que estratégias que costumavam funcionar há um tempo atrás, podem não valer para o contexto atual. Elementos eram eficientes para um determinado público podem não apresentar resultados para outros, e até mesmo a adoção de novos padrões web por parte dos navegadores modernos podem alterar as boas práticas da área com frequência.
Por isso, é fundamental que constantemente sejam feitos novos testes na plataforma para explorar possibilidades e melhorar os resultados.
Para facilitar a realização de tais experimentos, bem como otimizar a experiência dos usuários a partir do design, é possível contar com o apoio de algumas ferramentas para executar funções como:
Testar diferentes designs
As ferramentas de testes podem ajudar as equipes de design a experimentar diferentes ideias, avaliar o comportamento dos usuários e coletar dados que podem ser valiosos para embasar trabalhos futuros.
Para testes A/B, por exemplo, (teste que compara a conversão de duas páginas semelhantes), o Optimizely tem uma plataforma gratuita com um editor visual, o que significa que, mesmo se os membros da equipe design não tiverem conhecimentos em linguagens de programação, poderão começar a testar suas versões de páginas web sem grandes dificuldades.
Uma ressalva à plataforma é que, como as mudanças das versões são aplicadas por cima de uma página já existente, os usuários podem perceber elementos "piscando" e mudando de forma, durante o carregamento, para aplicar as modificações do teste. Para resolver isso, o próprio Optimizely fornece um recurso chamado Optimizely Full Stack, e o Google tem seu Optimize (que integra muito com o Google Analytics, se sua empresa já estiver no ecossistema).
Melhorar o carregamento das páginas
A velocidade em que os elementos da página aparecem para os usuários pode impactar bastante na experiência dos consumidores. O Google recentemente lançou a ferramenta Impact Calculator que calcula o quanto de dinheiro seu negócio pode estar perdendo por não se preocupar com o tempo de carregamento do site. Imagine que o site da BBC perdeu mais de 10% dos usuários para cada segundo adicional que o site levou para ser carregado.
Levando em conta que as imagens costumam representar em média, 51% dos carregamentos totais das páginas, a preocupação em otimizar esses recursos é bastante válida. Por isso, o recomendado é sempre utilizar ícones e ilustrações simples no formato SVG e utilizar a ferramenta SVGOMG, para diminuir ainda mais o impacto do uso das mesmas no site.
Já para fotos ou ilustrações mais complexas, cheias de detalhes e gradientes, crie versões adaptadas para dispositivos mobile, evitando que o usuário baixe uma imagem muito maior do que o necessário, e utilize a ferramenta Squoosh, que otimiza e escolhe o melhor formato para a arte em questão.
Melhorar as imagens já meio caminho andado para que os usuários acessem o conteúdo desejado mais rápido no e-commerce e, mais importante, não desistam de comprar devido a páginas mal desenvolvidas.
A escolha das cores para compor o design do e-commerce ou aplicativo pode provocar diferentes comportamentos dos usuários e até mesmo, divergir com os conceitos da marca veiculada. Por isso, a paleta de cores é outro elemento que precisa ser estudado e testado com certo cuidado.
Uma ferramenta que pode ajudar para que esse processo seja mais prático e assertivo é a ColorSafe, que permite experimentar de forma rápida, na própria plataforma, a combinação de diversos modelos de textos, backgrounds e oferece as opções de paletas de cores que mais convergem com o padrão escolhido, respeitando as regras de contraste mínimo.
Além das ferramentas que podem ser utilizadas como apoio para melhorar a performance no e-commerce, é preciso ter em mente que um design de alta performance é baseado em dados, por isso, é tão importante "ouvir" os usuários, mensurar os resultados das páginas e sempre estar disposto a testar novos caminhos.
*Por Rafael Pradella, Head de Design e Front-End do Cuponomia, plataforma que reúne cupons de desconto dos principais players de comércio eletrônico do país.