Back to flin
flin

Navigation sidebar : une petite correction qui a tout changé

Comment une incohérence de sidebar dans les pages de la console d'administration FLIN a conduit à une refonte complète de l'architecture de navigation -- et pourquoi les petits bugs UX peuvent saper un produit entier.

Juste A. Gnimavo (Thales) & Claude | March 26, 2026 2 min flin
EN/ FR/ ES
flinadminuxnavigationsidebardebugging

La session 260 devait être une correction rapide. Le tableau de bord de la console avait fière allure. Mais quand on naviguait du tableau de bord à l'éditeur de requêtes, la sidebar changeait. Disposition différente. Icônes différentes. Structure différente. Trois pages, trois sidebars. La console ressemblait à trois applications différentes collées ensemble.

Ce n'était pas un problème esthétique mineur. C'était un destructeur de confiance. La session 260 a réécrit la sidebar dans chaque sous-page de la console pour correspondre à la disposition à deux colonnes du tableau de bord. La vraie solution est venue avec l'architecture SPA shell : un seul shell.html contient la sidebar, l'en-tête et la navigation, et les pages de contenu sont chargées comme des fragments HTML injectés dans la zone de contenu principale.

La leçon plus large s'applique à FLIN lui-même. FLIN remplace 47 technologies, ce qui signifie qu'il doit donner la sensation d'un système cohésif unique, pas de 47 wrappers cousus ensemble. Chaque incohérence érode le sens d'unité qui rend FLIN convaincant.


Ceci est la partie 141 de la série « Comment nous avons construit FLIN », documentant comment un CEO à Abidjan et un CTO IA ont appris qu'une navigation cohérente vaut plus que cent fonctionnalités.

Navigation de la série : - [140] Observabilité et monitoring - [141] Navigation sidebar : une petite correction qui a tout changé (vous êtes ici) - [142] Améliorations de la gestion des entités

Share this article:

Responses

Write a response
0/2000
Loading responses...

Related Articles

Thales & Claude deblo

Le Step Zero ne suffisait pas : comment valider un constructeur sans valider le runtime a fait tomber toutes les sessions vocales de Déblo l’heure où nous avons livré le streaming caméra temps réel

La phase 14 a livré Déblo Eyes — streaming caméra temps réel via LiveKit vers Gemini Live native audio. Le premier deploy a fait tomber toutes les sessions vocales en production en quatre-vingt-dix secondes parce que notre Step 0 avait validé le constructeur sans exercer le runtime. Le build log de comment Déblo a eu des yeux, ce qu’un pré-vol incomplet a coûté, et quels points de polish ont été livrés ou reportés.

33 min May 20, 2026
debloclaude-opus-4.7claude-codegemini-live +25
Thales & Claude deblo

Le tiret cadratin qui a tué la production : comment un slogan marketing dans un header HTTP a fait tomber le chat de Déblo pendant 24 heures

Deux jours avant la soumission App Store, tout le produit chat de Déblo s’est cassé silencieusement. Pas de spinner, pas de toast, aucune erreur dans l’UI — juste un silence radio. L’incident de 24 heures se résumait à un seul « é » dans la valeur d’un header HTTP qui levait une UnicodeEncodeError avant qu’aucune requête vers OpenRouter ne quitte le backend. Post-mortem d’une fausse hypothèse, d’une trace Sentry, et d’un fix de six lignes qui a débloqué le lancement.

30 min May 19, 2026
debloclaude-opus-4.7claude-codeincident +19
Thales & Claude deblo

Six heures, d’une page blanche à la review Apple — Comment nous avons soumis Déblo à l’App Store, en direct

Marche à marche en direct de la soumission de Déblo à l’App Store iOS en six heures : ce que les validateurs d’Apple ont rejeté (un superscript Unicode), ce que nous avons corrigé (un Promotional Text gaspillé sur des marques tierces), et les rouages de l’ASO iOS que presque tout le monde rate.

30 min May 13, 2026
debloclaude-opus-4.7claude-codeapp-store +16