Combiner les entrées de messagerie et de téléphone dans un seul champ de texte
Supposons que vous souhaitiez combiner les entrées de messagerie et de téléphone dans un seul champ de texte, car vous avez besoin de l'un ou de l'autre, mais pas des deux. Quelle est la meilleure façon d'aborder cela? En ce qui concerne la clarté sans l'ombre d'un doute, l'utilisateur peut saisir une adresse e-mail ou un numéro de téléphone. Aussi, comment traiteriez-vous des numéros de téléphone internationaux? Demander à l'utilisateur d'entrer d'abord son code de pays?
UPDATE : Réfléchissez à cela avec et sans la présence de JavaScript. Ne soyez pas si accroché aux validations. Transmettons à l'utilisateur ce que nous faisons en premier.
À mon avis, des exemples dynamiques basés sur les premiers caractères que l'utilisateur a saisis peuvent aider les utilisateurs à entrer des valeurs correctes (une validation est toujours nécessaire, pensé):
Les exemples suggèrent non seulement la façon dont le numéro de téléphone peut être entré, mais limitent également les façons de valider ces numéros (car il peut y avoir beaucoup de schémas différents, donc choisir un ou deux en fonction d'un préfixe limitera le nombre de variantes à vérifier) .
Soit/Ou: La première chose à faire est de faire savoir à l'utilisateur que vous avez besoin de/ou. Vous pouvez le faire avec un bouton radio ou une liste déroulante. En outre, étiquetez ce contrôle avec "Entrez l'e-mail OU numéro de téléphone:". À côté de ce contrôle, placez la zone de texte qui contiendrait les données saisies, mais modifiez le filigrane de l'indice (italique et gris) en fonction de la sélection (c'est-à-dire "Entrez le numéro de téléphone"/"Saisissez l'e-mail"). Les utilisateurs peuvent mal interpréter cette logique (voir ma dernière remarque), il est donc préférable de montrer la maquette ou le prototype à plusieurs par des passants et de les interroger sur leur compréhension.
International Phone: Pour entrer le numéro de téléphone, une manière efficace consiste à fournir une liste déroulante pour choisir le pays. Affichez-le uniquement lorsque l'option de numéro de téléphone est sélectionnée. Assurez-vous que la nouvelle liste déroulante est correctement placée avant la zone de texte du numéro de téléphone lui-même. Chaque valeur dans la liste déroulante du pays serait le nom du pays et son préfixe de téléphone.
Pays par défaut: Si vous pouvez détecter le pays de l'utilisateur, make est la valeur par défaut. Si vous ne le pouvez pas, définissez le pays le plus courant par défaut (probablement les États-Unis). Un autre petit point est de tolérer le préfixe zéro dans la case pour le reste du nombre (car les gens pourraient oublier de l'omettre).
Pourquoi soit/ou?: Je suis juste curieux de savoir ce qui se passe si l'utilisateur entre les deux? Est-ce mauvais? Si vous pouvez tolérer cela, alors vous pourriez envisager d'en exiger au moins un, et pas exactement un. Moins contraignant dans ce cas pourrait être plus convivial.
NE PAS.
Vous remarquez (correctement) que c'est un gros problème car les numéros de téléphone et les e-mails ont chacun leur propre validation que vous devez faire - les combiner dans le même domaine ne vous donnera pas de petits maux de tête.
Je demanderais l'adresse e-mail malgré tout, mais si vous devez les faire choisir, ce que je ferais, c'est qu'ils spécifient s'ils veulent vous donner leur "numéro de téléphone" par rapport à "e-mail" (les boutons déroulants/à bascule/radio seraient tout le travail - la liste déroulante est la plus propre, à mon humble avis), puis affichez le champ correspondant à ce qu'ils ont sélectionné (et masquez celui qu'ils n'ont pas choisi).
En ce qui concerne la validation des numéros de téléphone, vous pouvez spécifier qu'un champ est un numéro de téléphone , mais aucun des navigateurs ne valide encore les informations fournies ici - vous êtes donc toujours seul. Mais mieux vaut gérer ce cauchemar seul plutôt que de le combiner avec un champ de messagerie, oui?
Penser a voix haute...
Je ferais une simple zone de texte avec une simple étiquette
Email OR Phone: [ ]
Je testerais probablement cela, si possible. Mais cela ne me semble pas terriblement compliqué.
Quant à la validation, le courrier électronique est assez simple. Recherchez un signe @, puis validez-le en tant qu'e-mail.
Les numéros de téléphone sont plus difficiles et, idéalement, je vous suggère de ne pas les valider. Des choses comme les codes de pays et les extensions peuvent être complexes.
Cela dit, si la validation du téléphone est quelque peu critique, je suggérerais ce que Dvir suggère et c'est basculer une radio.
Mode e-mail:
Please enter an Email address OR Phone number:
(*) Email ( ) Phone
[ ]
Mode téléphone:
Please enter an Email address OR Phone number:
( ) Email (*) Phone
Country Phone Extension
[USA \/] [ ] [ ]
Je suggérerais un menu déroulant pour le pays plutôt que d'entrer le code du pays uniquement parce que (c'est une hypothèse), je ne suis pas sûr que les gens connaissent toujours leur code de pays, sauf s'ils ont besoin de faire beaucoup d'appels téléphoniques internationaux et de recevoir.