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


110

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.


Ce sélecteur de date jQuery semble fonctionner dans Firefox, mais pas dans IE7.
Richard Ev

1
peut-être que leur site a un problème. Datepicker fonctionne très bien dans IE6 / 7/8, FF, Opera et Safari. Peut-être plus :)
Ionuț Staicu

11
month / day / yearest franchement bizarre .
TRiG

3
Malheureusement, j'étais un petit enfant qui m'a appris mois / jour / année à l'école. Cela n'a aucun sens scientifiquement.
Duncan Calvert

1
ISO 8601 pour la victoire! year / month / day
Qqwy

Réponses:


28

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.


116
Le problème avec la plupart des datpickers est qu'il est difficile de remonter 30/40 ans ou plus.
UnkwnTech

3
Bien que maintenant que je regarde celui qu'il a offert, je suppose que ce n'est pas si mal.
UnkwnTech

21
Le sélecteur de date est en fait une expérience utilisateur terrible lors de la saisie de DOB, en raison de la nécessité de remonter plusieurs années en arrière, comme mentionné par Unkwntech. De plus, un sélecteur de date et d'heure met la valeur de l'emplacement d'une date particulière par rapport à la structure du mois et de la semaine, ce qui n'est pas nécessaire lors de la sélection d'une date de naissance.
Alex Czarto

6
Le sélecteur de date de jQuery a une option pour afficher les menus déroulants d'options pour le mois et l'année , rendant la sélection d'une date de naissance beaucoup plus rapide.
Carl G

1
Voici un exemple de saisie de texte masquée avec une expression régulière HTML5 pour forcer le clavier numérique sur les appareils iOS: cde.boaterexam.com/washington/register
Alex Czarto

161

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

trois listes déroulantes pour le mois, le jour, l'année

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.


6
Vote positif: c'est exactement la réponse que j'allais donner. Datepicker est bon pour les situations de type «Je sais que c'est un vendredi», mais pour la date de naissance, il n'ajoute aucune valeur.
slim

14
Downvoté: les listes déroulantes sont TRÈS ennuyeuses pour les utilisateurs, en particulier pour ce type de données. Voir Nielsen: useit.com/alertbox/20001112.html
Mauricio Scheffer

5
@mausch C'est pourquoi j'ai précédé ma réponse par "Si votre objectif est de vous assurer que" l'utilisateur ne sera pas du tout confus "" FTA: "Les menus déroulants ont leurs avantages ... car ils sont un widget standard ( même s'il est désagréable), les utilisateurs savent comment gérer un menu déroulant lorsqu'ils le rencontrent. "
Patrick McElhaney

1
@patrick, vous avez raison, les listes déroulantes sont très standard, mais une simple zone de texte est plus naturelle à mon humble avis car elle est plus proche de ce à quoi un formulaire papier ressemblerait. Mon point est que les gens ont "10/9/1975" profondément câblé dans leur cerveau à partir de toutes les répétitions, alors laissez-les écrire juste cela.
Mauricio Scheffer

24
Alors, êtes-vous né le 9 octobre ou le 10 septembre? Je ne sais pas comment résoudre cette ambiguïté avec une simple zone de texte.
Patrick McElhaney

140

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:

Inscription au compte 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;)


9
Pourquoi n'est-ce pas la meilleure réponse!
Snowman

3
Une chose que je voudrais ajouter à cela est de permettre à l'utilisateur de taper la valeur numérique du mois pour sélectionner une valeur, lorsque cette liste déroulante est sélectionnée. C'est ce à quoi la plupart des utilisateurs ont l'habitude de taper pendant un mois, donc cela ne fonctionnerait toujours que pour les utilisateurs de clavier.
Elezar

2
En fait, plus j'y pense, je ne vois pas vraiment d'avantage à faire du mois une liste déroulante. Pourquoi ne pas en faire également un champ de texte?
Elezar

4
Pour éviter de confondre mois et jour, surtout.
Maciej Gurban

2
Bien que ceux d'entre nous en dehors de l'Amérique aient généralement la veille du mois.
jezmck

25

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/


La seule chose que je modifierais sur votre sélecteur DOB est de mettre le "MM" "DD" "YYYY" comme texte d'espace réservé plutôt que comme un indice.
Paul Pettengill

@Paul L'utilisation de texte d'espace réservé présente des problèmes d'utilisabilité. Bien que nous l'ayons initialement fait , nous décidons de le supprimer après avoir lu ceci: nngroup.com/articles/form-design-placeholders
Alex Czarto

@AlexCzarto belle cueillette! (mais juste pour que vous sachiez, si vous entrez quelque chose comme 31/02/1970, cela vous donnera le mauvais message d'erreur)
Thiago Duarte

Si je suis né le 5 juin 2001, je taperais ma date de naissance sous la forme "050601", ce que votre suggestion interpréterait comme le 6 mai 1901. Si vous avez des zones de texte, vous comptez sur l'utilisateur pour repérer l'ordre des dates MMDD et entrer leur info de manière appropriée, si vous fournissez une liste déroulante pour le mois, l'utilisateur sera obligé de remarquer le placement hors service du mois.
thelem

Si vous redimensionnez la zone de texte du mois à 2 chiffres, comment autorisez-vous l'utilisateur à saisir un numéro de mois OU un nom de mois?
Jin Wang

11

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.


5

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.


6
Le plugin a l'air génial, mais 25 Ko pour un problème simple semble un peu trop ...
Noel Abrahams

Pas d'accord avec Noel. Les dates sont la chose la plus compliquée que les programmeurs rencontrent généralement, en particulier à travers les fuseaux horaires et les cultures (ce pour quoi Datejs est conçu).
Rustavore

1
@Gitninja - c'est un peu un homme de paille. Elle n'a pas dit que c'était trop pour un rendez-vous (qui est extrêmement complexe) mais pour un "problème simple", j'assume le problème de "date de naissance". Puisqu'il existe une énorme quantité de bibliothèques et de méthodes javascript qu'une solution peut être obtenue sans 25 Ko, je suis d'accord.
Kerry Jones

Si ajouter 25 Ko à mon formulaire signifie que je n'ai pas besoin d'utiliser les menus déroulants, alors qu'il en soit
ladieu

4

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).


L'utilisation de trois zones de texte distinctes signifie que sur un mobile, je dois cliquer sur chacune pour que le clavier numérique apparaisse. Le reste de votre idée est bon - tout devrait être des zones de texte.
PKHunter


3

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] :(


2

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.


Je ne peux pas mettre les deux, ne rentre pas dans la conception :) Je n'ai besoin que d'un seul d'entre eux.
Ionuț Staicu

Étant donné que le sélecteur de date a besoin de javascript, utilisez javascript pour l'afficher uniquement lorsque cela est nécessaire. Définissez la position sur absolue pour qu'elle flotte sur tous les autres éléments.
certains

Normalement, vous placez simplement le champ de texte et attachez l'icône à côté de celui-ci qui fait apparaître le sélecteur de date.
Tuminoid

2

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».


1

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.


1

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.


Ce n'est pas vraiment un problème car la plupart des navigateurs, lorsque le widget déroulant est focalisé, prennent en charge la saisie pour obtenir rapidement la valeur correcte
thepeer

@thepeer: Mais ils n'y ressemblent pas. Il n'y a pas ce que John Norman ("Design of Everyday Things") appelait un moyen de taper.
David Thornley

1

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.


1
Inutile de faire de la journée une liste déroulante. Entrer et valider un nombre entre 1 et 31 est trivial.
Alex Czarto

1

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…


0

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. :-(


0

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.


Parce que c'est un site plein de javascript, il n'y a aucune chance pour RIEN de fonctionner sans JS. Donc, ce genre de préoccupations est inutile maintenant :)
Ionuț Staicu

Et si un utilisateur malvoyant souhaite utiliser votre site Web?
Philip Morton

1
Si vous utilisez des noms de mois et d'années à quatre chiffres, ce sera l'auto-étiquetage, car il n'y aura pas de chevauchement entre les ensembles de valeurs.
Dave Sherohman

1
Downvoté: les listes déroulantes sont TRÈS ennuyeuses pour les utilisateurs, en particulier pour ce type de données. Voir Nielsen: useit.com/alertbox/20001112.html
Mauricio Scheffer

0

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é.


0

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 ...


Ne vous inquiétez pas, vous pouvez couper le css à peu près. Je voulais seulement savoir quelle est la meilleure méthode;)
Ionuț Staicu

68k .... c'est faux, tout comme le thème css 28k ...
redsquare

@redsquare, les choses ont probablement changé depuis que j'ai publié ceci. N'hésitez pas à modifier ma réponse. Merci de me l'avoir fait savoir aussi.
alex le

pour le datepicker, seul le total de l'interface utilisateur personnalisée js est de 38k minifié, avec gzip, c'est alors considérablement plus petit
redsquare

Je recommande vivement d'éviter jQuery datepicker pour les dates de naissance. J'ai essayé de l'utiliser, nous avons eu de nombreuses plaintes de clients. Premièrement, il était trop difficile de revenir en arrière de plus de deux ans. (30 ans nécessitent 360 clics avec les paramètres par défaut). Si vous ajoutez la sélection de l'année, de nombreux utilisateurs cliquent simplement sur le jour en premier, ce qui masque le sélecteur de date sans forcer à choisir l'année. Et puis l'utilisateur reviendrait et changerait seulement l'année, pas cliquait sur la date, ce qui n'enregistrerait pas le changement d'année. Terrible expérience.
Andrei

0

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/


0

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!




0

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.

entrez la description de l'image ici


Cela a tous les défis UX discutés ci-dessus.
PKHunter

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.