Digitar endereço, CPF e número de cartão em uma tela pequena já é chato em condições ideais. Agora imagine essa tarefa no ônibus, com uma mão só e a internet oscilando. Por isso, um bom mobile checkout reduz ao máximo o trabalho do cliente.
Felizmente, a maior parte dos ajustes é simples. Se você já seguiu o Mobile First na prática, este é o próximo passo: levar o mesmo cuidado para a etapa em que o dinheiro entra.
Abra o teclado certo em cada campo
Esse é o ajuste de maior retorno. Quando o cliente toca no campo de CEP e aparece o teclado de letras, ele perde tempo e erra mais. Portanto, peça ao desenvolvedor que configure o atributo inputmode em cada campo:
- CEP, CPF, cartão e código de segurança: teclado numérico.
- Telefone: teclado de telefone.
- E-mail: teclado com arroba e ponto à mão.
- Nome e endereço: teclado comum, com primeira letra maiúscula automática no nome.
Deixe o celular preencher por ele
O próprio aparelho já guarda boa parte dos dados do cliente. Assim, com o atributo autocomplete configurado corretamente, o navegador sugere nome, e-mail, telefone, CEP e até o cartão salvo.
Nesse caso, use os valores padronizados, como name, email, tel, postal-code, cc-number e cc-exp. Além disso, o guia do web.dev sobre formulários de pagamento e endereço detalha as boas práticas e serve como referência para o time técnico.
Use o CEP para poupar digitação
Peça primeiro o CEP e, em seguida, preencha rua, bairro, cidade e estado automaticamente. Dessa forma, restam apenas o número e o complemento. Além de ser mais rápido, esse caminho reduz erros de endereço, que depois viram custo de reenvio.
No entanto, deixe os campos editáveis. Afinal, nem todo CEP traz o logradouro completo, e o cliente precisa conseguir corrigir o que veio errado.
Corte tudo o que não for indispensável
Cada campo a mais é uma nova chance de desistência. Revise o formulário com uma pergunta direta: esse dado é necessário para entregar e faturar o pedido? Se a resposta for não, retire.
Da mesma forma, una “nome” e “sobrenome” quando a sua operação permitir, torne o complemento opcional e deixe a criação de senha para depois da compra. Em seguida, use a navegação sem atrito como critério para o restante do caminho.
Pense no polegar
No celular, quem navega é o polegar. Portanto, os elementos de ação precisam estar ao alcance dele e ter tamanho confortável.
- Área de toque: mantenha botões e opções com cerca de 48 pixels de altura, com espaço entre eles.
- Botão principal: deixe-o visível, sem que o teclado aberto o esconda.
- Tamanho da fonte: use pelo menos 16 pixels nos campos, porque fontes menores fazem o iPhone aplicar zoom na página.
- Coluna única: evite dois campos lado a lado, já que eles dificultam a leitura e o toque.
Trate os erros com gentileza
Mostrar um erro só depois do envio é frustrante, sobretudo quando a página volta para o topo. Por isso, valide cada campo assim que o cliente sair dele e escreva a mensagem logo abaixo, em linguagem simples.
Além disso, aceite as variações comuns. Um CPF com ou sem pontos deve funcionar da mesma forma, assim como um telefone com ou sem parênteses. Em outras palavras, a máscara precisa ajudar o cliente, e nunca travar a digitação. E, se a validação falhar, mantenha tudo o que já foi preenchido.
Adapte o pagamento no mobile checkout
O pagamento pelo celular tem particularidades que o desktop não tem. Veja os principais pontos:
Pix copia e cola
O QR Code é ótimo no computador, mas quase inútil para quem está comprando no próprio celular. Portanto, deixe o botão “copiar código” em destaque e explique o passo seguinte. Depois, mantenha a tela aberta e atualize a confirmação automaticamente quando o pagamento entrar.
Carteiras digitais
Se o seu gateway oferecer Apple Pay ou Google Pay, avalie ativar. Com essas carteiras, o cliente evita digitar o cartão inteiro e conclui a compra em poucos toques.
Parcelamento legível
Uma lista suspensa com doze linhas é difícil de ler em uma tela pequena. Assim, mostre as parcelas com valor total e indicação clara de juros, e destaque a opção mais usada.
Não deixe o site lento atrapalhar
Toda essa usabilidade perde valor se a página demora para responder. Em redes móveis, cada script extra pesa mais, e o custo do site lento aparece direto no faturamento. Por isso, meça as páginas do checkout no PageSpeed Insights e remova o que não for essencial nessa etapa.
Teste o mobile checkout em um celular de verdade
O simulador do navegador não mostra tudo. Por esse motivo, faça uma compra real em um aparelho Android intermediário e em um iPhone, usando a rede móvel e não o Wi-Fi do escritório.
Durante o teste, observe se o teclado cobre algum botão, se o autopreenchimento funciona e quanto tempo você leva do carrinho até a confirmação. Em seguida, peça o mesmo a alguém de fora do time, porque quem conhece a loja não enxerga os tropeços.
Conclusão
Um mobile checkout impecável é a soma de pequenos detalhes: teclado certo, preenchimento automático, menos campos e pagamento adaptado. Isoladamente, cada um parece pouco. Juntos, porém, eles encurtam o caminho até a compra.
Portanto, escolha os ajustes mais simples desta lista e aplique antes do pico de novembro. Afinal, o cliente que desistiu no celular raramente volta para terminar no computador.
Comentários