Système de sélection de dates et de calendrier

Que fait Système de sélection de dates et de calendrier ?

Objectif

Le système de sélection de dates et de calendrier fournit une méthodologie pour concevoir des interfaces permettant aux utilisateurs de sélectionner des dates uniques, des plages de dates ou des créneaux horaires spécifiques. La sélection de dates est une tâche à forte friction qui implique des modèles mentaux complexes (par exemple, « mardi prochain », « le dernier week-end du mois »). Ce système garantit que les sélecteurs de dates soient visuellement clairs, faciles à naviguer au clavier et au toucher, et offrent un retour immédiat sur la validité et la disponibilité.

Cas d'utilisation

• Réservations : Sélection des dates d'arrivée/départ pour des hôtels ou des vols.
• Planification : Choix d'un créneau horaire pour une réunion, un rendez-vous ou une livraison.
• Analytique et rapports : Définition d'une plage de dates personnalisée (Date de début à Date de fin) pour le filtrage des données.
• Saisie de date de naissance : Capture de la date de naissance pour la vérification de l'âge ou la configuration du profil.
• Planification d'événements : Gestion des délais ou jalons dans un outil de gestion de projet.

Quand ne PAS l'utiliser

• Dates simples : Si vous n'avez besoin que d'une seule date bien connue (comme « Aujourd'hui » ou « Hier »), utilisez un simple bouton ou un lien.
• Dates mémorisées : Pour les dates que les utilisateurs connaissent par cœur (comme les anniversaires ou les dates d'expiration de cartes de crédit), utilisez des entrées de texte standard avec type="number" ou type="tel" plutôt qu'une grille de calendrier, car elles sont plus rapides à taper qu'à naviguer sur une grille.
• Temps relatif : Si l'utilisateur n'a besoin que de sélectionner « Les 7 derniers jours » ou « Ce mois-ci », utilisez une liste déroulante ou un groupe de boutons au lieu d'un calendrier complet.

Entrées

1. Mode de sélection : Date unique, Plage de dates ou Créneau horaire.
2. Contraintes : Dates minimales/maximales, dates désactivées (par exemple, dates passées, créneaux entièrement réservés).
3. Contexte : S'agit-il d'un élément de page autonome ou d'un déclencheur de popover/modal ?
4. Localisation : Formats de date régionaux (MM/JJ/AAAA vs JJ/MM/AAAA) et premier jour de la semaine (dimanche vs lundi).

Sorties

1. Spécification de l'anatomie de la grille : Définition visuelle de l'en-tête du mois, des étiquettes des jours de la semaine et des cellules de jours.
2. Matrice d'états : Traitements visuels pour les états Aujourd'hui, Sélectionné, Début de plage, Fin de plage, Dans la plage, Survol et Désactivé.
3. Spécification de connexion à l'entrée : Comment le calendrier se rapporte au champ de saisie de texte (icône de déclenchement, formatage et prise en charge de la saisie manuelle).
4. Plan d'accessibilité : Raccourcis clavier (Flèches, Entrée, Échap) et régions live ARIA pour les mises à jour de statut.

Flux de travail

1. Sélectionner le motif de saisie

Choisissez comment l'utilisateur saisit la date :

• Saisie directe : Champ de texte masqué. Idéal pour une saisie rapide de dates connues.
• Déclencheur de sélecteur : Une entrée avec une icône de calendrier qui ouvre une superposition. Standard pour la plupart des cas d'utilisation.
• En ligne/ Persistant : Le calendrier est toujours visible sur la page. Idéal pour les tâches lourdes en planification.

2. Concevoir la grille du calendrier

Établissez un rythme spatial cohérent pour la vue mensuelle :

• En-tête : Mois et Année avec les boutons de navigation « Précédent » et « Suivant ».
• Ligne des jours de la semaine : Étiquettes d'une seule lettre ou courtes (L, M, M, J, V, S, D) pour une orientation rapide.
• La grille à 7 colonnes : Assurez-vous que chaque cellule de jour a suffisamment d'espace pour la date et les indicateurs de statut potentiels (par exemple, un point pour un événement).

3. Définir la logique de plage (si applicable)

Lors de la sélection d'une plage, l'interface doit suivre trois états :

• Début de sélection : La première date cliquée.
• La « portée » : La connexion visuelle entre le début et la position de survol actuelle.
• Fin de sélection : La deuxième date cliquée, finalisant la plage.
• Retour visuel : Utilisez un remplissage d'arrière-plan subtil pour les dates « Dans la plage », avec des formes distinctes ou un contraste plus élevé pour les extrémités « Début » et « Fin ».

4. Concevoir pour l'accessibilité

• Navigation au clavier : Les utilisateurs doivent pouvoir se déplacer entre les jours à l'aide des touches Flèche, changer de mois avec PageUp/PageDown et sélectionner avec Entrée.
• Gestion du focus : Lorsque le sélecteur s'ouvre, le focus doit se déplacer sur la date actuellement sélectionnée ou « Aujourd'hui ».
• Rôles ARIA : Utilisez role="grid" pour le calendrier, role="columnheader" pour les jours de la semaine et role="gridcell" pour les jours. Utilisez aria-selected="true" pour la sélection active.

5. Planifier les adaptations responsives

• Vue mobile : Sur les petits écrans, une vue à mois unique est souvent la meilleure. Pour la sélection de plages, envisagez d'empiler deux mois verticalement ou d'utiliser une superposition plein écran.
• Cibles tactiles : Assurez-vous que chaque cellule de jour mesure au moins 44x44px ou fournissez un espacement adéquat pour éviter les clics accidentels.

Règles de décision

• La règle « Tapez d'abord » : Autorisez toujours les utilisateurs à taper manuellement la date dans le champ de saisie. Ne les forcez pas à utiliser le calendrier.
• Limites de mois : Si vous sélectionnez une date très éloignée dans le passé ou le futur (par exemple, 5+ ans), fournissez un sélecteur déroulant Année/Mois au lieu de forcer l'utilisateur à cliquer sur « Suivant » des dizaines de fois.
• Retour immédiat : Si un utilisateur sélectionne une date invalide (par exemple, un dimanche pour une livraison en semaine uniquement), affichez immédiatement un message d'erreur contextuel plutôt que d'attendre la soumission du formulaire.
• Début de semaine : Par défaut, utilisez les paramètres régionaux de l'utilisateur (généralement dimanche aux États-Unis, lundi au Royaume-Uni/UE).

Contraintes

• Accessibilité : Doit respecter le contraste AA des WCAG (4,5:1) pour tous les états de date. Les dates sélectionnées doivent être distinguables par plus que la couleur (par exemple, un arrière-plan solide par rapport à aucun arrière-plan).
• Réactivité : Les calendriers ne doivent jamais déborder de la fenêtre d'affichage. Les sélecteurs popover doivent utiliser une logique de « retournement » pour rester visibles s'il n'y a pas de place en dessous de l'entrée.
• Localisation : Prendre en charge différents formats de date et traductions pour les noms des mois et des jours.

Schémas d'échec courants

• Le « cliqueur infini » : Obliger les utilisateurs à cliquer sur 12 mois pour trouver une date au lieu de fournir un sélecteur d'année.
• Entrée cachée : Empêcher les utilisateurs de taper la date, ce qui frustre les utilisateurs expérimentés et ceux ayant des troubles moteurs.
• Petites cibles : Concevoir une grille avec des cellules de 20px impossible à utiliser sur un appareil mobile.
• Manque de contexte « Aujourd'hui » : Ne pas mettre en évidence la date actuelle, ce qui rend plus difficile pour les utilisateurs de s'orienter.
• Plages confuses : Ne pas distinguer clairement le « Début » et la « Fin » d'une plage, ou ne pas afficher la portée « Dans la plage ».

Critères de validation

• Les utilisateurs peuvent naviguer dans le calendrier et sélectionner une date en utilisant uniquement le clavier.
• La saisie manuelle de texte est prise en charge et validée dans le champ de saisie.
• La date d'aujourd'hui est visuellement distincte mais n'entre pas en concurrence avec la sélection.
• Les sélections de plage ont un traitement visuel clair « Début », « Fin » et « Portée ».
• Les cibles tactiles pour les cellules de jour respectent la recommandation de 44x44px (ou minimum 24x24px avec espacement).
• Les ratios de contraste pour tous les états (Survol, Sélectionné, Désactivé) respectent les normes WCAG AA.
• Le calendrier adapte sa disposition (ou passe en plein écran) sur les appareils mobiles.