NUX

Elke streaming-UI is een eindeloze algoritmische muur; het is de keuzestress die je verkoopt. Een benchmark van Netflix, Disney+, MUBI en Criterion legde de open plek bloot: bij geen enkel platform is een samengesteld verhaalthema de kleinste bouwsteen. Bij NUX draait alles om eindige, redactioneel samengestelde clusters ⁠— Criterion × MUBI × Apple TV.

Elke beslissing staat in dienst van die these. De redactionele opbouw keert terug bij elke collectie ⁠— een amberkleurige eyebrow, een serif-kop, een dek van twee zinnen, de naam van de curator met datum ⁠— altijd met een eindig aantal, nooit “Meer zoals dit ∞” ⁠— “Five Films on Grief” begon als het voorbeeld bij dit principe en staat nu als echte collectie live in de app. Eén gevulde amberkleurige CTA per zone, even zuinig gedoseerd als inkt tot ≤10% van elk scherm, zodat de ene Play-knop altijd meteen opvalt.

“Projection Still Life” ⁠— één symbolisch object, één amberkleurig key light, 35mm-korrel. De beeldtaal ís het kleurensysteem: de UI blijft warm bijna-zwart zodat de beelden het scherm dragen

De belofte van het eindige aantal, waargemaakt ⁠— “Five Films on Grief”, live in de app

De kerntechnische keuze: één semantische tokenset (surfaces, tekst, randen, acties, iconen) draagt twee Figma-variabelemodi. De wireframe-modus is een grijswaardenladder volgens HIG in Plus Jakarta Sans + Inter; de hi-fi-modus is een warme inktladder (#070606→#332E27) met papierkleurige teksttinten op 17,0:1 / 8,4:1 / 6,3:1, amberkleurige accenten in #C8922A met donkere labels op amber (7,1:1 ⁠— wit zakt naar 2,4:1), haarlijnen in plaats van schaduwen en 2,5% filmkorrel. 35 wireframe- + 46 hi-fi-schermen, dichtgetimmerd tot 0 hardcoded waarden en 0 tekstlagen zonder stijl.

De typografie doet het redactionele werk: Fraunces benoemt de content, Inter neemt alles functioneel voor zijn rekening, Newsreader draagt de lange teksten, met een display-tot-metadata-verhouding van minstens 5×. Een bibliotheek van 50+ componenten per platform dekt elke interactieve state (default/hover/pressed/focus/disabled), aangevuld met selectieve iOS 26-glazen tabbalken en een tvOS-focusmodel ⁠— witte ring en lift, één focus per scherm. Elk platform heeft zijn eigen player, en beide fidelity-modi draaien als volledig klikbare prototypes.

Figma hi-fi Desktop Home ⁠— hetzelfde tokensysteem waarop de app draait

De catalogus bestaat uit echte Britse cinema ⁠— 72 films, elk met zijn poster en landschapsstills (The Third Man, Lawrence of Arabia, The Red Shoes, Black Narcissus…), waarvan er 21 end-to-end zijn ontworpen in het hi-fi-prototype, met tijdsgetrouwe castportretten en een strikte discipline van portret-in-portret en still-in-landschap. Voor vlakken zonder bestaand beeldmateriaal ⁠— genres, fictieve titels, onboarding ⁠— ontwierp ik “Projection Still Life”: één symbolisch object per genre, één amberkleurig key light, 35mm-korrel, fotografisch en bewust niet 3D, zodat het nooit botst met de redactionele inkttaal.

Als curatie het product is, dan is de volgende stap de kijker in gewone taal een sfeer te laten beschrijven en het platform daarop te laten antwoorden. De Curator is een conciërge in de live app, bereikbaar via twee ingangen ⁠— een zwevende knop op elk scherm en een “✦ Vraag de Curator”-pil naast de Browse-zoekbalk. Typ “een gespannen noir over verraad” of tik een sfeerchip aan, en ze antwoordt in de redactionele stem van NUX met een korte noot plus echte filmkaarten. Het gesprek loopt door ⁠— “iets korter?”, “meer zoals die noir” ⁠— op hetzelfde oppervlak.

Hallucineren lukt niet: de volledige catalogus past in één prompt (geen RAG), het model geeft enkel film-id’s terug, en de server toetst die aan de echte catalogus voor er iets gerenderd wordt. Ze draait op de gratis tiers van vijf modellen bij twee providers, drie bij Groq en twee bij Gemini: is er één bezet of uit dienst, dan antwoordt de volgende binnen enkele seconden. De sleutels blijven server-side, rate-limited en met begrensde input. Dezelfde engine genereert thematische redactionele rails (“Islands of the Mind”, “Portraits of Obsession”), gecachet en wekelijks ververst, en abonnees krijgen één pushmelding zodra het nieuwe programma klaarstaat. Test-first gebouwd: provider-failover, id-validatie en een prompt-injection guard zijn allemaal afgedekt.

Het vervolg is de kern ⁠— “iets korters?” verfijnt hetzelfde gesprek in plaats van een nieuwe zoekopdracht te starten, en elke kaart is een echte film uit de catalogus

De catalogus bestaat niet alleen uit films ⁠— hij omvat ook documentaires, games en cursussen, dus maakte ik de games écht. Neon Drift, het enige spel in de bibliotheek, is geen stilstaand beeld: druk op de titelpagina op Play en er opent een klein synthwave-canvasspel ⁠— stuur een opgelapte sterrenjager door de neonruïnes, puur op reflexen, in een eigen overlay met focus trap en oog voor reduced motion. De contenttypes zijn geen façade; de belofte wordt waargemaakt in code.

Neon Drift ⁠— een speelbaar canvasspel dat opent vanaf de titelpagina, met een eigen synthwave-identiteit

Midden in de run. Poorten schuiven aan, één tik en je bent schroot

Retrieval-augmented generation is de reflexarchitectuur voor een catalogusassistent. Ik heb die uitgesloten omdat de hele catalogus in één prompt past, waardoor RAG infrastructuur wordt die niets oplevert en een extra faalmodus toevoegt. De hardere randvoorwaarde was hallucinatie. Een redactioneel platform dat een film aanbeveelt die niet bestaat, heeft zijn enige belofte gebroken. Het model geeft film-id’s terug in plaats van titels als tekst, en de server valideert elk id tegen de echte catalogus voordat er iets rendert, zodat verzinnen structureel onmogelijk is in plaats van door een prompt ontmoedigd.

De redactionele regel is ook een weigering. Elke collectie verschijnt met een eindig aantal en een genoemde curator, nooit een oneindige “meer zoals dit”-rail. Eindeloze rails zijn de goedkoopste manier om sessieduur op te drijven, en ze zijn precies de keuzemoeheid waartegen het product bestaat, dus blijft de kleinste bouwsteen een door mensen samengesteld thema met een naam en een datum eraan.

De architectuur met twee modi is vooraf betaald, voordat het duidelijk de moeite waard was: een grijswaarden-wireframeladder en een warme hi-fi-inktladder op één tokenset. Die kosten kwamen dubbel terug. Hi-fi kostte uren in plaats van weken, en elke late wijziging, een token-heralias of een componentfix, propageerde in één keer over 33 schermen. Voor oppervlakken zonder echt beeldmateriaal ontwierp ik een fotografisch systeem “Projection Still Life”, bewust niet 3D zodat het nooit vecht met de redactionele inkttaal.

Instrumentatie was een beslissing, geen bijzaak. Het project ging live met Microsoft Clarity ingebouwd: sessieopnames, heatmaps en Core Web Vitals, plus een eigen eventtaxonomie op de echte funnel. Het verdiende zich binnen een dag terug. De cursorgevoelige posterkoepel die op 23 juni voor de hero was gebouwd, onderschepte kliks op de CTA’s eronder, en de fix ging op de 24e live: een dode klik die geen zelftest had blootgelegd. Het besliste ook waar de voordeur hoorde, want de losstaande landing die na de app live ging trok 448 sessies tegenover 87 op de eigen homepagina van de app. Tussen 1 juni en 7 september 2026 telde het project 1.040 unieke gebruikers, 62% gemiddelde scrolldiepte, nul rage-kliks en Core Web Vitals van 1,32 s LCP en 0,039 CLS, beide binnen de “goed”-drempels van Google. Die export bevat enkele lokale ontwikkelsessies en meet dus gedrag, geen zuiver extern verkeer.

In september ging ik gericht op zoek naar wat stuk was, en de eerste audit vond meteen het ergste. Tegen begin augustus hadden beide AI-providers de modellen uit dienst genomen waarop de Curator draaide, dus kreeg zes weken lang elke vraag hetzelfde antwoord: “The Curator stepped away. Try again in a moment.” Ook de wekelijkse collecties stonden stil. Een dag later was ze terug, en nu kan ze terugvallen op vijf modellen bij twee providers.

Daarna volgden zeven reviewrondes op basis van de mobiele en usability-richtlijnen van NN/g en Apples HIG, plus een review voor ondersteunende technologie. Ze liepen op de breedte van mijn eigen iPhone, op 262 px met tekst op 150%, op een vertraagd netwerk, liggend, op iPad en met alleen een toetsenbord. AI-reviewagents die ik instrueerde deden het speurwerk, en elke bevinding werd in de code of in een browser nagetrokken voor ze werd opgelost. Samen leverden de rondes meer dan 200 bevindingen op. De fixes van elke ronde werden getest en live gezet voor de volgende begon, en de laatste ronde zocht naar wat eerdere fixes hadden stukgemaakt.

Op 342 px, de breedte van mijn iPhone op 115% zoom, bereikt Browse de eerste titel nu na 1,4 schermen in plaats van 2,6. Op een geëmuleerde 3G-verbinding blijft een filmpagina niet meer leeg en verspringt ze niet meer tijdens het laden (cumulative layout shift 0, was 0,39–⁠0,62). Genrelabels boven de felste foto’s halen minstens 5,2:1, waar dat eerst tot 1,3:1 zakte. Een castnaam linkt alleen nog als die persoon hier ook andere films heeft: 273 van de 329 links leidden terug naar de film waar je al was.

De laatste check liep op mijn eigen iPhone, met NUX op het beginscherm geïnstalleerd en vanaf een Mac aangestuurd via Safari’s Web Inspector terwijl ik de app gebruikte. Die vond wat geen emulator laat zien. De tabbalk van de geïnstalleerde app bedekt de onderste 106 px, en een lege zoekopdracht zette haar knoppen daaronder. iOS opent het toetsenbord alleen voor een veld dat binnen de tik de focus krijgt, dus deed de zoekknop op een gescrolde pagina niets; nu krijgt het veld de focus binnen de tik.

Dit waren allemaal expertreviews. Niemand buiten het project heeft NUX al onder observatie gebruikt, en het script voor een usabilitytest met vijf deelnemers ligt klaar.

De volledige responsieve app staat live ⁠— Home, Browse, filmpagina’s met verankerde secties, pull-quotes van critici en eerlijke Downloads op het toestel zelf, een toetsenbordgestuurde Player met een “?”-spiekbriefje, redactionele collecties, Mijn Lijst + Verder Kijken, authenticatie, Profiel, bewerkbare smaakvoorkeuren en onboarding ⁠— React + Vite op het geëxporteerde tokensysteem, echte catalogusdata, een poster→hero View-Transition-morph, een hero-pager met posterminiaturen, hover-crossfades naar filmstills, scroll-gestuurde redactionele onthullingen en een zwevende glazen tabbalk op mobiel. Gebouwd op productieniveau: WCAG-AA-toegankelijkheid (focusbeheer, reduced motion, live regions voor schermlezers, een Curator-overlay op schermlezerniveau), een axe-gate in de testsuite, een backend-suite en CI die de echte Docker-image bouwt en rooktest, plus een geharde non-root-container ⁠— zelf gehost op mijn eigen infrastructuur (Docker ⁠· nginx ⁠· Coolify ⁠· Hetzner), automatisch uitgerold bij elke push. Vóór deze release doorliep de hele flow een adversarieel geverifieerde UX-audit: 42 bevindingen teruggebracht tot 13 grondoorzaken, allemaal opgelost, zodat ook de ongelukkige paden de waarheid vertellen. De app is een installeerbare PWA ⁠— een service-worker-offlinefallback, toevoegen aan het beginscherm, webpush met één melding per week wanneer de Curator publiceert ⁠— en een aparte marketinglanding, gebouwd op hetzelfde tokensysteem, staat ervoor op nux.ontwrpn.com.

Filmpagina’s kregen verankerde secties en pull-quotes van critici, tot op de pixel trouw aan de Figma-spec

▶Live-demo

app.nux.ontwrpn.com

Openen

Live ⁠— probeer het

Mobiel ⁠— zwevende glazen tabbalk + losgekoppeld zoeken (iOS 26-patroon)

De modi-architectuur verdiende zichzelf dubbel terug: hi-fi kostte uren, geen weken, en elke late beslissing ⁠— een token-heralias, een componentfix ⁠— sloeg meteen door naar 33 schermen tegelijk. Net die discipline om tot nul ruwe waarden te auditen maakte die snelheid mogelijk

Het cijfer waarop het beoordeeld is ⁠— 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. — het keuzeoverloadeffect is omstreden en laat zich niet betrouwbaar repliceren