Meilleur affichage des icônes sur la carte lors d'une recherche par catégories
publié le , mis à jour⚙️ Ceci est une proposition de changement de code.
Rendez-vous sur sa page Coderberg pour l'osculter.
fix #1095
Je me suis enfin attaqué à ce pb. Et j'ai choisi un fonctionnement comme ceci :
- quand pas assez de place : on masque le texte mais on garde l'icone aussi grande
- quand encore moins de place : on réduit la taille de l'icone en la laissant toujours visible.
- bonus (auquel je ne m'attendais même pas !) : ça fait que l'icône reste affichée (sous le pin) quand on clique sur un lieu ! c'est bien plus logique aussi.
ça fait que l'icone devient le marqueur d'emplacement (bien plus logique pour l'utilisateur), au lieu du cercle d'horaire comme avant. On peut donc :
- supprimer le marqueur blanc "horaires d'ouverture inconnus" (ça peut paraitre un gros changement, mais franchement c'est bien mieux comme ça)
@laem @pmiossec OK pour vous ? @laem tu veux déployer en dev pour tester ? (je vais poster des captures vidéos dessous)
etienneJr
Pour le cas des hôtels
A l'endroit documenté dans le ticket https://cartes.app/?cat-plus=oui&cat=hotel#17.91/47.211737/-1.560733
avant après au clic <video src="https://codeberg.org/attachments/217563bd-92de-47fb-b519-4b19f6a7ca4c" title="Capture vidéo du 17-01-2026 23:47:32" controls></video>
dans une zone dense en magasins de vêtements (fermés à cette heure ci) https://cartes.app/?cat-plus=oui&cat=vetements#17.58/47.213474/-1.560468
avant après Des parkings à vélo https://cartes.app/?cat=parking-velo#15.67/47.213468/-1.560252
avant après sur l'exemple des arrêts de bus posté dans le ticket initial https://cartes.app/?cat=arret-bus-tram-metro#15.09/48.10636/-1.68436
avant après pmiossec
Je trouve effectivement ça beaucoup mieux 👍
laem
Je viens de recréer dev.cartes.app. Je pense qu'on a besoin de tester en direct pour ce genre de changements très interactifs. [edit] ah ben c'est précisément ce que tu disais haha. Ça va mettre un peu de temps car l'ancien DNS restera quelques minutes à heures.
Je t'avoue que je ne suis pas convaincu par le changement principal :/
Je trouve que l'apparition d'icônes de taille différente nuit à la lisibilité. Là où dans la version actuelle on se pose forcément la question de ce que sont les petits cercles, une fois que le mécanisme est compris après quelques zooms, je trouve que la carte est beaucoup moins chargée et plus lisible.
La différence de taille entre les icônes me dérange car ça me donne l'impression qu'il y a des restaurants moins grands que d'autres, ou qui ont payé pour apparaitre au-dessus, ou qui sont mieux notés, etc. Ça créée une notion d'ordre. L'actuel n'est pas parfait car ça ne peut évidemment pas l'être, mais son message est plus clair et sujet à moins de questionnement : certains appairassent, d'autres pas, c'est comme ça désolé.
Dans les zones denses en points, je trouve qu'afficher les icônes de taille moyenne ne fait qu'apporter de la confusion visuelle avec la ligne continue d'orange ici.
À côté du sujet de la taille variables des icônes, je trouve que c'est un principe important que de ne pas superposer les icônes lieux. Ça créée un amas trop brouillon. Les petites boules d'horaires ont beaucoup moins de chances de se superposer, même si ça peut arriver.
Je serais d'avis de tenter un intermédiaire entre ces deux copies : que les boules d'horaires adoptent la couleur de la catégorie affichée, pour aider à comprendre qu'ils représentent des résultats. Ça pourrait être une boule de la couleur (ici orange pour les restos) mais entourée d'un liseré rouge, vert ou inexistant.
Ces boules resteraient nettement plus petits que les icônes restaurant pour éviter l'intermédiaire qui questionne.
Enfin pour la boule blanche, je pense que ça enlève une information importante. Dans cette capture à droite, il y a deux restaurants dont un fermé et un autre sans horaires. Dans la nouvelle version, à quoi correspond la boule rouge fermée ? Auquel des deux ? Je serais d'avis de la garder pour les catégories pour lesquelles c'est pertinent.
Par contre, comme pour le reste, l'actuel est loin d'être parfait. C'est peut-être la couleur blanche qu'il faut, c'est peut-être un point d'interrogation explicite qui amène les commerçants à se dire "merde, ils ont pas mes horaires". À voir s'il y a assez de place. Ou un truc grisé. Ou si on reprend ma tentative de fusion énoncée plus haut, ce serait un liseré gris autour de la petite boule sans icône, ou de la grande boule avec icône.
OK il y a sûrement moyen de mieux faire, je reverrai ma copie. Néanmoins je précise quand même (histoire d'alimenter le débat 😅) que je ne suis pas d'accord avec certains (voire beaucoup de) points :
on se pose forcément la question de ce que sont les petits cercles, une fois que le mécanisme est compris après quelques zooms, je trouve que la carte est beaucoup moins chargée et plus lisible.
Certes quand on a compris c'est clair, mais le mécanisme ne me semble vraiment pas si simple à comprendre, il ne suffit pas de quelques zooms. Dans les derniers mois, on a eu plusieurs messages de personnes qui n'avaient pas compris, et c'était pas des papy-mamy. Donc il nous faut un visuel plus facile à comprendre. Pour comprendre du premier coup, il faut être tombé sur un cas où on voit en même temps tous les cas. Si l'utilisateur ne voit que des icones et des ronds blancs, c'est incompréhensible.
ça me donne l'impression qu'il y a des restaurants moins grands que d'autres, ou qui ont payé pour apparaitre au-dessus, ou qui sont mieux notés, etc. [...] Son message est plus clair et sujet à moins de questionnement : certains appairassent, d'autres pas, c'est comme ça désolé.
Je ne vois vraiment pas la différence entre les 2 mécanismes sur ce point. Dans les 2 cas, ça donne l'impression qu'un restaurant a payé pour être mis en avant. Voire c'est encore pire aujourd'hui car ceux qui n'ont pas payé n'ont même pas droit à une icône.
je trouve que c'est un principe important que de ne pas superposer les icônes lieux.
d'accord pour le fond de cartes, mais pas pour les catégories. La personne qui a cliqué sur
Grecl'a fait car il veut voir tous les restaurants grecs, c'est normal. Si la carte se retrouve chargée à ce moment là, il sera content d'avoir du choix et zoomera pour en savoir plus. Je dirais même plus : c'est un avantage de voir directement que à tel croisement il y a plusieurs grecs, comme ça il pourra choisir une fois sur place, plutôt que d'aller à tel croisement où il n'y en a qu'un.J'ai fini pour les
pas d'accord, voici les commentaires :pour les catégories pour lesquelles c'est pertinent.
En effet, il faut qu'on mette à jour la propriété
open by defaultducategories.yaml. Elle manque sur plein de catégories, typiquement les parking vélos de ma capture ci-dessus.Ça pourrait être une boule de la couleur (ici orange pour les restos) mais entourée d'un liseré rouge, vert ou inexistant. [...] ce serait un liseré gris autour de la petite boule sans icône, ou de la grande boule avec icône.
A ce moment là, il faudrait qu'on traite en même temps #1441 ? Le liseré blanc des icones du fond de cartes va devenir un liseré gris des icones de catégories d'horaires inconnus, ça va être lisible tu crois ? Et il restera blanc pour les catégories
open by default? Et puis un liseré complet vert/rouge autour d'une icone d'une autre couleur, ça risque pas d'être moche ? Faut qu'on teste.Je me demande si il ne faut pas traiter en même temps la proposition d'Alexandre sur le canal matrix il y a quelques mois : que l'activation d'une catégorie masque tous les autres POIs (ou peut-être plutôt : réduise leur opacité, voire masque les noms). Car dans les zones denses, c'est surtout difficile de mettre en valeur les POI des catégories face à toutes les icones du fond de cartes.
il ne suffit pas de quelques zooms. Dans les derniers mois, on a eu plusieurs messages de personnes qui n'avaient pas compris, et c'était pas des papy-mamy. Donc il nous faut un visuel plus facile à comprendre.
Certes, mais je rappelle que contrairement à une app qu'on n'utilise qu'une fois, notre cible ici est d'avoir des utilisateurs réguliers. Si l'affichage des horaires des catégories sur la carte n'est pas compris dès le premier usage, ce n'est pas forcément un problème car c'est ardu de trouver un design (surtout dans notre temps imparti) qui maximise le taux de compréhension immédiat.
Exemple : Gmaps est bourré de fonctionnalité qu'on découvre plus tard, comme le fameux petit bonhomme en bas à droite de la version bureau qui active la carte street view.
d'accord pour le fond de cartes, mais pas pour les catégories. La personne qui a cliqué sur Grec l'a fait car il veut voir tous les restaurants grecs, c'est normal. Si la carte se retrouve chargée à ce moment là, il sera content d'avoir du choix et zoomera pour en savoir plus. Je dirais même plus : c'est un avantage de voir directement que à tel croisement il y a plusieurs grecs, comme ça il pourra choisir une fois sur place, plutôt que d'aller à tel croisement où il n'y en a qu'un.
Au final notre désaccord est un ressenti personnel différent : de mon côté la superposition d'icônes de tailles différentes me perturbe et je préfère les petites boules qui sont l'équivalent d'un (...) sur la carte. De ton côté tu préfères des icônes explicites quitte à remplir la carte de ces derniers.
Et puis un liseré complet vert/rouge autour d'une icone d'une autre couleur, ça risque pas d'être moche ? Faut qu'on teste.
Oui, je partage la crainte. Je pense qu'on a besoin d'expérimenter sur cette solution intermédiaire.
Je me demande si il ne faut pas traiter en même temps la proposition d'Alexandre sur le canal matrix il y a quelques mois : que l'activation d'une catégorie masque tous les autres POIs (ou peut-être plutôt : réduise leur opacité, voire masque les noms). Car dans les zones denses, c'est surtout difficile de mettre en valeur les POI des catégories face à toutes les icones du fond de cartes.
Bien d'accord, je me suis fait exactement cette remarque à Nantes où les commerces sont chargés 👍
LySioS
Autres propositions:
On affiche toutes les icônes, mais au lieu qu'elles aient des tailles différentes laissant penser à une hiérarchie, on leur donne toutes la même taille, dynamique selon le zoom. Avec une regle d'affichage: quand c'est petit, le rond des horaires avec le liseré coloré, passé un certains seuil, la boule avec l'icone
Un cluster
@LySioS wrote in https://codeberg.org/cartes/web/pulls/1457#issuecomment-12672231:
Autres propositions:
Le mode actuel, depuis #1809, ne te plait pas ? (j'aurais dû fermer ce ticket après #1809 mais j'ai oublié)
je ferme