NUX

Chaque interface de streaming est un mur algorithmique sans fin ; ce qu’on vend, c’est la fatigue du choix. Un benchmark de Netflix, Disney+, MUBI et Criterion a mis au jour l’espace laissé libre : sur aucune plateforme l’unité de base n’est un thème narratif composé. Chez NUX, tout repose sur des ensembles finis, composés par des éditeurs ⁠— Criterion × MUBI × Apple TV.

Chaque décision sert cette thèse. La structure éditoriale revient partout où une collection apparaît ⁠— eyebrow ambré, titre en serif, chapeau de deux phrases, signature du curateur avec sa date ⁠— toujours avec un nombre fini, jamais « Voir plus ∞ » ⁠— « Five Films on Grief », né comme exemple de ce principe, est aujourd’hui une vraie collection en production. Un seul CTA ambré plein par zone, dosé avec la parcimonie de l’encre jusqu’à ≤10 % de chaque écran, pour que l’unique bouton Play capte toujours le regard en premier.

« Projection Still Life » ⁠— un objet symbolique, une lumière directrice ambrée, grain 35 mm. L’image fait office de système de couleurs : l’interface reste dans un noir chaud pour que les visuels portent l’écran

La promesse du nombre fini, tenue ⁠— « Five Films on Grief », en production dans l’application

Le choix d’ingénierie central : un unique jeu de tokens sémantiques (surfaces, texte, bordures, actions, icônes) porte deux modes de variables Figma. Le mode wireframe est une rampe de gris conforme aux HIG en Plus Jakarta Sans + Inter ; le mode hi-fi est une échelle d’encre chaude (#070606→#332E27) avec des tons de texte papier à 17,0:1 / 8,4:1 / 6,3:1, des accents ambrés #C8922A à labels sombres sur ambre (7,1:1 ⁠— le blanc échoue à 2,4:1), des filets plutôt que des ombres et 2,5 % de grain cinéma. 35 écrans wireframe + 46 écrans hi-fi, verrouillés à 0 valeur en dur et 0 calque de texte sans style.

La typographie fait le travail éditorial : Fraunces nomme le contenu, Inter prend en charge tout ce qui est fonctionnel, Newsreader porte les textes longs, avec un ratio affichage/métadonnées d’au moins 5×. Une bibliothèque de 50+ composants par plateforme couvre chaque état interactif (default/hover/pressed/focus/disabled), complétée par des barres d’onglets en verre iOS 26 sélectives et un modèle de focus tvOS ⁠— anneau blanc et élévation, un seul focus par écran. Chaque plateforme a son lecteur, et les deux modes de fidélité se parcourent comme des prototypes entièrement cliquables.

Figma hi-fi Desktop Home ⁠— le même système de tokens que celui sur lequel tourne l’application

Le catalogue repose sur de vrais films britanniques ⁠— 72 films, chacun avec son affiche et ses photogrammes au format paysage (The Third Man, Lawrence of Arabia, The Red Shoes, Black Narcissus…), dont 21 conçus de bout en bout dans le prototype hi-fi, avec des portraits de l’époque et une discipline stricte portrait-dans-portrait, still-dans-paysage. Pour les surfaces sans visuel existant ⁠— genres, titres fictifs, onboarding ⁠— j’ai conçu « Projection Still Life » : un objet symbolique par genre, une seule lumière directrice ambrée, grain 35 mm, photographique et délibérément non-3D pour ne jamais entrer en conflit avec le langage éditorial à l’encre.

Si la curation est le produit, l’étape suivante consiste à laisser le spectateur décrire une ambiance en langage naturel et à faire répondre la plateforme. Le Curateur est un concierge dans l’application en production, accessible par deux points d’entrée ⁠— un bouton flottant sur chaque écran et une pastille « ✦ Demander au Curateur » à côté de la recherche Browse. Tapez « un film noir tendu, sur fond de trahison » ou touchez un chip d’ambiance, et il répond dans la voix éditoriale de NUX avec une courte note et de vraies fiches de films. La conversation se poursuit ⁠— « quelque chose de plus court ? », « plutôt comme le noir » ⁠— sur la même surface.

Impossible pour lui d’halluciner : tout le catalogue tient dans un seul prompt (pas de RAG), le modèle ne renvoie que des identifiants de films, et le serveur les valide face au vrai catalogue avant tout rendu. Il tourne sur les offres gratuites de cinq modèles chez deux fournisseurs, trois chez Groq et deux chez Gemini : si l’un est saturé ou retiré, le suivant répond en quelques secondes. Les clés restent côté serveur, avec rate-limiting et plafonnement des entrées. Le même moteur génère des rails éditoriaux thématiques (« Islands of the Mind », « Portraits of Obsession »), mis en cache et rafraîchis chaque semaine, et les abonnés reçoivent une seule notification push à l’arrivée du nouveau programme. Développé en test-first : basculement de fournisseur, validation des identifiants et garde-fou contre l’injection de prompt sont tous couverts.

La relance est l’essentiel ⁠— « quelque chose de plus court ? » affine la même conversation au lieu de lancer une nouvelle recherche, et chaque fiche est un film réel du catalogue

Le catalogue ne se limite pas aux films ⁠— il couvre aussi des documentaires, des jeux et des cours, alors j’ai rendu les jeux bien réels. Neon Drift, le seul jeu de la bibliothèque, n’est pas une image fixe : appuyez sur Play sur sa page de titre et un petit jeu canvas synthwave s’ouvre ⁠— pilotez un chasseur stellaire récupéré à travers les ruines néon, tout en réflexes, dans sa propre surcouche avec piège de focus et prise en charge du reduced motion. Les types de contenu ne sont pas une façade ; la promesse est tenue dans le code.

Neon Drift ⁠— un jeu canvas jouable qui s’ouvre depuis la page de titre, avec sa propre identité synthwave

Au cœur de la partie. Les portes défilent, un contact et c’est la casse

La génération augmentée par récupération est l’architecture réflexe pour un assistant de catalogue. Je l’ai écartée parce que le catalogue entier tient dans un seul prompt, ce qui fait du RAG une infrastructure qui n’apporte rien et ajoute un mode de défaillance. La contrainte plus dure était l’hallucination. Une plateforme éditoriale qui recommande un film inexistant a rompu sa seule promesse. Le modèle renvoie des identifiants de films plutôt que des titres en texte, et le serveur valide chaque identifiant contre le catalogue réel avant tout rendu, si bien que l’invention est structurellement impossible plutôt que découragée par un prompt.

La règle éditoriale est elle aussi un refus. Chaque collection paraît avec un nombre fini et un curateur nommé, jamais un bandeau infini « plus comme ceci ». Les bandeaux sans fin sont le moyen le moins coûteux d’allonger la durée de session, et ils sont exactement la fatigue décisionnelle contre laquelle le produit existe, donc l’unité de base reste un thème composé par un humain, avec une signature et une date.

L’architecture à deux modes a été payée d’avance, avant que son intérêt ne soit évident : une échelle de gris pour le wireframe et une échelle d’encre chaude en haute fidélité, bâties sur un seul jeu de tokens. Le coût a été remboursé deux fois. La haute fidélité a pris des heures et non des semaines, et chaque décision tardive, un réalias de token ou un correctif de composant, s’est propagée d’un coup sur 33 écrans. Pour les surfaces sans visuel réel, j’ai conçu un système photographique « Projection Still Life », délibérément non 3D pour qu’il n’entre jamais en conflit avec le langage d’encre éditorial.

L’instrumentation relevait d’une décision, pas d’un ajout tardif. Le projet est parti en ligne avec Microsoft Clarity intégré : enregistrements de sessions, cartes de chaleur et Core Web Vitals, plus une taxonomie d’événements calquée sur l’entonnoir réel. Elle s’est remboursée en une journée. Le dôme d’affiches réactif au curseur, construit pour le hero le 23 juin, interceptait les clics sur les CTA situés en dessous, et le correctif est parti le 24 : un clic mort qu’aucun autotest n’avait révélé. Elle a aussi tranché la question de la porte d’entrée, puisque la landing autonome ajoutée après la mise en ligne de l’application a attiré 448 sessions contre 87 sur l’accueil de l’application. Du 1er juin au 7 septembre 2026, le projet a compté 1 040 utilisateurs uniques, 62 % de profondeur de défilement moyenne, zéro clic de rage, et des Core Web Vitals de 1,32 s de LCP et 0,039 de CLS, toutes deux dans les seuils « bons » de Google. Cet export inclut quelques sessions de développement local : il mesure donc le comportement, pas un trafic externe net.

En septembre, j’ai cherché méthodiquement ce qui ne marchait pas, et le premier audit a trouvé le pire d’emblée. Début août, les deux fournisseurs d’IA avaient déjà retiré les modèles qui faisaient tourner le Curateur : pendant six semaines, chaque question a reçu la même réponse, « The Curator stepped away. Try again in a moment. » Les collections hebdomadaires étaient figées, elles aussi. Il est revenu le lendemain, et il peut désormais se replier sur cinq modèles chez deux fournisseurs.

Sont venus ensuite sept tours d’évaluation selon les recommandations mobiles et d’utilisabilité de NN/g et les HIG d’Apple, avec en plus une évaluation dédiée aux technologies d’assistance. Ils ont été menés à la largeur de mon propre iPhone, à 262 px avec le texte à 150 %, sur un réseau bridé, en paysage, sur iPad et au clavier seul. Des agents d’évaluation IA que je briefais faisaient le repérage, et chaque constat était vérifié dans le code ou dans un navigateur avant d’être corrigé. Au total, les tours ont relevé plus de 200 constats. Les correctifs de chaque tour étaient testés et mis en production avant le suivant ; le dernier tour a traqué ce que les correctifs précédents avaient cassé.

À 342 px, la largeur de mon iPhone zoomé à 115 %, Browse atteint désormais son premier titre en 1,4 écran au lieu de 2,6. Sur une connexion 3G émulée, une page de film ne reste plus vide et ne saute plus pendant le chargement (cumulative layout shift 0, contre 0,39–⁠0,62). Les libellés de genre sur les photos les plus claires atteignent au moins 5,2:1, là où ils tombaient à 1,3:1. Un nom du casting ne fait plus de lien que si la personne a d’autres films ici : 273 liens sur 329 ramenaient au film d’où l’on venait.

Le dernier contrôle s’est fait sur mon propre iPhone, avec NUX installé sur l’écran d’accueil et piloté depuis un Mac via l’inspecteur web de Safari pendant que je m’en servais. Il a révélé ce qu’aucun émulateur ne montre. La barre d’onglets de l’app installée couvre les 106 px du bas, et une recherche vide y cachait ses boutons. iOS n’ouvre le clavier que pour un champ qui reçoit le focus pendant le toucher : sur une page défilée, le bouton de recherche ne faisait donc rien ; il donne désormais le focus au champ pendant le toucher.

Il s’agissait d’évaluations expertes. Personne d’extérieur au projet n’a encore utilisé NUX sous observation, et le script d’un test d’utilisabilité à cinq participants est prêt.

L’application responsive complète est en production ⁠— Accueil, Browse, des pages de films avec sections ancrées, citations de critiques en exergue et Téléchargements honnêtes sur l’appareil, un lecteur piloté au clavier avec son aide-mémoire « ? », des collections éditoriales, Ma Liste + Reprendre la lecture, authentification, Profil, goûts modifiables et onboarding ⁠— React + Vite sur le système de tokens exporté, vraies données de catalogue, une View-Transition poster→hero, un paginateur de hero à vignettes d’affiches, des fondus enchaînés au survol vers les photogrammes, des révélations éditoriales pilotées par le défilement et une barre d’onglets en verre flottante sur mobile. Conçue aux standards de production : accessibilité WCAG-AA (gestion du focus, reduced motion, live regions pour lecteurs d’écran, une surcouche Curateur pleinement accessible aux lecteurs d’écran), un contrôle axe bloquant dans la suite de tests, une suite backend et une CI qui compile et teste à chaud la vraie image Docker, ainsi qu’un conteneur non-root durci ⁠— auto-hébergée sur ma propre infrastructure (Docker ⁠· nginx ⁠· Coolify ⁠· Hetzner), déployée automatiquement à chaque push. Avant cette version, tout le parcours est passé par un audit UX vérifié de manière contradictoire : 42 constats ramenés à 13 causes racines, toutes corrigées, pour que les chemins malheureux disent la vérité eux aussi. L’application est une PWA installable ⁠— service-worker avec repli hors ligne, ajout à l’écran d’accueil, push web avec une notification par semaine quand le Curateur publie ⁠— et une landing marketing distincte, bâtie sur le même système de tokens, la précède sur nux.ontwrpn.com.

Les pages de films ont gagné des sections ancrées et des citations de critiques en exergue, fidèles à la spec Figma au pixel près

▶Démo en ligne

app.nux.ontwrpn.com

Ouvrir

Live ⁠— essayez

Mobile ⁠— barre d’onglets en verre flottante + recherche détachée (motif iOS 26)

L’architecture en modes s’est rentabilisée deux fois : le hi-fi a pris des heures, pas des semaines, et chaque décision tardive ⁠— un réalias de token, une correction de composant ⁠— s’est propagée d’un coup à 33 écrans. C’est cette discipline de l’audit jusqu’à zéro valeur brute qui a rendu cette vitesse possible

La note obtenue ⁠— 15/⁠15, « A+ Impressively exceeds expectations » (HEC Montréal / edX)

• Iyengar & Lepper (2000). When choice is demotivating: can one desire too much of a good thing? Journal of Personality and Social Psychology 79(6):995–⁠1006.
• Scheibehenne, Greifeneder & Todd (2010). Can there ever be too many options? A meta-analytic review of choice overload. Journal of Consumer Research 37(3):409–⁠425. — l’effet de surcharge de choix est débattu et ne se réplique pas de manière fiable