# Melhores práticas para input Telefone
> Melhores práticas para input de telefone em formulários. UX aprimorada, validação, formatação automática e acessibilidade em campos telefônicos. Otimize!
URL: https://dpw.dev/ui-ux/melhores-praticas-para-input-telefone/
Publicado em: 2019-11-18
Categoria: ui-ux
Tags: interface, usabilidade
Autor: Tárcio Zemel
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.
> Artigo baseado em [Phone Number Field Design Best Practices](https://uxplanet.org/phone-number-field-design-best-practices-23957cbd86d5).
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.
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.
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](https://github.com/jackocnr/intl-tel-input) -- antes era um plugin jQuery, mas, atualmente, é _dependency free_.
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.
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í!
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml