Redesign de l'affichage des transports de bus / métro / tram
publié le , mis à jourDécrivez votre problème, votre suggestion
Bonjour, c'est ma première contribution ici. Je connais le projet depuis assez longtemps et j'aimerais aider à développer cette alternative, mais l'interface est assez inégale et manque de clarté.
Je trouve qu'il y a plusieurs problèmes concernant l'interface des horaires et passages pour les transports et que cela pourrait être amélioré :
-
Dans la section "Prochain passages", l'interface ne précise pas la direction des bus ce qui porte à confusion notamment lorsque cartes.app regroupe 2 stations comme étant un même point
-
L'utilisateur est limité à se renseigner seulement sur les 5 futurs passages de n'importe quelle ligne, ce qui est embêtant dans le cas où une station est reliée à multiples lignes de transport
-
Les passages ne sont pas organisés par ligne de transport. Si un utilisateur cherche le passage d'une ligne en particulier, il aura du mal à trouver rapidement l'information.
-
Je trouve que la vue de base du calendrier par ligne est beaucoup trop compacte pour être utile, elle est seulement efficace pour repérer rapidement le premier et dernier passage de bus.
-
Elle n'indique pas la direction également, ce qui porte à confusion.
-
Ces deux sections contiennent des informations très similaires mais sont malgré tout séparées en deux sections distinctes. Je pense qu'il est mieux de les regrouper afin de gagner de l'espace de contenu et éviter la redondance.
J'ai réalisé deux maquettes sur Penpot (outil que je ne maitrise pas encore!) pour imaginer comment améliorer le design actuel. Ce design est inspiré de plusieurs apps différents, notamment Apple dans la manière d'organiser, mais aussi de Google Maps & d'une app de transport local pour l'affichage des horaires. L'affichage des calendriers est directement repris de cartes.app.
Les designs sont testables ici ! Sélectionnez le flux "Desktop" et "Mobile" pour tester le premier design, et le flux "Desktop Variant" pour le deuxième.
1. Horaires et calendriers dans une page séparée
Il s'agit de ma vision idéale de ce design. La section "prochains passages" regrouperaient les lignes de transport de transport ensemble en indiquant leur direction, ainsi que les deux prochains passages de chaque direction. Il y aurait également un status concernant la ligne et les passages (à l'heure, en retard, déviation...). Cette section contiendrait également des tabs pour changer de vue entre bus, métros et tram.
On pourrait interagir avec chaque direction afin d'ouvrir une autre page dédiée celle-ci. Elle contiendrait ses horaires en calendrier (horaires indiquées par le réseau de transport) ainsi que les passages de bus en temps réel, affichés sous forme de liste. L'utilisateur pourrait également choisir la date à laquelle il souhaite voir les horaires grâce à un bouton dédié pour. Cette page pourrait également être partagée via un lien afin d'avoir un accès rapide aux horaires d'une direction.
2. Horaires et calendriers sur la même page
Il s'agit globalement du même design mais compacté. Ici les directions affichent 2 passages par défaut mais peuvent être étendus pour en afficher jusqu'à 5. Il comporterait un switch permettant d'activer une vue des horaires en calendrier, également avec un bouton permettant de changer la date.
Qu'en pensez-vous ? L'avantage de ce design selon moi est l'ajout d'informations comme la direction qui rajoute de la clarté ainsi que la structure qui permet à l'utilisateur de trouver rapidement les informations dont il a besoin. S'il a besoin de plus de détails sur une direction, il a seulement à réaliser un clic de plus.
Certaines fonctionnalités comme le calendrier en forme de journée sont absentes car je la juge pas assez lisible, mais si vous trouvez qu'on y perd une fonction utile, dites-le moi.
Ces designs sont réalisés autour des stations de bus / métro / tram mais ne répondent probablement pas à certains cas particuliers auxquelles je n'ai pas pensé, si vous en avez en tête n'hésitez pas.
Ils ne prennent également pas en question les limites techniques, ayant peu de connaissances là-dessus.
Merci
Système d'exploitation
Linux
Navigateur
Firefox
laem
Merci pour ton travail ! Clairement y a du boulot.
Concernant la direction des bus, oui carrément, c'est un problème pas forcément simple niveau donnée, mais gérable avec plus de dev :)
Ces deux sections séparées sont liées aux sources de donnée. L'une est Motis, pour le widget en haut. L'autre est notre base de donnée de tous les GTFS, spécifique à cartes.app. Motis est plus rapide et plus facile à déployer ; notre BDD permet de faire plus de choses. Idéalement, faudrait tout remplacer par Motis, j'en parlais avec le developpeur principa, Felix, hier !
Notamment, Motis est chargé avec les flux GTFS-RT, pas notre API GTFS. Ça me semblait trop lourd d'intégrer les RT dans node-GTFS, même si c'est techniquement possible, c'est un peu du gachis.
Enfin dernier problème : la vue calendrier n'est dispo que pour la France. Donc il faudra soit tout recoder via Motis (ambitieux, incertain, mais gros gain si c'est possible), soit prévoir qu'à l'étranger on n'aura que les données du bloc "prochains passages". Mais déjà avec ces données, on peut faire une version de ce que tu proposes, ligne par ligne, juste en récupérant plus que 5 passages puis en les aggrégeant par ligne ensuite.
Un commentaire général : pas besoin de différencier design mobile et bureau. Le principe retenu c'est que le bureau n'est que le mobile en termes d'encart de contenu. C'est trop couteux pour notre petite équipe de différencier les deux, juste quelques adaptations à la marge pour le layout général de l'app, mais pas pour l'encart contenu.
Globalement je pense que tes maquettes sont une très bonne évolution. On doit pouvoir la construire en mélangeant les deux sources de données décrites plus haut.
Quelques remarques :
- je pense que le caractère cliquable avec le chevron ne doit pas remplacer l'icône calendrier, qui rend davantage prédictible et découvrable l'effet du clic sur la ligne
- les graphiques de fréquence journalière des lignes me semblent importants. J'ai eu beaucoup de remarques à ce propos me disant que le principe est très cool : il permet de se dire immédiatement "ah cette ligne TTZ est hyper peu fréquente ça me servira à rien" ou à l'inverse "wow ce bus il passe mille fois par jour, j'ai même pas besoin de regarder les horaires", et ça donne une information complémentaire du prochain passage qui lui dépend de l'heure de consultation (heure de pointe-> fréquence trompeuse). Visuellement, il est pas beau hein, on est d'accord, c'est une v1, faut la redesigner, mais elle est déjà très vite comprise dans mes tests utilisateur :)
- je ne pense pas qu'on ait besoin d'afficher les deux directions sur la page arrêt de bus. C'est à mon avis un usage très rare, pas grand public. Normalement quand on ouvre une page arrêt, on est sur une seule direction, sauf grosse exception.
- j'irais plutôt vers l'option 1) car on a de toutes façon "besoin" d'une page dédiée à la ligne. En fait on l'a déjà, cf cette page ligne C2 qui affiche le tracé de la ligne sur la carte. C'est une des informations les plus importantes, la liste des arrêts. Actuellement c'est le bordel : carte de transports non cliquable (car ça peut faire apparaitre un café qui est sous une ligne de TeC alors qu'on veut cliquer sur la ligne ; faut faire mieux), ligne qui apparait sous le bloc fiche lieu; le lien précédent est très lourd, il fait geler le navigateur pendant quelques secondes, etc.
Ta proposition de redesign est très bonne mais assez vaste, bien que ciblée sur un segment. Allons-y pas à pas pour y arriver, et quand on y arrivera, ce sera génial :)
Note : en testant j'ai vu que les "prochains passages" étaient cassés. Je crois avoir pigé pourquoi on avait des pb d'update récemment, j'ai tenté un fix, à voir si c'est plus stable dans les prochains jours !
alexandretachau
Merci pour ta réponse ! Je découvre beaucoup d'acronymes, d'acteurs différents et de termes techniques avec ton message, j'espère avoir compris l'essentiel haha
Ces deux sections séparées sont liées aux sources de donnée.
C'est intéressant, malgré tout l'utilisateur moyen n'en a aucune idée, c'est probablement possible que ce soit combiné niveau présentation non ? S'il manque une des sources de données, un message indiquant que ces données sont manquantes peut suffire pour informer l'utilisateur j'imagine ? Ou boutons liés qui sont grisés avec un tooltip qui informe que ce n'est pas disponible...
je pense que le caractère cliquable avec le chevron ne doit pas remplacer l'icône calendrier, qui rend davantage prédictible et découvrable l'effet du clic sur la ligne
Si j'ai bien compris, remplacer l'icône par un calendrier ? La raison pour laquelle j'avais mis un chevron, c'est parce que c'est un pattern souvent utilisé sur téléphone pour montrer qu'on peut interagir avec le composant et qu'il contient une sous-page derrière. En tout cas je suis d'accord avec le fait qu'une icône calendrier serait + évocateur de sa fonction. Seulement j'aimerais que la sous-page apparaisse peu importe où l'utilisateur clique sur le composant et pas seulement sur l’icône calendrier pour que ça reste mobile-friendly.
les graphiques de fréquence journalière des lignes me semblent importants. J'ai eu beaucoup de remarques à ce propos me disant que le principe est très cool : il permet de se dire immédiatement "ah cette ligne TTZ est hyper peu fréquente ça me servira à rien" ou à l'inverse "wow ce bus il passe mille fois par jour, j'ai même pas besoin de regarder les horaires", et ça donne une information complémentaire du prochain passage qui lui dépend de l'heure de consultation (heure de pointe-> fréquence trompeuse). Visuellement, il est pas beau hein, on est d'accord, c'est une v1, faut la redesigner, mais elle est déjà très vite comprise dans mes tests utilisateur :)
Je vois, je comprends mieux l'utilité que ça peut avoir. Dans l'état actuel ça permet de jauger vaguement la fréquentation du bus, mais c'est trop compacté pour que l'utilisateur ait des infos précises sur le nombre de passages / l'attente estimée entre chaque bus. Je me demande si pour un redesign on ne pourrait pas s'inspirer des horaires d'influence sur google maps ?
En gros un graphique dont la valeur des barres serait basé sur le nombre de passages d'un transport dans l'heure. Cela permettrait de visualiser directement les heures où les transports sont les plus fréquents. Idéalement, il faudrait aussi écrit en texte le temps d'attente entre passages dans l'heure lors de la consultation, ainsi que les meilleures et pires horaires niveau fréquence (sur une période de 2 - 3 heures ?).
Bien sûr je viens de sortir l'idée de ma tête, il y a peut-être des designs mieux adaptés pour ce cas, mais je la partage quand même au cas où
je ne pense pas qu'on ait besoin d'afficher les deux directions sur la page arrêt de bus. C'est à mon avis un usage très rare, pas grand public. Normalement quand on ouvre une page arrêt, on est sur une seule direction, sauf grosse exception.
Est-ce vraiment si rare ? Personnellement ça me parait utile pour checker les horaires d'un arrêt proche de chez moi et c'est aussi la seule raison pour laquelle j'utilise l'application de ma ville pour les transports, car je peux choisir très facilement les différentes directions en fonction d'où je dois aller.
D'ailleurs sur la plupart des applications de map, lorsqu'on recherche un arrêt de bus, ça nous sélectionne l'un des deux arrêts de bus au hasard et souvent il ne s'agit pas de celui avec la bonne direction, ce qui prête à confusion. Alors on doit chercher sur la carte et sélectionner manuellement l'autre arrêt pour avoir les bonnes infos. Sur cartes.app de ce que j'ai vu, c'est pareil. Mais il y a pourtant possibilité de regrouper les 2 arrêts en 1 seul point si on clique sur une ligne de bus proposée. Pour le cas où cartes.app regroupe les deux arrêts de bus en un seul, ça me paraît normal de regrouper les deux directions de la ligne. Pour mon usage personnel j'aurais aussi fait en sorte que le regroupement d'arrêt soit le comportement par défaut, mais peut-être bien que j'ai un usage de niche ou qu'est utile qu'à échelle locale, après tout j'ai pas fait de tests utilisateurs haha
Après pour un trajet je pense que les gens ont tendance à utiliser l'itinéraire qui utilise directement la bonne direction. Du coup oui je comprends si c'est pas grand public
j'irais plutôt vers l'option 1) car on a de toutes façon "besoin" d'une page dédiée à la ligne. En fait on l'a déjà, cf cette page ligne C2 qui affiche le tracé de la ligne sur la carte. C'est une des informations les plus importantes, la liste des arrêts. Actuellement c'est le bordel : carte de transports non cliquable (car ça peut faire apparaitre un café qui est sous une ligne de TeC alors qu'on veut cliquer sur la ligne ; faut faire mieux), ligne qui apparait sous le bloc fiche lieu; le lien précédent est très lourd, il fait geler le navigateur pendant quelques secondes, etc.
C'est vrai, pour l'instant c'est juste une liste. Est-ce qu'il y aurait moyen d'obtenir les horaires du bus sur chaque station de la ligne (voir screen dessous) ? Je sais que c'est quelque chose que google maps fait, mais je me demande si c'est réalisable ou si vous avez les données de votre côté. Si c'est le cas il pourrait encore y avoir une sous-page dédiée à ça, mais je sais pas vraiment à quel point c'est utile pour les utilisateurs, je l'utilise assez peu de mon coté.
cf cette page ligne C2
erreur de lien héhé
un message indiquant que ces données sont manquantes peut suffire pour informer l'utilisateur j'imagine ? Ou boutons liés qui sont grisés avec un tooltip qui informe que ce n'est pas disponible...
Non mieux vaut ne pas l'en informer je pense. Il n'y peut rien que tout soit ne soit pas dispo hors-France, donc ça sera plus perturbant qu'autre chose de le montrer.
Seulement j'aimerais que la sous-page apparaisse peu importe où l'utilisateur clique sur le composant et pas seulement sur l’icône calendrier pour que ça reste mobile-friendly.
Oui bien sûr, carrément !
Je me demande si pour un redesign on ne pourrait pas s'inspirer des horaires d'influence sur google maps ?
Oui ils sont pas mal mais plus pour représenter du relatif et puis ils prennent bcp de place verticale. Et puis ils représentent surtout l'affluence à l'heure de pointe, qui est peut-être celle la moins intéressante ? À mon avis on pourra discuter de leur amélioration dans une autre PR, celle-ci est déjà costaud ^^
car je peux choisir très facilement les différentes directions en fonction d'où je dois aller.
Je pense qu'une façon simple de résoudre ce problème c'est un bouton bien placé "Voir l'autre sens" (bien placé car parfois c'est partagé par l'ensemble des lignes de cet arrêt, parfois non, mais en général si je pense), qui permet de sauter à l'autre arrêt de bus sur la carte. Il faut qu'on reste ancré dans la carte.
mais peut-être bien que j'ai un usage de niche ou qu'est utile qu'à échelle locale, après tout j'ai pas fait de tests utilisateurs haha
Faudrait confirmer ça mais personnellement dans ma vie j'ai jamais utilisé un bus que pour aller 90 % dans l'une des directions à l'aller et l'autre au retour. Je pense que la plupart des gens utilisent une ligne dans "une seule direction" dans cette compréhension du terme.
Mais c'est surtout que ça simplifie l'UI je pense d'avoir qu'une seule direction. Tout est plus clair, y a qu'un seul bouton "ligne C1" à voir et cliquer :) Je pense même que beaucoup de gens ne connaissent pas le nom de la direction, juste le combo d'information C1 + "bon côté de la route" :)
Est-ce qu'il y aurait moyen d'obtenir les horaires du bus sur chaque station de la ligne (voir screen dessous)
Oui il y a moyen d'avoir tout car on a 100 % du GTFS en base en France. Ailleurs via Motis, et de façon plus performante, je pense qu'on pourra sans pb trouver cette info ou demander à Felix de l'ajouter :)
C'est un bug que j'ai pu même te partager ce lien qui plante. La carte des TeC est bien bugguée, faut vraiment qu'on trouve un financement ou un usage... ta proposition va dans ce sens :)
Hello, j'ai mis à jour la maquette en prenant en compte les retours et en m'inspirant d'autres interfaces.
Ici j'ai surtout appliqué les retours Cette fois-ci, j'ai seulement mis 1 seule ligne par direction, celle concernée par l'arrêt sélectionné sur la carte. J'ai également mis une icône de calendrier pour montrer qu'en appuyant dessus, on accède à + de détails.
J'ai également différencié dans leur format le temps relatif (dans 8 min) et les horaires précises avec deux points (4:22), utile pour les lignes qui passent très peu où il est + facile d'indiquer l'horaire.
Dans l'ancienne version de la maquette, cet écran nous indiquait seulement 1 direction, celle sélectionnée. Je faisais la remarque comme quoi on devrait pouvoir faciliter la vue de l'autre direction et Mael a fait la suggestion d'un bouton "Voir dans l'autre sens" qui mettrait l'utilisateur dans un autre arrêt du même nom en face.
Cependant je trouve qu'un bouton comme ça ne marche pas dans le cas de multiples directions (ligne de tramway qui se sectionne en deux par exemple) et n'informe pas du nom de la direction souhaitée avant d'appuyer dessus.
C'est pourquoi je pense qu'il serait mieux que cet écran soit à propos de la ligne de transport et qu'on y ajoute un menu dropdown pour les directions. Comme ça on peut afficher plus de deux directions si nécessaire ainsi que leur nom. On pourrait même imaginer une option "Toutes les directions" qui affichent tous les passages de l'arrêt.
Pour le bouton calendrier, j'ai également ajouté l'heure choisie.
J'ai également intégré le graphique de fréquence journalière sous les horaires tout en indiquant le nombre de passages par jour & heure comme le fait déjà le site.
Il y a aussi le cas d'arrêts de bus accessibles par plusieurs lignes qui sont situés dans des carrefours. Il faudrait peut-être afficher toutes les lignes par défaut même si l'utilisateur ne regarde pas l'arrêt de bus sur la bonne rue ?
Puisque c'est un écran dédié à une ligne de transport, j'ai ajouté une section "plan" à la fin qui regroupe tous les arrêts de la direction sélectionnée. Un point en couleur d'accentation montrerait l'arrêt que l'utilisateur a sélectionné pour le repérer facilement.
J'ai pas trop développé le côté fonctionnalité car ce n'est pas le but du redesign mais je me disais que l'ajout de correspondances à chaque arrêt s’apprêtait bien à cette fonction de plan.
J'ai aussi commencé à réaliser l'écran "passages" avec les horaires précises pour chaque arrêt. C'est très proche de ce qui est fait sur google maps pour le coup. On rappelle dessus la ligne de bus & sa direction. Sous le nom de chaque arrêt peut être affiché un statut, comme du retard ou bien une déviation. Je m'y connais pas en accessibilité mais je me dis que des icônes pour indiquer qu'une station est adapté aux fauteuils roulants peut être pertinente pour cet écran.
Pour le choix du passage, j'ai également mis un dropdown en se basant sur l'heure de départ prévue depuis l'arrêt sélectionné, mais je me demande pas s'il serait mieux de mettre deux boutons "précédent / prochain passage" à la place ?
De base je pensais à ajouter des infos comme le temps de trajet jusqu'au terminus mais étant donné qu'il ne s'agit pas d'un itinéraire choisi par l'utilisateur, je me questionne sur l'utilité d'afficher cette info, qu'en pensez-vous ?
esmenard
@alexandretachau wrote in https://codeberg.org/cartes/web/issues/2850#issuecomment-24617706:
De base je pensais à ajouter des infos comme le temps de trajet jusqu'au terminus mais étant donné qu'il ne s'agit pas d'un itinéraire choisi par l'utilisateur, je me questionne sur l'utilité d'afficher cette info, qu'en pensez-vous ?
Ca ne m'a pas l'air très utile effectivement