O preenchimento automático e os campos pré-preenchidos são duas formas de reduzir o que os visitantes têm de escrever. O preenchimento automático funciona do lado do navegador. Os campos pré-preenchidos funcionam a partir do teu sistema. Juntos, fazem as taxas de conclusão subir de forma significativa.
Este capítulo explica o que cada um faz, como funcionam, quando usar cada um e como aplicá-los corretamente.
Os benefícios mensuráveis do preenchimento automático e dos campos pré-preenchidos
Um estudo dos Chrome Developers acompanhou milhares de formulários nos Estados Unidos. Quando os visitantes usam o preenchimento automático do navegador, concluem os formulários cerca de 35% mais depressa. A taxa de abandono desce cerca de 75%, mesmo quando o preenchimento automático só preenche parte do formulário. Os utilizadores continuam a ter de rever e confirmar o que o navegador preencheu, mas a redução do esforço de escrita é o que faz a diferença.
Num conjunto de dados de vários tipos de formulários, 23% dos utilizadores acionaram o preenchimento automático durante o percurso no formulário. Esses utilizadores terminaram o formulário em 71% dos casos. Para os visitantes que não usaram o preenchimento automático, a taxa de conclusão foi de 59%. Essa diferença de 12 pontos percentuais soma-se depressa quando tens formulários em grande escala.
Os campos pré-preenchidos mostram uma evolução semelhante. Quando um formulário aparece parcialmente completo, os utilizadores têm mais probabilidade de o terminar do que quando veem um formulário em branco. Isto funciona porque concluir algo que já está em andamento parece mais fácil do que começar do zero.
Como funciona o preenchimento automático e o que precisas de fazer para o suportar
A maioria dos visitantes de hoje usa um navegador com preenchimento automático. O Chrome e os outros navegadores principais têm-no. Muitos usam gestores de palavras-passe, que alargam ainda mais a capacidade de preenchimento automático. Mas o preenchimento automático só funciona se o teu formulário estiver preparado para o receber.
O navegador olha para o nome de cada campo de entrada e para o atributo type. Se o teu campo se chama algo genérico como "field1" ou "input2", o navegador não faz ideia do que lá pôr. Se o chamas "email" e defines o tipo como "email", o navegador sabe. Se o chamas "shipping_address_line_1" e defines o atributo autocomplete como "address-line1", o navegador sabe exatamente o que lá pôr.
O teu HTML tem de corresponder ao que os navegadores esperam. Usa nomes de campos padrão. Define o atributo type correto (email, tel, number, text). Acrescenta o atributo autocomplete com o valor certo para cada campo. Os mais comuns em que os utilizadores esperam que o preenchimento automático funcione incluem campos de email (type="email" e autocomplete="email"), campos de telefone (type="tel" e autocomplete="tel"), campos de morada (valores de autocomplete específicos, como autocomplete="address-line1" para a rua, autocomplete="address-level1" para a região, autocomplete="postal-code" para o código postal) e campos de nome (type="text" e autocomplete="given-name" para o primeiro nome ou autocomplete="family-name" para o apelido).
Se o teu formulário não tiver o atributo autocomplete, os navegadores continuam a tentar adivinhar com base nos nomes dos campos. Mas os valores de autocomplete explícitos funcionam melhor. O investimento em definir bem estes atributos compensa sempre que o navegador de alguém preenche a morada sem que a pessoa a escreva.
Como funcionam os campos pré-preenchidos e quando realmente ajudam
Os campos pré-preenchidos funcionam melhor quando o utilizador sabe que tens a informação. Se alguém iniciou sessão na sua conta, espera que o telefone e o nome já lá estejam. Se clicou numa ligação de um email que dizia "Confirma a tua morada", espera que a morada apareça pré-preenchida. Os dados não são uma surpresa.
Pré-preenche os campos comuns que os utilizadores já te deram. O email, se se registaram com email. O nome da empresa, se se registaram com uma empresa. Qualquer morada que já tenhas pedido. Deixa vazios os campos que pedem informação nova. O visitante quer ver que te lembraste do que ele disse, mas também quer controlo sobre o que vai para um formulário que está prestes a enviar.
A transparência importa aqui. Deixa claro porque esses campos estão pré-preenchidos. "Temos o nome da tua empresa registado" ou "Esta é a morada que nos deste da última vez" leva dois segundos a acrescentar como uma pequena nota acima do formulário e elimina a confusão. O atrito surge quando os campos parecem estar a ser preenchidos sem consentimento.
Quando não pré-preencher e o que pode correr mal
Os campos pré-preenchidos só funcionam quando os dados são exatos e atuais. Se um visitante atualizou o telefone mas o formulário vai buscar dados a uma base de dados antiga, vê informação errada e tem de a corrigir. Esse atrito anula o propósito. Dá sempre aos utilizadores a possibilidade de editar e corrigir os dados pré-preenchidos. Nunca bloqueies um campo e obrigues a contactar o apoio para o alterar.
Se não tens confiança na exatidão dos dados, pré-preenche só os campos que atualizas com regularidade e deixa os outros vazios. Em setores regulados, como os serviços financeiros ou a saúde, não pré-preenchas campos sensíveis, mesmo que tenhas os dados. Não pré-preenchas métodos de pagamento no pagamento a não ser que o visitante tenha guardado especificamente esse método. O objetivo é reduzir o atrito para os visitantes, não criar a ilusão de um formulário completo.
Usar o preenchimento automático e os campos pré-preenchidos em conjunto para o máximo impacto
A abordagem mais forte usa os dois ao mesmo tempo. Para os visitantes que iniciaram sessão, pré-preenche os dados que o teu sistema tem. Para os visitantes que usam um novo navegador ou dispositivo, garante que os teus atributos autocomplete estão bem definidos para o preenchimento automático do navegador poder funcionar. Alguns visitantes vão ver dados pré-preenchidos. Alguns vão usar o preenchimento automático do navegador. Alguns vão fazer as duas coisas. Seja como for, o formulário exige menos escrita e as taxas de conclusão melhoram.
Os visitantes chegam em estados diferentes. Um cliente que volta e iniciou sessão é um cenário. Um novo visitante na sua primeira interação é outro. Um visitante que volta com um novo dispositivo é um terceiro. Cada um beneficia de um mecanismo ou do outro. Juntos, criam uma experiência de formulário que parece eficiente, qualquer que seja o caminho do visitante.
O que funciona bem pré-preencher e o que deixar vazio
O preenchimento automático e o pré-preenchimento são mais eficazes para informação geral. Email, telefone, nome, morada, nome da empresa, código postal. Estes campos aparecem em muitos formulários, por isso visitantes e navegadores beneficiam de os lembrar.
Para informação sensível, sê seletivo. Os formulários financeiros não devem pré-preencher métodos de pagamento a não ser que o visitante tenha guardado um de forma explícita. Os formulários de saúde não devem pré-preencher o historial médico. Os campos de segurança, como as palavras-passe, nunca devem ser pré-preenchidos manualmente (os gestores de palavras-passe tratam disso automaticamente). Se o teu setor tem requisitos de conformidade, segue essas diretrizes, independentemente dos benefícios de comodidade.
Como medir o impacto nas tuas taxas de conclusão
Não consegues ver nos envios do formulário se um visitante usou o preenchimento automático ou não. Mas podes medir o impacto comparando as taxas de conclusão antes e depois de implementares o suporte ao preenchimento automático. Se hoje não tens código adaptado ao preenchimento automático, define bem os teus atributos autocomplete. Mede a taxa de conclusão durante uma semana e compara-a com a semana seguinte. Deve aparecer uma subida mensurável.
Nos campos pré-preenchidos, o teste é semelhante. Se consegues segmentar o teu público, mostra dados pré-preenchidos a alguns visitantes e campos vazios a outros. A taxa de conclusão deve ser mais alta no grupo pré-preenchido. Se não for, ou os teus dados são inexatos ou o número de campos que estás a pré-preencher está a criar confusão em vez de impulso.
Perguntas frequentes
O preenchimento automático funciona da mesma forma no telemóvel e no computador?
É seguro usar o preenchimento automático em campos de palavra-passe?
Posso pré-preencher um formulário através de um parâmetro do URL?
O que acontece se os dados preenchidos automaticamente estiverem errados?
Pré-preencher um formulário reduz a qualidade dos dados ou introduz informação desatualizada?
Que tipos de formulário beneficiam mais do preenchimento automático e do pré-preenchimento?
O preenchimento automático e os campos pré-preenchidos dão resultados mensuráveis. Uma melhoria de 35% na velocidade e uma redução de 75% no abandono aplicam-se aos visitantes que os usam. Funcionam melhor em conjunto com um formulário curto e etiquetas claras. Juntos, estes três elementos somam ganhos de conclusão de forma significativa.
Aprende mais sobre como reduzir o tamanho dos formulários no guia completo sobre o tamanho ideal de um formulário. Para a implementação técnica, vê como pré-preencher formulários com dados do utilizador. Para a estratégia de otimização mais ampla, explora o guia de otimização da taxa de conversão dos formulários.