Quelle est la meilleure interface utilisateur pour saisir la date de naissance? [fermé]

Quelle est la meilleure méthode pour le sélecteur de date de naissance?

• 3 entrées de texte (mois / jour / année) ou une entrée de masque. L'utilisateur DOIT utiliser le clavier
• 3 boîtes de sélection. L'utilisateur peut utiliser le clavier ou la souris.
• Un joli datepicker .

Je veux savoir quelle est la solution la plus utilisable et sans problème, afin que l'utilisateur ne soit pas du tout confus.

Pour un utilisateur avancé, la saisie de texte est la meilleure, si l'utilisateur connaît le format de la date, c'est très rapide. Pour un utilisateur pas si avancé, je suggère d'utiliser un sélecteur de date. Comme vous avez généralement des utilisateurs avancés et non avancés, je suggère une combinaison de saisie de texte et de sélecteur de date.

Si votre objectif est de vous assurer que «l'utilisateur ne sera pas du tout confus», je pense que c'est la meilleure option.

Je ne recommanderais pas un sélecteur de date pour la date de naissance . Vous devez d'abord parcourir l'année (cliquez, cliquez, cliquez…), puis jusqu'au mois (cliquez encore), puis recherchez et cliquez sur le petit nombre sur une grille.

Les sélecteurs de date sont utiles lorsque vous ne connaissez pas la date exacte de votre tête, par exemple, vous prévoyez un voyage pour la deuxième semaine de février.

Bien qu'il s'agisse d'une question très ancienne, elle est si importante pour obtenir une entrée correcte de la date de naissance, en particulier dans un formulaire d'enregistrement.

Je pense que personne n'a fait cela mieux que l'inscription aux comptes Google:

Sélectionnez d'abord le mois dans une zone de sélection et saisissez manuellement la date et l'année. Facile.

Facile à valider. Facile à faire pour les utilisateurs. Pas de défilement des années dans une boîte de sélection de 1900 à l'année actuelle. Pas besoin de mettre à jour une boîte de sélection «jour» en fonction de l'entrée du mois. Fonctionne très bien sur le Web. Fonctionne très bien sur mobile. Fonctionne pour tous les paramètres régionaux, par exemple 01/10/2014 - est-ce le 1er octobre ou le 10 janvier? Je pense que nous verrons beaucoup plus ce format de sélecteur d'anniversaire à l'avenir.

Un datpicker n'est qu'une mauvaise solution à tous égards. Tant de clics! À mon avis, un sélecteur de date n'est utile que lorsque la connaissance du jour de la semaine est importante, par exemple la réservation de billets.

Mise à jour 2/6/2016: Je viens du Royaume-Uni, je suis donc plus familier avec les formats jour / mois / année, plutôt que mois / jour / année. Cependant, les utilisateurs qui utiliseront leur curseur pour sélectionner le mois, je pense qu'il est beaucoup plus facile d'avoir la boîte de sélection en premier, plutôt que d'aller entrée> boîte de sélection> entrée. La date du commentaire est le 2 juin, pas le 6 février;)

Comme mentionné dans cet article de Jakob Nielsen , les listes déroulantes doivent être évitées pour les données bien connues de l'utilisateur :

Menus de données bien connus des utilisateurs, comme le mois et l'année de leur naissance. Ces informations sont souvent câblées aux doigts des utilisateurs, et le fait de devoir sélectionner de telles options dans un menu rompt le paradigme standard de la saisie d'informations et peut même créer plus de travail pour les utilisateurs.

La solution idéale est probablement quelque chose comme suit:

• Fournissez 3 zones de texte distinctes pour le jour, le mois et l'année (étiquetées de manière appropriée)
• Triez les zones de texte en fonction de la culture de l'utilisateur.
• Les zones de texte du jour et du mois doivent être dimensionnées de sorte qu'une entrée à 2 chiffres soit supposée.
• La zone de texte Année doit être dimensionnée de sorte qu'une année à 4 chiffres soit supposée.
• Permettez à l'utilisateur de saisir une année à 2 ou 4 chiffres. Supposons qu'une année à 2 chiffres est 1900 et mettez à jour la zone de texte pour refléter cela surBlur (ou lors d'une étape de confirmation suivante).
• Autorisez l'utilisateur à entrer un numéro de mois OU un nom de mois.

EDIT: Voici comment nous avons implémenté notre sélecteur DOB: Champ de saisie de texte masqué avec HTML5 regex pour forcer le clavier numérique sur les appareils iOS.

http://www.huntercourse.com/usa/texas/

Les dates de naissance sont différentes des autres dates car les gens sont souvent habitués à saisir leur date de naissance spécifique.
Une zone de texte avec un exemple est claire, rapide et facile à saisir:

 _______
|_______| (example: 31/3/1970)

Cela devrait prendre en charge un formatage flexible tel que 1/1/1970 ou 20/07/70.

Si vous devez prendre en charge différentes cultures avec des conventions de date différentes (par exemple, aux États-Unis et au Royaume-Uni), cela peut être source d'erreurs pour les personnes qui ne tiennent pas compte de l'exemple. Pour éviter cela, vous pouvez utiliser une
liste de sélection pour le mois et des zones de texte pour la date et l'année .

 _________   __   ____
|March  |V| |__| |____|

Cela supprime l'ambiguïté entre la commande du jour et du mois, mais est un peu plus maladroite à utiliser.

Vous devriez jeter un oeil à Datejs .

Datejs est une bibliothèque de dates JavaScript open source.

Complet, mais simple, furtif et rapide. Datejs a passé tous les essais et est prêt à frapper. Datejs n'analyse pas seulement les chaînes, il les tranche proprement en deux.

Je suis troublé par la prépondérance de la solution au lieu de la conception. L'OP a déclaré: "Je veux savoir quelle est la solution la plus utilisable et la plus simple, pour que l'utilisateur ne soit pas du tout confus." Donc, que ce soit jQuery ou JavaScript ou C # ou FORTRAN, la conception est importante - et c'est la conception UX, pas la conception de l'interface utilisateur qui compte ici. (Un autre plaidoyer pour éviter la construction incorrecte et illogique "UX / UI").

Utilisez la saisie de texte. Utilisez trois cases distinctes intitulées Jour, Mois et Année (ou Mois, Jour et Année). Laissez les utilisateurs saisir les dates. Mélanger du texte et des listes dans la même interaction est une mauvaise chose (n'utilisez pas de saisie de texte pour l'année mais un sélecteur de date ou des listes pour le mois et le jour, par exemple).

Utilisez un champ de texte unique qui utilise des conseils de format dans le champ, par exemple, [jour / mois / année] Ne pas exiger des formats trop rigides. Si un utilisateur tape JUN à l'endroit où vous prévoyez un mois, utilisez June sur le back-end. Si un utilisateur tape 6 à l'endroit où vous prévoyez un mois, utilisez June sur le back-end. Si un utilisateur tape 06 à l'endroit où vous prévoyez un mois, utilisez June sur le backend.

Utilisez le rasoir d'Occam comme guide (en effet, la plupart du temps, les données seront suffisamment précises). Réduisez les frictions cognitives (ne faites pas réfléchir les utilisateurs).

Je recommanderais également la combinaison de DatePicker et de champs

Voir cette démo , où le sélecteur de date reflète la date saisie dans les champs par l'utilisateur.
Il est cependant basé sur un DatePicker utilisant Prototype et Scriptaculous . Je le mentionne à titre d'illustration.

J'avais essayé datePicker avec mon utilisateur, mais cela s'est avéré être une mauvaise interface utilisateur pour eux. Ce que je finis par leur demande, c'est d'avoir 3 zones de texte où ils peuvent taper rapidement [jour] [mois] [année] :(

Mettez les deux et faites chaque mise à jour l'autre. Si l'utilisateur choisit la date dans le sélecteur de date, il est facile de corriger un petit clic dans le champ de texte ou de visualiser le choix que vous avez tapé dans le champ de texte du sélecteur de date.

Pourquoi ne pas tester les trois et choisir celui qui fonctionne le mieux? Cela semble être un bon candidat à tester pour l' Optimiseur de Site Google .

Il se peut que le type d'utilisateurs que vous avez, ou le type de site que vous utilisez, dicte que votre solution doit être différente de la «norme».

J'utilise normalement les deux - un sélecteur de date qui remplit un champ de texte dans le format correct. Les utilisateurs avancés peuvent modifier le champ de texte directement, les utilisateurs satisfaits de la souris peuvent choisir à l'aide du sélecteur de date.

Si vous êtes préoccupé par l'espace, je n'ai généralement que le champ de texte avec une petite icône de calendrier à côté. Si vous cliquez sur l'icône du calendrier, le sélecteur de date apparaît sous forme de fenêtre contextuelle.

Je trouve également une bonne pratique de pré-remplir le champ de texte avec du texte qui indique le format correct (par exemple: "JJ / MM / AAAA"). Lorsque l'utilisateur focalise le champ de texte, ce texte disparaît pour qu'il puisse entrer le sien.

En tant que peut-être l'une des personnes âgées ici, et née à la fin du mois, je trouve frustrant les menus déroulants pour les dates de naissance. Je dois généralement faire défiler vers le bas sur deux menus déroulants, et c'est gênant. Je préfère de loin le taper.

Si vous pouvez avoir un contrôle conçu de sorte qu'il puisse accepter les menus déroulants ou être tapé dans, et faire en sorte que les deux fonctionnent, ce serait excellent.

Que ce soit pour utiliser un datpicker ou non, je pense que cela dépend de la durée des dates. S'ils sont généralement dans le mois en cours, et presque jamais plus de quelques mois, et que vous savez que Javascript sera là, un sélecteur de date est bon. Si les dates ne sont pas récentes (disons, une date de naissance), je pense que c'est la meilleure option:

http://img411.imageshack.us/img411/6328/mockupg.png

Notez que ceci est différent de la réponse de Patrick McElhaney en ce que l'année est une zone de texte, pas une liste déroulante . Sélectionner un nombre dans une liste déroulante de plusieurs centaines d'éléments est très ennuyeux pour l'utilisateur.

Je pense qu'un sélecteur de date complique simplement la tâche pour entrer sa date de naissance.

Comme déjà mentionné, une combinaison de listes de dépôt pendant des jours et des mois avec une zone de texte pour l'année semble la plus efficace pour un utilisateur. Il faut un peu moins de 10 secondes pour entrer une date de naissance de cette façon, ce qui est beaucoup plus rapide qu'un sélecteur de date: grâce à la touche de tabulation (que tous les utilisateurs devraient apprendre à utiliser pour remplir un formulaire), il est rapide de passer d'un formulaire élément au suivant.

Au moins sous Macintosh (je ne sais pas pour Windows), vous pouvez également utiliser le clavier pour accéder à la date à l'intérieur des cases de sélection: grâce à la touche de tabulation, vous obtenez le focus sur l'élément de formulaire, puis appuyez sur la touche fléchée pour faire défiler vers le bas la liste, puis tapez par exemple 1967 et vous y arrivez en un clin d'œil…

Je préférerais un datepicker (et une boîte de saisie avec un format documenté comme solution de secours) pour un site international.

Les formats de date varient et sont parfois difficiles à lire si vous y êtes maintenant habitué. Dommage que beaucoup de gens ne soient pas à l'aise avec ISO 8601. :-(

Je suggérerais d'utiliser un menu déroulant pour chaque champ, en veillant à étiqueter chacun comme jour, mois et année. Un sélecteur de date peut également aider, mais si l'utilisateur n'a pas activé JavaScript, cela ne fonctionnera pas.

Je prendrais un DatePicker. C'est le seul composant qui permet aux utilisateurs experts de le saisir manuellement et guide les novices pour saisir une date très facilement.

Le calendrier ne devrait pas apparaître si vous entrez via l'onglet, mais en cliquant sur un bouton. Aucun utilisateur expert n'en est donc ennuyé.

Qui n'utilisez-vous pas le jQuery UI DatePicker?

Il est configurable pour répondre à pratiquement tous les besoins. Le seul inconvénient est que si vous l'incluez avec l'interface utilisateur jQuery, il a une empreinte quelque peu importante.

Mettre à jour

Certaines tailles de fichier semblent avoir changé, elles sont donc mises à jour ci-dessous. Gardez à l'esprit que ces chiffres ne seront corrects qu'au moment de leur dernière mise à jour. Les choses ont peut-être changé depuis.

• Thème CSS - 23kb
• jQuery UI - 71 Ko minifié
• DatePicker - 38 Ko
• Plus quelques images (le mois prochain / le mois précédent, dont je suis sûr que c'est sprited)

Mais ce n'est pas trop mal ...

Le sélecteur de date / heure de JQueryUI est la meilleure option car il permet aux utilisateurs professionnels de saisir leur propre valeur dans la zone de texte ou de la choisir dans le sélecteur.

Configurer le sélecteur pour permettre la saisie facile des anniversaires ou des dates futures est également assez simple:

$ ('# datepicker'). datepicker ({
    changeMonth: vrai,
    changeYear: vrai,
    yearRange: '-100: +50'
});

cela montre quelque chose comme ça (je ne peux pas publier de photo car je suis un nouvel utilisateur: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )

et yearRange affiche les dates de DateTime.Now.Year - 100 à DateTime.Now.Year + 50

trouvé ceci sur: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

Je viens de découvrir un plugin sur JSFiddle. Deux alternatives possibles: 1 seule entrée OU 3 entrées, mais ressemble à une seule ... (utilisez la touche Tab pour passer à l'entrée suivante)

[lien] http://jsfiddle.net/davidelrizzo/c8ASE/ Cela semble intéressant!

Je pense que vous pouvez essayer le plugin birthdaypicker ,

vous pouvez utiliser le plugin cxcalendar . Il ressemble à un autre datepicker. mais vous pouvez choisir l'année et le mois dans select après avoir cliqué sur le titre année-mois.

J'ai créé trois listes déroulantes pour la sélection de la date de naissance et le nombre de jours change dynamiquement en fonction de la sélection de l'année et du mois. http://jsfiddle.net/ravitejagunda/FH4VB/10/

daysInMonth = new Date(year,month,1,-1).getDate();