← Retour aux issues

Amélioration du menu de catégories

publié le , mis à jour
Avatar github de bristowbristow

Voici le menu actuel :

image

Pourquoi la dernière catégorie est tronquée ? Ces catégories ne sont pas anodines puisqu'on ne les retrouve pas dans le menu que l'on déploie avec le gros bouton +

De plus, est-ce que les gites et les chambres d'hôtes ne seraient pas utiles ?

  1. Avatar github de laemlaem

    Ah, c'est une régression ! Auparavant, le clic sur le bouton + montrait tous les filtres.

  2. Avatar github de laemlaem

    Fixed by e418e6bfec83b1abc1b25826dea68170aaa6b6de

  3. Avatar github de LySioSLySioS

    Je me mets ici, car le titre résonne avec le contenu de mon message concernant l'amélioration du menu pour éviter la surcharge :

    Comportement

    la découverte de catégories est actuellement correcte du fait de leur nombre limité. Un comportement gênant sur mobile cependant : pour avoir accès à toutes les catégories, il faut lever le tiroir une première fois, puis cliquer sur +, puis retirer le tiroir. Comportements attendus : l'appui sur le bouton + devrait ouvrir le tiroir automatiquement et la levée du tiroir jusqu'en haut devrait automatiquement faire apparaitre toutes les catégories.

    L'augmentation du nombre de catégories et d'item va entrainer une surcharge de l'interface.

    Plusieurs possibilités :

    1. repenser l'interface
    2. cacher certains items
    3. permettre à l'utilisateur de sélectionner les items à mettre en favoris

    Repenser l'interface

    ou comment hiérarchiser et naviguer dans tous ces items

    Ce qui se fait ailleurs

    Exemple Teritorio

    Image

    Image

    https://carte.anglet-tourisme.com/#map=11.34/43.4895/-1.573

    De grosses icônes pour chaque catégories. Chaque clic rentre dans la catégories (masquant de fait les premières) et fait apparaitre les sous-catégories et/ou les items

    Exemple Priceless

    Image

    https://priceless.zottelig.ch/

    Menu déroulant permettant de garder affiché les premières catégories et de cocher les items souhaités

    Exemple demo.osm

    Image

    https://demo.openstreetmap.fr/

    Une fois la première catégorie sélectionnée, on peut reaccéder aux prémières catégories par clic sur menu déroulant supérieur (pas forcément très visible au début). On a accès aux sous-menus déroulant et items à cocher.

    Et pour Cartes.app ?

    Dans l'idéal :

    • des menus déroulant permettant d'accéder rapidement à toute la hiérarchie des catégories (donc éviter le système teritorio)
    • des items cliquables (comme actuellement de façon à permettre la multi-sélection)
    • envisager la création de sous-catégories (par exemple: commerces > bricolage > Leroy Merlin)
    • si sous-catégories, les rendre cliquable pour afficher tous les items de ces catégories
    • conserver le code couleur actuel qui facilite le répérage et les icônes qui pimpent le menu

    types de catégories

    3 catégories distinctes

    • épinglées (actuellement categories.yaml)
    • listées (actuellement moreCategories.yaml)
    • non-listées (n'existe pas)

    Au lieu de répartir ces 3 catégories en 3 fichiers distincts, peut-être serait-il plus judicieux de tout mettre en 1 fichier yaml et de préciser pour chaque item une ligne 'visibility=pinned;listed;hidden'

    un bouton réglages

    à côté du bouton +, il permettrait à l'utilisateur de customiser les items à épingler et à cacher

  4. Avatar github de etienneJretienneJr

    la découverte de catégories est actuellement correcte du fait de leur nombre limité.

    Sur mobile, ça n'est même plus le cas, typiquement pour sports (la catégorie la plus grande), le scroll horizontal est infini !

    Ce qui se fait ailleurs

    Tous les cas que tu as listés ont icone + texte à côté pour les items. Perso j'aime beaucoup les vignettes type polaroid avec image au dessus et texte en dessous, ça permet d'avoir un affichage plus condensé, pour voir plus d'items possibles d'un seul coup. D'ailleurs c'est déjà ça qui est utilisé dans le menu de choix des fonds de carte, donc ça ferait une harmonie. On a utilisé ça pour le formulaire de modif d'une aire sur playguide.eu (oups je suis démasqué 🤗​), le nombre d'item par ligne s'adapte à l'écran, je suis plutôt content du rendu. Est-ce que ça pourrait convenir ?

    Image

  5. Avatar github de etienneJretienneJr

    J'y ai re-réfléchi :

    1. la modèle territorio (d'abord la liste des thèmes, puis la liste des catégories du thème sélectionné) me parait le plus adapté à notre cas où les catégories risquent d'être nombreuses dans chaque thème
    2. mais pour un affichage un peu plus condensé tout en donnant plus de visibilité à l'icone, je testerai bien le modèle des vignettes PlayGuide
    3. enfin je vote pour la propriété 'visibility=pinned;listed;hidden' enfin surtout pour la valeur hidden qui va nous permettre de rajouter plein de catégories d'usage rare qui apparaitront alors dans la recherche de texte

    @LySioS @laem Ca vous va si je tente qqch sur la base des points 1. et 2. ? (le 3. est indépendant, je peux le faire de suite)

  6. Avatar github de LySioSLySioS

    Moi oui, avec grand enthousiasme mais c'est pas moi qui décide 😂

    J'ajoute l'exemple de lokjo et la catégories commerces dépliée ci-dessous :

    Toutes catégories Image

    Commerces sélectionnés

    Image

  7. Avatar github de etienneJretienneJr

    le 3. est indépendant, je peux le faire de suite

    J'ai parlé trop vite. Je n'avais pas réalisé que c'est le même bout de code qui affiche la liste des catégories :

    • soit en entier quand on ouvre le menu
    • soit filtré quand on a fait une recherche de texte

    Résultat, la logique est inversée pour cette propriété visible, je ne vois pas comment faire pour que des catégories

    • n'apparaissent pas quand le menu apparait en entier
    • mais apparaissent quand le menu est filtré

    est-ce qu'il faut que je modifie filteredMoreCategories pour appliquer un filtrage par défaut (basé sur la valeur de visible) quand il n'y a pas de filtrage basé sur la recherche ?

  8. Avatar github de laemlaem

    Salut ! Beaucoup de choses dans cette issue, je vais essayer de répondre en synthèse mais c'est pas facile.

    Globalement, je pense que Google a montré que l'usage principal est et restera la recherche en texte : je tape docteur, on me propose le résultat docteurs, je clique et je les vois tous. Google le résout par une recherche puissante, nous par des catégories faites à la main à partir des tags OSM. Et je pense que là-dessus il y a des choses à améliorer aussi bien sur l'algo que sur l'affichage, aujourd'hui peu compact et donc potentiellement avec des faux-positifs qui gênent la suite #808

    Du coup cette issue me semble se concentrer sur l'usage secondaire de la recherche par catégorie, c’est-à-dire l'option répertoire, un usage plus "expert" voir carrément "pro" comme l'analyse des services publics sur un territoire.

    À mon avis il ne faut pas proposer une hiérarchie de thèmes sans exemples. Le mot "tourisme" est trop abstrait par rapport à l'affichage des mots "plage", "musée", etc. On voit bien que musée pourrait être dans tourisme comme dans culture, d'où l'intérêt de mettre l'accent surtout sur les catégories et de mettre le groupe de catégorie qu'en seconde lecture (titre discret, couleur pour regrouper).

    Créer des sous-catégories me semble questionnable : on troque de l'organisation contre de la complexité dans un espace à l'écran très limité. Le "dictionnaire" qu'on a actuellement permet déjà (normalement) de faire ressortir les catégories d'un sous-groupe quand via la saisie du sous-groupe ou de ses alias. Par contre, les sous-catégories pourraient être utiles pour mutualiser ces alias, ne pas les écrire dans chaque entrée du YAML. D'ailleurs, je suis opposé à l'affichage de marques (Leroy Merlin) dans les menus.

    À fond pour l'option "non listé". En sachant que ce non-listé pourrait (et devrait je pense) être affiché au clic sur un bouton d'exploration discret. Pour donner de la transparence dans l'interface, mais subtilement.

    Au lieu de répartir ces 3 catégories en 3 fichiers distincts, peut-être serait-il plus judicieux de tout mettre en 1 fichier yaml et de préciser pour chaque item une ligne 'visibility=pinned;listed;hidden'

    Je suis mitigé là-dessus, car tout mettre dans un même fichier créée des problèmes de conflits git. Je serais plutôt pour un regroupement une catégorie -> un fichier. Enfin, c'est pas très important, tout est gérable et rien n'est parfait.

    à côté du bouton +, il permettrait à l'utilisateur de customiser les items à épingler et à cacher

    Super idée, je pense que je l'utiliserais, mais attention au temps de dev et de maintenance (mémoire utilisateur) par rapport à l'usage réel. Si 5 % des utilisateurs font une personnalisation avec la base actuelle de 15 k utilisateurs mensuels, je pense que c'est loin d'être la priorité pour l'app en général ^^

    Perso j'aime beaucoup les vignettes type polaroid

    Mmmh là tel que je le vois ça doublerait au moins la surface utilisée par le menu de catégories, et je ne suis pas sûr que mettre autant en visibilité les icônes soit si important par rapport au texte.

    Pour conclure, à mon avis l'intégration de nouvelles catégories "plus plus" qui seraient incluses dans la recherche mais qui ne s'afficheraient dans le répertoire qu'au clic sur un bouton "voir plus" me semble être la priorité.

  9. Avatar github de etienneJretienneJr

    Pour conclure, à mon avis l'intégration de nouvelles catégories "plus plus" qui seraient incluses dans la recherche mais qui ne s'afficheraient dans le répertoire qu'au clic sur un bouton "voir plus" me semble être la priorité.

    Tout à fait d'accord, et je veux bien (essayer de) m'en charger mais il faudrait que tu me brieffes sur comment le faire techniquement (cf mon commentaire précédent)

    mettre autant en visibilité les icônes soit si important par rapport au texte.

    c'était en effet le but recherché pour le panneau PlayGuide : qu'on puisse l'utiliser juste en regardant les icones. Ca implique que les icones soient très claires et spécifiques. Le texte est là uniquement pour le visiteur qui aurait un doute après avoir regardé l'icone. Ca n'est peut-être pas adapté à cartes.app.

  10. Avatar github de laemlaem

    Tout à fait d'accord, et je veux bien (essayer de) m'en charger mais il faudrait que tu me brieffes sur comment le faire techniquement (cf /documentation/tickets/721#issuecomment-2664203155)

    Mmmh, il faut que je me repenche sur le sujet pour te répondre.

    Ca implique que les icones soient très claires et spécifiques. Le texte est là uniquement pour le visiteur qui aurait un doute après avoir regardé l'icone. Ca n'est peut-être pas adapté à cartes.app.

    Oui je doute qu'on ait passé assez de temps sur les icônes pour ça. Ils sont plus adaptés pour une petite dimension sur la carte que pour être compréhensible je le crains 👍

  11. Avatar github de etienneJretienneJr

    J'ai commencé un brouillon mais je bloque sur le bouton "voir plus" ... #823

  12. Avatar github de ColinMaudryColinMaudry

    J'aime beaucoup le menu de catégories actuel, j'ai juste une frustration : qu'au sein de chaque groupe elles ne soient pas triées par ordre alphabétique. Je cherche le plus souvent des catégories que je sais être présentes dans la liste, et c'est assez gênant de les lire une à une pour trouver la bonne plutôt que de "scanner" les premières lettres.

  13. Avatar github de etienneJretienneJr

    En effet aujourd'hui c'est déjà compliqué de trouver une catégorie car il y en a déjà trop qui sont affichées. Et on voudrait pouvoir en rajouter autant qu'on veut sans se limiter, pour couvrir toute la diversité d'objets présents dans OSM... Je ne crois pas que toutes les afficher classées par ordre alphabétique soit une bonne solution, car celles d'usage courant vont être noyées dans celles d'usage rare. En réalité il faudrait pousser l'utilisateur à utiliser la barre de recherche plutôt que de naviguer dans un menu. L'idéal serait même de cacher totalement le menu... (comme gmaps en fait) mais on l'aime bien ce menu, il montre la puissance d'osm, on a du mal à s'en séparer...

  14. Avatar github de etienneJretienneJr

    @ColinMaudry Bon, comme seuls les imbéciles ne changent jamais d'avis, j'ai décidé de changer d'avis 😅​ En bossant sur #823 ce soir, j'ai trouvé qu'en effet il vaut mieux classer les catégories par ordre alphabétique dans chaque groupe ! (en tout cas pour l'instant faute de pouvoir les classer par pertinence)

  15. Avatar github de LySioSLySioS

    Je rejoins l'idée d'ordre alphabétique

  16. Avatar github de etienneJretienneJr

    Ouep, je l'ai inclus. A partir du commentaire automatique dokploy vous pouvez lancer le preview pour voir ce que ça donne avec les menus dépliables. (trop top cette fonction preview !!)


✏️ Participer à la discussion