Comment concevoir un formulaire qui nécessite que l'utilisateur remplisse un champ de texte sur trois
J'ai un formulaire dans lequel je souhaite que l'utilisateur remplisse un champ de texte sur 3. Ces 3 champs sont utilisés pour identifier d'autres clients de différentes manières (numéro de téléphone, e-mail ou nom). Le dernier champ de texte est un champ de saisie semi-automatique.
Bien sûr, ce formulaire contient d'autres champs à remplir. Je me demande quelle est la manière la meilleure et la plus intuitive de faire comprendre à l'utilisateur qu'il ne lui est demandé de remplir qu'une de ces options et que d'autres seront négligées.
Pourriez-vous combiner les 3 dans un seul champ avec l'étiquette "Numéro de téléphone, e-mail ou nom". En dehors de cela, je ne peux que suggérer d'utiliser du texte pour décrire ce que l'utilisateur doit faire - "Veuillez remplir [~ # ~] un [~ # ~] par exemple: "par exemple.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Si vous ne pouvez avoir qu'une et une seule méthode d'identification, laissez-les sélectionner ce qu'ils veulent utiliser via un groupe de 3 boutons radio et une fois qu'ils en auront sélectionné une, rendre l'étiquette et la saisie pour cette méthode d'identification visibles ou les désactiver jusqu'à ce qu'ils soient sélectionnés via un bouton radio.
L'avantage d'avoir les radios avec des entrées distinctes sur le simple fait de mettre "Nom, e-mail ou numéro de téléphone" sur l'étiquette est que vous savez ce que vous validez et vous pouvez donner à chaque entrée un identifiant standard afin qu'elles aient un comportement de saisie semi-automatique approprié. Voir ces questions et réponses:
Vous pouvez utiliser un vérification automatique de l'entrée saisie pour vérifier s'il s'agit d'un nom (caractères), d'un e-mail (signe) ou d'un numéro de téléphone (numéros). De cette façon, vous n'auriez besoin que d'un seul champ de saisie pour ces trois. Après la validation, il serait judicieux de mettre en surbrillance l'entrée reconnue - si un utilisateur a entré des numéros, vous mettriez en surbrillance le numéro de téléphone.
Faites marquer le champ requis de manière à ce qu'il se démarque du reste des commandes. La convention sur le Web affiche souvent une étoile (*) mais d'autres options de champ obligatoires sont disponibles. Certains utilisent une couleur jaune clair pour mettre en surbrillance le ou les champs requis.
Alignez également à droite les étiquettes sur chaque champ, ce qui permet à l'utilisateur de lire plus facilement quel champ est connecté à quelle étiquette.
Utilisez un bouton Soumettre et un bouton Annuler, même si le bouton d'annulation n'est pas vraiment nécessaire.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Si un sur trois est requis, désactivez le bouton d'envoi jusqu'à ce que l'utilisateur remplisse au moins un champ avec du texte - et utilisez un texte explicatif pour mettre en évidence ce qui est requis.
S'il y a plus de champs (comme vous le dites), regroupez les trois champs ensemble dans un conteneur, ce qui permet à l'utilisateur de trouver plus facilement les champs en question.