Conheci aquele produto depois de uma busca no Google. Essa frase pode parecer romântica, mas o anúncio direcionado me perseguiu durante um mês pela Internet. O site da loja me reconfortou, disse que seria uma história de amor. Tinha tudo para ser. Coloquei o item no carrinho e saquei o cartão de crédito da carteira. Mas o checkout, quando veio, apagou a chama da paixão iminente.

Paródias à parte, a web está repleta dos mais diversos processos de checkout. Muitos tentam reduzir a fricção do pagamento online e se aproximar da facilidade de usar o cartão de crédito no mundo real. Lá, você não precisa se preocupar com os dados impressos naquele pedaço de plástico – basta colocá-lo no terminal, digitar a senha e confirmar.

Outras páginas de checkout não parecem nem se esforçar. Apostam em formulários longos, fazem perguntas desnecessárias, sobrecarregam a tela de distrações, não dão garantias de segurança, entre outros fatores de UX e UI que podem fazer o consumidor desistir da compra.

Segundo dados do Baymard Institute, a taxa global de abandono de carrinho no comércio eletrônico é de 69%. O processo de checkout é um dos fatores que influenciam esse número, ainda que não o principal. Mas isso não é razão para ignorá-lo e deixar de criar uma ótima experiência de pagamento para seus clientes. Especialmente porque ele é um fator que depende do próprio site, e não do cliente.

Formulário breve, campos vitais

Ninguém gosta de preencher formulários. Quanto mais curto e certeiro for o seu checkout, melhor. Esse é um privilégio de que produtos e serviços digitais podem – e devem – usufruir. Aquele site que agenda publicações em suas redes sociais não precisa de seu endereço físico ou telefone no momento da compra.

Perguntas que ajudam a entender o perfil do seu cliente e não influenciam na compra também devem estar fora de checkouts. As empresas muitas vezes incluem campos que só servem a elas mesmas, e não aos clientes. São informações opcionais que poderiam muito bem ser requisitadas em outro momento.

É natural que e-commerces de produtos – como no exemplo acima, do e-commerce britânico ao.com – precisem de mais dados dos usuários, o que pode alongar seu processo de checkout. A solução vem a seguir.

Checkout em múltiplas etapas

No desktop, o impacto de um formulário longo é ruim. No mobile, chega a ser desastroso. Divida seu checkout em mais de uma página. Lembre-se de assegurar ao usuário a possibilidade de navegar de maneira não linear por esses estágios, caso alguma alteração seja necessária. Além disso, armazene os valores dos campos já preenchidos, para que ele não precise digitar as mesmas informações outra vez.

Recomenda-se sanar essa necessidade de navegação usando links ou botões de edição embutidos num resumo das informações do checkout do usuário (itens no carrinho, valores cobrados, endereços de entrega e de cobrança fornecidos, previsão de entrega).

Esse resumo normalmente é posicionado num bloco na lateral da página e acompanha o cliente durante todo o processo, como no checkout da Ambassador, abaixo.

Indicadores de progresso

“A jornada é o que importa, e não o destino”. Essa não é uma máxima muito boa para um checkout. O consumidor se sente muito mais aliviado quando sabe em que estágio do processo se encontra e quantas etapas ainda são necessárias para concluí-lo.

Uma barra de progresso é o bastante, desde que simples, clara e precisa, como as da Square, That Clean Life e UI8 abaixo. Títulos para cada etapa e cores diferentes para os estados (“concluído”, “em andamento” e “restante”) são essenciais. Você também pode usar um design de acordeão, que se expande e retrai conforme o progresso do cliente.

Checkout como convidado

Para comprar num site pela primeira vez, normalmente é preciso criar e confirmar uma conta. Ainda que essa seja uma boa prática, ela pode ser um empecilho para a conversão e estender ainda mais o seu checkout.

Você pode, claro, implementar um botão de registro via Facebook, Google ou qualquer outro site social, o que ameniza a fricção. Mas já considerou remover a obrigatoriedade do cadastro para compras, como vemos no checkout da BestBuy?

Jared Spool, fundador da consultoria de usabilidade na web User Interface Engineering, conta como um de seus clientes aumentou a receita anual de seu site em US$ 300 milhões apenas substituindo o botão Registrar no checkout por um Continuar, acompanhado da seguinte mensagem:

“Você não precisar criar uma conta para comprar em nosso site. Clique no botão Continuar para prosseguir ao checkout. Para tornar compras futuras mais rápidas, você pode criar uma conta durante o checkout”.

Transpire confiança

Os consumidores estão cada vez mais atentos a sinais da página e do navegador que possam lhes indicar se um site é confiável: o https:// na barra de endereço; o cadeado que representa o certificado de segurança da página; logos de serviços de verificação que levam aos respectivos certificados de segurança quando clicados.

Seu processo de checkout deve acontecer num servidor seguro. Ponto. Mas há outras dicas visuais e de desempenho que podem aumentar a confiança de um usuário em seu site.

Informações sobre sua empresa e meios de contato são uma delas. O próprio resumo do checkout durante o processo, como mencionado antes, dá a ideia de transparência – o cliente sabe o tempo todo o que está comprando. Seu site também deve ser rápido, sem travamentos ou longas telas de carregamento, além de funcionar sem erros.

Sem distrações

Isolar seu checkout do seu site não só ajuda a melhorar a performance do processo, como também evita que seus clientes pensem em outras ações a não ser a finalização do pedido. Compare a UI do checkout do Typeform abaixo com o layout do site deles, por exemplo.

Não há por que usar o mesmo layout padrão do seu site – principalmente o de catálogo de produtos utilizado em e-commerces – durante o processo de checkout. O usuário já mostrou a intenção de comprar – você não precisa mais agir como um vendedor. Isso é algo que pode ficar para um e-mail de uma campanha futura.

Mas, ao mesmo tempo, é importante que seu cliente se sinta – e esteja – ainda dentro do seu ambiente. O checkout do Typeform ocorre dentro do site deles. Isso fica bem claro quando observamos a barra de endereço do navegador ou a identidade visual da página, por exemplo.

É o conceito do checkout transparente: o usuário não deve ser levado para nenhuma outra página no momento da compra. Se você estiver usando uma infraestrutura financeira para lidar com pagamentos, como a iugu, tem a oportunidade de criar seu próprio checkout com todas essas boas práticas ao implementar a API do serviço.