Copy page

Interface

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.

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.

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) — à commencer par la part de visiteurs qui atteignent /recherche et la part de recherches sans résultat.