Checkout no celular: boas práticas que fazem diferença
Uma coluna, teclado certo em cada campo, botões fáceis de tocar e Pix com botão de copiar: o que priorizar no checkout para celular.
Neste artigo
Na maior parte das lojas brasileiras, a maioria das visitas vem do celular. Ainda assim, muitos checkouts são desenhados e testados no computador e só depois "adaptados" para a tela pequena. O resultado são botões apertados, teclados errados e páginas que exigem zoom.
Desenhar o checkout pensando primeiro no celular muda as prioridades. Este artigo reúne as práticas que mais fazem diferença.
Uma coluna, sem distrações
No celular, o checkout deve ter uma única coluna. Campos lado a lado ficam estreitos demais e dificultam o toque. Também vale remover o que tira o comprador do fluxo:
- Menu de navegação completo.
- Rodapé com dezenas de links.
- Banners promocionais e pop-ups.
O cabeçalho pode ter apenas o logotipo e uma indicação de compra segura.
O teclado certo para cada campo
Um detalhe que poucos lojistas notam é o tipo de teclado que aparece em cada campo. Usar os atributos corretos evita que o comprador precise alternar entre letras e números:
type="email"para e-mail.type="tel"para telefone.inputmode="numeric"para CEP, CPF, CNPJ e número do cartão.
Além disso, o atributo autocomplete permite que o navegador preencha nome, e-mail, telefone e endereço automaticamente.
Toques, não precisão
Botões e campos precisam ter área de toque confortável, com altura suficiente e espaço entre eles. Caixas de seleção pequenas e links de texto colados uns nos outros geram toques errados.
O botão principal, de avançar ou finalizar, deve ocupar toda a largura da tela e ficar fácil de alcançar com o polegar.
Resumo do pedido sempre acessível
No computador, o resumo fica numa coluna lateral. No celular, ele precisa de outro tratamento. Uma solução comum é um resumo recolhido no topo, mostrando o total e abrindo os itens com um toque. Assim, o comprador confere o valor sem rolar até o fim.
Pix pensado para quem está no celular
Quem paga com Pix no celular precisa copiar o código e colar no aplicativo do banco. O QR Code, nesse caso, é pouco útil. Algumas práticas ajudam:
- Botão de "copiar código" grande e com confirmação visual.
- Instruções curtas sobre como pagar.
- Página de pagamento que atualiza sozinha quando o Pix é confirmado, sem o comprador precisar voltar e recarregar.
Velocidade importa mais no celular
Conexões móveis são instáveis. Um checkout pesado, com muitos scripts de terceiros, demora a carregar e a responder. Revise:
- Scripts de rastreamento e chat que não precisam carregar no checkout.
- Imagens grandes no resumo do pedido.
- Chamadas que travam a página enquanto o frete é calculado.
Erros visíveis
No celular, uma mensagem de erro no topo da página pode ficar fora da tela. Mostre o erro ao lado do campo e role a página até ele quando necessário.
Teste no seu próprio aparelho
A forma mais simples de encontrar problemas é comprar na sua loja pelo celular, com 4G, de vez em quando. Teste com Android e iPhone, se possível, e com diferentes formas de pagamento.
