474 lines
10 KiB
Markdown
474 lines
10 KiB
Markdown
# 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.
|