Um campo de número de telefone parece simples, mas não é. Uma caixa de texto com a etiqueta "Telefone". Mas, no momento em que abres o formulário a utilizadores internacionais ou pedes números de telefone no telemóvel, esse campo simples complica-se. Cada país formata os números de forma diferente. Têm de aparecer teclados diferentes. Quem liga do estrangeiro pensa em indicativos de país. O teu formulário tem de lidar com tudo isto, ou perdes qualidade nos dados. Um bom campo de telefone funciona em qualquer lado e guia os utilizadores para o formato certo, em vez de os contrariar.
Pega em qualquer formulário de alta conversão que recolha números de telefone. Vê como trata o campo. A maioria trata-o como qualquer campo de texto, assumindo que os utilizadores vão escrever o formato que acharem certo. Depois os dados chegam num caos. Alguns números têm traços. Outros têm parênteses. Outros têm espaços. Outros nem têm formatação. A tua base de dados fica com o mesmo número de telefone em cinco formatos diferentes. Quando precisas de ligar a alguém, o teu sistema não reconhece que 5551234567 e (555) 123-4567 são o mesmo número. Os dados foram tecnicamente recolhidos, mas funcionalmente estão estragados.
A solução não é aceitar o caos e normalizá-lo mais tarde. A solução é guiar os utilizadores para um formato correto enquanto escrevem. Isto faz-se com máscaras de entrada, predefinições inteligentes e uma validação que ajuda em vez de bloquear.
Porque é que os campos de telefone precisam de um tratamento diferente dos campos de texto
Um número de telefone é um dado com regras internacionais. Um endereço de email é basicamente universal. Um nome pode ser o que a pessoa quiser. Mas um número de telefone tem uma estrutura definida pela União Internacional das Telecomunicações. Países diferentes usam comprimentos, prefixos e normas de formatação diferentes. Um número válido no Japão não se parece nada com um número válido em França. O teu campo tem de perceber isto, senão rejeita números bons e aceita números maus.
Mais do que isso, os utilizadores pensam nos números de telefone no formato do seu próprio país. Uma pessoa em Londres pensa no formato do Reino Unido. Uma pessoa em Berlim pensa no formato alemão. Quando as forças a usar o formato americano, ficam confusas. Cometem erros. Abandonam o formulário. A fricção vem da diferença entre o que o campo espera e o que o utilizador tenta dar-te.
A decisão entre campo único e campo dividido
Alguns formulários dividem o número de telefone em campos separados. O indicativo de zona numa caixa. A central noutra. O número da linha noutra. Isto funciona lindamente para números de telefone americanos, em que a estrutura é previsível. Falha em todo o lado. Um utilizador na Alemanha não consegue encaixar o seu número em três caixas americanas. Nem um utilizador na Austrália ou em França. Os campos divididos também prejudicam a experiência no telemóvel, porque os utilizadores têm de tocar entre campos em vez de escreverem de seguida. Os testes de usabilidade mostram que muitos utilizadores têm dificuldade em navegar entre campos separados nos telemóveis.
Um único campo é melhor. Uma caixa de entrada comprida. Um sítio para escrever o número todo. O campo guia o formato através de uma máscara de entrada, e não através da divisão. Isto funciona igualmente para números nacionais e internacionais. Os utilizadores de telemóvel escrevem uma vez e acabou.
Como a máscara de entrada transforma o caos em ordem
A máscara de entrada formata o número automaticamente enquanto alguém escreve. A pessoa escreve 5 5 5 1 2 3 4 5 6 7 e o campo mostra (555) 123-4567. Escreva devagar ou depressa, a formatação acompanha. Isto serve dois propósitos. Primeiro, dá-lhe feedback em tempo real de que está a escrever no formato certo. Segundo, impede-a de introduzir o formato errado logo à partida. Não consegue escrever um carácter que quebre o formato. O campo não o aceita.
O formato mostrado depende do país selecionado. Se escolherem os Estados Unidos, a máscara é (XXX) XXX-XXXX. Se escolherem o Canadá, é a mesma. Se escolherem a Alemanha, a máscara adapta-se. O utilizador vê um formato que reconhece. Escreve nele. Os dados chegam limpos ao teu lado.
A investigação mostra que 89 por cento dos utilizadores introduzem um número de telefone no formato que escolherem, mesmo quando há dicas. A máscara de entrada elimina este problema por completo. Não sugeres o formato. Impões-no visualmente enquanto escrevem.
Indicativo de país e suporte internacional
No momento em que te tornas internacional, precisas de um seletor de país. Uma lista pendente que mostra os nomes dos países com ícones de bandeira. O utilizador escolhe o seu país. O campo atualiza a máscara de entrada. O indicativo do país aparece automaticamente.
Duas decisões de design importam aqui. Primeiro, define uma predefinição inteligente. Se a maioria dos teus utilizadores está nos EUA, usa os EUA por predefinição. Se tens um público global, usa por predefinição a localização real do utilizador através de dados de geolocalização. Alguém em França não devia ter de deslizar por 20 países para encontrar França. Segundo, mantém o seletor de país visível e fácil de mudar. Um utilizador pode escolher o país errado por engano. Deve poder mudar com um toque, e não procurar uma lista pendente escondida.
O indicativo do país deve aparecer junto do número. Um utilizador vê +1 (555) 123-4567, e não apenas (555) 123-4567. Isto torna o formato inequívoco. Sabe que este é um número dos EUA pelo prefixo +1. Se se enganou e escolheu o país errado, vê logo e pode mudar.
Mais uma coisa: quando o utilizador muda o país, mantém o número que já escreveu. Não apagues o campo. Não reponhas tudo. Se escreveu 5551234567 e depois percebeu que escolheu o país errado, deixa-o mudar o indicativo e manter os dígitos. Não deve ter de recomeçar.
Teclados de telemóvel e o atributo type="tel"
No telemóvel, o teclado importa. Mostra o teclado de email num campo de email. Mostra o teclado numérico num número de telefone. Isto não é só comodidade. Uma pequena diferença na disposição do teclado evita erros. Quem olha para um teclado numérico lembra-se de que está a introduzir um número, e não texto. A disposição dificulta escrever letras por engano.
Usa type="tel" no HTML para ativar automaticamente o teclado numérico. Nem todos os telemóveis mostram o mesmo teclado. Alguns mostram 0-9 mais símbolos. Outros mostram só números. Outros mostram letras junto com os números. O comportamento varia consoante o dispositivo. Mas todos os telemóveis vão mostrar algo mais útil do que o teclado QWERTY completo.
Além da escolha do teclado, os ecrãs de telemóvel são pequenos. Faz o campo de entrada grande. Botões do tamanho de um polegar em baixo. Campo de largura total. Sem deslizar na horizontal. Um número difícil de tocar é um número que não será escrito corretamente.
Que estratégias de validação funcionam mesmo
A validação verifica se o número é real. Real quer dizer que segue as regras de formato do país selecionado e tem o número certo de dígitos. Países diferentes têm contagens de dígitos diferentes. Um número dos EUA tem 10 dígitos depois do indicativo do país. Um número alemão tem entre 6 e 11 dígitos, consoante a região. A tua validação tem de conhecer estas regras.
A melhor abordagem de validação para números de telefone é a norma E.164. É o formato internacional definido pela UIT que todos os sistemas globais entendem. O formato E.164 é um sinal de mais, o indicativo do país e depois o número nacional. Sem espaços, parênteses nem traços. +14155550123 para um número dos EUA. É isto que fica guardado na tua base de dados. O que o utilizador vê e escreve é formatado para ser legível. O que fica guardado é E.164, para consistência e rigor.
Corre a validação em dois sítios. Primeiro, valida no navegador enquanto o utilizador escreve. Validação em tempo real. Vê uma marca de verificação quando o número está completo e válido. Vê uma mensagem quando falta algo. Segundo, valida no teu servidor depois de enviarem. A validação no cliente torna a experiência fluida. A validação no servidor protege os teus dados caso alguém desative as verificações do navegador ou envie dados maus por uma API.
O erro de pedir a confirmação do telefone
Alguns formulários pedem o número de telefone e depois pedem a confirmação do telefone. Escreve o teu número. Escreve-o outra vez para confirmar. Isto duplica a fricção. Alguém tem de escrever um número de 10 dígitos corretamente e depois voltar a escrevê-lo corretamente. A maioria das pessoas vai enganar-se numa das duas tentativas. Depois ficam presas. Os dois números não coincidem. Têm de corrigir os dois campos para avançar.
Uma abordagem melhor é validar o número em tempo real enquanto escrevem. Quando chegam ao botão de envio, o número já está validado. Não precisas que o escrevam duas vezes. A própria validação é a confirmação.
Erros comuns que estragam a qualidade dos dados de telefone
Aceitar qualquer número de telefone sem verificar o país
Um formulário aceita um número de 7 dígitos e um número de 15 dígitos sem saber de que país veio cada um. Ambos ficam guardados como válidos. Mais tarde, tentas ligar a alguém e nenhum dos números funciona. Valida sempre com base no país selecionado. Um número de 7 dígitos pode ser válido em alguns países europeus. Um número de 10 dígitos é normal nos EUA, mas está errado em todo o lado. O contexto do país conta em todas as regras de validação.
Mostrar erros de validação só depois do envio
Se esperares que alguém clique em enviar para lhe dizer que o número de telefone está incompleto ou inválido, criaste fricção. Clicam em enviar. Veem um erro. Corrigem o número. Enviam outra vez. A validação em tempo real evita isto. No momento em que acabam de escrever o número, sabem se é válido. No momento do envio, não deve haver surpresas.
Esconder o seletor de país num sítio confuso
O indicativo do país não é um pormenor de última hora. Torna-o óbvio. Uma lista pendente grande no topo do campo de telefone, e não enterrada debaixo de outras três listas pendentes. O utilizador precisa de a ver e de a poder mudar com facilidade. Se escolher o país errado, deve reparar logo pela mudança de formato no campo.
Não explicar porque precisas do número de telefone
A investigação mostra que 14 por cento dos utilizadores abandonam o checkout se um campo de telefone for obrigatório sem explicação. No entanto, os testes também mostram que os utilizadores ficam se lhes disseres simplesmente porque precisas dele. Acrescenta uma frase de texto de ajuda. "Vamos usar isto para confirmar a tua encomenda" ou "É assim que falamos contigo se houver dúvidas." Um pequeno contexto evita o abandono.
Usar uma formatação que só funciona num país
Se formatares todos os números como (XXX) XXX-XXXX, ficaste preso a números dos EUA. Esse formato não quer dizer nada na Alemanha nem no Japão. Ou usas E.164 para guardar e uma máscara que conhece o país para a entrada, ou fazes o formato adaptar-se ao país selecionado. Não assumas que um formato funciona em todo o lado.
Preocupações de privacidade e o campo de telefone opcional
Os números de telefone são dados pessoais. Em muitas jurisdições, recolhê-los ativa regras de privacidade. Os utilizadores protegem cada vez mais os seus números de telefone porque levam a chamadas de spam. Alguns formulários recolhem números de telefone por hábito, e não por necessidade real. Se não precisas mesmo de um número de telefone, não o peças. Se precisas, explica porquê.
Torna o campo opcional, se possível. Os campos obrigatórios criam fricção. Os campos opcionais reduzem o abandono. Se o contacto por telefone é importante mas não é absolutamente necessário no teu fluxo de trabalho, marca-o como opcional e explica o valor. "Acrescenta o teu número de telefone para te enviarmos atualizações da encomenda por mensagem" dá-lhes uma razão para o preencher, mesmo não sendo obrigatório.
Como o WEMASY trata os campos de número de telefone
O criador de formulários do WEMASY inclui campos de número de telefone com suporte internacional incorporado. Cria um campo de telefone e escolhe se é local ou internacional. Para local, define o teu país. Para internacional, os utilizadores veem uma lista pendente de países com ícones de bandeira. O campo mostra automaticamente a máscara de entrada certa com base no país selecionado. Enquanto escrevem, o campo formata automaticamente. (555) 123-4567 aparece sem terem de escrever os parênteses e os traços. A validação em tempo real confirma que o número está completo e é válido para o país selecionado. No telemóvel aparece o teclado numérico. O campo funciona em todos os dispositivos. Vê os teus dados de números de telefone nas estatísticas do formulário e repara nos padrões do formato que os utilizadores tentam introduzir. Quando os dados chegam ao teu CRM, todos os números estão em formato E.164. São consistentes. Funcionam com sistemas de marcação. A tua comunicação de seguimento chega à pessoa certa.