Faire évoluer la page de résultats du parcours "je ne sais pas par où commencer" pour intégrer les projets

ColineLebaratoux commented 1 month ago

En tant qu'utilisateur néophyte, je souhaite découvrir des idées de projets et des aides pour engager la transition écologique de mon entreprise.

Sur la page de résultats du parcours "je ne sais pas par où commencer" :

nouveau composant "onglet" avec 2 onglets : Des idées d’actions à mettre en place / Vos aides financières pour naviguer entre la vue liste des projets / liste des dispositifs
Fonctionnement actuel des tag thématique : seules les tag thématiques prioritaires de l'utilisateur sont affichés (en fonction de ses réponses au formulaire)
Liste des projets avec un format carte (photo + titre + description courte) (chargement de toutes les cartes projets, pas de pagination)

voir maquette

Onglet "Des idées d’actions à mettre en place"

Vue par défaut avec le filtre thématique "tous"
Uniquement sur le tag filtre "tous", ajout d'un bandeau Prio couleur vert #E6FFF7 + titre "Voici les actions par lesquelles commencer pour votre taille de l'entreprise du secteur nom du secteur
Ajout de l'illustration en largeur d'écran 12 colonnes. Le supprimer pour les autres tailles. (possible ou galère ?)
affichage sur le bandeau des 3 projets prioritaires toutes thématiques confondues (avec le rating de la colonne prio). Les cartes prio se distingue des autres grâce à un badge vert "à faire en priorité" et un contour vert.
au clic sur un tag thématique, la bandeau disparait. Les cartes prio se distinguent unqiuement avec le contour et le tag vert. voir maquette tag construction ou tag énergie
Sur mobile, on supprime le bandeau vert et l'illustration, pour ne garder que le badge vert "à faire en priorité" et le contour vert. voir maquette mobile

Onglet "Vos aides financières"

reprendre la version actuelle de la page de résultats du parcours "je ne sais pas par où commencer"
le filtre thématique reste actif entre les deux vues voir maquette

dolemoine commented 1 month ago

Hello @ColineLebaratoux Plusieurs petites questions :

le nombre de résultats indiqués doit bien prendre en compte le nombre de projet maintenant, et non plus le nombres de dispositifs trouvés pour l'entreprise ?

est-ce que le bandeau du filtre par thème est à généraliser partout ? (annuaire, j'ai un projet en tête, je ne sais pas par où commencer)?
est-ce que j'aligne ce bandeau à gauche comme sur les maquette ?

Aujourd'hui il est centré

pour le moment je ne gère pas l'action "J'ai un autre projet" n'est-ce pas ?

dolemoine commented 1 month ago

@ColineLebaratoux autre question :

sur la maquette desktop, le résumé du titre ainsi que le nombre de résultats sont passés en couleur bleue (et italique pour le nombre de résultat), mais pas en version mobile, c'est volontaire ?

ColineLebaratoux commented 1 month ago

Hello @dolemoine ! Pour répondre à tes questions :

le nombre de résultats indiqués doit bien prendre en compte le nombre de projet maintenant, et non plus le nombres de dispositifs trouvés pour l'entreprise ? => oui dans l'onglet "des idées d'actions à mettre en place" il s'agit bien du nb de projets
est-ce que le bandeau du filtre par thème est à généraliser partout ? (annuaire, j'ai un projet en tête, je ne sais pas par où commencer)? => oui, il me semble qu'il est déjà partout
est-ce que j'aligne ce bandeau à gauche comme sur les maquette ? => oui je veux bien !
pour le moment je ne gère pas l'action "J'ai un autre projet" n'est-ce pas ? => exact, on se le garde sous le coude pour une prochaine version
sur la maquette desktop, le résumé du titre ainsi que le nombre de résultats sont passés en couleur bleue (et italique pour le nombre de résultat), mais pas en version mobile, c'est volontaire ? => tu peux le passer en italique bleu partout (tous les parcours, toutes tailles d'écran)

ColineLebaratoux commented 1 month ago

@dolemoine j'ai mis à jour le ticket, on peut en rediscuter quand tu veux 🙂

dolemoine commented 1 month ago

@ColineLebaratoux , petite suggestion : le bandeau des tags de thématiques étant commun au deux affichages, j'aurai tendance à la glisser au dessus des 2 tabs :

ColineLebaratoux commented 1 month ago

Je comprends, mais la barre de tag fonctionne de pair avec le bandeau thématique, donc je préférerais les laisser côte à côté Capture d’écran 2024-06-11 à 13 22 48

dolemoine commented 1 month ago

@ColineLebaratoux autre point. Aujourd'hui en terme de code, la page qui affiche les résultats quand tu suis le parcours "j'ai un objectif précis en tête" et "je ne sais pas par où commencer" est la même. En terme de modif, c'est plus simple et plus rapide si je n'ai pas à retoucher ça et à conserver la même chose pour les 2 parcours. On aurait donc également l'affichage des résultats par projet côté "j'ai un objectif en tête". Est-ce que c'est quelque chose qui pourrait convenir? On peut en discuter de vive voix si ça permet de clarifier ce point.

ColineLebaratoux commented 1 month ago

@dolemoine @jbledevehat , on pourrait conserver la même page de résultat pour les deux parcours. Mais pourrait-on conditionner l'affichage de certains éléments : Sur la parcours "j'ai un objectif en tête" :

on enlève le "bandeau prio" vert et les cartes projets prio
on ajoute la phrase "Quel est votre projet ?"
on arrive directement sur lla page de résultat filtré sur la vue thématique choisie par l'utilisateur à la question "Quel est votre objectif prioritaire ?"

Je suis dispo ce matin si tu veux qu'on s'appelle pour en discuter

dolemoine commented 1 month ago

@ColineLebaratoux tu veux dire sur le parcours "j'ai un objectif précis en tête" non ?

ColineLebaratoux commented 1 month ago

Oui oui, désolée ! je viens de corriger 🤭

ColineLebaratoux commented 1 month ago

@dolemoine, quelques évolutions sur la page de résultats, peut-être à répartir sur plusieurs tickets. On en reparle :)

ajouter un flag sur le bord droit 1,2,3 sur le Top 3 (idée de @ttdm)
Sur la page de résultat filtré par thématique, règle d'affichage des projets "à faire en priorité" : afficher pour chaque thématique LE projet prioritaire (celui avec le score le plus bas)

supprimer les topbar sur les pages de résultats. Je trouve que ça fait descendre trop bas le top 3 et liste des actions. Cette top bar a surtout de la valeur sur la liste des aides et la fiche dispositif pour rassurer l'utilisateur sur la prise en compte de son SIRET => l'afficher uniquement sur la fiche dispositif et fiche projet (la version en vert avec la mention "vous êtes éligible")

voilà les dernières maquettes et proto à jour : maquette page de résultats

prototype cliquable

ColineLebaratoux commented 4 weeks ago

Hello @dolemoine,

[ ] Pourrais-tu modifier l'animation slider entre les onglets "des idées d'actions à mettre en place" / "vos aides financières" pour une transition nette cf prototype

dolemoine commented 4 weeks ago

@ColineLebaratoux j'ai refait un certain nombre de modifs notamment au niveau de l'alignement des élements pour que ça colle aux maquettes. J'ai encore quelques petites modifs du début du ticket (texte "quel est votre projet") etc... est-ce qu'on pourrait se faire un tour rapide de mon travail actuel et voir également les modifs que tu as ajoutées dernièrement ? pour le moment mes derniers travaux sont dispo sur ma branche, pas sur la demo (je ferai le merge ce soir ou demain matin) : https://tee-preprod-pr841.osc-fr1.scalingo.io/

ColineLebaratoux commented 4 weeks ago

dolemoine commented 4 weeks ago

@dolemoine aligner le bouton "Filtrer" au même niveau que le nombre de résultats

ColineLebaratoux commented 4 weeks ago

tu peux le renommer "Filtres" ? (comme sur Desktop )

dolemoine commented 3 weeks ago

@dolemoine ajout filtre projet par éligibilité de l'entreprise

dolemoine commented 2 weeks ago

hello @ColineLebaratoux , j'ai oublié de te transmettre le lien pour la validation fonctionnelle ... https://tee-preprod-pr841.osc-fr1.scalingo.io/

ColineLebaratoux commented 2 weeks ago

Merci @dolemoine ! Voilà mes retours :

[ ] Peux-tu revoir les espacements pour gagner de la place :

NB : L'espacement entre le bandeau thématique et la liste de résultat soit être le même sur les 2 onglets "des idées d'actions à mettre en place" "vos aides financières" (ce n'est pas le cas ici)
[ ] En mobile, il y a un petit décalage entre le composant onglets et les tags au switch entre les 2 onglets.
[ ] En mobile, au clic sur "vos aides financières" il faut que l'onglet se déplace sur la gauche pour que l'utilisateur puisse lire entièrement le titre "vos aides financières"

https://github.com/betagouv/mission-transition-ecologique/assets/47628484/fa39f6e0-7cc1-44b6-9642-e04e4c87bce9 cf exemple :

https://github.com/betagouv/mission-transition-ecologique/assets/47628484/596a40f2-309a-4f81-9051-174943ab0695

[ ] Est-ce que tu peux ajouter la mention "1 résultat" quand il y a un seul résultat (il me semble qu'il ne s'affiche pas par défaut)
[ ] Au clic sur une fiche dispositif depuis la page de résultats, onglet "vos aides financières", il faudrait que le bouton retour amène sur le liste de résultats au niveau de la carte du dispositif en question. (aujourd'hui au clic sur retour, on est redirigé vers la liste des idées d'actions à mettre en place)

ttdm commented 2 weeks ago

Pendant ma revue de code, j'ai vu quelques points fonctionnels qui me semblent problématiques, en particulier sur le filtrage des projets listés à l'utilisateur.

Ce qui me semble désirable est :

[ ] dans j'ai un objectif en tête, afficher seulement les projets dont la thématique est la thématique recherchée par l'utilisateur (ce qui donne en moyenne 5 projet par thématique et non 20+ comme maintenant)
[ ] dans je ne sais pas par ou commencer, le filtrage par objectif me semble correct : on n'affiche que les projets dont la thématique principale est la thématique sélectionnée et pour lesquels au moins un programme est disponible. Par contre, je pense que le tag ne doit pas être affiché s'il n'y a pas de projet éligible. Ex : ne pas afficher le tag eau ici
[ ] dans je ne sais pas par ou commencer, sans filtrage, à mon avis tu affiches trop de résultats. Je pense qu'il faut que tu affiches tous les projets qui appartiennent à une des thématiques dont le tag est visible et pour lesquels un programme est disponible. Dont probablement juste 8 projets pour le lien du dessus (5+3). ça permet de garder une cohérence pour l'utilisateur. C'est bizarre sinon de passer de 20+ projet non catégorisés à 8 projets catégorisés.

Je veux bien une confirmation @ColineLebaratoux sur le comportement attendu, en partiuclier sur le dernier point.

ColineLebaratoux commented 2 weeks ago

Voilà mes retours @ttdm @dolemoine

[ ] dans j'ai un objectif en tête, afficher seulement les projets dont la thématique est la thématique recherchée par l'utilisateur (ce qui donne en moyenne 5 projet par thématique et non 20+ comme maintenant) => je suis d'accord. En revanche, pour faciliter la navigation et permettre à l'utilisateur de décourvrir les autres projets sans avoir à revenir sur le questionnaire, je propose d'ajouter ici aussi les tags thématiques. Dans ce cas, le tag "tous" affiche bien l'intégralité des projets pour lesquels il est éligible. (cf ticket dédié)
[ ] dans je ne sais pas par ou commencer, le filtrage par objectif me semble correct : on n'affiche que les projets dont la thématique principale est la thématique sélectionnée et pour lesquels au moins un programme est disponible. Par contre, je pense que le tag ne doit pas être affiché s'il n'y a pas de projet éligible. Ex : ne pas afficher le tag eau ici => Si, ça me semble nécessaire d'afficher le tag thématique même s'il n'y a aucun projet éligible. Si l'utilisateur a répondu qu'il avait un fort enjeux sur ses consommations d'eau et qu'il ne voit rien en lien avec l'eau ça peut être perturbant. Il est alors préférable d'afficher cet onglet avec "Aucun projet n'a pu être identifié sur cette thématique..." cf ticket 'Correction UI du message "Aucune aide n'a pu être identifiée ..." #748
[ ] dans je ne sais pas par ou commencer, sans filtrage, à mon avis tu affiches trop de résultats. Je pense qu'il faut que tu affiches tous les projets qui appartiennent à une des thématiques dont le tag est visible et pour lesquels un programme est disponible. Dont probablement juste 8 projets pour le lien du dessus (5+3). ça permet de garder une cohérence pour l'utilisateur. C'est bizarre sinon de passer de 20+ projet non catégorisés à 8 projets catégorisés. => je suis d'accord ! Le "tous" correspond au cumul des projets issues des thématiques prioritaires.

dolemoine commented 2 weeks ago

@ttdm @ColineLebaratoux merci pour vos retours, je gère les modifs dans la journée. Je reviens vers vous si question

dolemoine commented 1 week ago

@ttdm @ColineLebaratoux j'ai apporté des modifications sur les méthodes de filtrage, j'ai fait plusieurs tours mais je veux bien une repasse de votre côté rapidement pour valider le fonctionnement. Pour info, sur le parcours je ne sais pas par où commencer, le tag "Tous" ne compte qu'une fois un projet même s'il est taggé sur 2 thématiques, c'est ce qui me semble le plus logique, est-ce que c'est ok pour vous ?

ColineLebaratoux commented 1 week ago

Oui c'est parfait comme ça ! Merci @dolemoine !

dolemoine commented 1 week ago

hello @ColineLebaratoux et @ttdm,

j'ai apporté par mal de modifications (plutôt tech -> @ttdm) mais aussi des corrections suite à tes remarques @ColineLebaratoux. globalement tout vos retours ont été traités sauf :

En mobile, au clic sur "vos aides financières" il faut que l'onglet se déplace sur la gauche pour que l'utilisateur puisse lire entièrement le titre "vos aides financières" c'est un comportement attendu du Dsfr, mais il n'est malheureusement pas implémenté côté VueDsfr (la librairie adaptée utilisée sur le projet). Je n'aurai pas le temps de traiter ce point avant de partir. Si ce n'est pas bloquant, je propose qu'on se penche sur ce point dans une phase de stabilisation
Au clic sur une fiche dispositif depuis la page de résultats, onglet "vos aides financières", il faudrait que le bouton retour amène sur le liste de résultats au niveau de la carte du dispositif en question. (aujourd'hui au clic sur retour, on est redirigé vers la liste des idées d'actions à mettre en place) Ce point a été identifié également par Yohann, qui semble déjà avoir une piste. Vu que c'est plutôt Oumeima/Yohann qui ont travaillé sur la partie routing, je propose qu'ils y jettent un coup d'oeil @yvalentin @oumeimaelisbihani

bon je pense avoir fait le tour de tout vos retours, n'hésitez pas à me faire un retour, il se peut que certains élements soient passé à la trappe.

ColineLebaratoux commented 1 week ago

merci @dolemoine ! C'est dispo en préprod ou il faut attendre un peu ?

Le point 1 est un peu bloquant car il gène la navigation entre les 2 onglets. @jrayneau l'a également remonté comme un "problème d'affichage" : "sur mobile on est obligé de scroller horizontalement pour voir l'onglet "Vos aides"" Est-ce quelqu'un d'autre pourrait le prendre @yvalentin ?

dolemoine commented 1 week ago

pour le moment c'est dispo sur l'url de test du ticket : https://tee-preprod-pr841.osc-fr1.scalingo.io/ , je suis en train de faire le merge avec la branche qui sert pour la demo

dolemoine commented 1 week ago

@ColineLebaratoux comme dit sur mattermost, j'ai push une solution provisoire (sous réserve de validation) pour cette histoire de scroll des onglets. tu peux tester ça sur https://tee-preprod-pr841.osc-fr1.scalingo.io/ le temps que yohann fasse le déploiement sur la preprod

ColineLebaratoux commented 1 week ago

Super @dolemoine, ça fonctionne bien ! Une petite correction à faire dans un second temps serait de supprimer cette barre grise qui me semble en trop, si c'est possible.

dolemoine commented 1 week ago

@ColineLebaratoux c'est modifié

ColineLebaratoux commented 1 week ago

Merci ! @dolemoine Une autre petite correction de placement des cartes projets sur la page de résultats. Peux-tu les ferrer à gauche ?

dolemoine commented 1 week ago

@ColineLebaratoux c'est corrigé!

ColineLebaratoux commented 1 week ago

C'est parfait, merci !

yvalentin commented 1 week ago

Super @dolemoine, ça fonctionne bien ! Une petite correction à faire dans un second temps serait de supprimer cette barre grise qui me semble en trop, si c'est possible.

Attention, il n'ai plus possible de scroll sur les onglets en mode mobile

yvalentin commented 1 week ago

@ColineLebaratoux Le ticket est toujours en cours de validation ?

ColineLebaratoux commented 1 week ago

Super @dolemoine, ça fonctionne bien ! Une petite correction à faire dans un second temps serait de supprimer cette barre grise qui me semble en trop, si c'est possible.

Attention, il n'ai plus possible de scroll sur les onglets en mode mobile

mais il est possible de taper sur chaque onglet pour passer de l'un à l'autre

yvalentin commented 6 days ago

@ColineLebaratoux Voici un peu près le rendu de la barre d'onglet sur mon tel... Donc sans le scroll, c'est un peu juste.... :-(

betagouv / mission-transition-ecologique

Faire évoluer la page de résultats du parcours "je ne sais pas par où commencer" pour intégrer les projets #760