Maximize as conversões ajudando seus usuários a preencher formulários de endereço e pagamento da forma mais rápida e fácil possível.
Formulários bem projetados ajudam os usuários e aumentam as taxas de conversão. Um pequeno ajuste pode fazer uma grande diferença!
Veja um exemplo de um formulário de pagamento simples que demonstra todas as práticas recomendadas:
Veja a seguir um exemplo de um formulário de endereço simples que demonstra todas as práticas recomendadas:
Lista de verificação
- Use elementos HTML significativos:
<form>
,<input>
,<label>
e<button>
. - Rotule cada campo do formulário com um
<label>
. - Use atributos de elementos HTML para acessar recursos integrados do navegador, principalmente
type
eautocomplete
com os valores adequados. - Evite usar
type="number"
para números que não podem ser incrementados, como números de cartão de pagamento. Usetype="text"
einputmode="numeric"
. - Use um valor de preenchimento automático adequado disponível para
input
,select
outextarea
. - Para ajudar os navegadores a preencher formulários automaticamente, forneça valores estáveis
que não mudam entre carregamentos de página ou implantações de sites para os atributos
name
eid
de entrada. - Desativar os botões de envio depois de receber um toque ou um clique.
- Valide os dados durante a entrada, não apenas no envio do formulário.
- Torne a compra sem login padrão e simplifique a criação da conta quando ela for concluída.
- Mostre o progresso do processo de finalização da compra em etapas claras, com calls-to-action claras.
- Limite possíveis pontos de saída da finalização da compra removendo a confusão e as distrações.
- Mostre todos os detalhes do pedido ao finalizar a compra e facilite os ajustes necessários.
- Não peça dados desnecessários.
- Peça nomes com uma única entrada, a menos que você tenha um bom motivo para não fazer isso.
- Não aplique caracteres somente latinos para nomes e nomes de usuário.
- Permita vários formatos de endereço.
- Considere usar um único
textarea
para o endereço. - Use o preenchimento automático para o endereço de faturamento.
- Internacionalize e localize quando necessário.
- Evite buscar endereços com códigos postais.
- Use valores de preenchimento automático do cartão de pagamento adequados.
- Use uma única entrada para números de cartão de pagamento.
- Evite usar elementos personalizados se eles interromperem a experiência de preenchimento automático.
- Teste no campo e no laboratório: análise de página, análise de interação e medição de desempenho do usuário real.
- Faça testes em vários navegadores, dispositivos e plataformas.
Use HTML com significado
Use os elementos e atributos criados para o job:
<form>
,<input>
,<label>
e<button>
type
,autocomplete
einputmode
Eles ativam a funcionalidade integrada do navegador, melhoram a acessibilidade e adicionam significado à marcação.
Use elementos HTML conforme o esperado
Insira seu formulário em um <form>
Pode ser tentador não envolver os elementos <input>
em um <form>
e processar o envio de dados puramente com JavaScript.
Não faça isso.
Um <form>
HTML dá acesso a um conjunto eficiente de recursos integrados em todos os navegadores modernos
e pode ajudar a tornar seu site acessível a leitores de tela e outros dispositivos adaptativos. Um <form>
também simplifica a criação de funcionalidades básicas para navegadores mais antigos com suporte limitado a JavaScript e a ativação do envio de formulários, mesmo que haja uma falha no código, e para o pequeno número de usuários que realmente desativam o JavaScript.
Se você tiver mais de um componente de página para entrada do usuário, coloque cada um no próprio
elemento <form>
. Por exemplo, se os termos de pesquisa e inscrição estão na mesma página, coloque cada um no próprio <form>
.
Use <label>
para rotular elementos.
Para identificar uma <input>
, uma <select>
ou uma <textarea>
, use uma <label>
.
Associe um rótulo a uma entrada atribuindo ao atributo for
do rótulo o mesmo valor que
o id
da entrada.
<label for="address-line1">Address line 1</label>
<input id="address-line1" …>
Use um único rótulo para uma única entrada: não tente rotular várias entradas com apenas um rótulo. Isso funciona melhor para navegadores e para leitores de tela. Tocar ou clicar em um rótulo move o foco para a entrada a que ele está associado, e os leitores de tela anunciam o texto da etiqueta quando o rótulo ou a entrada do rótulo recebem foco.
Tornar os botões úteis
Use <button>
para botões. Também é possível usar <input type="submit">
, mas não use uma div
ou algum
outro elemento aleatório agindo como um botão. Os elementos do botão oferecem comportamento acessível, funcionalidade
de envio de forma integrada e podem ser facilmente estilizados.
Atribua a cada botão de envio de formulário um valor que indique o que ele faz. Para cada etapa do processo de finalização da compra, use uma call-to-action descritiva que mostre o progresso e torne a próxima etapa óbvia. Por exemplo, rotule o botão de envio no formulário de endereço de entrega como Prosseguir para o pagamento em vez de Continuar ou Salvar.
Considere desativar um botão de envio quando o usuário tocar ou clicar nele, especialmente quando o usuário estiver fazendo um pagamento ou fazendo um pedido. Muitos usuários clicam nos botões repetidamente, mesmo que estejam funcionando bem. Isso pode estragar a finalização da compra e aumentar a carga do servidor.
Por outro lado, não desative um botão de envio aguardando uma entrada válida e completa do usuário. Por exemplo, não basta deixar um botão Salvar endereço desativado só porque algo está faltando ou é inválido. Isso não ajuda o usuário, porque ele pode continuar a tocar ou clicar no botão e presumir que ele está corrompido. Em vez disso, se os usuários tentarem enviar um formulário com dados inválidos, explique a eles o que deu errado e o que fazer para corrigir o problema. Isso é especialmente importante em dispositivos móveis, em que a entrada de dados é mais difícil e dados de formulário ausentes ou inválidos podem não estar visíveis na tela do usuário no momento em que tenta enviar um formulário.
Aproveite ao máximo os atributos HTML
Facilitar a inserção de dados pelos usuários
Use o atributo type
de entrada adequado para fornecer o teclado certo em dispositivos móveis e ativar a validação integrada básica pelo navegador.
Por exemplo, use type="email"
para endereços de e-mail e type="tel"
para números de telefone.
![Duas capturas de tela de
smartphones Android, mostrando um teclado adequado para inserir um endereço de e-mail (usando type=email)
e para inserir um número de telefone (com type=tel).](https://web.dev/static/articles/payment-and-address-form-best-practices/image/two-screenshots-androi-cfa72e7cf108a.jpg?authuser=6&hl=pt)
Para datas, evite usar elementos select
personalizados. Eles corrompem a experiência de preenchimento automático se não
forem implementados corretamente e não funcionam em navegadores mais antigos. Para números como ano de nascimento,
use um elemento input
em vez de select
, já que inserir dígitos manualmente pode ser mais fácil e menos
propenso a erros do que selecionar em uma longa lista suspensa, principalmente em dispositivos móveis. Use inputmode="numeric"
para garantir o teclado certo em um dispositivo móvel e adicione dicas de validação e formato com texto ou um
marcador de posição para garantir que o usuário insira os dados no formato apropriado.
Usar o preenchimento automático para melhorar a acessibilidade e ajudar os usuários a evitar a reinserção de dados
O uso de valores de autocomplete
apropriados permite que os navegadores ajudem os usuários armazenando dados com segurança e
preenchendo automaticamente os valores input
, select
e textarea
. Isso é especialmente importante em dispositivos móveis e
crucial para evitar altas taxas de abandono de formulário. O preenchimento automático também oferece vários benefícios de acessibilidade.
Use um valor apropriado de preenchimento automático se ele estiver disponível para um campo de formulário. Os documentos da Web do MDN têm uma lista completa de valores e explicações sobre como usá-los corretamente.
Valores estáveis
Endereço de faturamento
Por padrão, defina o endereço de faturamento como o mesmo endereço de entrega. Reduza a confusão visual fornecendo um link para editar o endereço de faturamento (ou use elementos summary
e details
), em vez de exibir o endereço de faturamento em um formulário.
![Exemplo de página de finalização de compra mostrando um link para mudar o endereço de faturamento.](https://web.dev/static/articles/payment-and-address-form-best-practices/image/example-checkout-page-sho-dcd9ea1de2cf8.png?authuser=6&hl=pt)
Use valores de preenchimento automático adequados para o endereço de faturamento, assim como para o endereço de entrega. Dessa forma, o usuário não precisa inserir dados mais de uma vez. Adicione uma palavra de prefixo ao preenchimento automático de atributos se você tiver valores diferentes para entradas com o mesmo nome em seções diferentes.
<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>
Ajude os usuários a inserir os dados corretos
Tente evitar "contar" aos clientes porque eles "fizeram algo errado". Em vez disso, ajude os usuários a preencher formulários com mais rapidez e facilidade, ajudando-os a corrigir problemas à medida que acontecem. Durante o processo de checkout, os clientes estão tentando dar dinheiro à sua empresa por um produto ou serviço. Seu trabalho é ajudá-los, não puni-los.
É possível adicionar atributos de restrição a elementos de formulário para especificar valores
aceitáveis, incluindo min
, max
e pattern
. O estado de validade
do elemento é definido automaticamente quando o valor dele é válido, assim como as
pseudoclasses CSS :valid
e :invalid
, que podem ser usadas para definir o estilo de elementos com valores válidos ou
inválidos.
Por exemplo, o HTML a seguir especifica a entrada para um ano de nascimento entre 1900 e 2020. O uso de type="number"
restringe os valores de entrada a números, dentro do intervalo
especificado por min
e max
. Se você tentar inserir um número fora do intervalo, a entrada terá um estado inválido.
O exemplo a seguir usa pattern="[\d ]{10,30}"
para garantir um número de cartão de pagamento válido, permitindo espaços:
Os navegadores mais recentes também fazem validação básica para entradas com tipo email
ou url
.
No envio do formulário, os navegadores definem automaticamente o foco nos campos com valores obrigatórios problemáticos ou ausentes. O JavaScript não é necessário.
![Captura de tela de um formulário de login no Chrome no computador mostrando uma solicitação do navegador e o foco de um valor de e-mail inválido.](https://web.dev/static/articles/payment-and-address-form-best-practices/image/screenshot-a-sign-form-354be7a245f85.png?authuser=6&hl=pt)
Faça a validação inline e forneça feedback ao usuário à medida que ele insere dados, em vez de fornecer uma lista de erros ao clicar no botão "Enviar". Se você precisar validar dados no seu servidor após o envio do formulário, liste todos os problemas encontrados e destaque claramente todos os campos do formulário com valores inválidos, além de exibir uma mensagem inline ao lado de cada campo problemático explicando o que precisa ser corrigido. Verificar se há erros comuns nos registros do servidor e nos dados de análise. Talvez seja necessário reformular o formulário.
Também é recomendável usar o JavaScript para fazer uma validação mais robusta enquanto os usuários inserem dados e ao enviar um formulário. Use a API Constraint Validation (que tem ampla compatibilidade) para adicionar validação personalizada usando a interface do navegador integrada para definir o foco e as solicitações de exibição.
Saiba mais em Usar JavaScript para validação em tempo real mais complexa.
Ajudar os usuários a evitar a perda de dados obrigatórios
Use o atributo required
nas entradas de valores obrigatórios.
Quando um formulário é enviado, os navegadores modernos
solicitam e definem o foco automaticamente nos campos required
com dados ausentes, e é possível usar a
pseudoclasse :required
para destacar os campos obrigatórios. Não é necessário usar JavaScript.
Adicione um asterisco ao rótulo para cada campo obrigatório e uma observação no início do formulário para explicar o que o asterisco significa.
Simplifique a finalização da compra
Cuidado com a lacuna do comércio para dispositivos móveis.
Imagine que os usuários têm um orçamento para evitar fadiga. Use-o, e seus usuários vão embora.
Você precisa reduzir o atrito e manter o foco, especialmente em dispositivos móveis. Muitos sites recebem mais tráfego em dispositivos móveis, mas mais conversões em computadores. Esse fenômeno é conhecido como lacuna no comércio para dispositivos móveis. Os clientes podem simplesmente preferir concluir uma compra no computador, mas taxas de conversão em dispositivos móveis mais baixas também são resultado de uma experiência do usuário ruim. Sua tarefa é minimizar as conversões perdidas em dispositivos móveis e maximizar as conversões em computadores. Pesquisas mostram que há uma grande oportunidade de oferecer uma melhor experiência com formulários em dispositivos móveis.
Acima de tudo, é mais provável que os usuários abandonem formulários longos, complexos e sem senso de direção. Principalmente quando os usuários estão em telas menores, distraídos ou com pressa. Peça o mínimo de dados possível.
Tornar a opção "Comprar sem login" a opção padrão
Para uma loja on-line, a maneira mais simples de reduzir o atrito no formulário é tornar a opção "Comprar sem login" padrão. Não force os usuários a criar uma conta antes de fazer uma compra. Não permitir a finalização da compra é citado como o principal motivo para o abandono do carrinho de compras.
![Motivos para o abandono do carrinho de compras durante a finalização da compra.](https://web.dev/static/articles/payment-and-address-form-best-practices/image/reasons-shopping-cart-ab-d6f494f8481a1.png?authuser=6&hl=pt)
É possível oferecer a inscrição na conta após a finalização da compra. Nesse ponto, você já tem a maioria dos dados necessários para configurar uma conta. Portanto, a criação da conta será rápida e fácil para o usuário.
Mostrar progresso da finalização da compra
Você pode tornar seu processo de finalização de compra menos complexo ao mostrar o progresso e deixar claro o que precisa ser feito em seguida. O vídeo abaixo mostra como a varejista do Reino Unido johnlewis.com faz isso.
Você precisa manter o ritmo! Para cada etapa do pagamento, use títulos de página e valores descritivos de botões que deixem claro o que precisa ser feito agora e qual é a próxima etapa da finalização da compra.
Use o atributo enterkeyhint
nas entradas de formulário para definir o identificador da tecla Enter do teclado móvel. Por
exemplo, use enterkeyhint="previous"
e enterkeyhint="next"
em um formulário de várias páginas,
enterkeyhint="done"
para a entrada final no formulário e enterkeyhint="search"
para uma entrada
de pesquisa.
![Duas capturas de tela de um formulário de endereço no Android mostrando como o atributo de entrada enterkeyhint muda o ícone do botão Enter.](https://web.dev/static/articles/payment-and-address-form-best-practices/image/two-screenshots-an-addre-75a36b70b4e17.png?authuser=6&hl=pt)
O atributo enterkeyhint
é compatível com Android e iOS.
Saiba mais na explicação do enterkeyhint.
Facilite o processo de finalização da compra para que os usuários possam ajustar o pedido com facilidade, mesmo quando estiverem na etapa final do pagamento. Mostre todos os detalhes do pedido, não apenas um resumo limitado. Permita que os usuários ajustem facilmente as quantidades dos itens na página de pagamento. Sua prioridade na finalização da compra é evitar a interrupção do progresso da conversão.
Apague distrações
Limite possíveis pontos de saída removendo a confusão visual e as distrações, como promoções de produtos. Muitos varejistas de sucesso até removem a navegação e a pesquisa do pagamento.
![Duas capturas de tela em um dispositivo móvel mostrando o progresso da compra pelo site johnlewis.com. Pesquisa, navegação e outras distrações são removidas.](https://web.dev/static/articles/payment-and-address-form-best-practices/image/two-screenshots-mobile-s-8170de02ed5c4.png?authuser=6&hl=pt)
Mantenha o foco da jornada. Este não é o momento de incentivar os usuários a fazer outra coisa.
![Captura de tela da página de finalização da compra em um dispositivo móvel mostrando uma promoção que causa distrações SEM CUSTO FINANCEIRO.](https://web.dev/static/articles/payment-and-address-form-best-practices/image/screenshot-checkout-page-500566178ec4d.jpg?authuser=6&hl=pt)
Para usuários recorrentes, é possível simplificar ainda mais o fluxo de finalização da compra, ocultando os dados que eles não precisam ver. Por exemplo: exiba o endereço de entrega em texto simples (não em um formulário) e permita que os usuários o mudem usando um link.
![Captura de tela da seção "Revisar pedido" da página de finalização da compra, mostrando texto simples e links para mudar o endereço de entrega, a forma de pagamento e o endereço de cobrança, que não aparecem.](https://web.dev/static/articles/payment-and-address-form-best-practices/image/screenshot-review-order-8faf48dbff9f1.png?authuser=6&hl=pt)
Facilitar a inserção do nome e endereço
Solicite apenas os dados necessários
Antes de começar a codificar seus formulários de nome e endereço, entenda quais dados são necessários. Não peça dados de que você não precisa. A maneira mais simples de reduzir a complexidade do formulário é remover campos desnecessários. Isso também é bom para a privacidade do cliente e pode reduzir o custo e a responsabilidade dos dados de back-end.
Usar uma entrada de nome único
Permita que os usuários digitem os próprios nomes usando uma única entrada, a menos que você tenha um bom motivo para armazenar separadamente nomes, sobrenomes, honorários ou outras partes do nome. O uso de uma entrada de nome único torna os formulários menos complexos, permite o recurso de recortar e colar e simplifica o preenchimento automático.
Em particular, a menos que você tenha um bom motivo para não fazer isso, não se preocupe em adicionar uma entrada separada para um
prefixo ou título (como Mrs, Dr ou Lord). Os usuários podem digitar isso com seus nomes. Além disso,
o preenchimento automático de honorific-prefix
não funciona na maioria dos navegadores. Portanto, adicionar um campo para
prefixo ou título do nome vai interromper a experiência de preenchimento automático de formulários de endereço para a maioria dos usuários.
Ativar o preenchimento automático de nome
Use name
para o nome completo:
<input autocomplete="name" ...>
Se você realmente tem um bom motivo para dividir partes do nome, use valores de preenchimento automático apropriados:
honorific-prefix
given-name
nickname
additional-name-initial
additional-name
family-name
honorific-suffix
Permitir nomes internacionais
Você pode validar suas entradas de nome ou restringir os caracteres permitidos para dados de nome. No entanto, você precisa ser o mais irrestrito possível com as letras. É grosseiro dizer que seu nome é "inválido"!
Para validação, evite usar expressões regulares que correspondam apenas a caracteres latinos. Somente o latino exclui usuários com nomes ou endereços que incluem caracteres que não estejam no alfabeto latino. Permita a correspondência de letras Unicode e verifique se seu back-end oferece suporte a Unicode de modo seguro como entrada e saída. O Unicode em expressões regulares é bem aceito por navegadores modernos.
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. --> <input pattern="[\w \-]+" ...>
<!-- Accepts Unicode letters. --> <input pattern="[\p{L} \-]+" ...>
Compatibilidade com vários formatos de endereço
Ao criar um formulário de endereço, tenha em mente a variedade de formatos de endereço, mesmo dentro de um único país. Tenha cuidado para não fazer suposições sobre endereços "normais". Confira UK Address Oddities! caso ainda não esteja convencido.
Tornar os formulários de endereço flexíveis
Não force os usuários a tentar inserir o endereço em campos do formulário que não cabem.
Por exemplo, não insista no número da casa e no nome da rua em entradas separadas, porque muitos endereços não usam esse formato, e dados incompletos podem corromper o preenchimento automático do navegador.
Tenha muito cuidado com os campos de endereço do required
. Por exemplo, endereços em grandes cidades do Reino Unido não têm um condado, mas muitos sites ainda forçam os usuários a inserir um.
O uso de duas linhas de endereço flexíveis pode funcionar bem o suficiente para vários formatos de endereço.
<input autocomplete="address-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>
Adicionar rótulos para corresponder:
<label for="address-line-1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line-1" id="address-line1" ...>
<label for="address-line-2">
Address line 2 (optional)
</label>
<input autocomplete="address-line-2" id="address-line2" ...>
Teste isso remixando e editando a demonstração incorporada abaixo.
Considere usar uma única área de texto para o endereço
A opção mais flexível para endereços é fornecer um único textarea
.
A abordagem textarea
é adequada a qualquer formato de endereço e é ótima para copiar e colar. No entanto, a abordagem pode não atender aos seus requisitos de dados, e os usuários podem perder o preenchimento automático se antes
só usassem formulários com address-line1
e address-line2
.
Para uma área de texto, use street-address
como o valor de preenchimento automático.
Confira um exemplo de formulário que demonstra o uso de um único textarea
para o endereço:
Internacionalizar e localizar seus formulários de endereço
É muito importante que os formulários de endereço considerem a internacionalização e localização, dependendo da localização dos usuários.
Lembre-se de que a nomenclatura das partes do endereço e dos formatos varia, mesmo que seja no mesmo idioma.
ZIP code: US
Postal code: Canada
Postcode: UK
Eircode: Ireland
PIN: India
Pode ser irritante ou confuso receber um formulário que não se encaixa no seu endereço ou que não usa as palavras que você espera.
Pode ser necessário personalizar formulários de endereço para várias localidades no seu site, mas o uso de técnicas para maximizar a flexibilidade dos formulários (como descrito acima) pode ser adequado. Se você não localizar seus formulários de endereço, entenda as principais prioridades para lidar com diversos formatos de endereço: * Evite ser muito específico sobre partes do endereço, como insistir em um nome de rua ou número de casa.
* Sempre que possível, evite criar campos required
. Por exemplo, em muitos países, os endereços não têm um código postal, e os endereços rurais podem não ter um nome de rua ou estrada.
* Use uma nomenclatura inclusiva: "País/região" e não "País". "CEP/código postal" não "CEP".
Seja flexível. O exemplo de formulário de endereço simples acima pode ser adaptado para funcionar "bem o suficiente" para muitas localidades.
Evite a busca por um endereço de CEP
Alguns sites usam um serviço para procurar endereços com base em CEP ou código postal. Isso pode ser útil para alguns casos de uso, mas você precisa estar ciente das possíveis desvantagens.
A sugestão de endereço de CEP não funciona em todos os países. Em algumas regiões, os códigos postais podem incluir um grande número de possíveis endereços.
É difícil para os usuários selecionarem endereços de uma longa lista de endereços, especialmente em dispositivos móveis, se eles estiverem apressados ou estressados. Pode ser mais fácil e menos propenso a erros permitir que os usuários aproveitem o preenchimento automático e insiram o endereço completo com um único toque ou clique.
Simplifique os formulários de pagamento
Os formulários de pagamento são a parte mais importante do processo de finalização da compra. O design inadequado do formulário de pagamento é uma causa comum de abandono de carrinho de compras. O diabo está nos detalhes: pequenas falhas podem levar os usuários a abandonar uma compra, especialmente em dispositivos móveis. Seu trabalho é projetar formulários para facilitar ao máximo a inserção de dados pelos usuários.
Ajudar os usuários a evitar a reinserção de dados de pagamento
Adicione os valores de autocomplete
adequados nos formulários de cartão de pagamento, incluindo o número e o nome do cartão, além do mês e do ano de validade:
cc-number
cc-name
cc-exp-month
cc-exp-year
Isso permite que os navegadores ajudem os usuários, armazenando com segurança os detalhes do cartão de pagamento e inserindo corretamente os dados do formulário. Sem o preenchimento automático, é mais provável que os usuários mantenham um registro físico dos detalhes do cartão de pagamento ou armazenem dados de forma não segura no dispositivo.
Evite usar elementos personalizados para as datas dos cartões de pagamento
Se não forem projetados adequadamente, os elementos personalizados podem interromper o fluxo de pagamento ao corromper o preenchimento automático e não vão funcionar em navegadores mais antigos. Se todos os outros detalhes do cartão de pagamento estiverem disponíveis no preenchimento automático, mas um usuário for forçado a encontrar o cartão físico para procurar uma data de validade porque o preenchimento automático não funcionou para um elemento personalizado, você provavelmente perderá uma venda. Considere usar elementos HTML padrão e estilizá-los de acordo.
![Captura de tela do formulário de pagamento mostrando elementos personalizados para a data de validade do cartão que interrompem o preenchimento automático.](https://web.dev/static/articles/payment-and-address-form-best-practices/image/screenshot-payment-form-1979c4cb5d1d8.jpg?authuser=6&hl=pt)
Use uma única entrada para o cartão de pagamento e números de telefone
Use uma única entrada para cartões de pagamento e números de telefone: não divida o número em partes. Isso facilita a inserção de dados, facilita a validação e permite que os navegadores façam o preenchimento automático. Considere fazer o mesmo para outros dados numéricos, como PIN e códigos bancários.
![Captura de tela de um formulário de pagamento mostrando um campo de cartão de crédito dividido em quatro elementos de entrada.](https://web.dev/static/articles/payment-and-address-form-best-practices/image/screenshot-payment-form-ae75caa2b392b.jpg?authuser=6&hl=pt)
Faça a validação com cuidado
É necessário validar a entrada de dados em tempo real e antes do envio do formulário. Uma maneira de fazer isso é
adicionar um atributo pattern
a uma entrada de cartão de pagamento. Se o usuário tentar enviar o formulário de pagamento com um valor inválido, o navegador exibirá uma mensagem de aviso e definirá o foco na entrada. Não é necessário usar JavaScript.
No entanto, sua expressão regular pattern
precisa ser flexível o suficiente para lidar com o intervalo de comprimentos de número de cartão de pagamento: de 14 dígitos (ou possivelmente menos) a 20 (ou mais). Saiba mais sobre a estruturação do número de cartões de pagamento em LDAPwiki.
Permita que os usuários incluam espaços ao inserir um novo número de cartão de pagamento, já que é assim que os números são exibidos em cartões físicos. Isso é mais simples para o usuário (você não precisa dizer "eles fizeram algo errado"), menos probabilidade de interromper o fluxo de conversão, e é simples remover espaços em números antes do processamento.
Teste em vários dispositivos, plataformas, navegadores e versões
É importante testar o endereço e as formas de pagamento nas plataformas mais comuns para os usuários, já que a funcionalidade e a aparência dos elementos de formulário podem variar, e as diferenças no tamanho da janela de visualização podem atrapalhar o posicionamento. O BrowserStack permite testes sem custo financeiro para projetos de código aberto em uma variedade de dispositivos e navegadores.
![Capturas de tela de uma forma de pagamento, payment-form.glitch.me, no iPhone 7 e 11. O botão "Concluir pagamento" é mostrado no iPhone 11, mas não no 7](https://web.dev/static/articles/payment-and-address-form-best-practices/image/screenshots-a-payment-fo-3bf6037d5a688.jpg?authuser=6&hl=pt)
Reduza o padding para janelas de visualização menores para dispositivos móveis para garantir que o botão Concluir pagamento não fique oculto.
Implementar análise e RUM
Testar a usabilidade e o desempenho localmente pode ser útil, mas você precisa de dados reais para entender corretamente como os usuários interagem com seus formulários de pagamento e endereço.
Para isso, você precisa de análises e monitoramento de usuários reais, que são dados da experiência de usuários reais, por exemplo, quanto tempo as páginas de finalização de compra levam para carregar ou o tempo que o pagamento leva para ser concluído:
- Análise de página: visualizações de página, taxas de rejeição e saídas para todas as páginas com um formulário.
- Análise de interação: os funis de meta e os eventos indicam onde os usuários abandonam o fluxo de finalização de compra e quais ações eles realizam ao interagir com seus formulários.
- Desempenho do site: as métricas centradas no usuário podem informar se o carregamento das páginas de finalização da compra está lento e, em caso afirmativo, qual é a causa.
A análise de página, a análise de interação e a medição do desempenho real do usuário se tornam especialmente valiosas quando combinadas com registros de servidor, dados de conversão e testes A/B, permitindo responder perguntas como se os códigos de desconto aumentam a receita ou se uma mudança no layout do formulário melhora as conversões.
Isso, por sua vez, fornece uma base sólida para priorizar o esforço, fazer mudanças e recompensar o sucesso.
Continue aprendendo
- Práticas recomendadas para formulários de login
- Práticas recomendadas para o formulário de inscrição
- Verificar números de telefone na Web com a API WebOTP
- Criar formulários incríveis
- Práticas recomendadas para a criação de formulários para dispositivos móveis
- Controles de formulário mais eficientes
- Como criar formulários acessíveis
- Simplificar o fluxo de inscrição usando a API Credential Management
- O Guia compulsivo de Francês para endereços postais fornece links úteis e orientações detalhadas para formatos de endereço em mais de 200 países.
- A lista de países tem uma ferramenta para fazer o download de códigos e nomes de países em vários idiomas e formatos.