Evolution UX/UI de la page des compteurs

[ThibautChd]

L'arrivée prochaine des compteurs voitures nécessite de revoir l'ergonomie et les fonctionnalités de la page compteurs pour intégrer et utiliser au mieux ces nouvelles données.

Je vous propose donc les évolutions suivantes :

• Le header "Compteurs" renvoie vers un menu déroulant avec deux pages "Compteurs vélo" et "Compteurs voiture"
• Chacune des deux pages vélo et voiture a la même ergonomie et le même affichage
• Sur chaque page, l'UI des rectangles de chaque compteurs triés par trafic est modifié selon l'exemple suivant :

Ce nouveau bloc permet d'introduire différentes nouveautés listées ci-après :

• Il existe 3 types de compteurs : vélo, voiture et mixte vélo/voiture
• Les compteurs mixte vélo/voiture seront explicitement appairés dans le code après analyse, car ils mesurent le trafic d'une même portion de rue (exemple ici du quai Augagneur au nord du pont de la Guillotière)
• La première colonne indique le type de la valeur affichée (total ou moy/jour), ainsi que le mode mesuré avec un icone (vélo ou voiture)
• La seconde colonne (2023 dans l'exemple) est l'année de comparaison, par défaut égale à A-1 où A est l'année en cours. On verra ensuite qu'on pourra la modifier.
• La troisième colonne est toujours l'année en cours. Si la valeur de cette année est un record, une icone de médaille s'ajoute à la droite de la valeur (iconoir:medal-1st-solid).
• La quatrième colonne correspond à l'évolution en pourcent entre l'année de comparaison et l'année en cours. Elle s'affiche en vert si l'évolution est à la hausse et en rouge si elle est à la baisse.
• en haut à gauche se trouve la commune (typo petite straight) et le nom du compteur (typo grande bold)
• en haut à droite se trouve la période affichée (le mois de février dans l'exemple)
• s'il s'agit d'un compteur "simple" vélo ou voiture, le bloc a une seule ligne ; s'il s'agit d'un compteur mixte, on retrouve une ligne pour les vélos et une seconde pour les voitures, permettant de comparer facilement les deux types de trafics.

Pour modifier les données affichées dans ce nouveau bloc, une nouvelle barre de réglage apparait au-dessus de la barre de recherche :

En fonction du device utilisé pour visualiser le site, cette barre s'affiche sur une ligne (ordinateur) ou 3 lignes (smartphone). Elle est composée de :

1. un toggle pour afficher des données mensuelles ou annuelles (par défaut, mensuel est sélectionné)

   • si l'affichage mensuel est sélectionné, un menu déroulant permet de sélectionner le mois désiré (par défaut, il s'agit du dernier mois disponible) et celui-ci est affiché en haut à droite du bloc
   • si l'affichage annuel est sélectionné, il est indiqué "année" en haut à droite du bloc.

2. une liste déroulante pour modifier l'année de comparaison selon celles disponibles à ce compteur (par défaut égale à A-1)

3. un toggle pour passer d'un affichage "total" (somme de tous les passages de la période) à un affichage "moy/jour" (moyenne journalière des passages de la période). Ce choix modifie l'affichage du type de la valeur affichée dans la première colonne.

Conséquences pour les points affichés sur la carte :

• les points vélo deviennent rose
• les points voiture ont le bleu actuellement utilisé pour les vélos
• les points mixtes sont bicolores avec un séparateur de couleur incliné à 45°
• sur l'écran Compteurs vélo, on voit les points vélo et les points mixtes
• sur l'écran Compteurs voiture, on voit les points voiture et les points mixtes
• dans chacun des écrans, les dix compteurs qui totalisent le plus grand trafic sont affiché 50% plus gros que les autres, avec un contour blanc épais. Cela est une réponse aux discussions soulevées par @Delapouite dans l'Issue #251

Conséquences dans les pages de chaque compteur :

• au-dessous de la carte, une nouvelle barre de réglage apparait avec les mêmes objets que décrits ci-dessus. Un seul graphique reste donc visible sur la page (au lieu de deux aujourd'hui) si le compteur est un compteur simple vélo ou voiture

• en cas de compteur mixte, le graphique évolue légèrement avec une barre pour les vélo et une pour les voitures :

• en outre, pour les compteurs mixtes, deux nouveaux graphiques apparaissent permettant de comparer le trafic vélo et le trafic voiture et de voir facilement l'évolution de l'un par rapport à l'autre :

Conséquences sur les tooltips des compteurs : Se réferer aux compléments ajoutés dans l'Issue #275

[benoitdemaegdt]

Super idée, merci beaucoup pour cette issue et ce niveau de détail 👏

C'est un très beau sujet, qui est également assez costaud. Je suis bien curieux de savoir à quel point il est possible d'automatiser le "merge" d'un compteur vélo et d'un compteur voiture sur un même axe.

Si on attaque ce sujet dans l'ordre, je dirais qu'il faut :

1/ Vérifier la fiabilité des données de l'API Avatar 👉 Je suis sur ce sujet avec le cerema, ça avance doucement.

2/ Ajouter quelques dizaines de compteurs voiture 👉 Même design que les compteur vélos (une carte centrale, puis 1 page / compteur) 👉 Automatisation de la mise à jour le 1er de chaque mois

À ce moment là, on pourra déjà commencer à faire quelques analyses à la main pour comparer la fréquentation vélo et voiture d'un même axe, et voir si ça rend bien comme les graphes qui illustrent cette issue 🤞

[ThibautChd]

Yes, mes propositions sont bien une vision à terme une fois qu'on aura validé les étapes préliminaires que tu évoques Benoit. Hâte de pouvoir faire joujou avec toutes ces données :-)

[benoitdemaegdt]

Ajout aujourd'hui des compteurs voiture, et de la comparaison.