Quelle est la meilleure interface pour entrer la date de naissance?
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 cases de sélection. L'utilisateur peut utiliser le clavier ou la souris.
- Un Nice datepicker .
Je veux savoir quelle est la solution la plus utilisable et la plus simple, afin que l'utilisateur ne soit pas dérouté du tout.
Pour un utilisateur avancé, la saisie de texte est la meilleure solution, si l'utilisateur connaît le format de date, il est très rapide. Pour un utilisateur pas aussi avancé, je suggère d'utiliser un sélecteur de date. Puisque vous avez généralement aussi des utilisateurs avancés et non-avancés, je suggère une combinaison de saisie de texte et de datepicker.
Si votre objectif est de vous assurer que "l'utilisateur ne sera pas du tout dérouté", je pense que c'est la meilleure option.
Je ne recommanderais pas un datepicker pour date de naissance . Vous devez d’abord naviguer jusqu’à l’année (cliquez, cliquer, cliquer…), puis au mois (cliquer quelques-uns de plus), puis rechercher et cliquer le petit nombre sur une grille.
Les datepickers sont utiles lorsque vous ne connaissez pas la date exacte, par exemple. vous planifiez un voyage pour la deuxième semaine de février.
Bien qu’il s’agisse d’une question très ancienne, il est très important de saisir correctement la date de naissance, en particulier dans un formulaire d’enregistrement.
Je pense que personne ne l’a fait mieux que les comptes Google enregistrés:
Sélectionnez le mois en premier dans une zone de sélection et tapez manuellement la date et l'année. Simple.
Facile à valider. Facile pour les utilisateurs de bien faire les choses. Pas de défilement des années dans une boîte de sélection de 1900 à l’année en cours. Il n'est pas nécessaire de mettre à jour une zone de sélection "jour" en fonction du mois. Fonctionne très bien sur le web. Fonctionne très bien sur mobile. Fonctionne pour tous les lieux, par exemple 01/10/2014 - est-ce le 1er octobre ou le 10 janvier? Je pense que nous verrons ce format de sélecteur d’anniversaire beaucoup plus à l’avenir.
Un datepicker est juste une mauvaise solution tout au long. Tant de clics! À mon avis, un sélecteur de date n'est utile que lorsqu'il est important de connaître le jour de la semaine, par exemple pour réserver des billets.
Mise à jour du 26/02/2016: Je viens du Royaume-Uni, je connais donc mieux les formats jour/mois/année que les mois/jours/années. Cependant, pour les utilisateurs qui utiliseront leur curseur pour sélectionner le mois, je pense qu’il est beaucoup plus facile d’avoir la case de sélection en premier, plutôt que d’entrer entrée> case 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 qui sont bien connues de l'utilisateur:
Menus de données bien connus des utilisateurs, tels que le mois et l'année de leur naissance. Ces informations sont souvent câblées dans les doigts des utilisateurs, et le fait de sélectionner de telles options dans un menu casse le paradigme standard pour 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 Jour et Mois doivent être dimensionnées de manière à supposer une entrée à 2 chiffres.
- La zone de texte Year doit être dimensionnée de manière à être supposée une année à 4 chiffres.
- Permettre à l'utilisateur d'entrer une année à 2 ou 4 chiffres. Supposons qu'une année à 2 chiffres soit 1900 et met à jour la zone de texte pour refléter ceci sur OnBlur (ou sur une étape de confirmation suivante).
- Autoriser l'utilisateur à entrer un numéro de mois OR, nom du mois.
EDIT: Voici comment nous avons implémenté notre sélecteur de date de naissance: Champ de saisie de texte masqué avec regex HTML5 pour forcer le clavier numérique sur les appareils iOS.
Les dates de naissance sont différentes des autres dates car les gens sont souvent habitués à taper 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 permettre un formatage flexible tel que 1/1/1970 ou 20/07/70.
Si vous devez prendre en charge différentes cultures avec différentes conventions de date (par exemple, les États-Unis et le Royaume-Uni), vous risquez alors de générer des erreurs pour les personnes qui ne suivent pas cet exemple. Pour éviter cela, vous pouvez utiliser un
sélectionne la liste pour le mois et les zones de texte pour la date et l'année .
_________ __ ____
|March |V| |__| |____|
Cela supprime les ambiguïtés entre les commandes de jour et de mois, mais est un peu moins pratique à utiliser.
Vous devriez jeter un oeil à Datejs .
Datejs est une bibliothèque de dates JavaScript à code source ouvert.
Complet, mais simple, furtif et rapide. Datejs a tout passé essais et est prêt à frapper. Datejs ne se contente pas d’analyser les chaînes, c’est les tranches 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, afin que l'utilisateur ne soit pas dérouté du tout." Donc, que ce soit jQuery ou JavaScript ou C # ou FORTRAN, le design est important - et c'est le design UX, et non le design de l'interface utilisateur, qui compte ici. (Un autre moyen d'éviter la construction incorrecte et illogique "UX/UI").
Utilisez la saisie de texte. Utilisez trois zones distinctes intitulées Jour, Mois et Année (ou Mois, Jour et Année). Laissez les utilisateurs taper les dates. Mélanger du texte et des listes dans la même interaction est une mauvaise chose (n'utilisez pas 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 seul champ de texte qui utilise des astuces de format dans le champ, par exemple, [jour/mois/année]. N'exigez pas de formats trop rigides. Si un utilisateur saisit JUN à l'endroit où vous prévoyez un mois, utilisez juin sur le back-end. Si un utilisateur tape 6 à l'endroit où vous attendez un mois, utilisez juin dans le back-end. Si un utilisateur tape 06 à l'endroit où vous attendez un mois, utilisez juin au dos.
Utilisez le rasoir d'Occam comme guide (en fait, les données seront la plupart du temps suffisamment précises). Réduisez les frictions cognitives (ne faites pas réfléchir les utilisateurs).
Je recommanderais également la combinaison de DatePicker et des champs
Voir cette démo , où le sélecteur de date reflète la date entrée dans les champs par l'utilisateur.
Il est toutefois basé sur un DatePicker utilisant Prototype et Scriptaculous si. Je le mentionne à des fins 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 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 clic mineur dans le champ de texte ou de visualiser le choix saisi dans le champ de texte du sélecteur de date.
Pourquoi ne pas tester les trois et choisir celui qui donne les meilleurs résultats? Cela semble être un bon candidat pour Google Website Optimizer à tester.
Il se peut que le type d’utilisateur que vous avez ou le type de site que vous exécutez puisse imposer à votre solution d’être différente de la "norme".
J'utilise normalement les deux - un datepicker 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 en utilisant le sélecteur de date.
Si vous êtes inquiet au sujet de 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 la forme d'une fenêtre contextuelle.
De plus, j'estime qu'il est judicieux de pré-renseigner le champ de texte avec un texte indiquant le format correct (c'est-à-dire: "JJ/MM/AAAA"). Lorsque l'utilisateur focalise le champ de texte, ce texte disparaît afin de pouvoir entrer le leur.
En tant que l'une des personnes les plus âgées ici et née fin du mois, je trouve les menus déroulants pour les dates de naissance frustrantes. Je dois généralement faire défiler vers le bas sur deux menus déroulants, et c'est maladroit. Je préférerais beaucoup le taper po.
Si vous pouvez concevoir un contrôle de manière à pouvoir accepter les menus déroulants ou à être entré dans le clavier, et indiquer clairement que les deux fonctionnent, ce serait excellent.
Je pense que l'utilisation d'un sélecteur de date dépend ou non de la date des dates. Si elles datent généralement du mois en cours, et presque jamais de plus de quelques mois, et que vous savez que Javascript sera disponible, choisir un datepicker est bon. Si les dates ne sont pas récentes (par exemple, une date de naissance), je pense que c'est la meilleure option:
http://img411.imageshack.us/img411/6328/mockupg.png
Notez que ceci diffère 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 contenant des centaines d'éléments est très pénible pour l'utilisateur.
Je pense qu'un sélecteur de date complique simplement le déménagement pour entrer sa date de naissance.
Comme déjà mentionné, une combinaison de listes déroulantes pour les jours et les mois avec une zone de texte pour l'année semble la plus efficace pour un utilisateur. Cela prend 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'autre. élément au suivant.
Au moins sous Macintosh (je ne connais pas Windows), vous pouvez également utiliser le clavier pour accéder à la date dans des zones de sélection: grâce à la touche de tabulation, vous obtenez le focus sur l'élément de formulaire, puis appuyez sur la flèche pour descendre la liste, puis tapez par exemple 1967 et vous y arrivez en un clin d'œil…
Je prendrais un DatePicker. C'est le seul composant qui permet aux utilisateurs experts de le saisir manuellement et qui permet aux novices de saisir une date très facilement.
Le calendrier ne devrait pas apparaître si vous entrez en appuyant sur l'onglet, mais en cliquant sur un bouton. Donc, aucun utilisateur expert n’en est agacé.
Je préférerais un sélecteur de date (et une zone de saisie au format documenté comme solution de rechange) pour un site international.
Les formats de date varient et sont parfois difficiles à lire si vous y êtes maintenant habitués. Dommage que beaucoup de gens ne sont pas à l'aise avec ISO 8601. :-(
Je suggérerais d’utiliser un menu déroulant pour chaque champ, en veillant à les identifier 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.
Qui n'utilisez-vous pas DatePicker de l'interface utilisateur jQuery?
Il est configurable pour répondre à presque tous les besoins. Le seul inconvénient, c’est que si vous l’incluez avec jQuery UI, son empreinte au sol est un peu grande.
Mettre à jour
Certaines des tailles de fichiers semblent avoir changé, elles sont donc mises à jour ci-dessous. Gardez à l'esprit que ces chiffres ne seront corrects que pour la dernière fois qu'ils ont été mis à jour. Les choses ont peut-être changé depuis.
- Thème CSS - 23kb
- jQuery UI - 71kb minified
- DatePicker - 38kb
- Plus quelques images (le mois prochain/le mois précédent, qui, je suis sûr, sont sprited)
Mais ce n'est pas si mal ...
Je pense que vous pouvez essayer le plugin birthdaypicker ,
Je viens de découvrir un plugin sur JSFiddle . Deux alternatives possibles: 1 seule entrée OR 3 entrées, mais ressemble à une seule ... (utilisez la touche Tab pour passer à l'entrée suivante)
[lien] http://jsfiddle.net/davidelrizzo/c8ASE/Il semble intéressant!
vous pouvez utiliser le plugin cxcalendar . Cela ressemble à un autre datepicker. mais vous pouvez choisir l'année et le mois dans select après avoir cliqué sur le titre year-month.
Le sélecteur de date/heure JQueryUI est la meilleure option car il permet aux utilisateurs professionnels de saisir leur propre valeur dans la zone de texte ou de le choisir dans le sélecteur.
Configurer le sélecteur pour permettre la saisie facile des anniversaires ou des dates futures est également très facile:
$ ('# Datepicker'). Datepicker ({
ChangeMonth: true,
ChangeYear: true,
YearRange: '-100: +50'
});
cela montre quelque chose comme ceci (je ne peux pas poster une photo car je suis un nouvel utilisateur: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )
and 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/