Checkout de e-commerce: como estruturar carrinho, frete e cadastro

Um checkout de e-commerce bem estruturado começa pelo carrinho: o cliente confere o pedido, vê o valor e o prazo do frete e encontra um botão claro para avançar. Depois vem um cadastro curto, com as etapas numeradas e o atendimento à vista. As telas de seis grandes lojas, capturadas em abril de 2020, mostram cada ponto na prática.

O que a estrutura do checkout precisa ter?

A estrutura do checkout precisa confirmar a decisão de quem clicou em comprar e tirar do caminho o que atrasa o pedido. Seis elementos resolvem a maior parte disso:

• Carrinho antes do cadastro: a pessoa revisa o pedido antes de informar CPF, e-mail e endereço.
• Frete com valor e prazo: os dois números aparecem no carrinho, logo depois do CEP.
• Um botão principal: o próximo passo fica evidente, e há um caminho de volta para continuar comprando.
• Cadastro curto: só os dados necessários para a compra, com opção de comprar como visitante quando a operação permite.
• Etapas numeradas: identificação, endereço e pagamento à vista, para o cliente saber quanto falta.
• Atendimento visível: telefone, central de ajuda ou WhatsApp no topo da página, para quem tem dúvida.

Como a análise das seis lojas foi feita

As telas foram capturadas em 17 de abril de 2020, cerca de três semanas antes do Dia das Mães daquele ano. Com shoppings e lojas de rua fechados na maior parte do país, o movimento da data foi para as lojas virtuais. A análise se concentra no carrinho e no checkout de O Boticário, Casas Bahia, Amaro, Fast Shop, Giuliana Flores e Westwing.

É uma leitura feita de fora, por quem navega como cliente. Os números de analytics e os mapas de calor ficam com cada empresa, então toda observação aqui é uma hipótese, no formato de uma análise heurística. Os sites mudaram desde então. Os pontos observados continuam úteis para revisar o seu checkout.

Uma pergunta guiou a leitura de todas as telas: a página aproveita a consistência do comportamento do visitante para levá-lo ao próximo passo? Quem colocou um produto no carrinho já deu o primeiro passo e tende a continuar, desde que cada tela confirme a decisão. É o princípio do compromisso e da coerência, descrito por Robert Cialdini no livro As Armas da Persuasão.

O carrinho e o cadastro de seis lojas, tela por tela

Todas as seis lojas levavam o cliente a um cadastro antes do pagamento. A diferença estava na ordem das telas e no que cada uma mostrava.

O Boticário: carrinho claro e prazo de entrega na etapa seguinte

O carrinho de O Boticário, marca de cosméticos, deixava o próximo passo evidente. Dois botões Fechar pedido, um acima e outro abaixo do resumo, apontavam o caminho, e o link Escolher mais produtos mantinha aberta a volta para a loja. Essa volta ajuda a aumentar o pedido e a reduzir o abandono.

O produto sugerido logo abaixo do item era um álcool em gel, sinal de que a loja ajustou a oferta ao momento. À direita ficavam o CEP de entrega, com opção de alterar, e o valor do frete. O prazo de entrega, uma das principais dúvidas de quem compra para uma data, só aparecia na tela seguinte.

Do carrinho, o cliente ia direto para o cadastro, com dados pessoais, entrega e pagamento listados na mesma página. Oferecer a compra como visitante pode evitar a desistência nesse ponto.

Casas Bahia: frete completo no carrinho e etapas numeradas

A Casas Bahia, rede com ampla presença em lojas físicas e forte no e-commerce, levava o cliente direto do botão de compra para o carrinho. Ali apareciam os valores, os prazos e as opções de frete. No cabeçalho, um link para a central de atendimento dava saída a quem tinha dúvida.

Dois pontos pediam explicação. A opção de retirada na loja continuava disponível com a maioria das lojas físicas fechadas, e a página deixava em aberto se o serviço estava funcionando. Um aviso em amarelo sobre ofertas também gerava perguntas: quais ofertas? O cliente perde alguma coisa se sair dali?

Depois do carrinho vinha a identificação, com compra apenas para quem tem cadastro. As etapas seguintes, endereço e pagamento, aconteciam na mesma tela e apareciam numeradas no topo, o que facilita a navegação.

Amaro: sacola em aba lateral e compra pelo WhatsApp

Na Amaro, loja de moda, o clique em comprar abria uma aba lateral com a sacola, e a página de produto continuava ao fundo. A solução mantém outros produtos à vista e favorece novas escolhas. O custo é o espaço: sobra pouca área para informação, e no celular a aba cobre a tela inteira.

A loja também oferecia compra pelo WhatsApp, modalidade comum em restaurantes naquele período e fácil de adotar em outros setores. Para fechar o pedido pelo site, o cadastro era obrigatório e começava pelo CPF ou pelo e-mail. Moda era um setor de compra muito ligada à loja física, e o comportamento de quem migra para o site pode variar bastante.

Fast Shop: CPF e endereço antes do resumo do pedido

A Fast Shop, loja de eletrônicos e eletrodomésticos, dispensava o carrinho. O clique em comprar levava a uma tela que pedia CPF ou CNPJ, e só depois de informar os dados e o endereço o cliente via o resumo do pedido. O resultado dessa escolha só a loja conhece. A hipótese de quem olha de fora é que ela pode reduzir conversões, porque pede dados antes de mostrar frete, prazo e descontos.

O caminho seguinte também exigia atenção. Para avançar, era preciso selecionar o endereço, e faltava um botão ou uma indicação clara disso. Com o endereço escolhido, surgia o tipo de entrega, que também precisava ser selecionado, com poucas pistas na tela.

No celular, o problema diminuía, porque as etapas apareciam uma por vez. Um carrinho no começo do fluxo deixaria a pessoa revisar o pedido antes de se sentir conduzida ao pagamento. Isso pode reduzir o abandono e aumentar a chance de mais produtos na cesta.

Giuliana Flores: data de entrega e vários destinatários no mesmo pedido

A Giuliana Flores, que entrega flores compradas pela internet, pedia endereço, data e horário de entrega em um pop-up logo após o clique em comprar. Na navegação de teste, depois dessa escolha o site voltou para a página de produto e exigiu um novo clique em comprar, possivelmente por um erro.

O carrinho mostrava o preço do frete e os descontos. Um recurso se destacava: incluir pedidos para outros destinatários na mesma compra. Quem quer presentear várias pessoas resolve tudo de uma vez, decisão que parece nascer da observação do comportamento do cliente.

O cadastro acontecia em uma só tela, com as etapas listadas. A lista dá ao visitante a medida de quanta informação ele vai preencher.

Westwing: data de entrega no carrinho e passo a passo no cadastro

O carrinho da loja da Westwing informava a taxa de entrega e o intervalo de datas em que o produto chegaria. A tela seguinte, de cadastro, trazia no topo o passo a passo da compra: endereço, pagamento e dados do pedido. Esse indicador de etapas, uma versão das migalhas de pão (breadcrumbs), ajuda em qualquer página da loja e mais ainda no checkout.

O ponto de atenção ficava antes do carrinho. O endereço principal da marca, primeiro resultado no Google e provável porta de entrada da maioria dos visitantes, exigia cadastro logo na chegada. Ali funcionava o clube de compras. A loja aberta ficava em outro endereço (now.westwing.com.br, na época), e só depois do cadastro as abas no topo permitiam escolher entre clube e loja. A decisão pode estar ligada ao posicionamento de uma marca mais exclusiva.

Resumo: o que ajudava e o que atrapalhava em cada checkout

A tabela reúne, loja por loja, o principal acerto e o principal ponto de atenção observados nas telas de abril de 2020.

O que um pico de demanda revela sobre a loja virtual

Um pico de demanda expõe as lacunas da estrutura de e-commerce, e 2020 trouxe dois exemplos seguidos. A Páscoa, em 12 de abril, foi a primeira grande data do varejo depois do início da quarentena no Brasil. As lojas tiveram poucos dias para preparar a operação online para um volume de pedidos muito acima do de outros anos.

O chocolate era comprado sobretudo em loja física. Uma pesquisa da MetrixLab encomendada pela Mondelez, noticiada pelo InfoMoney em outubro de 2018, mostrava a distância entre consumo e compra online: o chocolate era consumido 3,8 vezes por semana e comprado pela internet 2,7 vezes por mês, em média. Na Páscoa de 2020, muitas vendas aconteceram por WhatsApp e por aplicativos de entrega, e algumas lojas encerraram os pedidos antes do domingo.

No Dia das Mães, em 10 de maio, a maioria das lojas voltadas à data já tinha estrutura de venda online. A dúvida do cliente era outra: o prazo de entrega seria cumprido? Como as encomendas eram manuseadas? Que medidas de prevenção cada loja adotava? Nenhum dos seis checkouts analisados respondia a essas perguntas, e uma explicação curta no carrinho seria um ponto de confiança a mais.

A lição vale para qualquer data de pico, como a Black Friday: liste as dúvidas do cliente naquele momento e responda a elas no carrinho. A comunicação antes da visita também conta. Em 2020, com quase toda compra feita pela internet, mensagens de e-mail marketing e de SMS ganharam mais atenção do público.

Como descobrir onde o seu checkout perde pedidos

A análise de fora aponta hipóteses. A confirmação vem dos dados da sua loja, com duas ferramentas:

• GA4: mostra em qual etapa do checkout as pessoas desistem. Veja como montar uma análise de funil.
• Microsoft Clarity: gratuito, grava as sessões e gera mapas de calor dessas etapas, para ver onde o cliente clica, hesita e sai.

Em 2020, a ferramenta de mapa de calor mais citada era o Hotjar, que hoje pertence à Contentsquare e não aceita mais contas novas.

Com a etapa problemática identificada, ajuste um ponto por vez e compare o resultado. Dois guias ajudam nessa fase: como reduzir o abandono de carrinho e como apresentar frete e devolução na página de produto e no carrinho.

Perguntas frequentes

O carrinho deve aparecer antes do cadastro?

Sim. O carrinho deixa a pessoa revisar o pedido e ver frete, prazo e descontos antes de informar CPF e endereço. Na análise, a loja que pedia os dados primeiro transmitia menos confiança. Com o carrinho no começo, o cliente também tem mais chance de incluir outros produtos antes de pagar.

O que precisa aparecer no carrinho de compras?

O produto com preço e quantidade, o valor e o prazo do frete, os descontos, o total e um botão principal para fechar o pedido. Um link para continuar comprando e um canal de atendimento à vista completam a tela. Opções que dependem do momento, como a retirada na loja, pedem explicação.

Exigir cadastro atrapalha a venda?

Pode atrapalhar. As seis lojas analisadas levavam ao cadastro antes do pagamento, e esse é um ponto em que o cliente pode desistir. Oferecer a compra como visitante evita parte dessa perda. Se o cadastro for necessário, peça só os dados da compra e mostre as etapas numeradas, para a pessoa saber quanto falta.

Como saber em qual etapa do checkout os clientes desistem?

Use o GA4 para ver a etapa em que as pessoas saem e o Microsoft Clarity, gratuito, para assistir às gravações de sessão e ver os mapas de calor dessas telas. Os dados confirmam ou derrubam as hipóteses levantadas em uma análise visual e mostram por onde começar os ajustes.

Carrinho e checkout revisados com os dados da sua loja

A Fysi Lab Digital faz otimização de conversão com mapa de calor, gravação de sessão, hipóteses e teste A/B, e também cria lojas virtuais. O atendimento é online, para todo o Brasil. Veja como funciona o serviço de otimização de conversão, conheça a criação de lojas virtuais e os projetos do portfólio.