MOBILE FIRST
Checkout mobile: boas práticas para vender em telas pequenas
Checkout mobile não é a versão comprimida do desktop. Ele precisa respeitar toque, teclado virtual, conexão instável, autofill e pouca área visível. A prioridade é manter contexto e progresso mesmo quando o usuário alterna entre banco, mensagens e navegador.
Layout para toque e leitura
Use coluna única, botões com área confortável e rótulos persistentes. Evite elementos fixos que cubram campos ou mensagens. O resumo pode ser recolhível, mas total, item e condição devem continuar acessíveis.
Campos, teclado e autofill
Peça um dado por vez quando isso melhora compreensão, escolha o tipo de teclado correto e aceite preenchimento automático. Não apague o formulário quando o cliente volta do aplicativo bancário ou corrige um erro.
Pix e cartão no celular
No Pix, facilite copiar o código e retornar à página, mantendo status atualizado. No cartão, formate sem bloquear colagem e mostre parcelamento de forma legível. Nunca exiba dados sensíveis novamente em mensagens de confirmação.
Matriz mínima de teste
- Android e iOS em versões suportadas.
- Navegadores principais e webviews.
- Conexão lenta e retomada após segundo plano.
- Zoom de texto e navegação assistiva.
- Erro em cada campo e em cada método.
Se você quer avaliar esse desenho na sua operação, fale com um especialista da Marcha. A recomendação final depende do modelo de negócio, do fluxo financeiro e da análise cadastral e comercial.
Viewport, teclado e campos
Teste o formulário com o teclado aberto, rotação, zoom e barras do navegador. O botão principal não deve ficar inacessível nem cobrir o campo ativo. Use tipos de entrada adequados, rótulos persistentes e áreas de toque confortáveis.
Não bloqueie colagem de dados e permita que gerenciadores e preenchimento automático funcionem. Ao ocorrer erro, mova o foco com cuidado e preserve o que já foi validado. O cliente precisa entender onde está sem perder o contexto do pedido.
Conexão instável e retomada
Em rede móvel, a resposta pode demorar ou ser interrompida. Desabilite ações repetidas enquanto uma tentativa está em processamento, mas ofereça um caminho claro para consultar o estado. Se a pessoa voltar ao checkout, recupere o pedido em vez de criar outro automaticamente.
Use mensagens que diferenciem processamento, pendência e falha. Carregue recursos essenciais primeiro, reduza dependências bloqueantes e não deixe fontes ou scripts externos desmontarem o layout básico.
Matriz mínima de testes reais
Inclua diferentes tamanhos de tela, sistemas, navegadores, webviews e modos de acessibilidade. Teste Pix com troca para aplicativo bancário, cartão com preenchimento automático e retorno de autenticação. Simule conexão lenta e interrupção após o clique final.
Automação ajuda a prevenir regressões, mas não substitui uso real. Mantenha uma lista de dispositivos representativos baseada nos acessos observados e registre vídeo ou evidência dos cenários críticos em cada release.
Perguntas frequentes
Botão fixo ajuda no checkout?
Pode ajudar, desde que não cubra campos, mensagens ou teclado e permaneça coerente com o estado.
Devo abrir Pix em outro aplicativo?
A experiência depende do dispositivo; sempre preserve o pedido e permita copiar o código.
Máscara de campo pode atrapalhar?
Sim, quando rejeita formatos válidos ou move o cursor. Teste digitação, colagem e correção.
Como testar conexão ruim?
Use limitação de rede e simule retorno tardio, repetição e recarregamento.
Devo fixar o botão de pagamento no rodapé do celular?
Pode ser útil quando o resumo é longo, desde que não cubra campos, avisos, teclado ou controles de acessibilidade. O botão deve refletir o estado real do formulário e permanecer associado ao valor final. Teste em telas pequenas e com zoom antes de adotar como padrão.