# 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.
