# UI/UX souveraine — Fondements neuro-cognitifs, doctrine multi-device et stack front-end libre **Document de référence OKI** · Rédigé le 06/07/2026 · Destiné à l'archivage (Denote) **Périmètre** : plateformes web OKI (fédérées et éditoriales), applications natives, UI Maskarad **Licence suggérée du document** : CC BY-SA 4.0 **Note de fraîcheur** : les fondements neuro-cognitifs sont stables (décennies de littérature). Les versions de frameworks citées (Svelte 5, SvelteKit 2, Tailwind 4, Qt 6.x) correspondent à l'état connu début 2026 — vérifier les numéros de version exacts au moment de l'implémentation, la doctrine reste valable. --- ## Table des matières 1. Fondements neuro-cognitifs 2. Doctrine par device (mobile, desktop, tablette, montre) 3. Éthique attentionnelle — la calm technology comme avantage compétitif 4. Adoption en contexte caribéen 5. Stack front-end web : Svelte + CSS 6. Applications natives : Qt et alternatives libres 7. Checklist d'audit OKI 8. Application aux projets en cours (fronts fédérés, Maskarad) 9. Références --- ## 1. Fondements neuro-cognitifs ### 1.1 La vision : fovéale, saccadique, prédictive - **Fovéa** : la vision nette couvre ~2° d'angle visuel (un pouce à bout de bras). Tout le reste est périphérique, flou, sensible au mouvement et au contraste — et sert exclusivement à planifier la prochaine **saccade** (3-4 sauts oculaires par seconde). - **Conséquence** : l'utilisateur ne « voit » pas une page, il la parcourt par sauts. La hiérarchie visuelle (taille, contraste, position, espacement) est le rail des saccades. Ce qui n'est pas sur le rail n'existe pas cognitivement. - **Motifs de balayage** : motif en **F** pour le contenu textuel (deux bandes horizontales en haut, puis descente verticale à gauche — d'où l'importance capitale des premiers mots de chaque ligne/titre), motif en **Z** pour les pages d'accueil peu denses. - **Le contraste prime sur la couleur** pour guider l'attention. ~8 % des hommes ont une déficience de vision des couleurs : ne jamais coder une information par la couleur seule (toujours doubler par forme, texte ou icône). - **Jugement esthétique en 50 ms** (Lindgaard et al., 2006) : la première impression de confiance/qualité se forme avant toute lecture consciente, sur la base de l'harmonie visuelle globale. Elle biaise ensuite tout le reste de l'expérience (effet de halo). ### 1.2 Attention et mémoire de travail - **Système 1 / Système 2** (Kahneman) : ~95 % des interactions se font en mode automatique, rapide, par reconnaissance de motifs. L'utilisateur **ne lit pas, il reconnaît**. Le mode analytique (Système 2) est coûteux, lent, et l'utilisateur l'évite. Toute UI qui exige du Système 2 pour des tâches routinières sera perçue comme « compliquée ». - **Mémoire de travail : 4±1 éléments** (Cowan, révision moderne du 7±2 de Miller). Chaque écran, menu, formulaire qui demande de tenir plus de 4 éléments simultanément en tête génère de la surcharge. - **Théorie de la charge cognitive** (Sweller) : distinguer la charge **intrinsèque** (complexité réelle de la tâche — incompressible), **extrinsèque** (générée par la présentation — à éliminer sans pitié), **germane** (effort d'apprentissage utile — à doser). Le design d'interface est essentiellement une guerre contre la charge extrinsèque. - **Effet Zeigarnik** : les tâches interrompues restent actives en mémoire — exploitable positivement (reprendre où on s'est arrêté, indicateurs de progression) ou toxiquement (notifications qui créent des boucles ouvertes artificielles). - **Effet de position sérielle** : on retient mieux le premier et le dernier élément d'une liste. Placer l'essentiel aux extrémités des menus et des parcours. - **Effet Von Restorff** : l'élément visuellement distinct est mémorisé — un seul bouton d'action primaire par écran, visuellement isolé. - **Règle du pic et de la fin (peak-end, Kahneman)** : une expérience est mémorisée par son moment le plus intense et par sa fin. Soigner les fins de parcours (confirmation de publication, fin d'inscription, fin de session) autant que les débuts. ### 1.3 Les lois quantitatives de l'interaction - **Loi de Fitts** : le temps d'atteinte d'une cible croît avec la distance et décroît avec la taille. Applications : cibles tactiles ≥ 44-48 px ; sur desktop, les bords et coins d'écran sont des cibles « infinies » (le curseur ne peut pas les dépasser) ; regrouper spatialement les actions liées. - **Loi de Hick-Hyman** : le temps de décision croît logarithmiquement avec le nombre d'options. Applications : navigation à 4-5 entrées max, divulgation progressive, réglages par défaut intelligents plutôt que questions. - **Seuil de Doherty (~400 ms)** : sous 400 ms, l'interaction est perçue comme un dialogue fluide (état de flow maintenu) ; au-delà de 1 s, l'attention décroche ; au-delà de 10 s, l'utilisateur est mentalement parti. Entre 1 et 10 s : indicateur de progression obligatoire. La **performance perçue** se travaille aussi : skeleton screens, optimistic UI, transitions qui masquent la latence. - **Loi de Jakob (Nielsen)** : les utilisateurs passent l'essentiel de leur temps ailleurs — ils arrivent avec des schémas mentaux préformés par WhatsApp, Instagram, YouTube. Toute déviation des conventions a un coût cognitif : le dépenser **délibérément** (là où la différenciation a du sens), jamais par accident. - **Loi de Tesler (conservation de la complexité)** : la complexité d'une tâche ne disparaît jamais, elle se déplace. Soit l'interface l'absorbe (travail de conception), soit l'utilisateur la subit. La complexité fédérative (instances, protocoles) doit être absorbée par l'interface, pas exposée à l'inscription. ### 1.4 Motricité : le pouce comme curseur - En tenue à une main (usage mobile majoritaire), le pouce couvre confortablement le **tiers inférieur** de l'écran ; les coins supérieurs sont pénibles et instables. - Précision tactile réelle : ~7-10 mm de zone de contact, d'où le standard 44-48 px avec espacement ≥ 8 px entre cibles. - Les **gestes sont invisibles** donc non découvrables : ils complètent des boutons visibles, ne les remplacent jamais. Exception : les gestes devenus conventions universelles (pincer-zoomer, tirer-rafraîchir, swipe latéral de retour). ### 1.5 Boucles dopaminergiques et récompense variable - Le circuit dopaminergique répond plus fortement à la récompense **imprévisible** qu'à la récompense certaine (conditionnement opérant, Skinner). Les mécaniques pull-to-refresh + contenu aléatoire, scroll infini, compteurs de likes, streaks, sont des programmes de renforcement à ratio variable — littéralement l'architecture des machines à sous. - Le **scroll infini supprime les points d'arrêt naturels** que le cerveau utilise pour décider consciemment de continuer ou partir. La pagination, les marqueurs « vous êtes à jour », les fins de section restituent ce choix. - Position OKI (voir §3) : refus explicite de ces mécaniques, transformé en argument d'adoption. --- ## 2. Doctrine par device ### 2.1 Mobile (le device par défaut) **Contexte réel** : sessions courtes (30-90 s), fragmentées, en mobilité, souvent à une main, sur des forfaits data comptés et des réseaux 3G/4G irréguliers (réalité caribéenne). Règles : 1. **Zone du pouce** : actions primaires dans le tiers inférieur (barre d'onglets basse, bouton d'action flottant si justifié) ; le haut de l'écran pour le contexte et les actions rares/destructives. 2. **Valeur en 5 secondes** : chaque écran doit livrer sa raison d'être immédiatement, sans lecture préalable. 3. **Reprennabilité** : état sauvegardé en continu, retour instantané au point d'interruption, aucune tâche exigeant plus de 2-3 minutes ininterrompues sans point de sauvegarde. 4. **Une colonne, un flux** : pas de mise en page multi-colonnes ; hiérarchie verticale stricte. 5. **Cibles 44-48 px minimum**, espacement 8 px, texte de corps ≥ 16 px (empêche aussi le zoom automatique d'iOS sur les champs de formulaire). 6. **Frugalité data** : lazy loading, AVIF/WebP pour l'image, AV1 pour la vidéo (cohérent avec la stack OKI), pas de police web au-delà de 2 fichiers, budget page < 500 Ko idéal, < 1 Mo maximum. 7. **PWA installable + offline-first** : service worker, cache des contenus consultés, file d'attente des actions hors-ligne. Double bénéfice : résilience réseau + **souveraineté** (contournement des stores propriétaires). 8. **Formulaires** : le clavier virtuel mange la moitié de l'écran — un champ visible à la fois, types d'input corrects (`inputmode`, `autocomplete`), jamais plus de champs que strictement nécessaire. ### 2.2 Desktop **Contexte réel** : sessions longues, attention soutenue possible, pointeur précis, clavier, écran large. C'est le device des **contributeurs** (modérateurs, créateurs, administrateurs d'instance). Règles : 1. **Largeur de lecture : 45-75 caractères par ligne** (~65 optimal). Au-delà, les saccades de retour à la ligne fatiguent et font perdre la ligne. Contraindre par `max-width` en `ch`. 2. **Densité maîtrisée et ajustable** : le desktop peut afficher plus, pas afficher n'importe quoi. Offrir un réglage compact/confortable pour les vues de type liste/tableau. 3. **Clavier roi** : navigation complète au clavier (j/k pour les flux comme Mastodon web, / pour la recherche, raccourcis affichés via `?`). Les utilisateurs experts sont ceux qui font vivre une plateforme fédérée — les raccourcis sont un investissement de rétention des contributeurs. 4. **Bords et coins de Fitts** : menus et actions fréquentes contre les bords de fenêtre quand c'est pertinent. 5. **États de survol riches** (prévisualisation, info-bulles) — inexistants sur tactile, donc jamais porteurs d'information exclusive. 6. **Multi-fenêtrage respecté** : l'application doit rester utilisable à 50 % de largeur d'écran (design responsive par container queries, pas par media queries d'appareil — voir §5.2). ### 2.3 Tablette Ni un grand téléphone ni un petit desktop : usage majoritairement **en consommation, tenue à deux mains, pouces sur les bords latéraux**. Actions primaires près des bords gauche/droit, contenu au centre. Cible secondaire pour OKI : la traiter par responsive fluide (container queries) plutôt que par design dédié, sauf pour Maskarad où la lecture de visual novel sur tablette est un cas d'usage premium (paysage, deux zones de pouce pour avancer/menu). ### 2.4 Montres et périphériques Hors périmètre de développement dédié pour OKI à ce stade. Règle d'hygiène : les notifications envoyées par les plateformes doivent être **conçues pour être lues en 2 secondes sur un poignet** (émetteur + verbe + objet), ce qui est de toute façon la bonne discipline de notification (§3). ### 2.5 Continuité multi-device Le même individu utilise plusieurs devices dans la même journée. Exigences : état synchronisé (position de lecture, brouillons), identité unifiée (cohérent avec le chantier IndieWeb), et **parité fonctionnelle raisonnée** — toute fonction essentielle disponible partout, les fonctions de production avancées peuvent rester desktop. --- ## 3. Éthique attentionnelle — la calm technology comme avantage compétitif Les plateformes propriétaires optimisent des boucles d'engagement compulsif (§1.5). Une plateforme souveraine peut faire le pari inverse et **le dire** : 1. **Notifications** : groupées par défaut, paramétrables finement, jamais de notification purement ré-engageante (« Untel a aimé une photo que vous pourriez aimer »). Chaque notification = une information actionnable émise par un humain. 2. **Points d'arrêt naturels** : pagination ou marqueur « ou pa manké ayen » / « vous êtes à jour » dans les flux. Pas de scroll infini sans fin. 3. **Pas de métriques anxiogènes** : compteurs de likes optionnels/masquables, pas de streaks, pas de « vu à ». 4. **Pas de dark patterns** : désinscription aussi facile que l'inscription, pas de confirm-shaming, pas d'urgence artificielle, exports de données en un clic (garanti de toute façon par ActivityPub). 5. **Technologie périphérique** (Amber Case / Mark Weiser) : l'information non urgente reste en périphérie (badges discrets) et n'interrompt jamais. **Traduction en communication** : pour un public 16-25 ans saturé et de plus en plus lucide sur la manipulation attentionnelle, « nos plateformes ne sont pas conçues pour vous retenir » est un argument d'adoption explicite. Neuro-cognitivement : on troque l'engagement compulsif court terme contre la **confiance**, qui est le prédicteur de la rétention volontaire long terme et du bouche-à-oreille. --- ## 4. Adoption en contexte caribéen ### 4.1 Familiarité en surface, différence en profondeur Paradoxe central : pour faire adopter le radicalement différent (fédération, souveraineté), l'interface doit être radicalement **familière**. Le Système 1 doit pouvoir utiliser la plateforme sans apprendre ; la différence idéologique se découvre en Système 2, une fois la confiance établie. - **Masquer la complexité fédérative à l'entrée** (loi de Tesler) : une instance d'entrée par défaut, inscription < 60 s, le choix d'instance proposé plus tard comme option avancée. L'erreur historique de Mastodon (choisir une instance avant toute valeur perçue = charge cognitive maximale au pire moment) est documentée et évitable. - **Onboarding par la valeur, pas par la pédagogie** : montrer du contenu du territoire dès le premier écran, expliquer la fédération au moment où elle devient visible (première interaction inter-instances), pas avant. ### 4.2 Langue et code culturel - **Bilinguisme français/créole** dans l'interface : la reconnaissance linguistique active les circuits de confiance et d'appartenance avant toute lecture consciente. Le créole dans les micro-textes (boutons, états vides, confirmations) a un impact affectif disproportionné par rapport à son coût. - **Iconographie et visuels du territoire** : une plateforme qui *ressemble* au territoire est catégorisée « pour moi » dans la fenêtre des 50 ms (§1.1). Le travail visuel de Maskarad (Mas, Basse-Terre) est le référentiel de qualité. - **Localisation réelle** : formats de date, exemples, contenus de démonstration ancrés Caraïbe — jamais de Lorem ipsum hexagonal. ### 4.3 Accessibilité comme rigueur - **WCAG 2.2 niveau AA minimum** : contraste 4.5:1 pour le texte courant, 3:1 pour le grand texte et les composants d'interface. Viser AAA (7:1) pour le corps de texte — la méthode modus-vivendi de Protesilaos Stavrou (palette construite *à partir* des ratios de contraste, pas décorée ensuite) est le modèle méthodologique exact : brique par brique appliqué à la couleur. - **Respect des préférences système** : `prefers-color-scheme`, `prefers-reduced-motion`, `prefers-contrast`, taille de police utilisateur (tout en `rem`, jamais de `font-size` en `px` sur `html`). - **HTML sémantique d'abord** : landmarks, hiérarchie de titres, `