Quelle est la meilleure façon de présenter les champs du formulaire de date de naissance?
Je crée un formulaire qui oblige les utilisateurs à saisir leur date de naissance. Quelle est la meilleure pratique pour cela? J'ai identifié 3 options de base:
Champ de texte libre Les utilisateurs peuvent entrer le jour, le mois et l'année dans un champ de texte libre. Au cours de l'UT, j'ai remarqué que cela causait quelques problèmes mineurs avec les utilisateurs entrant "81" au lieu de "1981" ou les utilisateurs avaient tendance à regarder le clavier lors de la saisie des données et non l'écran, donc ils avaient tendance à entrer dans tous les champs, puis à rechercher et à remarquer que seul le champ jour a été saisi.
menu déroulant Les utilisateurs peuvent sélectionner le jour, le mois et l'année à partir d'une série de menus déroulants. Donc, une liste déroulante est une liste de 1 à 31, la liste déroulante deux est de janvier à décembre. Cela semble plus facile bien que le nombre d'années dans la liste déroulante finale soit très long - 1920 à 1994
Sélecteur de date Pas vraiment une option mais je pourrais présenter un sélecteur de date avec une icône de calendrier où les utilisateurs peuvent faire défiler les mois et les années pour sélectionner leur date de naissance.
Alors, quelle est la meilleure approche ou leurs autres idées?
Nous utilisons un champ de texte simple et unique avec un exemple d'instruction, comme le suggère Bennett.
Date of birth |________| (example: 31/5/1970)
Cependant, nous ajoutons également un autre élément sur la page, que nous appelons un modèle de réflexion de champ. Le formulaire prend tout ce qu'ils ont entré dans le champ, puis analyse et interprète dynamiquement, et reflète les informations sous une forme légèrement différente. Pour les dates, cela signifie prendre "31/5/70" et afficher "dimanche 31 mai 1970".
Le calcul du jour de la semaine est un petit délice que nous y ajoutons juste pour le plaisir. Nous avons constaté qu'en mettant le jour de la semaine, plus de gens prêtaient attention à l'affichage et, par conséquent, détectaient les erreurs plus souvent.
A champ de texte libre avec un exemple est clair, rapide et facile à utiliser.
________ Date de naissance | ________ | (exemple: 31/5/1970)
Les listes déroulantes peuvent convenir au jour et au mois, mais pas à l'année. Il est probablement plus facile de taper une année à quatre chiffres plutôt que de faire défiler jusqu'en 1950, peu importe. Le seul véritable avantage des listes déroulantes est qu'elles imposent l'ordre du jour et du mois. Mais ils sont un peu maladroits à utiliser par rapport à la frappe.
Une autre façon est le champ de texte qui est suffisamment intelligent pour comprendre différents formats. L'utilisateur peut taper "21 avril 1981" ou "21/04/1981" ou "21.04.81" ou autre chose. Habituellement, ce n'est pas si difficile à analyser. Par exemple WolframAlpha comprend tout cela correctement. Bien sûr, parfois, vous pouvez faire face à une ambiguïté (comme le 01.02.1981 - est-ce le 1er février ou le 2 janvier?). Dans ce cas, vous pouvez donner des options à l'utilisateur ou en choisir automatiquement une et afficher un avertissement.
Et je recommanderais de jeter un coup d'œil à quelques autres questions sur la sélection des dates:
Celui que je considère comme le plus précis (c'est-à-dire sans erreur utilisateur mais toujours facile à compléter) est: - Texte libre de date - Mois déroulant (janvier, février ...) - Texte libre d'année (acceptant 2 ou 4 chiffres)
Maintenant, je me rends compte que cela va à l'encontre de "ne mélangez pas votre souris et votre clavier", mais honnêtement, après des années de tests de formulaires Web avec des utilisateurs, cela fonctionne mieux. Et cette vieille règle devient de moins en moins pertinente lorsque les gens s'éloignent des souris. Les sélecteurs de dates sont parfaits pour les dates proches d'aujourd'hui; les listes déroulantes complètes sont un vilain compromis; le texte libre complet vous laisse ouvert aux erreurs de l'utilisateur.
Lorsque vous utilisez un sélecteur de dates, vous pouvez le régler un peu en fonction de vos utilisateurs. Si votre site requiert au moins 18 ans, vous pouvez faire en sorte que le sélecteur de dates démarre un [currentyear-18], ce qui permet à un bon pourcentage de choisir plus facilement la bonne année.
Si vous utilisez un seul champ de texte (peut-être combiné avec un sélecteur de date), vous pouvez appliquer un masque pour aider l'utilisateur à entrer le bon format. Quelque chose comme le plugin d'entrée masqué: http://digitalbush.com/projects/masked-input-plugin/
Le problème avec les champs de texte libres est qu'ils sont très faciles à commettre avec les utilisateurs. Comme vous le dites, ils peuvent entrer 81 au lieu de 1981. Si votre site est utilisé dans différents pays, certains utilisateurs écriront d'abord le jour, d'autres le mois, etc.
Je pense qu'un sélecteur de date nécessiterait beaucoup trop de navigation pour que l'utilisateur trouve son dob et prendrait trop de temps (le plus frustrant). Les sélecteurs de dates fonctionnent mieux pour trouver des dates récentes.
Les menus déroulants sont ce que vous voyez le plus souvent sur les formulaires d'inscription Web. Ils sont généralement moins sujets aux erreurs car l'utilisateur est limité par les options disponibles dans la liste déroulante. Ils prennent un peu plus de temps à remplir que les champs de texte libres mais empêchent plus d'erreurs. N'oubliez pas que si vous optez pour cette option, il est préférable d'indiquer quelque chose comme "jour", "mois" et "année" dans chaque champ.
En fait, il y a trois options valides, et vous pouvez choisir celle qui convient à votre public par un simple test AB/C. (cela ne dépend vraiment que de vos utilisateurs)
J'ai vu de nombreux tests dans lesquels les résultats pointaient vers l'une des trois options ci-dessous, et tant que vous vous souvenez de conserver jj/aaaa comme champs de saisie simples (toute autre solution soulèvera des défis et des problèmes pour vos utilisateurs) vous ne pouvez pas vous tromper.
Cet exemple illustre le bon ordre des champs uniquement pour certains pays *
Je suis constamment impressionné par le champ de saisie de la date sur le site www.rememberthemilk.com . C'est un champ unique, vous pouvez entrer la date dans presque toutes les méthodes auxquelles vous pouvez penser et il la traduit pour vous. (15/12/2011, "15 décembre 2011", 15/12/2011, "vendredi prochain", "ven 15 décembre" ...) et en entrant il traduira ce que vous avez entré dans un format lisible "ven 16 déc 11 "afin que vous puissiez confirmer qu'il est correct.
Si la date que vous entrez n'est pas valide (par exemple, entrer le vendredi 15 décembre), il vous faudra essayer (dans ce cas, la définir sur "Jeu 15 déc 11") et vous pouvez facilement la modifier.
Il détecte également si vous l'avez entré dans un format américain évident (15/12/11) et choisit la date correcte du 15 décembre 2011.
C'est un morceau de codage vraiment impressionnant là-bas, vous devez en fait faire tout votre possible pour qu'il choisisse une mauvaise date.
Voir la réponse suivante plus comme une réponse pour sensibiliser un problème selon ce sujet. Mais si le sujet est conçu de manière générale, la réponse peut être plus liée que vous ne le pensez.
Je pense que la seule solution appropriée pour cela est un champ de saisie de texte gratuit, car je n'ai jamais vu de formulaire d'anniversaire où les personnes qui ne connaissent pas (complètement) leur anniversaire peuvent y entrer.
La loi allemande sur les passeports (ou dit exactement le règlement administratif de celui-ci) dit que le jour et le mois (dans le passé même l'année) peuvent être écrits comme XX quand ils sont inconnus.
Cela signifie donc que dans certains passeports en Allemagne, la naissance du propriétaire est écrite comme XX.07.2000, XX.XX.2000 ou même XX.XX.XXXX (JJ.MM.AAAA). Il y a quelques années, des zéros étaient utilisés à la place de x, il pouvait donc aussi être 00.00.0000 comme un anniversaire valide.
Vous pouvez dire que tout le monde connaît son anniversaire, mais pensez aux orphelins ou aux réfugiés (tout à fait réels) - en particulier les petits enfants.
Pour être honnête, il existe de nombreuses situations, en particulier depuis "l'ère numérique", où les gens utiliseraient une sorte de "date de naissance par défaut", comme le 01.01 d'une année estimée (qui peut être presque correcte). Mais cela pose d'autres problèmes, car on ne peut pas dire si la personne est vraiment née le 01.01 ou si la personne ne connaît pas son anniversaire.
Je sais qu'il est beaucoup plus facile de gérer des dates correctes et peut-être que le choix d'une date ou d'une date par défaut correspondra aux besoins de la plupart des logiciels, ce n'est donc pas un gros problème. Mais si vous avez vraiment besoin de "l'anniversaire du passeport" (en supposant que l'utilisateur l'entrera), vous pouvez penser à ce fait et peut-être ajouter un conseil comme "Si vous ne connaissez pas votre anniversaire, choisissez le 01.01 de tout âge" ou ajoutez un "anniversaire inconnu" - case à cocher. Je ne sais pas comment d'autres pays gèrent le problème indiqué, mais je peux imaginer qu'ils ont également des anniversaires (partiellement) inconnus ou utilisent des anniversaires par défaut.
D'après ce que j'ai vécu, cela dépend du projet. J'ai eu des projets où les utilisateurs n'avaient aucun problème avec une zone de texte standard avec un indice ou un exemple alors que j'avais des projets qui testaient mieux avec 3 listes déroulantes malgré la longueur des options de l'année.
Donc, finalement, testez si vous le pouvez.
Au-delà de cela, je suis venu les règles de départ suivantes:
Si la précision des données est critique pour le système - les listes déroulantes conduisent à une meilleure précision au détriment de la facilité d'utilisation en raison de longues listes d'options.
Si les utilisateurs hésitent à fournir la date de naissance - utilisez une seule zone de texte avec un indice accessible qui masque le flou. Alternativement, remettre en question l'exigence de voir le mois et le jour est vraiment nécessaire.
Tous les autres - zone de texte unique avec un indice accessible.
Une simple saisie de texte est la meilleure. L'entrée doit être capable d'analyser les données et de trouver la date la plus appropriée. Un tel que j'utilise est SlickDate ( http://www.mountonetech.com/slickdate )
Selon Nielsen Norman, la meilleure façon de le faire est d'utiliser des champs de texte ouverts, comme l'ont dit de nombreux contributeurs ci-dessus. Voici le lien:
Dans notre application, nous préconisons cette solution:
Le widget de date est un widget d'édition de ligne de forme libre normale. Vous pouvez saisir tout ce que vous voulez. Dès que ce que vous avez tapé est en quelque sorte reconnaissable comme une date, les interprétations trouvées des données sont affichées dans une liste déroulante sous le widget. Ces interprétations sont affichées en utilisant des années complètes et des noms de mois complets, et classées par ordre de probabilité. Le widget peut être contraint pour suggérer uniquement des plages de dates spécifiques. De cette façon, si vous tapez 31 comme année pour un anniversaire, 1931 est suggéré au lieu de 2031. L'utilisateur peut cliquer sur l'une des suggestions pour choisir cette interprétation. Inversement, dans un widget utilisé pour planifier un futur rendez-vous, les dates dans l'immédiat deviendraient l'interprétabilité probable.
Bien entendu, les paramètres régionaux du système sont utilisés pour déterminer quelle est l'interprétation la plus probable de la date entrée, quels noms de mois et abréviations sont utilisés et quel est le format acceptable pour afficher les dates interprétées.
Lorsque le focus quitte le widget de date, tout ce qui a été entré par l'utilisateur est remplacé par la date interprétée la plus probable, ou un message cursif comme "Aucune date sélectionnée" ou "Date invalide". Lorsque le focus revient au widget, le texte est à nouveau ce que l'utilisateur y a entré en premier lieu.
Bien sûr, les règles d'interprétation de la date sont assez lâches. Différents séparateurs sont acceptés, ainsi que ne pas utiliser du tout de séparateurs. Des indices sur le champ sont ceux qui sont utilisés s'ils sont disponibles (comme abréger la date à deux chiffres, mais utiliser une partie "pour le siècle" indiquerait que cette partie est une année, ou utiliser "th" "st" "nd" ou "rd" derrière un nombre indiquerait que cette partie est probablement un nombre de jours). Les mois peuvent être donnés sous la forme d'un nombre ou d'un nom, éventuellement abrégé en l'abréviation unique la plus courte.
Dans l'ensemble, cela donne un widget de saisie de date très flexible du point de vue des utilisateurs et rapide à utiliser.
Utilisez des entrées en ligne ou des plages de dates déroulantes sur les widgets de l'interface utilisateur du calendrier.
Nos sessions UX de suivi des yeux ont rapidement identifié comment les utilisateurs ne savent pas comment interagir avec les sélecteurs de date.