O aumento de conversão de vendas no comércio eletrônico sempre foi um fator de grande importância para quem vende pela Internet. Atualmente, a taxa de abandono de carrinho no checkout pode chegar a 83%, segundo o IBOPE e-commerce. Quando se analisa por setor, há variações: a taxa de abandono atinge 80% em sites de calçados e vestuários, e 65% em sites de produtos para escritório e papelaria.

Entretanto, diversos são os fatores que podem colaborar para o aumento da conversão. Entre eles estão boas fotos de produto, sensação de segurança, diversidade em meios de pagamento e, principalmente, a experiência do checkout.

Dessa forma, melhorar a experiência do checkout é uma atividade que deve ser constante no time de desenvolvimento da loja. Uma das atividades mais simples e que traz maior resultado é a validação do formulário de checkout.

Métodos de validação

A validação pode ocorrer tanto no servidor quanto no navegador. Chamamos esses métodos de server side e client side. Abaixo destacamos os dois métodos de validação que devem estar sempre presentes em um formulário de checkout. Discutiremos a importância, as vantagens e as desvantagens de cada um deles.

Server side

É a linguagem que vai rodar em segundo plano fornecendo a lógica principal da aplicação. Neste caso, a validação acontece após o formulário ser submetido. Exemplos de linguagens server side: PHP, Java, .NET, entre outras. A validação server side trabalha de maneira que, se o formulário for submetido com informação inválidas (incapazes de serem interpretadas pelo servidor), a página é atualizada mostrando um alerta no campo onde a informação deve ser preenchida de forma correta. Este método é bem seguro, pois ele trabalha mesmo se o JavaScript estiver desativado no navegador.

Observe no exemplo a seguir que, após o formulário ter sido submetido sem sucesso, o campo é destacado e uma mensagem é exibida solicitando a entrada dos dados para uma nova tentativa de submissão. Esse método também é conhecido como OnSubmit, pois ele recebe true ou false do servidor, dependendo da validade dos dados.

Vantagem

O usuário não tem como ler o código de programação, porque só recebe o resultado final da operação. Assim, senhas de bancos de dados e instruções que dariam margem a vandalismos ficam protegidas.

Desvantagem

Não há atualização em tempo real com consultas a base de dados, por exemplo. As validações das informações só ocorrem no “submit”, e não enquanto o usuário digita os campos.

Client side

É a linguagem que é executada do lado do cliente, ou seja, no navegador do próprio usuário. Como exemplo, podemos citar o JavaScript que é uma linguagem capaz de manipular os dados diretamente na página do usuário. A validação client side é muito eficaz, pois evita que o formulário seja submetido no caso de haver falhas no preenchimento. Isso significa que teremos mais agilidade na conclusão, além de melhorar a experiência do usuário.

Um bom exemplo em validação client side devido seu rápido feedback é o método inline. Além de sinalizar o erro em tempo real, ele permite que o usuário corrija a informação antes mesmo de mudar seu foco para outro campo.

É de extrema importância a utilização deste método no checkout de um e-commerce, pois o processo de compra exige que os dados inseridos sejam totalmente validados, como cartão de crédito, CPF e CEP, podendo se estender também a outros campos.

O fato é que oferecer esse tipo de validação prova ao usuário que sua loja se preocupada com a usabilidade, podendo ganhar confiança e credibilidade.

Veja a seguir um exemplo da validação inline entrando em ação:

Repare que o campo endereço de e-mail possui a entrada da informação no formato incorreto do solicitado. Neste caso, o campo é destacado de maneira que o usuário consiga corrigir a informação imediatamente. Note também que uma mensagem de alerta é exibida mostrando um exemplo correto da informação a ser preenchida.

Este definitivamente é o melhor método para mitigar os erros de formulário que fazem tantas pessoas abandonarem o carrinho. Segundo o diretor de produtos do Google, Luke Wroblewski, a validação inline pode aumentar em 22% a taxa de conversão e pode ainda aumentar em 31% a taxa de satisfação dos clientes.

Vantagem

A principal vantagem está na possibilidade de você economizar bandwidth (largura de banda), que é o tráfego mensal contratado em seu plano de hospedagem, e dar ao usuário uma resposta mais rápida de sua aplicação, já que não há processamento externo.

Desvantagem

A principal desvantagem do JavaScript é que o usuário pode desativá-lo em seu navegador. Se a sua aplicação basear-se exclusivamente em JavaScript, ela simplesmente não vai funcionar. É claro que você pode colocar em seu código-fonte um artifício para o site nem mesmo abrir se o JavaScript estiver desabilitado, mas, convenhamos, é algo feio e imperdoável frente a seu visitante.

Conclusão

Ambos os tipos de validação desempenham papéis no respectivo âmbito de atuação. A combinação entre eles é perfeita para validar formulários de checkout. Utilizando as boas práticas na validação, a garantia de aumento na conversão é totalmente notável.