Système de Chronologie d'Activités

Que fait Système de Chronologie d'Activités ?

Objectif

Le Système de Chronologie d'Activités fournit une méthodologie pour concevoir des séquences chronologiques d'événements, des journaux d'historique ou des feuilles de route. Il garantit que les utilisateurs peuvent suivre la progression, comprendre les relations temporelles et parcourir efficacement les données historiques. Ce système équilibre la densité d'information avec le rythme spatial, assurant que le récit du "quand" et du "quoi" soit clair sur toutes les zones d'affichage.

Cas d'Utilisation

• Conception de flux d'activités pour les tableaux de bord SaaS (ex : historique de projet).
• Structuration de feuilles de route produit ou de notes de version.
• Organisation de l'historique de l'entreprise ou des jalons "À Propos".
• Implémentation du suivi de commandes ou de l'historique d'expédition pour le e-commerce.
• Gestion de visualisations de processus multi-étapes (ex : statut de candidature).

Quand NE PAS Utiliser

• Progression Linéaire par Étapes : Pour une simple séquence d'étapes que l'utilisateur doit compléter en temps réel, utiliser step-progress-system.
• Données Purement Tabulaires : Si l'objectif principal est le tri et le filtrage par de nombreuses colonnes (ex : un journal d'audit financier complet), utiliser data-table-ui-system.
• Navigation Globale : Pour la structure du site entier, utiliser site-navigation-system.
• Flux de Blog Simples : Là où des cartes standard dans une grille ou une liste suffisent sans fil visuel ou marqueurs temporels.

Entrées

1. Inventaire d'Événements : La liste des événements, horodatages et métadonnées associées.
2. Résolution Temporelle : L'utilisateur a-t-il besoin des secondes, des jours ou des années ?
3. Types d'Événements : Catégorisation des événements (ex : Info, Succès, Avertissement, Erreur, ou Jalon vs Action Mineure).
4. Contraintes Spatiales : La chronologie se trouvera-t-elle dans une barre latérale, une vue plein écran ou une carte étroite ?
5. Jetons de Marque : Couleurs, échelles typographiques et jetons d'espacement.

Sorties

1. Spécification d'Anatomie de la Chronologie : Définition du "Fil" (la ligne verticale/horizontale), des "Nœuds" (les marqueurs) et des "Blocs de Contenu".
2. Stratégie de Regroupement : Règles pour regrouper les événements (ex : "Aujourd'hui", "Hier", "Octobre 2023").
3. Matrice d'État et de Statut : Traitements visuels pour différents types d'événements et états interactifs.
4. Plan Réactif : Comment la chronologie s'adapte d'une disposition centrée ou alternée à une vue mobile à colonne unique.

Flux de Travail

1. Définir le Fil Temporel et l'Orientation

Déterminer la direction du temps :

• Vertical (Standard) : Idéal pour des contenus de longueur variable et de longs historiques.
• Horizontal : Idéal pour des feuilles de route de haut niveau ou des processus courts où l'espace horizontal est abondant.

Établir le "Fil" (la ligne reliant les événements) et s'assurer qu'il a un poids visuel et une couleur cohérents (généralement une teinte neutre et atténuée).

2. Établir les Nœuds d'Événements et les Marqueurs

Concevoir les ancres visuelles pour chaque événement :

• Nœuds Simples : Petits points ou cercles pour les actions mineures.
• Nœuds Iconiques : Icônes à l'intérieur de cercles pour indiquer les types d'événements (ex : une coche pour "Terminé").
• Marqueurs de Date : Étiquettes qui flottent à côté ou au-dessus des nœuds.

3. Appliquer le Rythme Spatial et le Regroupement

Éviter l'encombrement visuel en regroupant les événements par périodes temporelles :

• Regroupement Relatif : "À l'instant", "Il y a 2 heures".
• Regroupement Absolu : "Lundi 23 oct.", "Septembre 2023".

Utiliser le fluid-spacing-system pour maintenir des écarts verticaux cohérents entre les événements. Les jalons de haute priorité doivent avoir plus d'espace blanc que les éléments d'activité mineurs.

4. Organiser le Bloc de Contenu

Appliquer le visual-hierarchy-system au contenu adjacent à chaque nœud :

• Titre : L'action principale ou le nom de l'événement.
• Métadonnées : Horodatage, acteur (avatar/nom de l'utilisateur) et catégorie.
• Corps/Description : Détails optionnels ou contenu développé.
• Actions : Boutons contextuels (ex : "Voir les détails", "Annuler").

5. Planifier l'Adaptation Réactive

• Disposition Alternée (Motif en Z) : Sur ordinateur de bureau, les événements alternent à gauche et à droite du fil. Sur mobile, se réduire à une seule colonne (fil à gauche, contenu à droite).
• Disposition Unilatérale : Standardiser sur "Fil à gauche, contenu à droite" pour mobile afin de maximiser la lisibilité.

Règles de Décision

• La Règle du "Fil" : La ligne ne doit jamais être cassée sauf s'il y a un écart logique dans le temps ou une action "Charger plus".
• Seuil de Regroupement : Si plus de 5 événements se produisent le même jour, les regrouper sous un seul en-tête de date pour réduire le texte redondant.
• La Hiérarchie des "Nœuds" : Utiliser des nœuds plus grands ou des couleurs de marque pour les "Jalons" et des nœuds plus petits et neutres pour les "Activités".
• Position de l'Horodatage : Pour les chronologies verticales, placer les horodatages à gauche du fil (ordinateur) ou immédiatement en dessous du titre (mobile) pour le balayage le plus rapide.

Contraintes

• Accessibilité : Les chronologies doivent être navigables en tant que liste (<ul> ou <ol>). Les nœuds contenant des icônes doivent avoir un aria-label ou un texte caché pour les lecteurs d'écran. Envelopper les horodatages dans un élément <time datetime="..."> pour que les étiquettes relatives ("Il y a 2 heures") restent lisibles par machine. Pour les flux d'activités en direct, ajouter les nouvelles entrées dans une région aria-live="polite" (pas toute la liste) afin que les utilisateurs de lecteurs d'écran entendent les nouveaux événements sans perdre leur place.
• Réactivité : Les chronologies ne doivent jamais déborder de la zone d'affichage. Les chronologies horizontales doivent passer en vertical ou utiliser un défilement horizontal sur mobile.
• Contraste Visuel : Le fil et les nœuds doivent atteindre un ratio de contraste de 3:1 par rapport à l'arrière-plan.

Modèles d'Échec Courants

• Fils Brisés : La ligne verticale commence et s'arrête arbitrairement, rendant difficile le suivi de la séquence.
• Surcharge d'Informations : Inclure trop de texte dans chaque événement, transformant la chronologie en un mur de texte.
• Alignement Incohérent : Mélanger du texte centré et aligné à gauche dans la même chronologie sans logique claire.
• Tassement Mobile : Essayer de conserver une disposition alternée (gauche/droite) sur mobile, laissant des colonnes minuscules pour le texte.

Critères de Validation

• Les événements suivent un ordre chronologique clair et cohérent (Ascendant ou Descendant).
• Les marqueurs visuels (nœuds) et le fil de connexion sont stylisés de manière cohérente.
• Le regroupement temporel (ex : "Aujourd'hui") est utilisé pour réduire la charge cognitive.
• Le comportement réactif (ex : regroupement en une seule colonne) est défini et fonctionnel.
• Accessibilité : La chronologie est balisée comme une liste sémantique, et les horodatages utilisent <time datetime="...">.
• Les flux en temps réel annoncent les nouvelles entrées via une région aria-live="polite" ciblée sans perturber le focus du lecteur d'écran.
• Les jalons principaux sont visuellement distincts des activités secondaires.