O que fazer e o que não fazer no design de carrinho de compras para celular: 6 desmontagens práticas (guia detalhado de mCommerce)

Você já sabe que a página do carrinho é uma engrenagem vital em sua máquina de comércio eletrônico. Mas as páginas do carrinho para celular - a página que os visitantes veem antes de finalizarem a compra - estão fazendo a diferença?

Na Growcode, descobrimos repetidamente que as páginas de carrinho são uma das partes mais ignoradas das lojas de nossos clientes, especialmente quando se trata de dispositivos móveis. E as consequências são significativas, afetando seriamente seus resultados financeiros.

Espera-se que as vendas do comércio móvel respondam por 52,9% de todas as vendas do comércio eletrônico até 2021. Ainda assim, em 2017, a taxa média de abandono do carrinho de compras móvel era de 85,65%.

Isso significa que, de todos os clientes que adicionaram um produto ou produtos a um carrinho, quase 9 em cada 10 saíram sem concluir a compra.

# Espera-se que as vendas do comércio móvel respondam por 52,9% de todas as vendas do comércio eletrônico até 2021. #EcommerceStats Click To Tweet
Leads móveis após abandono do carrinho. Lembre-se de que os dados agregados, como no gráfico acima, não levam em consideração diferenças consideráveis ​​entre os setores. Fonte.
Nesta postagem, vamos dar uma olhada em seis exemplos de páginas de revisão de carrinho. Os três primeiros utilizam práticas de design sólidas que você deve considerar replicar, enquanto os exemplos restantes incluem elementos que devem ser evitados.

Também vale a pena mencionar que, embora estejamos nos concentrando nos erros de certos designs de carrinhos de compras, isso não significa que eles sejam completamente terríveis no geral. Vamos mergulhar nas práticas recomendadas para carrinhos de compras para dispositivos móveis.

1. Faça: Amazon

O carrinho de compras da Amazon para sites móveis é um exemplo brilhante de um design de carrinho de compras móvel bem feito. Não está lotado, mas também não é excessivamente mínimo. Incluem-se todos os elementos necessários, sem desviar a atenção do CTA principal. Há também uma série de “add-ons” discretos que podem ser selecionados para aumentar o valor do pedido, desde embalagens para presentes até itens relacionados.
Carrinho de compras móvel da Amazon ux. Todos os elementos necessários estão incluídos.

Dica # 1: um CTA claro no topo da página definido em uma cor contrastante. Conforme o usuário rola para baixo, este CTA continua a flutuar na parte superior da tela.

#Mobile # dica de otimização de carrinho: tenha um #CTA claro no topo da página definido em uma cor contrastante. #ecommerce #optimization Clique para tweetar
O CTA flutua na parte superior da tela quando o usuário rola para baixo.
Dica nº 2: o CTA ocupa toda a tela, então é fácil tocá-lo para usuários destros e canhotos.
Dica nº 3: Reiteração do frete grátis no topo da página para dissipar dúvidas e “adoçar o negócio”.
Dica # 4: imagens e nomes de produtos vinculam à página de descrição para aqueles que desejam verificar novamente os detalhes do produto.
Dica 5: Existem botões claros e fáceis de tocar para alterar o valor do pedido, excluir itens e salvá-los para mais tarde.
Dica # 6: a notificação “Em estoque” tranquiliza os clientes de que eles não terão que esperar pelo produto.
#Mobile # dica de otimização do carrinho: A notificação 'Em estoque' garante aos #clientes que eles não terão que esperar pelo produto. #ecommerce Clique para tweetar
Dica # 7: Amazon mostra produtos que foram “salvos para mais tarde”, com um botão fácil “Mover para o carrinho” embaixo.
Os itens salvos para mais tarde são claramente visíveis.
Dica # 8: Inclusão de produtos relacionados - “Os clientes também compraram” - que podem ser adicionados ao carrinho sem sair da página. Mais para o design deste elemento, já que o terceiro item não é totalmente mostrado e, portanto, sugere um movimento de deslizar.
Dica # 9: muito espaço em branco e a ausência de detalhes de “preenchimento” desnecessários. A Amazon incluiu apenas o que é absolutamente necessário.
Dica # 10: Link para o “Topo da página” no rodapé.

Quer mais informações como essa?

Obtenha dicas semanais de comércio eletrônico, estratégias e conhecimentos líderes do setor.
Entregue direto na sua caixa de entrada.

em Li a política de privacidade e aceito os termos e condições da newsletter.

Selecione esta caixa de seleção para continuar

Uau! Você acabou de se inscrever. Verifique sua caixa de entrada para confirmar a inscrição.

2. Faça: grampos

A beleza do carrinho da Staples é sua simplicidade. Os produtos podem ser revisados ​​em segundos. O resultado é uma maior ênfase nas opções incluídas.
A beleza do carrinho da Staples é sua simplicidade. Um dos melhores carrinhos de comércio eletrônico móvel.
Dica nº 1: como a Amazon, chama a atenção o fato de que o produto será enviado gratuitamente, tanto no topo da página quanto no resumo do pagamento. Além disso, o texto está em verde, o que faz com que a notificação se destaque ainda mais. A data exata de “entrega prevista” também é mostrada.
Dica # 2: o design é ultra-simples e o uso excelente do espaço em branco é feito. Os clientes podem verificar rapidamente seus pedidos, fazer as alterações necessárias sem sair da página e verificar o total.
Dica nº 3: a caixa “Cupons e recompensas” é discreta. A importante opção de “retirar na loja” também é fornecida sem desviar a atenção do CTA principal.
Dica nº 4: a palavra “Seguro” está incluída no CTA de checkout.
Dica # 5: o rodapé foi removido.

Algo errado? Embora o Staples acerte muito, um problema com o design desse carrinho é a simplicidade do cabeçalho, que não inclui um menu expansível ou formulário de pesquisa. Se uma empresa vende apenas um produto, esta pode ser uma solução viável. Para sites de vários produtos, no entanto, sempre vale a pena dar aos clientes a opção de navegar novamente, se quiserem.

3. Faça: Sears

A Sears oferece muitas opções adicionais - incluindo planos de pagamento, retirada na loja, opções de presentes e promoções. Seu carrinho é um bom exemplo para varejistas que desejam combinar muitos elementos diferentes em uma página sem arruinar o design que impede o abandono do carrinho de compras móvel.
O design do carrinho móvel da Sears contém muitos elementos, mas ainda o mantém simples.
Dica nº 1: um CTA é incluído no topo da página ao lado do subtotal. Um ícone de cadeado aumenta ainda mais a confiança e a opção de finalizar a compra usando o Paypal também é oferecida.
Dica # 2: como um item caro, os planos de pagamento são incluídos para dissipar qualquer hesitação neste estágio.
Dica nº 3: a economia nas vendas está incluída em vermelho na seção de resumo do pedido, incentivando os clientes a clicar para finalizar a compra, criando urgência e reduzindo dúvidas.
Dica # 4: um link é fornecido para fazer login no esquema de fidelidade, que atua como um incentivo adicional para novos clientes. É importante ressaltar que este não é um link para abrir uma conta de loja sem benefícios, o que seria melhor incorporar no formulário de checkout.
Dica # 5: um selo de “check-out seguro” está incluído na parte inferior da página.
Algo errado? É um pouco demais e o efeito provavelmente é a dispersão da atenção de alguns clientes. Não há necessidade de oferecer assinaturas de revistas e um link para o programa de fidelidade na parte inferior, por exemplo.

4. Não faça: Vitacost

Embora o Vitacost utilize muitos dos elementos descritos acima, sua implementação costuma ser falha. O resultado é uma página de carrinho mal projetada que provavelmente teria um aumento nas conversões do carrinho de compras com alguns pequenos ajustes.
Vitacost utiliza muitos dos elementos descritos acima, mas sua implementação costuma ser falha.
Erro # 1: inclusão de uma barra de pesquisa intrusiva que leva as pessoas para fora da página do carrinho. É uma boa ideia incluir um ícone de barra de pesquisa (como no exemplo da Amazon) para as pessoas que desejam continuar navegando. Mas não o torne muito grande.

#Mobile # dica de otimização do carrinho: Não inclua uma barra de pesquisa intrusiva que afaste as pessoas do carrinho. #ecommerce Clique para tweetar
Erro # 2: inclusão automática de produto “BOGO” pouco claro (compre um e leve a metade do preço) que pode confundir ou irritar os clientes.
MIstake # 3: barra de código promocional obstrutiva. Isso desvia a atenção do CTA principal e incentiva os clientes a deixar o carrinho para pesquisar promoções online. As caixas promocionais devem ser visíveis, mas não excessivamente. Eles certamente deveriam estar atrás de um CTA.
MIstake # 4: O custo de envio é definido como "TBD", o que gera dúvidas (em geral, você deve evitar abreviações)
Erro # 5: o rodapé é muito grande. A Vitacost deseja que os clientes concluam a compra ou baixem o aplicativo?
Erro nº 6: as opções de produtos - para remover ou aumentar itens - são muito pequenas e difíceis de tocar.
Erro # 7: a barra flutuante, que pode ser vista na parte inferior da captura de tela, ocupa muito espaço na tela em telefones menores.

5. Não faça: Lonely Planet

Onde a página Staples utiliza efetivamente um design minimalista, o Lonely Planet exclui muitos elementos. Não há recursos para reduzir a hesitação e construir confiança, nem recomendações ou sugestões de produtos para aumentar o valor da compra e muitos dos botões são difíceis de clicar.
O Lonely Planet exclui muitos elementos. Eles ficam com muito espaço que poderia ser usado para melhorar o fluxo de transporte.
Erro # 1: o espaço é mal utilizado. Seria melhor fazer com que o carrinho ocupasse a página inteira e utilizasse o espaço em branco, em vez de abrir o conteúdo atual.
Erro # 2: nenhuma informação sobre entrega, descontos ou opções de pagamento está incluída. Isso provavelmente diminuiria as dúvidas e temores de clientes incertos.
Erro # 3: não há sugestões de produtos relacionados.
Erro # 4: os botões para aumentar ou reduzir o número de produtos são tão pequenos que praticamente não podem ser clicados.
Erro # 5: O CTA - “Proceed to Checkout” - não parece um botão.
Erro # 6: o formato pop-out torna difícil tocar no CTA da esquerda. Deixe os clientes usarem os polegares!

6. Não faça: Nike

O principal problema com a página da Nike é a maneira como vários elementos foram incluídos aleatoriamente, com pouca preocupação aparente sobre como eles poderiam funcionar se colocados juntos ou em pontos diferentes da página. Também há confusão sobre o CTA.
Na página da Nike, vários elementos foram incluídos aleatoriamente.
Erro # 1: descontos de envio estão disponíveis apenas para membros. Isso adiciona atrito desnecessário e provavelmente funcionará como um desincentivo para os clientes que não desejam aderir, que pensarão que estão perdendo. Ofereça aos clientes a opção de fazer login na fase de finalização da compra, juntamente com a opção de se inscrever para novos clientes. A página do carrinho deve ser exclusivamente para revisão de pedidos.

Erro # 2: o uso de dois CTAs. Quase sempre é melhor ter um CTA nas páginas do carrinho porque você está buscando um curso de ação específico. A única razão para oferecer vários CTAs é dar aos clientes a opção entre diferentes opções de checkout. Seria melhor mostrar um formulário adequado (um formulário de login ou um formulário de endereço) depois que um usuário fornecer seu endereço de e-mail.

Erro # 3: “Tipos de pagamento aceitos” não estão listados perto do CTA de checkout. É uma boa ideia incluir esses emblemas na página do carrinho, especialmente se você não for tão conhecido quanto a Nike, mas o rodapé não é o lugar para eles.

Erro nº 4: o termo "convidado" pode causar confusão se os clientes não se identificarem dessa forma (você pode se tornar um membro se for fazer compras como convidado?)

Concluindo o design de carrinho de compras para celular

A maioria das páginas de carrinho de alto desempenho tem um design limpo e simples, mas também fornece o tipo e a quantidade corretos de informações. Ao redesenhar a sua, lembre-se de que o objetivo das páginas do carrinho é que os compradores revisem e confirmem seus pedidos, removendo todos os itens desnecessários e adicionando produtos semelhantes. Quaisquer outras ações desejadas, como fazer login em sua conta ou inscrever-se, podem ser deixadas para a página de checkout. Portanto, lembre-se dessas práticas recomendadas de carrinho de compras móvel e outras técnicas de otimização de carrinho de compras.

E lembre-se, o teste de divisão é a chave! Use as táticas descritas aqui para formar seus próprios testes e se comprometer a ajustar os elementos a longo prazo. Se você fizer isso, quase certamente verá aumentos constantes em suas conversões.

Obtenha a lista de verificação de otimização de comércio eletrônico de 115 pontos

Com base em oito anos de experiência, reunimos todos os nossos principais insights em um livro: A lista de verificação de otimização de comércio eletrônico de uma loja online de 7 pessoas. Se você deseja aumentar o desempenho de todas as suas páginas - da página inicial ao checkout, pegue sua cópia aqui.