Initial local backup snapshot
This commit is contained in:
commit
acd9e14ba5
367 changed files with 118038 additions and 0 deletions
400
docs/ux/PORTAL-SKILLS-SYSTEM.md
Normal file
400
docs/ux/PORTAL-SKILLS-SYSTEM.md
Normal file
|
|
@ -0,0 +1,400 @@
|
|||
# Skills portail - integration utile sans surcouche
|
||||
|
||||
## Intention
|
||||
|
||||
Le portail dispose deja d'un socle UX et metier solide.
|
||||
L'objectif n'est donc pas d'injecter artificiellement une nouvelle couche de "skills", mais de :
|
||||
|
||||
- capitaliser sur les briques deja presentes ;
|
||||
- renforcer les zones qui apportent un vrai gain utilisateur ;
|
||||
- eviter les dependances ou abstractions inutiles ;
|
||||
- garder un portail fluide, lisible et robuste.
|
||||
|
||||
En pratique, un "skill" correspond ici a un **bloc de capacite reutilisable** :
|
||||
|
||||
- regle de layout ;
|
||||
- logique UX ;
|
||||
- moteur de donnees ;
|
||||
- comportement mobile ;
|
||||
- outil d'efficacite admin ;
|
||||
- aide a l'autonomie association.
|
||||
|
||||
## Principe de pilotage
|
||||
|
||||
Avant d'ajouter un nouveau skill, verifier :
|
||||
|
||||
1. si le portail a deja une brique equivalente ;
|
||||
2. si cette brique peut etre etendue proprement ;
|
||||
3. si le gain UX ou metier est concret ;
|
||||
4. si l'ajout ne degrade pas la performance ou la lisibilite.
|
||||
|
||||
## Lecture par priorite
|
||||
|
||||
### Priorite 1 - Skills structurels
|
||||
|
||||
Ces skills sont deja largement presents et doivent rester la base unique.
|
||||
|
||||
#### Responsive Engine
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- [client/src/hooks/useMobile.tsx](/Users/selecta/Documents/portail-associations/client/src/hooks/useMobile.tsx)
|
||||
- [client/src/components/DashboardLayout.tsx](/Users/selecta/Documents/portail-associations/client/src/components/DashboardLayout.tsx)
|
||||
- [client/src/index.css](/Users/selecta/Documents/portail-associations/client/src/index.css)
|
||||
|
||||
Role :
|
||||
|
||||
- detection mobile / tablette / desktop ;
|
||||
- adaptation sidebar / densite / structure ;
|
||||
- reduction des regressions multi-appareils.
|
||||
|
||||
#### UI Kit Global
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- [client/src/components/ui](/Users/selecta/Documents/portail-associations/client/src/components/ui)
|
||||
- [client/src/components/portal/PortalSurface.tsx](/Users/selecta/Documents/portail-associations/client/src/components/portal/PortalSurface.tsx)
|
||||
|
||||
Role :
|
||||
|
||||
- boutons, badges, cartes, dialogues, tables, panneaux ;
|
||||
- langage visuel commun entre public, association et admin.
|
||||
|
||||
#### Layout Manager
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- [client/src/components/DashboardLayout.tsx](/Users/selecta/Documents/portail-associations/client/src/components/DashboardLayout.tsx)
|
||||
- [client/src/components/portal/PortalSurface.tsx](/Users/selecta/Documents/portail-associations/client/src/components/portal/PortalSurface.tsx)
|
||||
|
||||
Role :
|
||||
|
||||
- structure stable ;
|
||||
- alignements ;
|
||||
- marges ;
|
||||
- paddings ;
|
||||
- hierarchie des surfaces.
|
||||
|
||||
#### Typography System
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present et relie au module Apparence
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- [shared/appearance.ts](/Users/selecta/Documents/portail-associations/shared/appearance.ts)
|
||||
- [client/src/lib/appearance.ts](/Users/selecta/Documents/portail-associations/client/src/lib/appearance.ts)
|
||||
- [client/src/index.css](/Users/selecta/Documents/portail-associations/client/src/index.css)
|
||||
|
||||
Role :
|
||||
|
||||
- famille de police ;
|
||||
- echelle des titres ;
|
||||
- lisibilite globale ;
|
||||
- personnalisation sans casser la coherence.
|
||||
|
||||
### Priorite 2 - Skills UX
|
||||
|
||||
#### Smooth Navigation
|
||||
|
||||
Etat :
|
||||
|
||||
- partiellement present, renforce dans ce tour
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- [client/src/components/DashboardLayout.tsx](/Users/selecta/Documents/portail-associations/client/src/components/DashboardLayout.tsx)
|
||||
- [client/src/pages/Home.tsx](/Users/selecta/Documents/portail-associations/client/src/pages/Home.tsx)
|
||||
- [client/src/lib/routePrefetch.ts](/Users/selecta/Documents/portail-associations/client/src/lib/routePrefetch.ts)
|
||||
|
||||
Role :
|
||||
|
||||
- navigation plus immediate ;
|
||||
- prechargement des vues clefs au survol, au focus et au toucher ;
|
||||
- reduction de la sensation d'attente entre clic et affichage.
|
||||
|
||||
#### Panel Interaction
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- composants `Dialog`, `Sheet`, `DropdownMenu`, `Sidebar`
|
||||
- regroupements d'actions secondaires deja poses sur plusieurs vues
|
||||
|
||||
Role :
|
||||
|
||||
- ouverture/fermeture propre ;
|
||||
- actions secondaires discretes ;
|
||||
- meilleure densite operationnelle.
|
||||
|
||||
#### List Enhancer
|
||||
|
||||
Etat :
|
||||
|
||||
- present par endroits, a propager selon besoin
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- filtres et vues admin ;
|
||||
- densite compacte / detaillee ;
|
||||
- recherche sur annuaire et bordereau.
|
||||
|
||||
Role :
|
||||
|
||||
- tri ;
|
||||
- recherche ;
|
||||
- pagination ;
|
||||
- lecture dense mais lisible.
|
||||
|
||||
#### Action Visibility
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present sur les zones prioritaires
|
||||
|
||||
Role :
|
||||
|
||||
- mettre en avant valider / ignorer / appliquer / ouvrir ;
|
||||
- reduire le bruit visuel ;
|
||||
- garder une action principale claire.
|
||||
|
||||
### Priorite 3 - Skills Data
|
||||
|
||||
#### Matching Engine
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- [server/associationDirectoryMatcher.ts](/Users/selecta/Documents/portail-associations/server/associationDirectoryMatcher.ts)
|
||||
- [server/routers.ts](/Users/selecta/Documents/portail-associations/server/routers.ts)
|
||||
|
||||
Role :
|
||||
|
||||
- detection des correspondances ;
|
||||
- rapprochement portail / bordereau ;
|
||||
- reduction des doublons.
|
||||
|
||||
#### Fusion Engine
|
||||
|
||||
Etat :
|
||||
|
||||
- present en logique de validation, a etendre si besoin
|
||||
|
||||
Role :
|
||||
|
||||
- fusion propre ;
|
||||
- arbitrage humain ;
|
||||
- tracabilite.
|
||||
|
||||
#### Data Validation
|
||||
|
||||
Etat :
|
||||
|
||||
- deja largement present
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- normalisations dans `server/associationDirectory.ts`
|
||||
- validations schema Zod dans `server/routers.ts`
|
||||
- helpers partages `shared/*`
|
||||
|
||||
#### API Connector (RNA / SIRENE / HelloAsso)
|
||||
|
||||
Etat :
|
||||
|
||||
- present et renforce
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- [server/associationReferenceSync.ts](/Users/selecta/Documents/portail-associations/server/associationReferenceSync.ts)
|
||||
- [docs/compliance/association-directory-official-enrichment.md](/Users/selecta/Documents/portail-associations/docs/compliance/association-directory-official-enrichment.md)
|
||||
|
||||
Role :
|
||||
|
||||
- enrichissement controle ;
|
||||
- aucune creation automatique ;
|
||||
- validation admin obligatoire.
|
||||
|
||||
### Priorite 4 - Skills Mobile
|
||||
|
||||
#### Mobile Scroll
|
||||
|
||||
Etat :
|
||||
|
||||
- renforce
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- [client/src/index.css](/Users/selecta/Documents/portail-associations/client/src/index.css)
|
||||
- [client/src/lib/appearance.ts](/Users/selecta/Documents/portail-associations/client/src/lib/appearance.ts)
|
||||
|
||||
Role :
|
||||
|
||||
- limiter les couches couteuses pendant le scroll ;
|
||||
- garder les fonds immersifs sans penaliser la fluidite.
|
||||
|
||||
#### Lazy Loading
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present sur les routes et certaines cartes
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- `lazy(...)` dans [client/src/App.tsx](/Users/selecta/Documents/portail-associations/client/src/App.tsx)
|
||||
|
||||
#### Prefetch Engine
|
||||
|
||||
Etat :
|
||||
|
||||
- ajoute dans ce tour
|
||||
|
||||
Points d'appui :
|
||||
|
||||
- [client/src/lib/routePrefetch.ts](/Users/selecta/Documents/portail-associations/client/src/lib/routePrefetch.ts)
|
||||
|
||||
Role :
|
||||
|
||||
- precharger les vues les plus frequentes ;
|
||||
- accelerer la navigation percue ;
|
||||
- ne rien casser dans le routeur existant.
|
||||
|
||||
#### Touch Gestures
|
||||
|
||||
Etat :
|
||||
|
||||
- a traiter seulement si un vrai besoin apparait
|
||||
|
||||
Decision UX :
|
||||
|
||||
- ne pas ajouter de gestuelle complexe par defaut ;
|
||||
- privilegier une ergonomie simple avant les gestures.
|
||||
|
||||
### Priorite 5 - Skills Admin
|
||||
|
||||
#### Admin Dashboard
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present
|
||||
|
||||
#### Correspondence Manager
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present et enrichi
|
||||
|
||||
Role :
|
||||
|
||||
- correspondances a valider ;
|
||||
- propositions officielles ;
|
||||
- workflow de decision humain.
|
||||
|
||||
#### Notification Engine
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present
|
||||
|
||||
Role :
|
||||
|
||||
- alertes ;
|
||||
- badges ;
|
||||
- suivi des dossiers prioritaires.
|
||||
|
||||
### Priorite 6 - Skills Association
|
||||
|
||||
#### Association Portal
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present et fortement harmonise
|
||||
|
||||
#### Reservation Flow
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present
|
||||
|
||||
#### Document Center
|
||||
|
||||
Etat :
|
||||
|
||||
- deja present
|
||||
|
||||
## Ce qui a ete ajoute dans ce tour
|
||||
|
||||
### 1. Prefetch discret des routes clefs
|
||||
|
||||
Ajout du fichier :
|
||||
|
||||
- [client/src/lib/routePrefetch.ts](/Users/selecta/Documents/portail-associations/client/src/lib/routePrefetch.ts)
|
||||
|
||||
Et branchement sur :
|
||||
|
||||
- la sidebar dashboard/admin ;
|
||||
- la navigation et les CTA principaux de l'accueil.
|
||||
|
||||
Impact attendu :
|
||||
|
||||
- navigation plus fluide ;
|
||||
- sensation de site plus reactif ;
|
||||
- zero changement de logique metier.
|
||||
|
||||
### 2. Clarification strategique
|
||||
|
||||
On ne traite pas les skills comme des plugins externes a injecter partout.
|
||||
|
||||
On les traite comme :
|
||||
|
||||
- des capacites internes ;
|
||||
- deja presentes ou utiles ;
|
||||
- propageres seulement quand elles ont un vrai impact.
|
||||
|
||||
## Recommandation UX
|
||||
|
||||
Le bon ordre reste :
|
||||
|
||||
1. structurel ;
|
||||
2. UX ;
|
||||
3. data ;
|
||||
4. mobile ;
|
||||
5. admin ;
|
||||
6. association.
|
||||
|
||||
Mais dans le code, cela doit se traduire par :
|
||||
|
||||
- extension des briques existantes ;
|
||||
- pas de sur-abstraction ;
|
||||
- pas de moteur supplementaire si la base actuelle couvre deja le besoin.
|
||||
|
||||
## Regle de prudence
|
||||
|
||||
Un skill n'est utile que s'il rend le portail :
|
||||
|
||||
- plus stable ;
|
||||
- plus fluide ;
|
||||
- plus lisible ;
|
||||
- plus simple a administrer ;
|
||||
- plus confortable pour l'association.
|
||||
|
||||
Sinon, c'est du superflu.
|
||||
474
docs/ux/ROADMAP-OPTIMISATION-PORTAIL.md
Normal file
474
docs/ux/ROADMAP-OPTIMISATION-PORTAIL.md
Normal file
|
|
@ -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.
|
||||
Loading…
Add table
Add a link
Reference in a new issue