Melhores práticas para input Telefone

Conheça algumas melhores práticas para input Telefone e saiba como aprimorar a experiência/eficiência de inputs de telefone em seus projetos Web.

Ir para o artigo

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.
Melhores práticas para input Telefone: comparativo entre input dividido e não-dividido.
Não divida inputs para Telefone

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.

Melhores práticas para input Telefone: exemplo de input com seletor de país.

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.

Melhores práticas para input Telefone: International Telephone Input em funcionamento.
Exemplo do International Telephone Input em ação

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.

Melhores práticas para input Telefone: comparativo entre input de telefone com e sem formatação/máscara.
Quando um número de telefone é exibido em “pedaços”, isso facilita a localização e correção de erros de digitaçã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í!

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS