Como criar um fluxo de checkout de comércio eletrônico que converte

Seu fluxo de pagamento de comércio eletrônico é onde está o dinheiro. Pense nisso. Visitantes aleatórios deixam o site antes mesmo de entrar no funil de checkout. Compradores motivados vêm aqui para finalizar seus pedidos.

Qualquer pequena melhoria de design em sua UX de checkout geralmente tem um impacto direto em quanto dinheiro seu site ganha.

Um site de comércio eletrônico que analisei recentemente tinha uma página de pagamento na qual 84,7% do tráfego era para compra. Calculei que, se pudéssemos aumentar isso para 90%, isso resultaria em 461 pedidos a mais e um adicional de $ 87.175 por mês - crescimento de receita de 23,9%. Ganhos “pequenos” podem ser enormes.

Portanto, a questão é: “Como podemos fazer com que mais pessoas passem pelo nosso fluxo de caixa e concluam as compras? As táticas específicas dependem do seu site, mas os princípios para encontrar a resposta são universais.

Uma estrutura para pensar sobre checkouts de comércio eletrônico: o modelo de comportamento Fogg

O resultado final é o seguinte: Comportamento = Motivação x Habilidade x Gatilho.

Aqui está o modelo:

Você quer mirar no canto superior direito do gráfico - alta motivação, fácil de fazer, um gatilho no lugar. Se você tiver alta motivação e baixa capacidade (difícil de fazer), o que obterá é frustração. Se for de baixa motivação, mas fácil de fazer (por exemplo, levar o lixo para fora), você fica aborrecido.

Como a Amazon usa o Fogg Behavior Model

Quando a Amazon lhe envia um e-mail com uma promoção de produto, isso é motivação e um gatilho. As pessoas clicam no link e acessam a página do produto. Eles lêem a cópia e as avaliações, e olham para a imagem, o que aumenta a motivação. “Adicionar ao carrinho” é o gatilho para iniciar o processo de checkout.

E quanto à habilidade? É fácil concluir o processo de checkout? É aqui que a Amazon chuta o traseiro. Você só precisa digitar sua senha e clicar algumas vezes. O fluxo de verificação é livre de fricção.

Aqui está o fluxo de trabalho real no aplicativo de comércio móvel da Amazon:

Feito e feito. Vamos percorrer todo o fluxo de checkout passo a passo para ver o que o torna bom.

Observação: você pode obter muitas outras dicas para comércio eletrônico em nosso relatório abrangente de diretrizes de comércio eletrônico (247 diretrizes específicas para comércio eletrônico).

Como projetar a função “Adicionar ao carrinho” e a página do carrinho de compras

Tudo começa com as pessoas adicionando algo ao carrinho. No momento em que um visitante adiciona o primeiro item ao carrinho, ele não está navegando - ele está comprando.

Qual deve ser a aparência de “Adicionar ao carrinho”?

Quando as pessoas adicionam algo ao carrinho nas páginas do seu produto, o que deve acontecer?

I t deve ser estupidamente óbvio que eles adicionaram alguma coisa ao carrinho. Confirmação clara. É ridículo quantos sites estragam isso, não exibindo uma confirmação adequada ou exibindo uma pequena animação ou um pequeno texto de confirmação que é difícil de notar.

Você não pode perder um carrinho adicionar em Bonobos. Depois de clicar em “Adicionar ao carrinho”, o carrinho aparece com uma pequena animação, o que é bom porque o olho humano reage ao movimento. É uma dica visual sutil que indica a mudança do visitante para o comprador.

O conteúdo do carrinho junto com o botão “Check-out” também permanecerá visível até que o usuário clique em outro lugar. Isso é bom. Eu mudaria a cor do botão “Check-out” para algo diferente de azul - ele não se destaca o suficiente. O principal na hierarquia visual é o botão “Adicionar ao carrinho”, mas o produto já está no carrinho.

ASOS mostra uma pequena animação também. Eles abrem o conteúdo do carrinho e o dobram após alguns segundos. O botão "Adicionar ao saco" também muda para "Adicionado", o que é uma boa confirmação para os compradores:

Eu manteria o conteúdo do carrinho aberto até que o usuário fizesse uma escolha clicando em algum lugar. Dessa forma, o botão “Check-out” fica olhando na cara deles.

Embora sempre desejemos que eles comprem mais coisas, melhorar o processo de compra de até mesmo um único item pode levar a grandes melhorias. Empurrá-los para o caixa é sempre uma boa ideia.

Depois que o produto estiver no carrinho, o que fazer?

Existem duas abordagens principais:

1. Mostre a confirmação de “adicionar carrinho” e mantenha os usuários na mesma página. Prós: as pessoas não pediram para ir para outra página, então não há surpresas. Eles também podem considerar adicionar mais itens ao carrinho antes de finalizar a compra. Contras: eles já têm o produto que estão vendo no carrinho. Seria mais útil para você se eles procurassem outra coisa que gostariam de comprar.
2. Transfira o usuário para a página do carrinho. Prós: você os está levando um passo mais perto de fazer um pagamento. Esta também é uma ótima oportunidade para fazer ofertas de upsell. Contras: você pode perder a maximização de "itens por carrinho".

A Amazon leva você a uma página do carrinho, confirma que você adicionou um produto ao carrinho e mostra as vendas adicionais. O que a Amazon faz bem é reduzir o conteúdo do carrinho, então os upsells se destacam:

O equilíbrio certo de estratégias potenciais depende de sua indústria e objetivos, e você definitivamente deseja testar isso.

Métricas a serem lembradas:

• Valor médio da transação;
• Quantidade média por transação.

Não queremos aumentar apenas o número de transações, mas também o valor gasto em cada transação.

Exibir bem o conteúdo do carrinho

Os princípios-chave para exibir o conteúdo do carrinho de maneira eficaz são clareza e controle.

• Clareza. É fácil e óbvio entender o que está no carrinho e o custo final, incluindo frete e impostos. Os custos de surpresa no futuro fazem as pessoas abandonarem os carrinhos.
• Controle: É fácil fazer alterações, como atualizar a quantidade ou retirar produtos.

ASOS tem uma boa visão da página do carrinho:

O que eles acertam:

• Fotos do produto;
• Nome e preço do produto;
• Capacidade de remover, salvar para mais tarde ou alterar detalhes como tamanho;
• Mostre o tipo de pagamento que eles aceitam;
• Mostrar o preço total e confirmar a entrega gratuita;
• Apelo à ação claro para “Check-out”;
• Reduza a incerteza destacando “Devoluções fáceis”.

Indochino tem uma abordagem minimalista e agradável para apresentar o conteúdo do carrinho. Dito isso, a página ainda apresenta alguns problemas, como uma caixa de cupom proeminente e a impossibilidade de alterar as quantidades:

Obtenha a hierarquia visual certa

A primeira coisa na hierarquia visual deve ser continuar até a finalização da compra. (Teste diferentes CTAs.). Deve haver duas frases de chamariz: uma acima e outra abaixo do carrinho.

Algo assim - os dois botões de checkout se destacam claramente:

Modcloth melhorou esta página desde a última revisão. Anteriormente, a atualização da quantidade exigia digitação. Agora, você pode usar steppers para aumentar ou diminuir a quantidade.

Observe que Modcloth também oferece uma opção de PayPal. Embora a maioria das pessoas prefira pagar com cartão de crédito, oferecer 1-2 métodos de pagamento alternativos (por exemplo, PayPal, Amazon) é uma boa ideia e tem demonstrado ajudar nas conversões. Muitas escolhas são prejudiciais, no entanto.

Modcloth também lembra que eles têm devoluções e frete grátis em pedidos acima de $ 75.

Não dê destaque aos cupons

Quando as pessoas veem o campo “Insira o código do cupom aqui”, elas se sentem menos especiais. "Como é que eu não tenho um?" Muitos vão ao Google para encontrar um cupom; muitos nunca voltam. Sair do site em busca de cupons é um motivo comum para o abandono do carrinho de compras.

Portanto, esta não é uma boa ideia:

Em vez disso, tenha um link de texto que diz “Tem um cupom?” ou algo semelhante. Quando alguém clica no link, faça um campo de entrada - como o acima - aparecer. Os links de texto são menos proeminentes, portanto, menos pessoas prestarão atenção neles.

Os clientes que já possuem um código de cupom estarão procurando uma maneira de inseri-lo. A menos que você o oculte muito bem, eles o encontrarão e poderão aplicar seu código de cupom.

Lembre os compradores sobre as coisas boas: frete, devoluções e segurança

Quando eles receberão seus produtos? Quanto é o transporte. É de graça? A transação será segura? Lembre as pessoas.

Aqui está um exemplo que mostra essas três mensagens principais abaixo do botão de finalização da compra, que também diz “Pague com Segurança Agora”:

Carrinhos persistentes FTW

Quando as pessoas adicionarem algo ao carrinho, não deixe o conteúdo do carrinho expirar. Use e-mails de abandono de carrinho e anúncios de redirecionamento para trazer as pessoas de volta na próxima semana ou no próximo mês, para que possam continuar de onde pararam.

Processo de inscrição: Criar uma conta ou não?

Muitos sites de comércio eletrônico desejam que os compradores se inscrevam antes de comprar. Alguns até forçam o registro (ou seja, não é possível comprar sem registrar). Resumindo: não faça isso. Isso prejudica as conversões. Muito.

Um em cada quatro abandona as compras online devido ao registro forçado. O registro forçado faz parte da "síndrome do comerciante ganancioso". É fácil entender por que os profissionais de marketing de comércio eletrônico desejam fazer isso - eles esperam que o usuário fique “preso” e compre mais porque possui uma conta.

É realmente esse o caso? Oh, por favor. Em quantos sites você tem uma conta registrada? Você agora se sente leal a eles por esse motivo? Aposto que você não entrou na maioria deles mais de uma vez.

Aqui está uma boa história sobre registro forçado, contada pelo guru da usabilidade Jared Spool:

É difícil imaginar um formulário mais simples: dois campos, dois botões e um link. Ainda assim, descobriu-se que essa forma estava impedindo os clientes de comprar produtos de um grande site de comércio eletrônico, no valor de US $ 300 milhões por ano. O que era ainda pior: os designers do site não tinham ideia de que havia mesmo um problema.

O formulário era simples. Os campos eram Endereço de e- mail e Senha. Os botões eram Login e Registro. O link era Esqueci a senha. Era o formulário de login do site. É um formulário que os usuários encontram o tempo todo. Como eles poderiam ter problemas com isso?

O problema não era tanto quanto ao layout do formulário, mas sim onde o formulário residia. Os usuários o encontrariam depois de preencherem seus carrinhos de compras com os produtos que desejavam comprar e pressionarem o botão Checkout . Isso veio antes que eles pudessem realmente inserir as informações para pagar pelo produto.

A equipe considerou o formulário permitindo que os clientes habituais comprem com mais rapidez. Quem compra pela primeira vez não se importa com o esforço extra de se cadastrar porque, afinal, voltará para buscar mais e apreciará a agilidade nas compras subsequentes. Todo mundo ganha, certo?

Realizamos testes de usabilidade com pessoas que precisavam comprar produtos do site. Pedimos que trouxessem suas listas de compras e demos o dinheiro para fazer as compras. Tudo o que eles precisavam fazer era concluir a compra.

Estávamos errados sobre os compradores de primeira viagem. Eles se importaram em registrar. Eles se ressentiram de ter que se registrar quando encontraram a página. Como um cliente nos disse: “Não estou aqui para entrar em um relacionamento. Eu só quero comprar algo. ”

Ao remover o registro forçado, eles aumentaram as vendas em US $ 300 milhões.

A equipe de Spool também descobriu que a maioria das pessoas tinha várias contas no sistema. As pessoas esqueceram que já tinham contas. Eles receberam mensagens de erro quando tentaram criar um com seu e-mail padrão, então tiveram que usar um e-mail alternativo para criar mais contas.

O que você deve fazer em vez disso? Sempre ofereça um check-out de convidado. Você pode trabalhar no registro após a venda:

• Nem mencione a palavra “Cadastre-se”. Diga “Novo cliente” ou um termo semelhante.
• Depois que eles finalizarem a compra, ofereça a criação de uma conta na página “Obrigado”. Você já tem o nome, e-mail e endereço do checkout, então não deve demorar mais do que alguns cliques para criar uma conta. Peça a senha desejada (ou forneça uma opção para gerá-la automaticamente) e confirme a permissão para criar sua conta.

Na minha experiência, a abordagem mais comum em sites de comércio eletrônico ainda é abaixo do ideal. No geral, está muito ocupado e pede aos novos clientes que façam uma escolha, levando à hesitação:

Existem várias opções muito mais preferíveis.

Opção 1 de registro de checkout

Dê aos usuários duas opções, novo ou antigo:

A Asos nem sempre teve essa abordagem. Esta era a página de inscrição anterior, que tinha três opções:

Eliminar essa abordagem e mudar para uma versão simplificada reduziu o abandono do carrinho em 50%!

Ainda é (essencialmente) um registro forçado, mas é embalado de forma diferente. Também é mais fácil com as opções de login social. Um problema de usabilidade típico é reduzido a apenas alguns cliques.

Opção 2 de registro de checkout

O abandono do carrinho de compras é um grande problema. Solicitar seu e-mail com antecedência facilita o início de um processo de recuperação de carrinho abandonado. Além disso, existem duas escolhas fáceis - sem sobrecarga sensorial:

Opção 3 de registro de checkout

Outra ótima maneira é pular a tela de login completamente. Em vez disso, basta usar como padrão o check-out de convidado. Pessoas com uma conta existente podem fazer login por meio do link, e novos clientes podem criar uma conta após o pagamento:

O que o Diamond Candles faz bem nem é visível. Eles criam uma conta para você automaticamente, mas não mencionam isso. Digamos que você passe por quatro checkouts de convidado com o mesmo endereço de e-mail e, finalmente, decida criar uma conta (digite uma senha, essencialmente).

Todos os seus pedidos anteriores com esse endereço de e-mail são mesclados para esta conta, portanto, sua conta recém-criada vem com um histórico de pedidos adequado.

Opção 4 de registro de checkout

Com esta opção, o registro da conta é oferecido juntamente com um incentivo na conclusão da compra. Aqui está um exemplo da Speedo:

As pessoas não se incomodam com nenhum registro de conta até que paguem o dinheiro. Se você tivesse que escolher, o que é mais importante para você: registros de contas ou compras?

Normalmente, as páginas de “obrigado” não são muito úteis, mas não aqui. Eles oferecem uma oferta óbvia: digite uma senha e receba um cupom (além de rastreamento de pedido, compra mais rápida, etc.). A porcentagem de criação de conta para novos usuários aqui costuma ser superior a 75%.

A página de checkout do comércio eletrônico

Esta é a página do dinheiro. Qualquer aumento em sua página final de checkout fará uma grande diferença em sua conta bancária. Aqui estão alguns princípios que o ajudarão a criar uma etapa final melhor em seu fluxo de checkout.

Peça as informações do cartão de crédito por último

Faça com que as pessoas completem as informações de envio antes de chegar ao faturamento. Isso coloca em ação os princípios de Compromisso e Consistência de Cialdini. Uma vez que as pessoas começam a fazer algo, elas sentem que deveriam terminar.

Eles já foram solicitados a inserir seu nome, e-mail e informações de envio, que, de preferência, são iguais ao endereço de cobrança, de modo que não precisam digitá-lo novamente.

O mesmo princípio, às vezes chamado de técnica foot-in-the-door, se aplica aos campos de formulário. Comece com os campos mais fáceis primeiro, como nome. O campo do número do cartão de crédito é o “mais difícil”, por isso deve vir por último.

Isso é o que você não deve fazer:

Isto é melhor. (Você obtém aqui a partir da página de envio.)

O bom: tem um fluxo claro de 1–2–3 etapas. O campo do nome vem antes dos detalhes do cartão, e o endereço de cobrança (se for o mesmo do envio) não precisa ser inserido novamente.

O ruim: o CTA principal é “Salvar e continuar”. Continuar onde ? Deve ser específico, como “Continuar a revisar” ou qualquer que seja a próxima ação.

Use uma forma de pagamento que se pareça com um cartão de crédito real

Adicione um toque da vida real ao projetar o formulário de pagamento desta forma skeuomórfica:

Você pode obter uma interface para este Skeuocard gratuitamente (!) Para implementar em seu sistema. Experimente uma demonstração aqui.

Faça com que o processo de pagamento pareça seguro

A segurança é uma preocupação séria. Além de realmente tornar os pagamentos seguros com SSL, conte às pessoas sobre isso. Este é um exemplo de um formulário feito para parecer seguro:

Alguns motivos pelos quais funciona:

• Cor de fundo diferente para o campo do número do cartão de crédito.
• Logotipo SSL.
• Declaração escrita: “Secure credit card payment. Este é um pagamento criptografado SSL de 128 bits seguro. ”
• Explicações para expiração e código de segurança.

Observe que, se o seu público não tiver experiência em tecnologia, eles podem não saber o que são SSL ou HTTPS, então fale em termos simples.

Armazene cartões de crédito em seu sistema

Claro, você tem que lidar com a conformidade do PCI e há o risco de ser hackeado, mas você ganhará muito mais dinheiro com os usuários recorrentes. Quando as pessoas não precisam inserir suas informações de faturamento, a compra se torna um processo de um clique.

A Amazon está matando isso em grande parte porque o atrito para os compradores que retornam foi quase completamente removido! O fluxo de checkout mal é um fluxo - é um evento de um clique.

Os visitantes recorrentes têm muito mais probabilidade de comprar do que os novos visitantes, mas isso não é nada em comparação com os compradores recorrentes. Facilite para eles.

Conclusão

Comece seus esforços de otimização de comércio eletrônico no fluxo de finalização da compra. Os ganhos relativos aqui resultarão em somas absolutas muito boas.

Para melhorar a experiência do usuário do seu processo de checkout:

• Esclareça a função “Adicionar ao carrinho”.
• Torne mais fácil para os visitantes alterar ou remover itens do carrinho.
• Simplifique o processo de registro - permita que novos compradores se registrem após a compra.
• Na página de finalização da compra, peça primeiro as informações mais fáceis.