O que você precisa saber para aumentar as conversões de checkout móvel

A indexação mobile-first do Google está aqui. Bem, para alguns sites de qualquer maneira. Para o resto de nós, ele estará aqui em breve, e nossos sites precisam estar em ótima forma se não quisermos que os rankings de busca sejam afetados negativamente pela mudança.

Dito isto, web design responsivo não é novidade. Há anos que criamos experiências personalizadas para usuários de dispositivos móveis, portanto, a maioria de nossos sites deve estar bem preparada para fazer isso... certo?

Aqui está o problema: a pesquisa mostra que o dispositivo dominante através do qual os usuários acessam a web, em média , é o smartphone. É verdade que esse pode não ser o caso de todos os sites, mas os dados indicam que essa é a direção para a qual estamos indo e, portanto, todo web designer deve estar preparado para isso.

No entanto, as conversões de checkout móvel não são boas. Há uma série de razões para isso, mas isso não significa que os designers de m-commerce devam deixar isso de lado.

À medida que mais usuários de dispositivos móveis confiam em seus dispositivos inteligentes para acessar a web, os sites precisam ser mais habilmente projetados para oferecer a eles a experiência de checkout simplificada, conveniente e segura que desejam. No resumo a seguir, vou explorar alguns dos impedimentos à conversão no checkout móvel e focar no que os web designers podem fazer para melhorar a experiência.

Por que as conversões do Google Checkout estão atrasadas?

De acordo com os dados, priorizar a experiência móvel em nossas estratégias de web design é uma jogada inteligente para todos os envolvidos. Com as pessoas gastando cerca de 51% de seu tempo com mídia digital por meio de dispositivos móveis (em oposição a apenas 42% no desktop), os mecanismos de pesquisa e os sites realmente precisam se alinhar às tendências dos usuários.

Agora, enquanto essa estatística pinta uma imagem positiva em apoio ao design de sites com uma abordagem mobile-first, outras estatísticas estão flutuando que podem fazer você desconfiar disso. Eis por que digo isso: o relatório trimestral de comércio eletrônico da Monetate emitido para o primeiro trimestre de 2017 tinha alguns dados realmente interessantes para mostrar.

Nesta primeira tabela, eles dividem a porcentagem de visitantes de sites de comércio eletrônico usando diferentes dispositivos entre o primeiro trimestre de 2016 e o ​​primeiro trimestre de 2017. Como você pode ver, o acesso à Internet por smartphone realmente superou o desktop:

As descobertas da Monetate sobre quais dispositivos são usados ​​para acessar a Internet. (Fonte)

Neste próximo conjunto de dados, podemos ver que a taxa média de conversão para sites de comércio eletrônico não é ótima. Na verdade, o número caiu significativamente desde o primeiro trimestre de 2016.

As descobertas da Monetate sobre as taxas globais de conversão globais de comércio eletrônico (para todos os dispositivos). (Fonte)

Ainda mais chocante é a divisão entre as taxas de conversão de dispositivos:

As descobertas da Monetate sobre as taxas de conversão médias, divididas por dispositivo. (Fonte)

Os smartphones recebem consistentemente menos conversões do que os desktops, apesar de ser o dispositivo predominante pelo qual os usuários acessam a web.

Qual é o problema aqui? Por que conseguimos levar as pessoas a sites para dispositivos móveis, mas as perdemos no checkout?

Em seu relatório de 2017 chamado “Hierarquia de necessidades do celular”, a comScore detalha as cinco principais razões pelas quais as taxas de conversão de checkout móvel são tão baixas:

Aqui está o detalhamento do motivo pelo qual os usuários de dispositivos móveis não convertem:

• 20,2% - preocupações de segurança
• 19,6% - detalhes do produto pouco claros
• 19,6% - incapacidade de abrir várias guias do navegador para comparar
• 19,3% - dificuldade de navegação
• 18,6% — dificuldade em inserir informações.

Essas são razões plausíveis para passar do smartphone para o desktop para concluir uma compra (se eles não tiverem sido completamente desligados da experiência até esse ponto).

Em suma, sabemos que os consumidores desejam acessar a web por meio de seus dispositivos móveis. Também sabemos que as barreiras à conversão os impedem de ficar parados. Então, como lidamos com isso?

10 maneiras de aumentar as conversões de checkout móvel em 2018

Para a maioria dos sites que você projetou, é provável que você não veja muitas mudanças na classificação de pesquisa quando a indexação do Google para dispositivos móveis se tornar oficial.

Seus designs otimizados para dispositivos móveis podem ser “bons o suficiente” para manter seus sites no topo da pesquisa (para começar, pelo menos), mas o que acontece se os visitantes não ficarem por perto para converter? O Google começará a penalizá-lo porque seu site não consegue selar o acordo com a maioria dos visitantes? Com toda a honestidade, esse cenário só ocorrerá em casos extremos, onde o checkout móvel é tão mal construído que as taxas de rejeição disparam e as pessoas param de querer visitar o site.

Digamos que a queda no tráfego no checkout não incorre em penalidades do Google. Isso é ótimo… para fins de SEO. Mas e para os negócios? Seu objetivo é fazer com que os visitantes convertam sem distração e sem atrito. No entanto, isso parece ser o que os visitantes móveis obtêm.

No futuro, seu objetivo precisa ser duplo:

• para projetar websites com a missão e as diretrizes do Google para dispositivos móveis em mente,
• para manter os usuários móveis no site até que concluam uma compra.

Essencialmente, isso significa diminuir a quantidade de trabalho que os usuários precisam fazer e melhorar a visibilidade de suas medidas de segurança. Aqui está o que você pode fazer para criar checkouts móveis para conversões com mais eficiência.

1. Mantenha o essencial na zona do polegar

A pesquisa sobre como os usuários seguram seus telefones celulares já é velha. Sabemos que, independentemente de usarem a abordagem com uma ou duas mãos, certas partes da tela do celular são simplesmente inconvenientes para os usuários móveis alcançarem. E quando a conveniência é esperada durante o checkout, isso é algo que você não quer mexer.

Para usuários de uma mão, o meio da tela é o principal campo de jogo:

Embora os usuários que embalam seus telefones para maior estabilidade tenham algumas opções de quais dedos usar para interagir com a tela, apenas 28% usam o dedo indicador. Então, vamos nos concentrar nos recursos dos usuários do polegar, o que, novamente, significa dar mais destaque à parte central da tela:

Alguns usuários seguram seus telefones com as duas mãos. Como é mais provável que a orientação horizontal seja usada para vídeo, isso não será relevante para o checkout móvel. Portanto, preste atenção em quanto espaço dessa tela é viável ao alcance do polegar do usuário:

Em suma, podemos usar o detalhamento da Smashing Magazine de onde focar o conteúdo, independentemente de segurar um smartphone com a mão esquerda, direita ou duas mãos:

O site da JCPenney é um bom exemplo de como fazer isso:

Embora as informações sejam incluídas na parte superior da página de checkout, os campos de entrada não começam até logo abaixo do meio - diretamente na zona de polegar ideal para usuários de qualquer tipo. Isso garante que os visitantes segurando seus telefones de qualquer maneira e usando dedos diferentes para interagir com ele não terão problemas para acessar os campos do formulário.

2. Minimize o conteúdo para maximizar a velocidade

Fomos ensinados repetidamente que o design minimalista é melhor para sites. Isso é especialmente verdadeiro no checkout móvel, onde uma experiência já lenta ou frustrante pode facilmente levar o cliente ao limite, quando tudo o que ele quer fazer é concluir a compra.

Para maximizar a velocidade durante o processo de checkout móvel, lembre-se das seguintes dicas:

• Adicione apenas o essencial para finalizar a compra. Este não é o momento de tentar upsell ou cross-sell, promover a mídia social ou distrair a ação em questão.
• Mantenha o checkout livre de todas as imagens. Os únicos visuais atraentes que são realmente aceitáveis ​​são marcas de confiança e chamadas para ação (mais sobre isso abaixo).
• Qualquer texto incluído na página deve ser instrutivo ou descritivo por natureza.
• Evite qualquer estilização especial de fontes. Quanto menos “uau” sua página de checkout tiver, mais fácil será para os usuários passarem pelo processo.

Veja o site da Staples como um exemplo de como deve ser um checkout de página única altamente simples:

Como você pode ver, a Staples não atrapalha o processo de checkout com imagens de produtos, branding, navegação, links internos ou qualquer outra coisa que possa (1) distrair a tarefa em questão ou (2) sugar recursos do servidor enquanto ele tentativas de processar as solicitações de seus clientes.

Essa página de checkout não apenas será fácil de acessar, mas também carregará rapidamente e sem problemas todas as vezes - algo que os clientes lembrarão na próxima vez que precisarem fazer uma compra. Ao manter suas páginas de checkout leves no design, você garante uma experiência rápida em todos os aspectos.

3. Deixe-os à vontade com marcas de confiança

Uma marca de confiança é qualquer indicador em um site que permite que os clientes saibam: “Ei, não há absolutamente nada para se preocupar aqui. Estamos mantendo suas informações seguras!”

A única marca de confiança que todo site de m-commerce deve ter? Um certificado SSL. Sem um, a barra de endereço não exibirá o sinal de cadeado ou o nome de domínio https verde – ambos informam aos clientes que o site possui criptografia extra.

Você também pode usar outras marcas de confiança no checkout.

Embora você possa usar logotipos do Norton Security, conformidade com PCI e outros softwares de segurança para informar aos clientes que seu site está protegido, os usuários também podem ser influenciados por nomes reconhecíveis e confiáveis. Quando você pensa sobre isso, isso não é muito diferente de exibir logotipos corporativos ao lado de depoimentos de clientes ou em textos explicativos que ostentam suas conexões de grandes nomes. Se você puder alavancar uma parceria como as mencionadas abaixo, poderá usar a confiança inerente em seu benefício.

Take 6pm, que usa uma opção “Login with Amazon” no checkout:

Esta é uma jogada inteligente para uma marca que definitivamente não tem o reconhecimento de marca que uma empresa como a Amazon tem. Ao oferecer aos clientes uma opção conveniente para fazer login com uma marca que é sinônimo de velocidade, confiabilidade e confiança, a empresa pode agora se tornar conhecida pelas mesmas qualidades de checkout pelas quais a Amazon é celebrada.

Depois, existem páginas de checkout móvel como a da Sephora:

A Sephora também usa essa técnica de alavancar o bom nome de outra marca para criar confiança na hora do checkout. Nesse caso, no entanto, ele apresenta aos clientes duas opções claras: Faça o check-out conosco agora mesmo ou vá para o PayPal, que cuidará de você com segurança. Com a segurança sendo uma grande preocupação que impede a conversão de clientes móveis, esse tipo de marca de confiança e método de pagamento é uma boa jogada por parte da Sephora.

4. Facilitar a Edição

Em geral, nunca afaste um visitante (em qualquer dispositivo) do que ele estiver fazendo em seu site. Já existem distrações suficientes online; a última coisa que eles precisam é que você os aponte em uma direção que os impeça de converter.

No checkout, no entanto, seus clientes podem se sentir compelidos a fazer exatamente isso se decidirem que desejam uma cor, tamanho ou quantidade diferente de um item em seu carrinho de compras. Em vez de deixá-los voltar pelo site, dê a eles uma opção de edição no checkout para mantê-los no lugar.

A Victoria's Secret faz isso bem:

Quando chegarem à tela de checkout, os clientes verão uma lista de itens que estão prestes a comprar. Quando o grande botão “Editar” ao lado de cada item é clicado, uma caixa de luz (mostrada acima) é aberta com as variações do produto. É basicamente a página original do produto, apenas sobreposta no topo do checkout. Os usuários podem ajustar suas opções e salvar suas alterações sem precisar sair da página de checkout.

Se você descobrir, ao revisar as análises do seu site, que os usuários ocasionalmente retrocedem depois de finalizar a compra (você pode ver isso no funil de vendas), adicione esse recurso de edição integrado. Ao evitar esse retrocesso desnecessário, você pode economizar conversões perdidas de clientes confusos ou distraídos.

5. Ative as opções de check-out expresso

Quando os consumidores fazem check-out em um site de comércio eletrônico por meio de um dispositivo desktop, provavelmente não é grande coisa se eles tiverem que inserir seu nome de usuário, endereço de e-mail ou informações de pagamento a cada vez. Claro, se isso puder ser evitado, eles encontrarão maneiras de contornar isso (como permitir que o site salve suas informações ou usar um gerenciador de senhas como o LastPass).

Mas no celular, reinserir essas informações é uma dor, especialmente se os formulários de contato não forem bem otimizados (mais sobre isso abaixo). Portanto, para facilitar o processo de login e checkout para usuários móveis, considere maneiras de simplificar o processo:

• Permitir o check-out do hóspede.
• Permita o checkout rápido com um clique.
• Ative o login com um clique de uma fonte confiável, como o Facebook.
• Ative o pagamento no site de um provedor de pagamento confiável, como PayPal, Google Wallet ou Stripe.

Uma das coisas boas do processo de checkout já conveniente da Sephora é que os clientes podem automatizar o processo de login daqui para frente com uma simples alternância:

Quando os clientes móveis estão com pressa e querem chegar ao próximo estágio de checkout, o recurso de login automático da Sephora definitivamente seria útil e incentivaria os clientes a comprar com mais frequência no site móvel.

Muitos sites para dispositivos móveis esperam até a parte inferior da página de login para informar aos clientes quais tipos de opções eles têm para fazer o check-out. Mas, em vez de surpreendê-los tarde, a Victoria's Secret exibe essas informações em grandes botões em negrito bem no topo:

Os clientes têm a opção de fazer login com sua conta, fazer o check-out como convidado ou ir diretamente para o PayPal. Eles não ficam surpresos ao descobrir mais tarde que seu checkout ou método de pagamento preferido não é oferecido.

Eu também amo muito como a Victoria's Secret escolheu fazer isso. Há algo de bom no botão colorido “Entrar” ao lado do botão “Fazer check-out como convidado” mais suave. Por um lado, adiciona um toque de cores da marca Victoria's Secret ao checkout, o que é sempre um toque agradável. Mas a forma como os botões são coloridos também deixa claro qual ele quer que seja a ação principal (ou seja, criar uma conta e entrar).

6. Adicione farinha de rosca

Quando você envia clientes móveis para o checkout, a última coisa que você quer é dar a eles distrações desnecessárias. É por isso que a barra de navegação padrão do site (ou menu de hambúrguer) normalmente é removida desta página.

No entanto, o processo de checkout pode ser intimidador se os clientes não souberem o que está por vir. Quantos formulários eles precisarão preencher? Que tipo de informação é necessária? Eles terão a chance de revisar seu pedido antes de enviar os detalhes de pagamento?

Se você projetou um checkout de várias páginas, acalme os medos de seus clientes definindo cada etapa com navegação de trilha de pão claramente rotulada na parte superior da página. Além disso, isso dará ao seu checkout um design mais limpo, reduzindo o número de cliques e a rolagem por página.

Hayneedle tem um belo exemplo de navegação por migalhas de pão em ação:

Você pode ver que três etapas estão divididas e claramente rotuladas. Não há absolutamente nenhuma dúvida aqui sobre o que os usuários encontrarão nessas etapas, o que ajudará a tranquilizá-los. Três etapas parecem bastante razoáveis ​​e os usuários terão a chance de revisar o pedido mais uma vez antes de concluir a compra.

A Sephora tem um estilo alternativo de “migalhas de pão” em seu checkout:

Em vez de colocar cada “migalha de pão” no topo da página de checkout, os clientes da Sephora podem ver qual é o próximo passo, bem como quantos mais virão à medida que avançam no formulário.

Esta é uma boa opção se você preferir não tornar a navegação superior ou as migalhas de pão pegajosas. Em vez disso, você pode priorizar o call to action (CTA), que pode motivar melhor o cliente a descer a página e concluir a compra.

Eu acho que esses dois designs de migalhas de pão são válidos, no entanto. Portanto, pode valer a pena testá-los A/B se você não tiver certeza do que levaria a mais conversões para seus visitantes.

7. Formate o formulário de checkout com sabedoria

Um bom design de formulário de checkout móvel segue uma fórmula bastante rígida, o que não é surpreendente. Embora existam maneiras de dobrar as regras no desktop em termos de estruturação do formulário, o número de etapas por página, a inclusão de imagens e assim por diante, você realmente não tem esse tipo de flexibilidade no celular.

Em vez disso, você precisará ser meticuloso ao criar o formulário:

• Projete cada campo do formulário de checkout para que ele se estenda por toda a largura do site.
• Limite os campos apenas ao essencial.
• Rotule claramente cada campo fora e acima dele.
• Use pelo menos uma fonte de 16 pontos de pixels.
• Formate cada campo para que seja grande o suficiente para tocar sem aplicar zoom.
• Use uma marca reconhecível para indicar quando algo é necessário (como um asterisco).
• Sempre informe os usuários quando um erro foi cometido imediatamente após a informação ter sido inserida em um campo.
• Coloque a chamada para ação na parte inferior do formulário.

Como o formulário de checkout é o elemento mais importante que move os clientes pelo processo de checkout, você não pode se dar ao luxo de mexer com uma fórmula testada e comprovada. Se os usuários não conseguirem ir de cima para baixo com facilidade, se os campos forem muito difíceis de interagir ou se a funcionalidade do próprio formulário estiver repleta de erros, então você pode dar um beijo em suas compras móveis (e talvez suas compras em geral) adeus.

Crutchfield mostra como criar campos de formulário muito fáceis de usar em dispositivos móveis:

Como você pode ver, cada campo é grande o suficiente para clicar (mesmo com dedos gordos). O contorno em negrito ao redor do campo selecionado também é um toque agradável. Para um cliente multitarefa e ou distraído por algo ao seu redor, retornar ao formulário de checkout seria muito mais fácil com esse tipo de formato.

A Sephora, novamente, lida com o checkout móvel da maneira certa. Nesse caso, quero chamar sua atenção para o botão acinzentado “Fazer pedido”:

O botão serve como um indicador para os clientes de que eles ainda não estão prontos para enviar suas informações de compra, o que é ótimo. Mesmo que o formulário tenha um design bonito - tudo está bem rotulado, os campos são grandes e o formulário é organizado logicamente - os usuários móveis podem acidentalmente rolar muito além de um campo e não saber até clicar no botão de call-to-action .

Se você puder evitar que os usuários recebam o temido erro de “informação ausente”, você fará um trabalho melhor ao manter suas compras.

8. Simplifique a entrada do formulário

Aprofundando um pouco mais nesses formulários de contato, vamos ver como você pode simplificar a entrada de dados no celular:

• Permita que os clientes usem a funcionalidade de preenchimento automático do navegador para preencher formulários.
• Inclua uma diretiva HTML tabindex para permitir que os clientes toquem em uma seta para cima e para baixo no formulário. Isso mantém os polegares sempre dentro de um alcance confortável no smartphone, em vez de alcançar constantemente um novo campo.
• Adicione uma caixa de seleção que copia automaticamente as informações do endereço de cobrança para os campos de envio.
• Altere o teclado de acordo com o tipo de campo que está sendo digitado.

Um exemplo disso é o site móvel da Bass Pro Shops:

Para começar, o teclado usa a funcionalidade de guia (veja as setas para cima e para baixo logo acima do teclado). Para clientes com dedos curtos ou impacientes que só querem digitar no teclado, as abas ajudam a manter as mãos em um só lugar, agilizando o checkout.

Além disso, quando os clientes acessam um campo somente de números (como para o número de telefone), o teclado muda automaticamente, para que eles não precisem alternar manualmente. Novamente, essa é outra maneira de aumentar a conveniência de fazer uma compra no celular.

O checkout móvel da Amazon inclui uma caixa de seleção rápida que simplifica o envio de informações de cobrança pelos clientes:

Como vimos com o design do formulário de checkout móvel, mais simples é sempre melhor. Obviamente, você sempre precisará coletar determinados detalhes dos clientes a cada vez (a menos que a conta deles tenha salvado essas informações). No entanto, se você puder fornecer uma alternância rápida ou caixa de seleção que permita copiar dados de um formulário para outro, faça isso.

9. Não economize no CTA

Ao projetar um checkout de desktop, suas principais preocupações com o CTA são coisas como o posicionamento estratégico do botão e a escolha de uma cor atraente para chamar a atenção para ele.

No celular, no entanto, você também precisa pensar no tamanho – e não apenas no espaço que ocupa na tela. Lembre-se da zona do polegar e das várias maneiras pelas quais os usuários seguram o telefone. Certifique-se de que o botão seja largo o suficiente para que qualquer usuário possa clicar nele facilmente sem precisar alterar a posição da mão.

Portanto, seu objetivo deve ser criar botões que (1) fiquem na parte inferior da página de checkout móvel e (2) se estendam da esquerda para a direita, como é o caso do site móvel da Staples:

Não importa quem está fazendo a compra - um canhoto, um destro ou um berço de duas mãos - esse botão será de fácil acesso.

De todos os aprimoramentos de checkout móvel que abordamos hoje, o CTA é o mais fácil de abordar. Faça-o grande, dê-lhe uma cor distinta, coloque-o na parte inferior da tela do celular e faça-o abranger toda a largura. Em outras palavras, não faça os clientes trabalharem duro para dar o passo final em uma compra.

10. Ofereça uma saída alternativa

Finalmente, dê aos clientes uma saída alternativa.

Digamos que eles estejam comprando em um site para celular, adicionando itens ao carrinho, mas algo não está bem com eles e eles não querem fazer a compra. Você fez todo o possível para garantir a eles uma experiência de pagamento limpa, fácil e segura, mas eles simplesmente não estão confiantes em fazer um pagamento no telefone.

Em vez de apenas esperar que você não perca totalmente a compra, dê a eles a chance de salvá-la para mais tarde. Dessa forma, se eles realmente estiverem interessados ​​em comprar seu produto, eles podem revisitar no desktop e puxar o gatilho. Não é o ideal, porque você deseja mantê-los no celular, mas a opção é boa para clientes que simplesmente não podem ser salvos.

Como você pode ver no site móvel da LL Bean, há uma opção no checkout para “Move to Wish List”:

O que é bom nisso é que o LL Bean claramente não quer que a navegação na lista de desejos ou a remoção de um item seja uma ação primária. Se “Mover para a lista de desejos” fosse mostrado como um grande botão de CTA em negrito, mais clientes poderiam optar por essa alternativa aparentemente mais segura. Como foi projetado agora, é mais do tipo: “Ei, não queremos que você faça nada com o qual não se sinta confortável. Isto está aqui apenas no caso.”

Embora menos opções sejam geralmente melhores em web design, isso pode ser algo a ser explorado se seu checkout tiver uma alta taxa de abandono de carrinho em dispositivos móveis.

Empacotando

À medida que mais visitantes móveis migram para o seu site, cada etapa que leva à conversão – incluindo a fase de checkout – precisa ser otimizada para conveniência, velocidade e segurança. Se o seu checkout não for adequadamente projetado para as necessidades e expectativas específicas dos usuários de dispositivos móveis, você descobrirá que essas taxas de conversão caem ou voltam para o desktop - e essa não é a direção que você deseja que as coisas sigam, especialmente se o Google estiver pressionando todos nós em direção a um mundo mobile-first.