Initial local backup snapshot

docs/ux/ROADMAP-OPTIMISATION-PORTAIL.md

@@ -0,0 +1,474 @@
+# Roadmap UX - Navigation, Responsive et Cohérence Portail
+
+## Objectif
+
+Structurer l'optimisation UX du portail en tickets séparés, chacun dédié a une zone precise, afin d'obtenir une navigation stable, lisible et professionnelle sur ordinateur, tablette et telephone.
+
+Cette methode permet de :
+
+- traiter les ecrans par perimetre fonctionnel clair ;
+- limiter les regressions ;
+- verifier plus facilement les rendus desktop / tablette / mobile ;
+- deployer par lots plus maitrisables ;
+- obtenir un portail plus coherent pour les associations, les utilisateurs publics et les administrateurs.
+
+## Principes de pilotage
+
+Chaque ticket doit contenir :
+
+- le perimetre exact ;
+- le probleme constate ;
+- les objectifs UX ;
+- les contraintes multi-appareils ;
+- les composants ou vues touches ;
+- les criteres de validation ;
+- le resultat attendu.
+
+## Priorisation recommandee
+
+### Lot 1 - Navigation critique et ecrans les plus frequents
+
+1. `UX-001 - Home publique et menu mobile`
+2. `UX-002 - Navigation publique Annuaire / Carte / Aide`
+3. `UX-003 - Sidebar association et navigation dashboard`
+4. `UX-004 - Sidebar admin et navigation par onglets`
+
+### Lot 2 - Ecrans metier a forte frequence
+
+5. `UX-005 - Nouvelle demande`
+6. `UX-006 - Reservation de salle`
+7. `UX-007 - Materiel evenementiel`
+8. `UX-008 - Mes demandes`
+9. `UX-009 - Mon association`
+
+### Lot 3 - Ecrans admin de pilotage
+
+10. `UX-010 - Gestion des demandes admin`
+11. `UX-011 - Bordereau admin`
+12. `UX-012 - Annuaire CCDS`
+13. `UX-013 - Logistique / services materiel`
+14. `UX-014 - Conformite`
+
+### Lot 4 - Finition et qualite percue
+
+15. `UX-015 - Etats vides, skeletons et confirmations`
+16. `UX-016 - Densite compacte / detaillee`
+17. `UX-017 - Micro-interactions, hover, focus, transitions`
+18. `UX-018 - Revue finale multi-appareils`
+
+---
+
+## Tickets detailles
+
+### UX-001 - Home publique et menu mobile
+
+**Objectif**
+Stabiliser la premiere impression du portail sur mobile et petit desktop.
+
+**Perimetre**
+
+- header public ;
+- hero ;
+- navigation mobile ;
+- CTA principaux.
+
+**Travaux attendus**
+
+- rendre le menu mobile plus lisible et plus compact ;
+- mieux hierarchiser les CTA ;
+- ajuster finement les textes du hero selon la largeur ;
+- garantir un affichage sans debordement sur iPhone et petits Android.
+
+**Validation**
+
+- aucun debordement horizontal ;
+- CTA visibles sans confusion ;
+- navigation claire des l'arrivee sur le site.
+
+### UX-002 - Navigation publique Annuaire / Carte / Aide
+
+**Objectif**
+Assurer une navigation publique coherente entre les vues de consultation.
+
+**Perimetre**
+
+- annuaire public ;
+- carte publique ;
+- liens transverses publics.
+
+**Travaux attendus**
+
+- uniformiser les barres de navigation mobile ;
+- harmoniser les libelles ;
+- clarifier le passage carte / liste ;
+- rendre les filtres plus accessibles.
+
+**Validation**
+
+- meme logique de navigation entre annuaire et carte ;
+- comprehension immediate des vues disponibles.
+
+### UX-003 - Sidebar association et navigation dashboard
+
+**Objectif**
+Faire de la sidebar association un repere stable, intuitif et metier.
+
+**Perimetre**
+
+- sidebar utilisateur / association ;
+- sections de navigation ;
+- etat actif ;
+- version mobile repliee.
+
+**Travaux attendus**
+
+- consolider la hierarchie `Suivi / Demarches / Referentiels` ;
+- harmoniser les icones, espacements et libelles ;
+- garantir la persistance de la sidebar sur les pages du dashboard ;
+- gerer proprement le comportement mobile.
+
+**Validation**
+
+- la meme sidebar apparait de maniere coherente sur toutes les pages association ;
+- les actions principales sont reperables en un coup d'oeil.
+
+### UX-004 - Sidebar admin et navigation par onglets
+
+**Objectif**
+Stabiliser la navigation interne de l'administration.
+
+**Perimetre**
+
+- sidebar admin ;
+- navigation secondaire par onglets ;
+- badges notifications ;
+- etat actif.
+
+**Travaux attendus**
+
+- rendre chaque entree reellement cliquable ;
+- clarifier les groupes metier ;
+- renforcer la lisibilite des etats actifs ;
+- optimiser le comportement tablette / mobile.
+
+**Validation**
+
+- chaque clic change bien de vue ;
+- aucun conflit de navigation ou de cache visible.
+
+### UX-005 - Nouvelle demande
+
+**Objectif**
+Transformer l'entree en demande en parcours accompagne.
+
+**Perimetre**
+
+- page de choix des demandes ;
+- cartes d'entree ;
+- etats vides ;
+- CTA.
+
+**Travaux attendus**
+
+- clarifier les types de demandes ;
+- mieux presenter les priorites ;
+- renforcer le guidage visuel ;
+- optimiser l'affichage mobile.
+
+**Validation**
+
+- l'association comprend rapidement quelle demarche lancer ;
+- aucun bloc ne semble surcharge ou secondairement cache.
+
+### UX-006 - Reservation de salle
+
+**Objectif**
+Rendre le formulaire salle lisible, rassurant et fluide sur tous les supports.
+
+**Perimetre**
+
+- progression ;
+- sections du formulaire ;
+- recapitulatif ;
+- actions de validation.
+
+**Travaux attendus**
+
+- mieux segmenter les blocs ;
+- renforcer les retours de saisie ;
+- faciliter les actions tactiles ;
+- rendre le parcours plus premium sur mobile.
+
+**Validation**
+
+- lecture claire de chaque etape ;
+- aucune perte de contexte pendant la saisie.
+
+### UX-007 - Materiel evenementiel
+
+**Objectif**
+Aligner la qualite percue du materiel sur celle de la reservation de salle.
+
+**Perimetre**
+
+- formulaire materiel ;
+- recapitulatif ;
+- densite des informations ;
+- actions finales.
+
+**Travaux attendus**
+
+- clarifier les zones de saisie ;
+- optimiser la presentation du materiel demande ;
+- rendre les informations logistiques plus lisibles.
+
+**Validation**
+
+- l'ecran reste clair meme avec beaucoup d'informations.
+
+### UX-008 - Mes demandes
+
+**Objectif**
+Rendre le suivi des demandes plus clair et plus pilotable.
+
+**Perimetre**
+
+- liste des demandes ;
+- badges d'etat ;
+- actions `Voir`, `Repondre`, `Voir devis`, `Voir decision` ;
+- retour apres consultation.
+
+**Travaux attendus**
+
+- densifier sans tasser ;
+- clarifier les statuts ;
+- mieux hierarchiser les demandes a action.
+
+**Validation**
+
+- les demandes en attente sont immediatement identifiables ;
+- les documents se consultent sans rompre le parcours.
+
+### UX-009 - Mon association
+
+**Objectif**
+Securiser et fluidifier la mise a jour de la fiche association.
+
+**Perimetre**
+
+- formulaire de profil ;
+- systeme d'alerte avant sortie ;
+- sidebar ;
+- responsive fin.
+
+**Travaux attendus**
+
+- proteger les donnees non enregistrees ;
+- clarifier les champs incomplets ;
+- optimiser la lecture du formulaire sur mobile.
+
+**Validation**
+
+- aucun risque de perte silencieuse de donnees ;
+- fiche exploitable sur petit ecran.
+
+### UX-010 - Gestion des demandes admin
+
+**Objectif**
+Faire de la vue admin un poste de traitement lisible et efficace.
+
+**Perimetre**
+
+- listes ;
+- panneaux d'action ;
+- modales de traitement ;
+- formulaires longs.
+
+**Travaux attendus**
+
+- clarifier la densite ;
+- rendre les modales plus confortables sur mobile ;
+- mieux exposer les actions critiques.
+
+**Validation**
+
+- un agent peut traiter vite sans se perdre dans l'ecran.
+
+### UX-011 - Bordereau admin
+
+**Objectif**
+Faire du bordereau un veritable ecran metier de pilotage.
+
+**Perimetre**
+
+- grille desktop ;
+- referentiel ;
+- correspondances a valider ;
+- filtres ;
+- badges de provenance ;
+- mode compact / detaille.
+
+**Travaux attendus**
+
+- consolider la grille d'affichage ;
+- renforcer la lisibilite des fiches ;
+- mieux exposer les actions de rapprochement ;
+- rendre la toolbar de filtres plus premium.
+
+**Validation**
+
+- lecture immediate des statuts ;
+- ecran exploitable sur grand ecran sans collision visuelle.
+
+### UX-012 - Annuaire CCDS
+
+**Objectif**
+Uniformiser la qualite des referentiels internes.
+
+**Perimetre**
+
+- listes internes ;
+- fiches ;
+- edition ;
+- recherche.
+
+**Travaux attendus**
+
+- aligner les composants avec le bordereau ;
+- clarifier les actions d'edition ;
+- densifier proprement.
+
+### UX-013 - Logistique / services materiel
+
+**Objectif**
+Ameliorer le suivi metier des services internes.
+
+**Perimetre**
+
+- assignation ;
+- retour materiel ;
+- liens terrain ;
+- boutons retour.
+
+**Travaux attendus**
+
+- clarifier les statuts ;
+- rendre les actions plus visibles ;
+- fluidifier les retours vers la vue source.
+
+### UX-014 - Conformite
+
+**Objectif**
+Faire du centre conformite un veritable tableau de pilotage.
+
+**Perimetre**
+
+- syntheses ;
+- preuves ;
+- registres ;
+- DPA ;
+- sauvegardes ;
+- retention.
+
+**Travaux attendus**
+
+- clarifier les niveaux de lecture ;
+- mieux segmenter les preuves et registres ;
+- renforcer la lisibilite des priorites.
+
+### UX-015 - Etats vides, skeletons et confirmations
+
+**Objectif**
+Ameliorer la qualite percue sur tous les parcours.
+
+**Perimetre**
+
+- chargements ;
+- etats vides ;
+- messages de succes ;
+- messages d'erreur.
+
+**Travaux attendus**
+
+- uniformiser les skeletons ;
+- rendre les confirmations plus rassurantes ;
+- remplacer les messages trop techniques.
+
+### UX-016 - Densite compacte / detaillee
+
+**Objectif**
+Permettre un usage adapte au contexte : lecture confortable ou pilotage dense.
+
+**Perimetre**
+
+- bordereau ;
+- listes admin ;
+- listes association ;
+- referentiels.
+
+**Travaux attendus**
+
+- definir un mode compact ;
+- definir un mode detaille ;
+- garder une coherence de comportement entre modules.
+
+### UX-017 - Micro-interactions, hover, focus, transitions
+
+**Objectif**
+Rendre le portail plus premium sans tomber dans l'effet decoratif.
+
+**Perimetre**
+
+- boutons ;
+- cartes ;
+- filtres ;
+- changements d'onglets ;
+- panneaux.
+
+**Travaux attendus**
+
+- standardiser les transitions 150-250 ms ;
+- renforcer hover/focus ;
+- rendre les interactions plus nettes.
+
+### UX-018 - Revue finale multi-appareils
+
+**Objectif**
+Valider la coherence finale sur desktop, tablette et mobile.
+
+**Perimetre**
+
+- toutes les vues critiques ;
+- public ;
+- association ;
+- administration.
+
+**Travaux attendus**
+
+- controles visuels ;
+- corrections residuelles ;
+- verification de l'absence de debordements ;
+- validation des actions tactiles.
+
+## Ordre d'execution conseille
+
+1. Navigation globale
+2. Pages publiques principales
+3. Dashboard association
+4. Formulaires critiques
+5. Vues admin de traitement
+6. Bordereau et referentiels
+7. Conformite et ecrans secondaires
+8. Finitions globales
+9. Revue finale multi-appareils
+
+## Definition de "termine"
+
+Un ticket est considere termine quand :
+
+- le rendu desktop est propre et stable ;
+- le rendu tablette est coherent ;
+- le rendu mobile est lisible et sans debordement ;
+- les actions principales sont clairement visibles ;
+- les etats actifs, hover et focus sont nets ;
+- le comportement est verifie localement puis en ligne si necessaire.