Como melhorar o UX do seu formulário de cobrança em um dia

A página de checkout é a última página que um usuário visita antes de finalmente decidir concluir uma compra em seu site. É onde os compradores de vitrines se transformam em clientes pagantes. Se você deseja deixar uma boa impressão, deve fornecer usabilidade ideal do formulário de cobrança e melhorá-lo sempre que possível.

Em menos de um dia, você pode adicionar alguns recursos simples e úteis ao seu projeto para tornar seu formulário de cobrança fácil de usar e fácil de preencher. Uma demonstração com todas as funções cobertas abaixo está disponível. Você pode encontrar seu código no repositório do GitHub.

Leitura adicional no SmashingMag:

• Reduzindo carrinhos de compras abandonados no comércio eletrônico
• Validação de campo de formulário: a abordagem somente de erros
• Diretrizes fundamentais do design de checkout de comércio eletrônico
• Um guia abrangente para usabilidade de formulários da Web

Os detalhes do cartão de crédito estão entre os campos mais comumente corrigidos nos formulários. Felizmente, hoje em dia quase todos os navegadores populares possuem um recurso de preenchimento automático, permitindo que os usuários armazenem seus dados de cartão no navegador e preencham os campos do formulário mais rapidamente. Além disso, desde o iOS 8, os usuários móveis do Safari podem digitalizar as informações do cartão com a câmera do iPhone e preencher o número do cartão, a data de validade e os campos de nome automaticamente. O preenchimento automático é simples, claro e integrado ao HTML5, então vamos adicioná-lo primeiro ao nosso formulário.

Tanto o preenchimento automático quanto a verificação de cartão funcionam apenas com formulários que possuem atributos especiais: autocomplete para navegadores modernos (listados no padrão HTML5) e name para navegadores sem suporte a HTML5.

Nota : Uma demonstração com todas as funções cobertas abaixo está disponível. Você pode encontrar seu código no repositório GitHub .

Os cartões de crédito têm atributos específicos de preenchimento automático. Para autocomplete :

• cc-name
• cc-number
• cc-csc
• cc-exp-month
• cc-exp-year
• cc-exp
• cc-type
• cc-csc

Para name :

• ccname
• cardnumber
• cvc
• ccmonth
• ccyear
• expdate
• card-type
• cvc
  

Para usar o preenchimento automático, você deve adicionar os atributos de autocomplete e de name relevantes para os elementos de entrada em seu arquivo index.html :

 <input type="text" class="card__input card__input_number" placeholder="XXXX XXXX XXXX XXXX" pattern="[0-9]{14,23}" required autofocus autocomplete="cc-number" name="cardnumber"> <input type="text" class="card__input card__input_date card__input_month" placeholder="MM" pattern="[0-9]{1,2}" required autocomplete="cc-exp-month" name="ccmonth"> <input type="text" class="card__input card__input_date card__input_year" placeholder="YYYY" pattern="[0-9]{2,4}" required autocomplete="cc-exp-year" name="ccyear"> <input type="text" class="card__input card__input_cardholder" placeholder="CARDHOLDER NAME" required autocomplete="cc-name" name="ccname">

Não se esqueça de usar o placeholder nos campos de entrada para ajudar os usuários a entender os formatos de dados necessários. Podemos fornecer validação de entrada com atributos HTML5: pattern (baseado em expressões regulares JavaScript) e required . Por exemplo, com atributos pattern=”[0-9\s]{14,23}” required em um campo, o usuário não poderá enviar o formulário se o campo estiver vazio, tiver um não numérico ou não -símbolo de espaço, ou é menor que 14 símbolos ou maior que 23 símbolos.

Depois que o usuário salvou os dados do cartão no navegador, podemos ver como funciona:

Observe que o uso de um campo para a data de expiração ( MM/YYYY ) não é recomendado porque o Safari requer campos de mês e ano separados para preenchimento automático.

É claro que os atributos de preenchimento automático e preenchimento automático são amplamente usados ​​não apenas para formulários de cobrança, mas também para nomes, endereços de e-mail, endereços postais e senhas. Você pode economizar tempo do usuário e deixá-lo ainda mais feliz usando corretamente esses atributos em seus formulários.

Embora agora tenhamos preenchimento automático, Google Payments e Apple Wallet, muitos usuários ainda preferem inserir os detalhes do cartão de crédito manualmente e ninguém está a salvo de cometer um erro de digitação com um número de 16 dígitos. Números longos são difíceis de ler, ainda mais dolorosos de escrever e quase impossíveis de verificar.

Para ajudar os usuários a se sentirem confortáveis ​​com seu número de cartão longo, podemos dividi-lo em grupos de quatro dígitos adicionando a biblioteca VanillaMasker simples do BankFacil ao nosso projeto. Os dados inseridos serão transformados em uma string mascarada. Assim, podemos adicionar um padrão personalizado com espaços após cada quarto dígito de um número de cartão, um padrão de dois dígitos para o mês de vencimento e um padrão de quatro dígitos para o ano de vencimento. VanillaMasker também pode verificar os formatos de dados: Se passamos apenas “9” (o número padrão para o mascarador) para o ID, todos os caracteres não numéricos serão excluídos após a entrada.

 npm install vanilla-masker --save

Em nosso arquivo index.js , vamos importar a biblioteca e usá-la com uma string para cada campo:

 import masker from 'vanilla-masker'; const cardNumber = document.getElementById('card__input_number'); const cardMonth = document.getElementById('card__input_month'); const cardYear = document.getElementById('card__input_year'); masker(cardNumber).maskPattern('9999 9999 9999 9999 99'); masker(cardMonth).maskPattern('99'); masker(cardYear).maskPattern('9999');

Assim, os dígitos do número do cartão em nosso formulário serão separados, como em um cartão real:

O mascarador apagará caracteres com um tipo ou tamanho de valor incorreto, embora nossa validação HTML notifique o usuário sobre dados inválidos somente após o envio do formulário. Mas também podemos verificar a exatidão de um número de cartão à medida que ele é preenchido. Você sabia que todos os números de cartão de crédito de plástico são gerados de acordo com o algoritmo Luhn simples e eficaz? Foi criado em 1954 por Hans Peter Luhn e posteriormente definido como um padrão internacional. Podemos incluir o algoritmo Luhn para pré-validar o campo de entrada do número do cartão e avisar o usuário sobre um erro de digitação.

Para fazer isso, podemos usar o pequeno pacote fast-luhn npm, adaptado da essência de Shirtless Kirk. Precisamos adicioná-lo às dependências do nosso projeto:

 npm install fast-luhn --save

Para usar o fast-luhn, vamos importá-lo em um módulo e apenas chamar luhn(number) no evento de entrada para verificar se o número está correto. Por exemplo, vamos adicionar a classe card__input_invalid para alterar o outline e a color do texto do campo quando o usuário cometeu um erro acidental e uma verificação não foi aprovada. Observe que VanillaMasker adiciona um espaço após cada grupo de quatro dígitos, portanto, precisamos converter o valor inserido em um número simples sem espaços usando os métodos split e join , antes de chamar lunh .

O resultado é um código que se parece com isso:

 import luhn from 'fast-luhn'; const cardNumber = document.getElementById('card-number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; if (number.length >= 14) { const isLuhnCheckPassed = luhn(number.split(' ').join('')); cardNumber.classList.toggle('card__input_invalid', !isLuhnCheckPassed); cardNumber.classList.toggle('card__input_valid', isLuhnCheckPassed); } else { cardNumber.classList.remove('card__input_invalid', 'card__input_valid'); } });

Para evitar que luhn seja chamado enquanto o usuário estiver digitando, vamos chamá-lo apenas se o número inserido for tão longo quanto o comprimento mínimo com espaços (14 caracteres, incluindo 12 dígitos) ou mais, ou então remova a classe card__input_invalid .

Aqui estão os exemplos de validação em ação:

O algoritmo Luhn também é usado para alguns números de cartões de desconto, números IMEI, números de identificador de provedor nacional nos EUA e números de seguro social no Canadá. Portanto, este pacote não se limita a cartões de crédito.

Muitos usuários desejam verificar os dados do cartão com os próprios olhos, mesmo sabendo que o formulário está sendo validado. Mas os seres humanos percebem as coisas de uma maneira que torna a comparação de números de estilos diferentes um pouco confusa. Como queremos que a interface seja simples e intuitiva, podemos ajudar os usuários mostrando uma fonte parecida com a que encontrariam em um cartão real. Além disso, a fonte fará com que nosso formulário de entrada tipo cartão pareça mais realista e apropriado.

Várias fontes de cartão de crédito gratuitas estão disponíveis:

• Halter, Laboratórios Apostróficos
• Fontes de crédito, tipodérmicas
• Cartão de crédito, K-Type (gratuito para uso pessoal)

Usaremos Halter. Primeiro, baixe a fonte, coloque-a na pasta do projeto e crie uma regra CSS3 @font-face em style.css :

 @font-face { font-family: Halter; src: url(font/HALTER__.ttf); }

Em seguida, basta adicioná-lo à regra font-family para a classe .card-input :

 .card-input { color: #777; font-family: Halter, monospace; }

Não esqueça que se você inserir o CSS em um arquivo JavaScript com o pacote webpack, você precisará adicionar file-loader :

 npm install file-loader --save

E adicione file-loader para os tipos de arquivo de fonte em webpack.config.js :

 module: { loaders: [ { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file', }], },

O resultado parece muito bom:

Você pode torná-lo ainda mais chique, se quiser, com um efeito em relevo usando uma text-shadow dupla e uma semitransparência na color do texto:

 .card-input { color: rgba(84,110,122,0.5); text-shadow: -0.75px -0.75px white, 0.75px 0.75px 0 black; font-family: Halter, monospace; } 

Por último, mas não menos importante, você pode surpreender agradavelmente os clientes adicionando um recurso de coloração ao formulário. Cada banco tem sua própria cor de marca, que geralmente domina o cartão daquele banco. Para tornar um formulário de cobrança ainda mais fácil de usar, podemos usar essa cor e imprimir o nome do banco acima dos campos do formulário (correspondente a onde ele aparece em um cartão real). Isso também ajudará o usuário a evitar erros de digitação no número e a garantir que escolheu o cartão certo.

Podemos identificar o banco do cartão de cada usuário pelos seis primeiros dígitos, que contêm o Número de Identificação do Emissor (IIN) ou o Número de Identificação do Banco (BIN). Banks DB by Ramoona é um banco de dados que obtém o nome e a cor da marca de um banco a partir desse prefixo. O autor criou uma demonstração do Banks DB.

Esse banco de dados é orientado pela comunidade, portanto, não contém todos os bancos do mundo. Se o banco de um usuário não estiver representado, o espaço para o nome do banco ficará vazio e o fundo mostrará a cor padrão ( #fafafa ).

Bancos DB assume uma das duas formas de usá-lo: com PostCSS ou com CSS em JavaScript. Estamos usando-o com PostCSS. Se você é novo no PostCSS, esta é uma boa razão para começar a usá-lo. Você pode aprender mais sobre PostCSS na documentação oficial ou no artigo de Drew Minns “An Introduction to PostCSS”.

Precisamos instalar o plugin PostCSS Banks DB para definir o template CSS para Banks DB e instalar o plugin PostCSS Contrast para melhorar a legibilidade do nome do banco:

 npm install banks-db postcss-banks-db postcss-contrast --save

Depois disso, adicionaremos esses novos plugins ao nosso processo PostCSS de acordo com o empacotador de módulos e a configuração de carregamento usada em nosso projeto. Por exemplo, com Webpack e postcss-load-config, basta adicionar os novos plugins ao arquivo .postcssrc .

Então, em nosso arquivo style.css , precisamos adicionar um novo modelo de regra de classe para Bancos de Dados com o plugin postcss-contrast:

 @banks-db-template { .card_bank-%code% { background-color: %color%; color: contrast(%color%); } }

Também poderíamos definir uma transition longa em toda a classe .card para suavizar e desaparecer suavemente o plano de fundo e a cor do texto, para não assustar os usuários com uma mudança abrupta:

 .card { … transition: background 0.6s, color 0.6s; }

Agora, importe Banks DB em index.js e use-o no listener de eventos de input . Se o BIN estiver representado no banco de dados, adicionaremos ao formulário a classe que contém o nome do banco para inserir o nome e alterar o plano de fundo do formulário.

 import banksDB from 'banks-db'; const billingForm = document.querySelector('.card'); const bankName = document.querySelector('.card__bank-name'); const cardNumber = document.getElementById('card__input_number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; const bank = banksDB(number); if (bank.code) { billingForm.classList.add(`card_bank-${(bank.code || 'other')}`); bankName.innerText = bank.country === 'ru' ? bank.localTitle : bank.engTitle; } else { billingForm.className = 'card'; bankName.innerText = ''; } });

Se você usa webpack, adicione json-loader para a extensão de arquivo .json na configuração do webpack para inserir o banco de dados no pacote corretamente.

Aqui está um exemplo de trabalho do Banks DB:

Caso você não veja nenhum efeito com seu cartão bancário, você pode abrir um problema ou adicionar seu banco ao banco de dados.

Conclusão

Melhorar seu formulário de cobrança pode tornar a experiência do usuário muito mais intuitiva e, consequentemente, garantir a comodidade do usuário e aumentar a confiança em seu produto. É uma parte importante dos aplicativos da web. Podemos melhorá-lo de maneira rápida e fácil usando esses recursos simples:

• atributos de preenchimento autocomplete e name adequados para preenchimento automático,
• atributo placeholder para informar o usuário do formato de entrada,
• pattern e require atributos para evitar o envio incorreto do formulário,
• VanillaMasker para separar os dígitos do cartão,
• fast-luhn para verificar o número do cartão,
• Fonte Halter para fácil comparação,
• Bancos DB para uma melhor apresentação das cores.

Observe que apenas o Banks DB requer um empacotador de módulos; você pode usar os outros dentro do script simples. Adicionar toda essa funcionalidade à sua página de checkout provavelmente levaria menos de um dia.