Quelles alternatives aux calendriers existent pour entrer des dates sur des sites Web?
La saisie des dates passe par des changements sur Internet, ainsi que dans la conception de l'interface Web/utilisateur. Actuellement, j'implémente <input type="date">, car cela offre une excellente convivialité sur les appareils mobiles.
Sur les navigateurs de bureau, <input type="date"> est principalement implémenté comme un calendrier cliquable, qui apparaît lorsque vous cliquez sur une flèche dans un champ de saisie.
Cependant, cela présente certains inconvénients:
- Le
<input type="date">champ n'est pas largement pris en charge dans les navigateurs, en particulier les anciennes versions d'Internet Explorer. Pour corriger cela, j'utilise un sélecteur de date javascript traditionnel dans ces cas. Cela entraîne des frais d'entretien et de maintenance supplémentaires; - Même dans les navigateurs qui prennent en charge
<input type="date">, il n'est pas encore utilisé par de nombreux sites Web, de sorte que les utilisateurs ne sont pas encore familiers avec la conception particulière de leur navigateur (les navigateurs mobiles peuvent être l'exception); - Formats de date en
<input type="date">manquent au mieux; - La saisie des dates en cliquant sur les calendriers est douloureusement lente;
À mon avis, toute alternative viable serait:
- Fournir des options pour les limites et la validation;
- Indépendamment du formatage de la date;
- Vous cherchez bien;
- Très compréhensible;
Quelles alternatives aux calendriers existe-t-il pour saisir des dates sur le site Web?
(les images proviennent de le blog de Joe Larson )
Il est préférable de vous demander comment les gens pensent des dates et de modéliser une solution à ce sujet. Personnellement, je pense qu'un champ de saisie de texte avec un sélecteur de date est une excellente solution car je n'ai encore trouvé personne qui ne comprend pas cela ou qui a du mal à l'utiliser.
Certes, la qualité des sélecteurs de dates varie, mais c'est une autre question.
En cas de doute, copiez les personnes qui ont effectué de nombreux tests UX sur les sélecteurs de date . Un bon exemple est Hipmunk .
Le type de saisie de date/widget que vous choisissez dépend grandement des informations que l'utilisateur doit saisir. Dans la plupart des cas, l'utilisateur peut ne pas connaître la date exacte, donc laisser de côté le calendrier l'oblige à prendre une étape supplémentaire pour trouver son propre calendrier pour rechercher la date, devenant plus lent et moins utilisable. Par exemple, s'ils établissent un rendez-vous pour samedi prochain, ils ne connaissent probablement pas la date du samedi prochain, donc sans fournir de calendrier, vous leur donnez la frustration supplémentaire et la difficulté de rechercher la date séparément. Dans ce cas, le calendrier est probablement votre meilleure option car il n'existe aucun autre format existant qui affichera les dates d'une manière universellement reconnaissable.
Un exemple de cas où l'utilisateur n'aurait pas besoin de rechercher la date est si vous lui demandez de saisir son anniversaire. C'est quelque chose que l'utilisateur moyen connaîtrait du haut de sa tête et n'aurait pas besoin de rechercher pour déterminer la date. C'est là que vous pouvez obtenir un peu plus de créativité car vous n'êtes pas confiné au format de calendrier typique - déroulants, défilement, champs de texte, etc. Cependant, le moyen le plus rapide pour un utilisateur d'entrer cette date serait un simple champ de texte . Le seul avantage que je peux voir en utilisant les listes déroulantes mois, jour, année ou d'autres formats serait d'éviter toute confusion sur l'ordre du mois et du jour (MM/JJ/AAAA vs JJ/MM/AAAA).
Dans la plupart des situations, la meilleure solution serait d'avoir une entrée de texte avec un widget de calendrier attaché qui s'ouvre lorsque l'entrée est active. Cela permet à l'utilisateur de taper rapidement la date s'il la connaît ou d'utiliser le calendrier pour sélectionner une date s'il en a besoin.
Même si les calendriers de clic peuvent être lents, il s'agit d'une solution universelle qui ne dépend pas du format de date utilisé dans la région géographique locale. De plus, les utilisateurs connaissent les calendriers muraux et ont pour eux un modèle mental correspondant.
Vous pouvez utiliser d'autres solutions (comme la saisie de texte conviviale permettant aux utilisateurs de taper simplement la date comme "5 mars", etc.), mais toutes auront certaines limites: il peut être difficile de prendre en charge chaque région géographique et langue que vous 'aurez besoin, ou peut nécessiter une validation supplémentaire, ou vous devrez présenter quelque chose de nouveau à vos utilisateurs (et ils devront passer leur temps à comprendre comment les choses se comportent).
Si vous cliquez sur un calendrier pour ralentir, la meilleure solution suivante serait un champ de texte normal. Fournissez le texte d'espace réservé habituel (MM/JJ/AAAA) afin que l'utilisateur sache comment entrer la date et que vous n'ayez pas à gérer tous les différents types de dates.
Je pense que c'est la meilleure façon sur les navigateurs de bureau après un sélecteur de date.
Les navigateurs sont assez impressionnants de nos jours. Travailler avec des entrées typées est une bonne idée, mais elles ne fournissent pas une UX cohérente, ce que vous recherchez peut-être. Le support HTML5 sur les entrées tapées est en train d'être adapté par les navigateurs, mais certains des contrôles sont lourds. Ils ne fournissent pas de validation, ils ne fournissent pas d'indices à l'utilisateur. Le choix de la bonne solution à votre problème de sélection de date dépend également de la plate-forme où elle est consommée. S'agit-il d'un site Web mobile/tactile ou d'un site Web de bureau?
Pour un site Web mobile utilisé sur des appareils tactiles, votre meilleur pari est un composant de défilement ou une vue de calendrier. Le modèle d'interaction tourne, glisse et tapote. Les éléments d'interface utilisateur utilisés doivent avoir des zones suffisamment grandes pour éviter les "gros doigts". La différence entre un sélecteur de date de type scroller et une vue de calendrier dépend également du contexte. Ils vous permettent tous les deux de choisir une date, mais est-ce que cela aide à voir où se trouve le jour du mois?
Pour un site Web de bureau, un calendrier, avec les fonctionnalités de base comme le changement de mois et la sélection de dates avec des clics. Le balayage et la rotation ne s'appliquent pas ici.
Pour savoir comment présenter cela, lié à une entrée ou simplement l'afficher à l'écran, cela n'a pas vraiment d'importance en termes d'interaction avec les utilisateurs. Cela dépend de l'espace dont vous disposez et des contraintes.
Vous devriez vérifier Calendrier Mobiscroll et Sélecteur de date pour vos sites Web mobiles.