Format convivial pour les numéros de téléphone
Actuellement, sur mon site Web, les utilisateurs doivent entrer leur numéro de téléphone dans un format très spécifique (555-555-5555). Si vous oubliez les tirets, cela casse. Quelqu'un a-t-il une bonne suggestion sur la façon d'être plus flexible en permettant aux utilisateurs de saisir comme ils le souhaitent, tout en permettant au système de valider s'il s'agit d'un vrai numéro de téléphone? Comment sont gérées les extensions téléphoniques?
Idéalement, vous les laisseriez taper le numéro de téléphone dans n'importe quel format et vous auriez une logique côté client et serveur qui pourrait l'analyser.
À moins que - si vous cherchez simplement une solution rapide - envisagez d'utiliser le masquage de champ. Si vous utilisez jQuery, celui-ci est décent:
Archivé - http://digitalbush.com/projects/masked-input-plugin/#demo
J'éviterais d'utiliser quelque chose de propriétaire et ferais plutôt référence à quelque chose de standard, comme E.12 .
Parce que c'est une norme internationale reconnue, je m'attendrais à trouver des exemples de code - ou même des bibliothèques complètes - que vous pouvez connecter à votre processus de validation.
1. Les numéros de téléphone ne sont finalement qu'une chaîne de chiffres numériques
Vous souhaitez utiliser l'entrée brute de l'utilisateur partout dans l'interface utilisateur, puis stocker également la chaîne de chiffres convertie pour tout le calcul à utiliser.
2. Laissez l'utilisateur se souvenir des numéros de téléphone comme il le souhaite
Certaines personnes utilisent des lettres pour les aider à se souvenir plus facilement de leur numéro . Dire à un utilisateur qu'il ne peut pas saisir de lettre, de tiret, de trait d'union, de parenthèse est frustrant. Il n'est vraiment pas nécessaire d'exiger qu'un utilisateur saisisse son numéro d'une certaine manière.
N'essayez pas non plus de modifier ce que l'utilisateur saisit après coup car vous ne les aidez pas vraiment. S'ils ne tapent que des chiffres et rien d'autre, alors n'ajoutez pas de tirets. S'ils tapent des parenthèses, des tirets ou des points, laissez-les également en place et ignorez-les de manière transparente.
La meilleure approche pour l'expérience utilisateur consiste à laisser l'utilisateur saisir le numéro de téléphone en utilisant le format avec lequel il est le plus à l'aise. Ne le divisez pas en champs séparés, ne forcez pas un masque, laissez-le être de forme libre. Ensuite, une fois que l'utilisateur a fini d'entrer dans le champ (en quittant le champ pour soumettre les données), formatez le numéro dans un format standard pour vos besoins.
Puisque vous parlez d'un site Web, vous pouvez effectuer le formatage sur l'événement de flou à l'aide du projet Google libphonenumber http://code.google.com/p/libphonenumber/ . Cet outil gère les numéros de téléphone internationaux et une grande variété de formats. Voici un exemple en JavaScript: http://libphonenumber.googlecode.com/svn/trunk/javascript/i18n/phonenumbers/demo.html
La raison pour laquelle cette approche est meilleure pour l'expérience utilisateur est qu'elle permet au modèle mental de l'utilisateur de rester inchangé et lui permet de dire "Ne me faites pas réfléchir". Le masquage et les champs séparés forcent un modèle mental de numéros de téléphone sur les utilisateurs et nécessitent plus de réflexion.
La meilleure solution que j'ai trouvée (5 ans après la question posée) est " intl-tel-input ". Il utilise la bibliothèque libphonenumber de Google pour la validation.
"intl-tel-input" est un plugin jQuery pour "pour entrer et valider des numéros de téléphone internationaux. Il ajoute une liste déroulante de drapeaux à toute entrée, détecte automatiquement le pays de l'utilisateur, affiche un espace réservé pertinent et formate automatiquement le numéro au fur et à mesure de leur saisie".
https://github.com/jackocnr/intl-tel-input
Le format le plus convivial est un format qui accepte tout et ne fait aucune validation.
Nous parlons ici de numéros de téléphone, pas d'informations de carte de crédit. Combien de personnes tapent mal leur numéro de téléphone? A moins que ce ne soit un site pour l'International Dyslexic Association, probablement personne.
La seule chose que vous pouvez valider est un format. Vous ne savez toujours pas si le nombre est correct.
Vous devez simplement utiliser une ancienne zone de texte ordinaire et utiliser votre code principal pour l'analyser si vous en avez vraiment besoin. Personnellement, je ne vois pas la nécessité d'exiger un format spécifique quel qu'il soit. Si un utilisateur souhaite pouvoir saisir très rapidement les 10 chiffres de son numéro de téléphone, laissez-le.
Vous devez également vous rappeler qu'il n'y a pas qu'un seul format au monde à traiter, et vous devrez peut-être également traiter des cas étranges comme les extensions.
Laissez les utilisateurs entrer des nombres ainsi que "-" et des espaces, afin que vous puissiez saisir le numéro comme ils le souhaitent. Tant qu'ils entrent un nombre suffisant, il peut s'agir d'un numéro de téléphone valide. Vous pouvez utiliser la validation côté client pour compter les nombres et afficher un message s'il y en a trop peu. Vous ne pourrez jamais vérifier si le numéro de téléphone est vraiment activé, donc les erreurs de frappe sont inévitables.
Le serveur peut analyser les autres caractères et simplement stocker les nombres dans la base de données (et les réanalyser selon votre format préféré à des fins d'affichage).
GDS a quelques conseils:
"Ne collectez des numéros de téléphone que si vous en avez vraiment besoin. Tout le monde n'a pas ou ne peut pas utiliser un téléphone, alors assurez-vous de laisser aux utilisateurs le choix de la manière de les contacter.
Autoriser différents formats
Les utilisateurs devraient être autorisés à saisir des numéros de téléphone dans le format qui leur est familier. Vous devez prévoir des espaces supplémentaires, des tirets, des crochets et des tirets, et être en mesure d'accueillir les codes de pays et de zone.
Valider les numéros de téléphone
Vous devez valider les numéros de téléphone afin de permettre aux utilisateurs de savoir s'ils en ont entré un incorrectement. La bibliothèque libphonenumber de Google peut valider les numéros de téléphone de la plupart des pays.
Messages d'erreur
Si le numéro de téléphone n'est pas au bon format et qu'il n'y a pas d'exemple
Dites "Entrez un numéro de téléphone, tel que 01632 960 001, 07700 900 982 ou +44 0808 157 0192".
Si le numéro de téléphone n'est pas au bon format et qu'il existe un exemple
Dites "Entrez un numéro de téléphone au format correct".
Indiquez clairement le type de numéro de téléphone dont vous avez besoin
Utilisez l'étiquette du formulaire ou le texte du conseil pour indiquer aux utilisateurs si vous avez spécifiquement besoin d'un numéro de téléphone britannique, international ou mobile.
Si vous souhaitez inclure un exemple de numéro de téléphone (par exemple dans du texte de conseil), Ofcom gère une liste de numéros réservés pour une utilisation dans les médias. Ceux-ci sont:
Royaume-Uni non géographique: 01632 960000 à 960999 Royaume-Uni Londres: 020 7946 0000 à 7946 0999 Royaume-Uni mobile: 07700 900000 à 900999 Expliquez pourquoi vous avez besoin d'un numéro de téléphone
Dites aux utilisateurs pourquoi vous pouvez les contacter et quand.
N'affichez pas les numéros de téléphone sous forme de liens sur les appareils qui ne peuvent pas passer d'appels
Il est possible de marquer des numéros de téléphone comme des liens, comme ceci:
020 7947 6330 Cependant, cette opération stylisera les numéros de téléphone en tant que liens, ce qui prête à confusion sur les appareils qui ne prennent pas en charge les appels téléphoniques, comme la plupart des ordinateurs de bureau.
Ce n'est pas non plus nécessaire - la plupart des navigateurs mobiles modernes détectent automatiquement les numéros de téléphone et les affichent quand même sous forme de liens.
Si vous devez marquer votre numéro de téléphone en tant que liens, par exemple, pour prendre en charge un appareil qui ne peut pas les détecter automatiquement, assurez-vous qu'ils ne s'affichent pas en tant que liens sur les appareils qui ne peuvent pas passer d'appels.
Écrire des numéros de téléphone dans le style GOV.UK
Évitez le masquage d'entrée
Évitez le masquage des entrées, car il est plus difficile pour les utilisateurs de:
taper un numéro de sa manière préférée transcrire un numéro d'un autre endroit et vérifier qu'il a bien fait Éviter de reformater les numéros de téléphone
L'équipe GOV.UK Notify a observé que certains utilisateurs étaient confus lorsqu'ils se voyaient présenter une version reformatée d'un numéro de téléphone qu'ils avaient fourni, par exemple, avec l'indicatif de pays +44 ajouté.
Recherche sur ce modèle
Des recherches supplémentaires sont nécessaires sur la meilleure façon de gérer:
extensions de numéros internationaux SMS shortcodes
Une autre option est ce que j'ai fait sur l'un de mes sites:
- Champ de saisie de texte libre pour permettre à l'utilisateur d'ajouter le numéro de téléphone à sa guise.
- Je prends ensuite le numéro, je le reformate comme j'en ai besoin et je le rends à l'utilisateur de plusieurs façons pour demander une confirmation.
Exemple:
L'utilisateur entre ceci dans le champ: 055 (0) 555-555 55555
J'affiche des boîtiers radio sous le formulaire pour demander confirmation:
Comment appelez-vous votre numéro depuis un autre pays?
+ 55-55555555555 (+55 est mon code de pays)
+ 55-0555555555555 (+55 est mon code de pays)
+ 1-55-55555555555 (+1 est mon code de pays)
+ 1-055-055555555555 (+1 est mon code de pays)
etc.
De cette façon, je peux confirmer le numéro de téléphone de l'utilisateur et savoir exactement comment le traiter, car j'ai besoin de connaître le code pays de l'utilisateur ...
Outre l'ajout de tirets, vous devrez gérer la position du curseur, en particulier en cas de suppression.
Ce module AMD fait exactement cela: https://github.com/whenyoubelieve2014/us-telephone-input
L'approche la plus simple de l'interface utilisateur consiste à diviser le format numérique en trois zones de texte limitées.
Vous pouvez également utiliser un RegEx pour analyser le numéro de téléphone entré dans le format que le système doit accepter pour un numéro de téléphone.
c'est-à-dire accepter - 0-9 + () -