Choix des catégories à mettre en avant dans le menu
publié le , mis à jour⚙️ Ceci est une proposition de changement de code.
Rendez-vous sur sa page Coderberg pour l'osculter.
Suite à discussion dans #721 je propose de modifier le menu des catégories pour :
- ✅ afficher seulement 3 catégories mises en avant dans le .yaml avec une propriété facultative
highlight=true- tout en gérant la recherche pour qu'elle affiche toutes les catégories (qu'elles soient mises en avant ou non)
- et en affichant aussi les catégories actives (celles affichées sur la carte) pour qu'on puisse les déselectionner
- [EDIT:] ✅ avoir un bouton discret pour pouvoir agrandir un groupe et afficher toutes ses catégories)
ça donne ceci :
- par défaut les catégories n'affichent que les 3 catégories indiqués dans le .yaml
alimentationaffiche en plusfromageriecar il a été sélectionné par l'utilisateur pour affichage sur la cartesantéaffiche tout car l'utilisateur a agrandi ce groupe en cliquant sur le petite triangle
GhostDokploy Preview Deployment
Name Status Preview Updated (UTC) web-master ✅ Done Preview URL 2025-03-03T18:39:17.059Z etienneJr
merci @laem pour le déblocage. J'ai pu continuer en :
- gérant l'ouverture/fermeture des groupes
- choisissant 3 catégories à mettre en avant dans chaque groupe (pour l'exemple)
- classant par ordre alphabétique les catégories pour que ça soit plus facile d'en chercher une dans un groupe
- affichant un message "astuce" pour pousser à utiliser la barre de recherche
- désactivant le scroll horizontal sur mobile (c'est trop long quand il y a trop de catégories)
cf capture mise à jour dans le 1er message. Est-ce que vous voyez d'autres choses à intégrer dans cette PR ?
- Ghost
Wahou trop bien. Bravo. 👍👍👍
Mais
- Quel critère de choix pour les items tjs visibles (arbitraire, statistiques, autres)
- Comment savoir qu'il faut cliquer pour développer, c'est pas évident
Merci !
- Quel critère de choix pour les items tjs visibles (arbitraire, statistiques, autres)
Totalement arbitraire ! J'ai essayé que ça fasse des exemples de ce qu'on trouve dans ce groupe, avec 1 item très classique, et 1 item plus alternatif pour montrer la diversité.
- Comment savoir qu'il faut cliquer pour développer, c'est pas évident
Oui, on peut sûrement faire mieux que les petits triangles que j'ai mis. Mais il y aura toujours le risque que l'utilisateur qui ne remarque pas la fonction trouve notre répertoire pourri (car n'a que quelques catégories) et ne revienne plus. Je me demande si il ne faudrait pas carrément cacher les catégories pour ne laisser afficher que les titres des groupes. Au moins on comprendrait tout de suite qu'il faut cliquer dessus pour agrandir. Mais l'idée de laisser des exemples plaisait bien à @laem.
laem
Merci pour le taf !
Je ne suis pas trop convaincu par les changements de cette PR.
À mon avis le défilement horizontal est un mécanisme très intuitif et largement utilisé sur mobile. Ça me semble dommage de l'enlever, j'y vois une regression, car les catégories autres que les 3 exemples deviennent largement moins découvrables. Les chances sont élevées à mon avis que l'utilisateur se dise simplement "ah mince, l'app ne propose pas autre chose que 3 types de restos, tant pis".
L'intérêt du défilement horizontal, c'est que la dernière catégorie coupée à un endroit aléatoire montre l'action intuitive pour voir la suite : la liste n'est pas terminée, ça va plus loin et je sais l'action pour aller la chercher.
Par contre, tout ça ce n'est pas incompatible avec un bouton qui afficherait toutes les catégories comme tu viens de le faire. C'est exactement la logique utilisée tout en haut pour la première barre : défilement + bouton pour tout ouvrir. Car je suis d'accord que l'ouverture verticale ajoute plus de lisibilité que le défilement horizontal notamment pour la première découverte de ce qui est listé. À mon avis il faut privilégier le même design que le premier bouton qui aura amené l'utilisateur à voir l'écran des catégories plus ouvert.
Je me dis que dans une nième itération on pourrait même au clic sur un bouton (+) d'un groupe de catégorie, ouvrir en "plein écran" la catégorie. Mais ça demande plus de code pour gérer l'état et pouvoir revenir en arrière, pas une priorité je pense.
En gardant le principe de la liste alphabétique, on enlève ainsi le besoin de classer ou catégoriser les éléments d'une catégorie, ça évitera à mon avis pas mal d'avis divergents sur ce qui est à privilégier.
Sinon bonne idée pour le texte de découverte qui explique qu'elles sont trouvables dans la recherche.
C'est exactement la logique utilisée tout en haut pour la première barre : défilement + bouton pour tout ouvrir.
Ah mazette, je n'avais même pas remarqué que le défilement horizontal était possible sur cette première barre...
Les chances sont élevées à mon avis que l'utilisateur se dise simplement "ah mince, l'app ne propose pas autre chose que 3 types de restos, tant pis".
ça évitera à mon avis pas mal d'avis divergents sur ce qui est à privilégier.
Tout à fait d'accord, c'était une mauvaise idée d'afficher seulement 3 catégories. (Et en plus ça fait doublon avec les catégories déjà mises en avant dans la première barre)
À mon avis le défilement horizontal est un mécanisme très intuitif et largement utilisé sur mobile.
L'intérêt du défilement horizontal, c'est que la dernière catégorie coupée à un endroit aléatoire montre l'action intuitive pour voir la suite : la liste n'est pas terminée, ça va plus loin et je sais l'action pour aller la chercher.
C'est vrai, mais la longueur du défilement doit être limitée, sinon c'est impossible de trouver la bon item en défilant. En l'état actuel (avec le texte qui peut être large), il ne faudrait pas dépasser 10 items je pense. Ca me parait une mauvaise idée de faire passer le message "vas-y tu peux scroller" alors qu'en pratique c'est impossible de trouver un item en scrollant...
À mon avis il faut privilégier le même design que le premier bouton qui aura amené l'utilisateur à voir l'écran des catégories plus ouvert.
Vu mes 2 remarques ci-dessus (l'impossibilité de trouver une catégorie en défilant, et le fait que je n'avais pas remarqué le défilement sur la première barre), je préfèrerais l'option où on n'affiche que les titres de groupes et on force l'appui sur + pour afficher les catégories. Mais bon si tu préfères garder le défilement, je peux faire ça. Dis moi.
Mais si on garde le défilement sur mobile, on fait quoi sur desktop ?
Voilà ! J'ai rebossé dessus et je propose une nouvelle version : preview disponible
-
j'ai supprimé les 3 catégories mises en avant, c'était vraiment une mauvaise idée
-
en navigation desktop, on affiche uniquement les titres des groupes. Ca donne envie de cliquer dessus, ce qui déroule la liste des catégories dans ce groupe (ex avec santé ci-dessous). Si une catégorie est active, elle reste affichée même une fois le groupe refermé (ex avec bars et vêtements).
-
en navigation mobile, on affiche au départ les catégories en 1 ligne avec possibiltié de défilement horizontal (ça c'est comme aujourd'hui, avec le tri par ordre alphabétique en plus). En cliquant sur le titre du groupe, on peut le dérouler pour voir toutes les catégories d'un coup (ex avec santé ci-dessous).
Perso j'adore la version desktop comme ça, mais je vois plusieurs défauts dans le mode mobile :
- afficher 1 ligne donne trop envie de scroller, on ne voit pas qu'on peut agrandir le groupe en cliquant sur son titre, et voilà qu'on défile pendant une éternité pour trouver le
tennisqu'on cherche. - une catégorie qui a été sélectionnée n'est pas toujours visible, ça complique sa désélection, il faut scroller à nouveau pour la retrouver. J'ai fait un essai où une catégorie sélectionnée remontait en début de liste, mais ça faisait qu'elle disparaissait au moment où on cliquait dessus, ça n'était pas adapté.
- plus subjectif : comparé au mode desktop, ça fait vraiment fouilli quand on arrive sur le menu, je prégère le côté épuré du mode desktop.
Vous l'avez compris, je préfère largement le mode desktop 😅 donc je propose de le conserver aussi pour la nav mobile. Mais bon je vous laisse tester et donner votre avis !
-
- Ghost
Je ne peux tester que la version mobile mais je trouve ça déjà très bien comme amélioration.
Bien joué.
Concernant la catégorie déjà affichée à déselectionner, on peut la désactiver par recherche textuelle. Et il était question d'implémenter un bouton clear pour les catégories non ? Donc ce n'est pas si gênant je trouve.
2 remarques :
- J'aurais mis le triangle à gauche du mot, comme ça ils sont tous alignés
- Pour l'astuce de recherche textuelle, ça peut être plus visible avec une icône type ampoule jaune et un cadre coloré dans le même style que celui de la recherche
Merci ! Trop cool je vais itérer pour proposer quelques changements.
J'ai fait quelques changements. Dîtes-moi ce que vous en pensez mais je suis pas loin de mettre en ligne pour itérer ensuite.
une catégorie qui a été sélectionnée n'est pas toujours visible, ça complique sa désélection, il faut scroller à nouveau pour la retrouver. J'ai fait un essai où une catégorie sélectionnée remontait en début de liste, mais ça faisait qu'elle disparaissait au moment où on cliquait dessus, ça n'était pas adapté.
Ça il faut vraiment le résoudre via l'indication en capture ici, qui est mise tout en bas sour l'annuaire mais qui pourrait être remontée quand l'annuaire est développé. À faire dans une autre PR, de façon itérative je pense.
plus subjectif : comparé au mode desktop, ça fait vraiment fouilli quand on arrive sur le menu, je prégère le côté épuré du mode desktop.
Je te propose qu'on garde cette différentiation bureau/mobile pour l'instant, et qu'on voie à l'usage au fil du temps si on étend l'un ou l'autre à l'autre mode.
c'est super ! plus pro que ce que j'avais fait ! 😅
j'aime beaucoup le rond avant le titre, tu ne veux pas le mettre en mobile aussi ?
Je te propose qu'on garde cette différentiation bureau/mobile pour l'instant, et qu'on voie à l'usage au fil du temps si on étend l'un ou l'autre à l'autre mode.
ça me va !
- Ghost
Je confirme le point coloré, ça rend super bien.
Sur mobile, si on garde l'affichage de la ligne d'items, on pourrait la transparencier un peu par défaut et opacifier à 100% lors du survol. Ça permettrait de mieux hiérarchiser la différence entre le nom de la catégorie et ses items.
D'ailleurs, que ce soit sur mobile ou ordi, il me semble que la taille de police du nom de la catégorie devrait être grossie
Sur mobile, si on garde l'affichage de la ligne d'items, on pourrait la transparencier un peu par défaut et opacifier à 100% lors du survol.
Pas de survol possible sur mobile :sweat_smile:
J'insiste, mettre au même niveau les exemples, les choses précises que les gens cherchent, me semble vraiment plus important que les catégories arbitraires que l'on créée.
D'ailleurs, que ce soit sur mobile ou ordi, il me semble que la taille de police du nom de la catégorie devrait être grossie
Il faudrait essayer dans une autre PR, mais j'avais essayé il y a longtemps et ça ne permettait justement pas de différencier catégorie et groupe. Il faut que le titre soient dans une typo différente du contenu.
j'aime beaucoup le rond avant le titre, tu ne veux pas le mettre en mobile aussi ?
Après l'avoir essayé, j'ai jugé que c'était inutile : ça ne montre que la couleur, or la couleur crève les yeux avec l'affichage par défaut des groupes qui ont chacun une icône colorée avec cette couleur.