# Audit UX / UI — 26/10/2026

Portée : les 16 pages de la vitrine, instance Saclay (248 laboratoires, 7 766 chercheurs,
3 647 projets). Méthode : lecture du code de chaque page et de chaque composant, puis captures des
pages réellement servies par le site construit, en 1440 px et en 390 px. Les chiffres cités
viennent des pages elles-mêmes, pas des fixtures.

## Suites données le 26/10/2026

Les points 1 à 4, 7, 9 et une partie du 10 sont corrigés, et le filtrage demandé au point 3 est en
place. Ce qui suit garde la description d'origine : elle dit pourquoi le correctif existe. Restent
ouverts : les identifiants bruts sans explication et la légende des badges (point 10), et la
mesure d'usage qui permettrait de hiérarchiser la suite.

## Ce qui tient déjà

- Hiérarchie typographique nette, charte sobre, titres en serif et texte en sans-serif ; le
  contraste a été travaillé (`variantColorResolver`, gris `dimmed` relevé à 4,5:1).
- Fil d'Ariane sur toutes les pages internes, métadonnées et `hreflang` complets, version anglaise
  intégrale.
- Fiche de laboratoire riche et honnête : présentation, provenance du texte, tutelles, chiffres,
  identifiants pérennes.
- Menu mobile fonctionnel, et aucune page qui déborde latéralement une fois le bandeau d'accueil corrigé (il débordait de 8 px, masqués par l'`overflow-x` du `body`).
- 0 violation axe sur les deux langues (mesure de la session précédente).

## Le défaut central

**La vitrine se parcourt, elle ne se fouille pas.** Il n'existe aucun filtre, aucun tri, aucun
champ de saisie sur aucune page de liste. Le seul outil de recherche est une page séparée, vers
laquelle il faut naviguer.

| Entité       | Fiches publiées | Atteignables en naviguant                               |
| ------------ | --------------: | ------------------------------------------------------- |
| Laboratoires |             248 | 248, en une seule page de 18 sections                   |
| Chercheurs   |           7 766 | via 26 pages par initiale, dont une de 970 noms         |
| Projets      |           3 647 | **60** — le reste n'est accessible que par la recherche |

Un visiteur qui cherche « qui travaille sur les batteries à Saclay » n'a aucun chemin évident :
l'accueil propose deux boutons, la page Laboratoires déroule 248 cartes, la page Chercheurs
demande d'épeler un nom qu'on ne connaît pas.

## Défauts, par gravité

### 1. `?q=` est écrit dans l'URL mais jamais relu

`PagefindSearch` pousse la requête dans l'URL (`history.replaceState`), et la page monte
`<PagefindSearch />` sans jamais passer `initialQuery` ni lire `location.search`. Ouvrir
`/recherche?q=biologie` affiche un champ **vide** : vérifié, capture à l'appui. Le site fabrique
donc des liens de recherche qu'il ne sait pas rouvrir — partage, favori, retour arrière, tout
échoue. Correctif : trois lignes dans le composant.

### 2. Aucun champ de recherche hors de `/recherche`

Ni dans l'en-tête, ni sur l'accueil d'un site qui s'intitule « Explorer la recherche ». Le geste le
plus fréquent demande deux clics et un changement de page. Un champ dans l'en-tête, et un champ en
pleine largeur dans le bandeau d'accueil, changeraient le parcours plus que tout le reste.

### 3. Les pages de liste n'ont aucun filtre

248 cartes de laboratoire en une page, sans filtre par Graduate School, ville, taille ou mot. La
seule aide est une ligne « Aller à : » de 18 ancres séparées par des points, sur trois lignes —
une cible de clic de quelques pixels, sans ordre apparent pour le lecteur.

### 4. Projets : 60 visibles sur 3 647, et des badges qui mentent sur leur rôle

La page n'affiche que les projets démarrés depuis trois ans, plafonnés à 60. Les badges de
financeur (`ANR · 3057`, `HORIZON EUROPE · 336`…) ont l'apparence exacte des puces de filtre de la
page de recherche, **mais ne sont pas cliquables**. C'est une fausse affordance : le visiteur
clique, rien ne se passe.

### 5. Chercheurs : un index alphabétique comme seule porte d'entrée

Il faut connaître le nom pour trouver la personne — or on cherche une compétence, pas un
patronyme. La page `B` aligne 970 noms sans filtre, sans pagination et sans retour aux autres
lettres.

### 6. Pas de lien d'évitement

`<main id="contenu">` existe, mais aucun lien « Aller au contenu » ne le cible (vérifié : aucune
occurrence dans le code). Au clavier, chaque page impose la traversée de l'en-tête complet.

### 7. La navigation n'indique pas où l'on est

`SiteHeader` calcule `pathname`, mais ne s'en sert que pour le changement de langue : aucun
`aria-current`, aucun repère visuel sur l'onglet actif. Zéro occurrence d'`aria-current` dans tout
le code.

### 8. Les résultats de recherche s'arrêtent à 30

Pas de pagination, pas de « charger plus ». Au-delà, le compteur affiche « 30+ » et le reste est
inatteignable. Les pages de résultats n'ont par ailleurs aucun garde-fou en cas de zéro résultat :
ni suggestion, ni correction, ni exemple.

### 9. Des culs-de-sac affichés comme des chemins

« Éducation, Formation, Enseignement — 0 structure rattachée » est présentée comme une carte
cliquable, sur l'accueil, au même titre que les 17 autres. Elle mène à une page vide.

### 10. Détails d'exécution

- `autoFocus` sur le champ de recherche : ouvre le clavier et déplace le scroll à l'arrivée sur
  mobile.
- Les tuiles de chiffres utilisent `Group gap={48}` : en 390 px, elles se répartissent en 2 + 1 + 1
  avec des gouttières inégales. Une grille 2 × 2 réglerait le cas.
- Dans les cartes, seul le titre est cliquable : la zone de clic utile fait une ligne sur une carte
  de 200 px de haut.
- Les fiches exposent six identifiants bruts (RNSR, scanR, ROR, HAL ×2, Wikidata) sans un mot
  d'explication, à côté des liens utiles ; et les badges de thématique (pleins) et de Graduate
  School (contour) se distinguent par un style que rien ne légende.
- Pas de « retour en haut » sur des pages qui font plusieurs dizaines d'écrans.

## Style : ce qui échappe à la charte

La charte d'instance définit `primary`, `accent`, `ink` et `surface`
(`instances/<id>/research.config.ts`). Trois endroits ne la respectent pas :

- l'en-tête est peint en `rgba(255, 255, 255, 0.96)` en dur ;
- les cartes et plusieurs blocs sont en `bg="white"` littéral ;
- `globals.css` fixe `--text`, `--border` et `--surface-card` en hexadécimal, sans lien avec la
  configuration.

Une instance dont la charte a un fond coloré obtiendrait donc un site partiellement blanc. Les
jetons sont par ailleurs répartis entre trois endroits : `globals.css`, le thème Mantine, et une
variable injectée en ligne sur `<body>`. D'où le fichier unique introduit avec cet audit
(`src/theme/tokens.css`), décrit dans [design-system.md](/interface/design-system).

## Ce que je changerais, dans l'ordre

1. **Relire `?q=` au chargement.** Un bug, trois lignes, effet immédiat sur le partage.
2. **Un champ de recherche dans l'en-tête et dans le bandeau d'accueil.**
3. **Un filtre client sur les trois pages de liste** : saisie libre + Graduate School + ville. Les
   données sont déjà dans la page ; aucun serveur n'est nécessaire. À surveiller : le poids envoyé
   au navigateur sur la page Chercheurs.
4. **Rendre les badges de financeur cliquables**, ou leur retirer l'apparence de puce.
5. **Lien d'évitement et `aria-current`** — deux correctifs d'accessibilité à coût nul.
6. **Pagination des résultats** au-delà de 30, et un état « zéro résultat » qui propose quelque
   chose.
7. **Masquer les catégories vides** plutôt que de les présenter comme des chemins.
8. **Carte entièrement cliquable**, chiffres en grille 2 × 2 sur mobile, bouton « retour en haut ».

Les points 1, 4, 5 et 7 sont des correctifs ; les points 2, 3 et 6 sont une refonte du parcours de
recherche et méritent d'être traités ensemble.

## Limites de cet audit

Aucun utilisateur réel n'a été observé : tout ce qui précède est une inspection experte, pas un
test d'usage. Les priorités proposées sont des hypothèses, à confronter à la mesure une fois
l'analytics activée ([analytics/revue.md](/analytics/bilans/revue)) — à commencer par la part de
visiteurs qui atteignent `/recherche` et la part de recherches sans résultat.
