O funil de compra do PrestaShop foi pensado para um ecrã largo. Em mobile, por onde passa hoje a maioria do tráfego, mantém opções de interface que custam encomendas em cada etapa.
Aqui fica a análise ecrã a ecrã, com o que se corrige sem reformulação.
Ecrã 1: o carrinho
Três problemas recorrentes.
O botão de encomenda por baixo da lista. Num carrinho de cinco artigos, fica depois de um deslocamento longo. O comportamento esperado é um botão fixo no fundo do ecrã, a mostrar o total, visível em permanência.
Os seletores de quantidade minúsculos. Os botões mais e menos têm muitas vezes menos de trinta pixels. A recomendação de acessibilidade situa o alvo tátil mínimo à volta de quarenta e quatro pixels de lado. Abaixo disso, o cliente engana-se no botão, o que o obriga a corrigir e o irrita.
A eliminação sem confirmação nem anulação. Um toque acidental no caixote esvazia uma linha sem recurso. Uma opção de anulação temporária evita ter de reconstruir mentalmente o carrinho todo.
Ecrã 2: identificação
É o ecrã que produz mais abandonos em mobile, e dois pormenores técnicos chegam para isso.
O campo de e-mail não chama o teclado certo. Um campo com o tipo correto faz aparecer um teclado com a arroba acessível. Sem isso, o cliente passa pela tecla de comutação a cada introdução.
O preenchimento automático não funciona. Os navegadores sabem preencher e-mail, nome, morada e cartão bancário, desde que os campos tenham as indicações de preenchimento automático esperadas. Um formulário corretamente anotado preenche-se em dois toques. Um formulário sem anotação impõe uma introdução completa.
É provavelmente a correção mais rentável de todo o funil, e só exige acrescentar atributos aos campos existentes.
Terceiro ponto: a palavra-passe. Se impuser a criação de conta, a ausência de opção para mostrar a palavra-passe escrita produz erros repetidos num teclado tátil.
Ecrã 3: a morada
O formulário de morada é o mais longo do funil e o pior adaptado.
Demasiados campos. Muitas configurações pedem empresa, complemento de morada, segundo complemento, telefone fixo e móvel. Em mobile, cada campo adicional é um obstáculo. Reduza ao estritamente necessário e esconda os campos facultativos atrás de uma ligação.
O código postal não chama o teclado numérico. Mesma observação que para o e-mail: o tipo de campo determina o teclado proposto.
A ordem dos campos não segue a lógica local. Em Portugal escreve-se o código postal antes da localidade, e o formato de quatro dígitos mais três permite pré-preencher a localidade a partir dele. Essa automatização elimina um campo inteiro e reduz os erros.
Os erros aparecem depois da validação. Um formulário que assinala cinco erros em bloco depois de um toque no botão obriga a subir na página. A validação à medida da escrita, campo a campo, é bastante menos frustrante.
Checkout Simples e Elegante para PrestaShopUm checkout de página única elegante que converte99,00€
Ecrã 4: a entrega
Dois problemas.
As opções de transporte em botões apertados. Três transportadores apresentados em linhas compactas com botões de seleção pequenos produzem escolhas erradas. Cada opção devia ser um cartão inteiramente clicável.
O ponto de recolha num mapa não adaptado. Os módulos de ponto de recolha mostram muitas vezes um mapa pensado para computador, com marcadores minúsculos e um zoom caprichoso. Em mobile, uma lista ordenada por distância, com o mapa em opção, funciona melhor.
Ecrã 5: o pagamento
É o ecrã onde um problema custa mais caro, já que todo o esforço anterior se perde.
O teclado numérico para o cartão. O número de cartão, a data de validade e o código de segurança têm de chamar um teclado numérico. Continua a estar mal configurado com frequência, incluindo em módulos de pagamento recentes.
O preenchimento automático do cartão. Os navegadores e os gestores de palavras-passe sabem preencher um cartão guardado, desde que as indicações de preenchimento estejam corretas. Sem elas, o cliente tem de ir buscar o cartão físico, o que interrompe o percurso e dá tempo para desistir.
A redireção para uma página bancária não adaptada. A autenticação forte abre por vezes uma página partida em mobile. Teste este percurso em condições reais, com um cartão verdadeiro: é o ponto do funil menos testado e o mais crítico. Em Portugal, teste também o percurso MB WAY, que passa pela aplicação do banco e sai do navegador.
O regresso depois da autenticação. Se o cliente muda para a aplicação do banco para validar, sai do navegador. O regresso tem de repor a sessão e continuar a encomenda, não recomeçar no carrinho.
Os problemas transversais
Quatro elementos que afetam todos os ecrãs.
O zoom automático ao focar. Nalguns navegadores móveis, um campo com tamanho de letra inferior a dezasseis pixels desencadeia um zoom automático na seleção, o que desloca toda a página. A correção consiste em nunca descer abaixo desse tamanho nos formulários.
O teclado que tapa o campo ativo. Num formulário longo, o teclado virtual cobre por vezes o campo em preenchimento. O deslocamento tem de ajustar-se à abertura do teclado.
As faixas fixas acumuladas. Cabeçalho fixo, banner de cookies, faixa promocional: num ecrã de telemóvel, sobra por vezes um terço da altura para o conteúdo. No funil, elimine tudo o que não for necessário.
O tempo de carregamento entre etapas. Cada recarregamento completo é uma oportunidade de abandono. Um funil numa única página, ou com transições sem recarregamento, elimina esses pontos de rutura.
O método de diagnóstico
Três ações, por esta ordem, antes de qualquer alteração.
Faça uma encomenda no seu próprio telemóvel, em condições reais, com um cartão verdadeiro e rede móvel em vez de wi-fi. Revela em dez minutos o essencial dos problemas.
Registe a taxa de conclusão por etapa, separadamente em mobile e em computador. O desvio entre os dois localiza o problema: se o mobile falha na morada, não vale a pena mexer no pagamento.
Veja gravações de sessões móveis que não chegaram ao fim. As hesitações, as correções repetidas e os zooms manuais veem-se de imediato e apontam os campos problemáticos.
Por onde começar
Se só fizer três coisas, escolha estas.
Os atributos de preenchimento automático em todos os campos do funil. Custo baixo, efeito imediato, e beneficia todos os navegadores.
Os tipos de campo, para que cada introdução chame o teclado certo. Mesma lógica, mesma relação esforço-resultado.
As zonas táteis levadas a quarenta e quatro pixels no mínimo em todos os elementos interativos do funil.
Estas três correções não exigem reformulação nenhuma e tratam a maioria das fricções mensuráveis.
O módulo Checkout Simples e Elegante para PrestaShop retoma este percurso no PrestaShop 8 e 9: funil numa única página sem recarregamento entre etapas, formulário de morada aligeirado com pré-preenchimento da localidade pelo código postal, tipos de campo e atributos de preenchimento automático corretamente colocados, e zonas táteis dimensionadas para mobile.
