Dentre os diversos tipos de input que podem ser usados e as pessoas precisam interagir, Phone Number ou Telefone é um dos campos mais difíceis de acertar. Existem muitos formatos diferentes de números de telefone e, como resultado, o difícil processo de validação para este tipo de input.
Conheça, a seguir, 3 dicas simples sobre como tornar o input de número de telefone mais eficiente.
Não divida o input em campos de texto separados
Quando se começa a pensar em Melhores práticas para input Telefone, à primeira vista, dividir o input em vários campos resolverá o problema da formatação: as pessoas se depararão com uma restrição que as impedirá de adicionar um número incorreto.
No entanto, esta decisão de design apresentará alguns problemas sérios:
- Custo de interação aumentado. Será preciso navegar de um campo para outro. Isso é particularmente difícil em dispositivos móveis.
- Diferentes formatos de telefone. Criar inputs específicos para um país pode causar problemas para usuários internacionais — eles não poderão fornecer um número em seu formato. Por exemplo, o formato do telefone nos EUA é bem diferente do brasileiro: +1 (xxx) xxx-xx-xx.
Forneça seletor de país
O código do país deve ser exibido ao lado do número de telefone. Com base no país selecionado, em muitos casos, você pode definir as regras da máscara e validação do input.
2 dicas adicionais:
- Defina um padrão. Pré-preencha o código do país com base em dados de geolocalização.
- Permita modificar o código do país. O seletor de país deve parecer um elemento interativo; deve ficar claro que ele pode ser alterado.
Existe uma solução JavaScript muito interessante para usar um input de telefone com suporte internacional, a International Telephone Input — antes era um plugin jQuery, mas, atualmente, é dependency free.
Como visto, ele é uma solução para input Telefone que implementa bastante corretamente um seletor de países, com o plus de apresentar o respectivo código de país.
Formatação automática com máscara
Se você já pensou por mais de 10 segundos em melhores práticas para input Telefone, sabe que é difícil validar um número de telefone quando você o vê sem formatação.
Os bons campos de formulário usam o input como affordance para indicar o formato necessário do valor esperado. É particularmente útil para campos como números de telefone, porque eles definem a contagem de caracteres.
É por isso que, quando alguém digita seu número de telefone, ele deve ser formatado automaticamente para o número apropriado sem nenhum esforço extra — leia-se: sem digitar parênteses, hífens etc.
O mascaramento de campo é uma técnica que ajuda a formatar o texto inserido; mas muitos designers confundem mascaramento de campo com placeholder…
Ao contrário dos placeholders, que são basicamente texto estático, as máscaras formatam automaticamente os dados fornecidos.
Conclusão
É incrível como a atenção e foco a determinados problemas revelam sua verdadeira natureza e, às vezes, complexidade. Você imaginava que há tanta complexidade para fazer um simples input Telefone melhor e mais eficiente?
Como visto, muitas das considerações apresentadas são estreitamente relacionadas a sistemas com suporte a multi-idiomas, mas, como costumamos dizer, boas práticas são boas práticas.
E aí, tem mais alguma(s) dica(s) quando o assunto é melhorar a experiência/eficiência de uso de campos de telefone? Comente aí!