Capture multiple vs champ unique pour la saisie du formulaire de numéro de téléphone
En travaillant sur un formulaire traitant des numéros de téléphone, j'ai vu deux méthodes pour capturer les entrées des utilisateurs.
Dans les pratiques antérieures, l'exemple 2 (image ci-dessous) s'est révélé efficace pour contrôler la longueur des numéros de téléphone sur les formulaires.
Cependant, avec réactif à l'esprit, il semblerait que l'exemple 1 soit considéré comme un modèle plus populaire sur les formulaires. J'ai recherché les deux modèles avec les résultats ci-dessous.
exemple 1
Avantages
- 1 entrée = moins de tapotements sur l'appareil mobile
- 1 entrée = moins de codage
Contre
- pourrait être difficile à contrôler le format du numéro de téléphone (1-555-555-5555, +22444455555, etc.)
Exemple 2
Avantages
- plus facile à contrôler le format du téléphone
- erreur utilisateur réduite
Contre
- 3 entrées = plus de tapotements sur l'appareil mobile
- plus d'entrées = plus de codage
Les deux entrées ont des avantages et des inconvénients et je ne sais pas quelle méthode offrirait la meilleure expérience utilisateur pour des environnements réactifs. Quelqu'un peut-il partager des informations ou fournir un meilleur moyen d'utiliser les entrées de numéro de téléphone?
Lorsqu'une personne compose un numéro de téléphone réel avec son téléphone, tape-t-elle 1-555-555-555 Ou tape-t-elle 15555555555?
La seule raison pour forcer un format fixe est que votre back-end ne peut pas déterminer le format dont il a besoin. Ce qui est un problème d'implémentation et vous forcez le manque de nous techniques sur l'utilisateur final. C'est comme dire "nous ne sommes pas capables d'analyser un numéro de téléphone dans un format que nous voulons, nous allons donc vous demander de taper le format que nous voulons".
Tout comme avec les numéros de carte de crédit - la plupart du temps, nous ne sommes plus censés taper 1111 - 1111 - 1111 - 1111 Dans 4 champs distincts et sélectionner visa à partir d'une liste déroulante car il y a déjà suffisamment d'informations dans la chaîne de carte de crédit elle-même pour connaître le type de carte, et nous pouvons facilement diviser un seul numéro 1111111111111111 en 4 'morceaux' si c'est comme cela que nous avons besoin à l'arrière.
Vous devriez essayer de mettre en place une sorte d'intelligence dans la logique elle-même. Par exemple, si vous connaissez le pays d'où provient la personne, vous connaîtrez le format du numéro de téléphone, et si vous savez qu'il s'agit d'un téléphone mobile et non d'une ligne fixe, c'est un autre indice à utiliser. Ensuite, donnez simplement à l'utilisateur un seul champ et laissez-le taper un nombre comme bon lui semble.
Heck, certaines personnes voudront utiliser un seul champ et taper +44 (020) 444 4444 dedans eux-mêmes. Mais vous devriez pouvoir supprimer tous les caractères et espaces inutiles par programmation et les stocker dans un seul champ.
Laissez la programmation faire le travail de grognement, pas l'utilisateur.
Un seul champ de saisie est toujours plus simple pour l'utilisateur - que ce soit pour un numéro de téléphone, un prénom et un nom, un numéro de sécurité sociale ou toute autre valeur que vous pouvez considérer comme étant divisée en "parties". Luke Wroblewski a écrit beaucouparticles à ce sujet avec beaucoup de données pour le sauvegarder.
Concevez votre page pour l'utilisateur, pas pour la base de données. Si vous devez absolument diviser un numéro de téléphone en morceaux séparés (préfixe international, indicatif régional, échange, code postal) avant de le stocker, essayez de le faire mais vérifiez-le auprès de l'utilisateur.
Par exemple, si l'utilisateur tape 5551234567 vous pouvez les inviter discrètement à confirmer que (555) 123-4567 est correct. Assurez-vous de leur donner un moyen de le corriger ainsi qu'un moyen de clarifier pourquoi votre supposition était fausse (par exemple, il peut ne pas s'agir d'un numéro de téléphone américain, alors laissez-les spécifier leur pays).
Soyez libéral avec ce que vous acceptez - autorisez l'utilisateur à utiliser un signe plus pour un préfixe international (et utilisez-le dans votre algorithme!) Ainsi que toute autre ponctuation qu'il juge nécessaire. Chacun a son propre style de mise en forme.
Je vous suggère de conserver un champ de saisie, mais utilisez un masque pour le texte: 
-Vous pouvez utiliser l'attribut d'espace réservé de HTML5 (si vous travaillez dans une application Web) pour afficher un exemple de numéro.
Mes principes directeurs pour cela sont les suivants, vis-à-vis des utilisateurs:
- Montrez-leur ce que vous attendez
- Prenez tout ce qu'ils vous donnent
- Montrez-leur ce que vous prenez
La meilleure façon d'accomplir les trois avec HTML5 et jQuery est d'emprunter ce plugin .
J'ai ajouté type="tel" Principalement pour donner aux utilisateurs mobiles un clavier au lieu d'un clavier, et placeholder="(999) 999-9999" comme meilleur moyen d'afficher le format attendu. Lorsque vous omettez placeholder, ou lorsque le focus est placé dans ce champ, l'utilisateur verra ceci:
À ce stade, ils peuvent taper ou coller les nombres qu'ils veulent et les voir bien remplis. S'ils essaient de taper ou de coller d'autres caractères, ils sont simplement ignorés. Le résultat final est un nombre agréable à regarder qui doit être convivial et reconnaissable pour l'utilisateur et le système.
Si vous souhaitez couvrir les possibilités internationales, demandez d'abord le pays de l'utilisateur, puis utilisez la logique du formulaire pour afficher un champ que vous avez personnalisé pour ce pays (ajustez les expressions/définitions régulières dans jQuery).
De mes tests, j'ai appris que vous n'utilisez JAMAIS, JAMAIS un seul champ vide pour représenter un numéro de téléphone (ou une carte de crédit ou tout autre champ en plusieurs parties). J'ai observé que les utilisateurs faisaient souvent des erreurs en tapant un seul numéro long, sans pouvoir trouver l'erreur qu'ils avaient commise. Avec un champ en plusieurs parties, ils ont identifié l'erreur plus facilement ("oh, le premier numéro du 2ème champ est faux!"). Les utilisateurs ont également l'habitude de taper des numéros en plusieurs parties comme ... des numéros en plusieurs parties. Votre fournisseur de services téléphoniques ne vous dit pas que votre numéro est le 10982859205, il vous dit que votre numéro est le 1 (098) 285-9205. Lorsqu'une personne raconte son numéro à une autre personne, elle ne dit pas tout en un seul numéro; ils le décomposent tel qu'il est écrit. Lorsque vous lisez un numéro sur une carte de crédit, il n'est pas écrit comme un chiffre géant; il est écrit en morceaux de 4 chiffres. Les utilisateurs y sont habitués, et si vous suivez la réponse de JonW, cela testera mal.
Il y a déjà beaucoup de réponses qui discutent des masques de saisie, ce qui est probablement la meilleure solution/la plus simple, mais j'ai également vu des solutions multi-champs bien codées bien tester. Par "bien codé", j'entends les champs qui copieront et colleront correctement les valeurs, passeront automatiquement au champ suivant lors de la frappe (supprimant la nécessité de taper sur les appareils mobiles), et effectueront automatiquement un saut inversé lorsque l'utilisateur atteindra le retour arrière. Les solutions multi-domaines fonctionnent, mais votre argument à propos de "plus d'entrées = plus de codage" est juste pour l'argent.
Étant donné que vous avez spécifié que vous n'utiliserez ce formulaire que pour un public américain, je ne vois pas vraiment de problème pour guider l'utilisateur vers l'utilisation d'un format particulier. Cependant, l'utilisation de plusieurs champs de texte n'est peut-être pas la meilleure façon de procéder. Étudions quelques sites Web existants à titre d'exemples:
Papa John's Pizza utilise plusieurs champs pour la création de leur compte. Au fur et à mesure que l'utilisateur tape, il passe automatiquement au champ suivant, ce qui est utile car l'utilisateur n'a pas à cliquer ou à tabuler plusieurs fois, mais cela peut être déroutant si l'utilisateur ne s'y attend pas. Si l'utilisateur tape mal, il n'est pas facile de revenir à une autre section et de le corriger.
Jimmy John's utilise un seul champ avec validation pour garantir que l'utilisateur tape un vrai numéro de téléphone. Cela garantit que l'utilisateur entre le format souhaité, mais le codage pour faire ce travail peut être difficile. De plus, si une erreur se produit, il peut être difficile pour l'utilisateur de la trouver.
Pizza Hut utilise un seul champ avec un masque de texte. Cela permet à un utilisateur d'entrer tous les nombres à la fois tout en spécifiant le format. Il empêche l'utilisateur de taper trop ou trop peu dans le champ et il est facile de comprendre où les erreurs se sont produites. Je l'aime. (Il convient de noter que Domino utilise le même type de champ de saisie, bien qu'ils se soient probablement copiés les uns les autres.)
Allez à l'exemple 1. Un champ pour le numéro de téléphone.
Effectuez quelques regex rapides côté client sur le numéro entré par l'utilisateur, pour tenir compte de toute erreur flagrante et enregistrer un appel inutile à votre serveur pour des entrées à 800 chiffres ou du texte tronqué.
En fin de compte, vous validez les données du formulaire Web sur le serveur et les désinfectez avant de les déposer dans votre base de données.
J'opterais pour l'option 1 en raison de la facilité d'utilisation d'un point de vue purement réactif et, comme dit plus tôt, si vous prévoyez d'utiliser l'indicatif régional, etc., pour savoir comment rassembler vos données et classer les numéros de téléphone.
La dernière chose que vous voudriez, c'est que ce nombre dans des entrées distinctes empilées sur un mobile ou un appareil, bien que ce ne soit pas à nouveau un désastre complet, le fait d'avoir trop de clics entrerait en jeu avec moins de fluidité pour l'utilisateur final ...
Encore une fois, la prise en compte des parenthèses et des signes plus devrait également figurer, ne permet pas de discriminer :)
Option 1. + masque de saisie
Un masque de saisie ( ce type, pas un champ de mot de passe ) permet à l'utilisateur de taper son numéro en une seule fois (comme s'il composait par exemple), tout en formatant le numéro avant de le soumettre.
Cela réduit l'effort physique (naviguer vers la prochaine entrée) et l'effort mental (diviser le nombre et le changement de contexte pour la tâche de naviguer vers la prochaine entrée - quelque chose en dehors du schéma habituel de composition d'un téléphone; le cas d'utilisation générale) Voir cette réponse
Il est flexible dans la mesure où les espaces dans un format tel que 01234 456 789 Peuvent être saisis ou omis par l'utilisateur.
S'il est nécessaire que l'extension internationale soit également saisie, soit:
- Indiquez clairement sur le formulaire, afin que l'utilisateur saisisse le bon numéro
(par exemple+nn nnnn nnn nnn- le + est déjà là dans le masque de saisie
ou même+nn (n)nnnn nnn nnn) - Avoir un champ de code de comté séparé, afin qu'ils puissent toujours entrer leur numéro "local". Comme quelque chose qui n'est généralement pas inclus dans leur nombre, l'avoir comme entité distincte n'est pas hostile à l'utilisateur.