Hoff NDS : la spécification du design system neurodivergent de Hoff Research

Travail en cours (WIP) : cette spécification change encore.

Voici le Hoff NDS, le design system que j'utilise dans les produits de Hoff Research et que j'applique, parfois en silence, à chaque nouveau projet. Les preuves derrière chaque règle sont dans le post sur le design system pour les personnes neurodivergentes. Ici, il ne reste que la norme.

Objectif et périmètre

Le système existe pour réduire la charge cognitive, l'anxiété et l'erreur dans les interfaces numériques, en donnant la priorité aux personnes neurodivergentes et au bénéfice de tous. Il couvre trois types de limitation :

• Permanente, comme la basse vision, la dyslexie et l'autisme
• Temporaire, comme une blessure, la fatigue et l'effet d'un médicament
• Situationnelle, comme un lieu bruyant, une mauvaise connexion et le stress

La prémisse : l'apprentissage et la décision se passent dans le cerveau, pas à l'écran. Chaque effort dépensé à déchiffrer l'interface est un effort retiré à la vraie tâche. Le rôle du design est de baisser le coût de lire, de naviguer et de décider.

Ce n'est pas un thème visuel. C'est un ensemble de règles justifiées. Chaque section énonce la règle, la raison, les neurotypes servis et les principes d'UX qui la soutiennent. Quand la règle a un nombre, ce nombre est normatif.

Fondements

Charge cognitive. Les personnes avec TDAH réussissent moins bien et varient davantage en temps de réaction sous forte charge. Seul ce qui sert l'objectif de l'écran reste donc visible. Si un élément n'informe pas la tâche, il en détourne.

Bon stress et mauvais stress. Il existe un niveau de tension qui aide la concentration et un niveau qui paralyse. L'interface absorbe le stress de l'opération, de la recherche et de l'erreur, pour que la tension de la personne aille au contenu.

Prévisibilité. Un changement inattendu de mise en page, de position ou de nom casse le modèle mental et fait tomber la concentration, avec un coût plus élevé pour les personnes autistes et avec TDAH. Les positions importantes restent stables d'un écran à l'autre, le nom d'une action persiste du début à la fin du parcours, et rien ne bouge sans action de la personne.

La personnalisation comme exigence. La préférence sensorielle varie entre les neurotypes et au sein de chacun. Le système exige au moins trois thèmes de couleur (sombre, clair et contraste élevé), trois tailles de texte et un contrôle qui coupe l'animation. Ces contrôles sont visibles, pas enfouis dans les réglages.

Conservation de la complexité. Il existe une complexité minimale qu'on ne peut retirer sans détruire la fonction. Simplifier au-delà ne fait que rendre les choses plus confuses. Le but est de retirer l'excès, pas la fonction.

Le designer doit s'y connaître en couleur, oui

Le contraste guide le choix des couleurs, pas l'esthétique. Le texte courant vise 7:1 ou plus (niveau AAA). Le minimum absolu pour tout texte informatif est 4,5:1 (niveau AA).

Règle. Toute la palette est peu saturée : pas de néon, pas de couleur vive, pas de luminosité extrême. La couleur n'est jamais le seul porteur d'information. Tout état signalé par la couleur est accompagné d'un texte, d'une icône ou d'une forme.

Raison. La couleur vive et le fort contraste chromatique causent inconfort et surcharge sensorielle chez les personnes autistes, avec TDAH et sujettes au stress visuel. Pour le TDAH, des études montrent une moindre discrimination des couleurs, surtout sur l'axe bleu-jaune, et le daltonisme rouge-vert est la forme la plus fréquente dans la population. Les deux renforcent l'interdiction de la couleur comme seul signal. Le thème sombre est le thème par défaut parce qu'une bonne partie de l'usage a lieu la nuit, quand moins de lumière à l'écran dérange moins.

Palette de référence :

Thème à contraste élevé : fond noir, texte blanc, accents éclaircis et bordures renforcées. Le rapport de contraste de chaque paire est vérifié par un outil à chaque changement de token. Le texte estompé ne porte jamais d'information, seulement de la hiérarchie.

L'état du système a une sémantique fixe : positif pour le succès, attention pour l'erreur et l'alerte, accent pour l'action et la sélection. La même couleur ne signifie jamais autre chose sur un autre écran.

Neurotypes : basse vision, daltonisme, syndrome d'Irlen et stress visuel, autisme, TDAH. Principes : connexité uniforme et effet esthétique-utilisabilité, avec la réserve que la beauté ne peut pas cacher un problème.

Typographie, avant de passer une journée entière à chercher une police

Règle. Une sans-serif humaniste, aux lettres bien distinctes. Corps de 1rem à 1,25rem sur une base de 16px, soit 16 à 20px. Interlignage de 150 % à 170 %. Espacement des lettres légèrement augmenté : 0,005em à 0,02em pour le corps et environ 0,03em pour les petits textes comme les libellés et les légendes. Titres au moins 20 % plus grands que le corps, distingués par la graisse, jamais par un changement de famille. Lignes de 66 caractères au maximum.

Raison. Les polices humanistes ont des ouvertures plus larges et des formes de lettres plus distinctes, ce qui soutient la lecture sur des écrans ordinaires et à des tailles variées. Plus d'espacement réduit l'encombrement visuel, qui gêne beaucoup les personnes dyslexiques, et c'est la modification typographique la mieux étayée. Les polices vendues « pour la dyslexie » n'ont montré aucun bénéfice dans les études contrôlées.

Des caractères sans sosie. La police distingue sans ambiguïté le I majuscule, le l minuscule et le 1 ; les lettres en miroir b, d, p et q ; le zéro et le O. Les suites alphanumériques, comme les mots de passe, codes et identifiants, apparaissent dans une police qui garantit ces distinctions, avec un espacement supplémentaire.

L'empattement reste réservé à un contexte éditorial optionnel, jamais au texte fonctionnel, car une partie des gens utilise des écrans à faible densité, où l'empattement se dégrade.

Neurotypes : dyslexie, dyscalculie, basse vision, fonctions exécutives, syndrome d'Irlen. Principe : prégnance.

Les nombres sont universels

Règle. Les longues suites de chiffres sont segmentées comme dans le monde réel : téléphone par blocs, document par blocs, carte par groupes de quatre. Un champ numérique corrige sur le moment les erreurs prévisibles, comme la lettre o à la place du zéro. Toute quantité ou durée en chiffres s'accompagne d'un support visuel : barre de progression avec le pourcentage écrit, compteur d'étapes avec l'étape actuelle en évidence, ou représentation graphique de la proportion.

Raison. La dyscalculie est une difficulté persistante avec les nombres, indépendante de l'âge et de la scolarité. Un temps restant donné seulement en chiffres ne signifie rien pour certains profils. Une barre à moitié remplie avec le texte « 50 %, 3 sur 6 » transmet la même donnée par trois canaux. Mais il y a une limite : remplacer entièrement le nombre par une animation abstraite va trop loin et embrouille. Le nombre reste, le visuel l'accompagne.

Neurotypes : dyscalculie, dyslexie, fonctions exécutives, basse vision. Principes : prégnance, loi de Tesler, rasoir d'Occam.

Espacement, respiration (s'il vous plaît) et mise en page

Règle. Une échelle d'espacement par pas de 4 : 4, 8, 12, 16, 24, 32, 48, 64 et 96 pixels. Un espace blanc généreux entre les groupes. Ce qui est lié reste proche, ce qui ne l'est pas est visiblement séparé. Une colonne de lecture principale ; le contenu ne rivalise jamais dans des colonnes parallèles de même niveau. Navigation, contenu et action restent dans la même zone sur chaque écran et à chaque taille de viewport.

Raison. L'espace blanc est une information : il communique le regroupement et la hiérarchie avant la lecture. Une mise en page dense augmente le coût du balayage visuel, avec une pénalité plus forte pour le TDAH. Une échelle fixe supprime les décisions arbitraires et garde un rythme prévisible.

Neurotypes : TDAH, dyslexie, autisme, fonctions exécutives. Principes : prégnance, connexité uniforme, loi de Jakob.

Cibles tactiles et de clic

Règle. Une cible minimale de 48 par 48 pixels pour tout élément interactif. Action principale à 60 par 60. Les interfaces pour enfants utilisent 60 comme minimum et 80 à 100 pixels pour les actions critiques, surtout avant 8 ans. Au moins 8 pixels entre deux cibles voisines, 16 quand c'est possible. La zone active peut dépasser le dessin de l'élément, pour tolérer une touche légèrement à côté.

Raison. Une cible plus grande et plus proche réduit le temps de sélection et les erreurs. Pour les personnes dyspraxiques et les enfants dont la motricité fine se développe encore, une grande zone réduit l'effort physique. Le glisser-déposer précis est difficile pour les jeunes enfants et a toujours une alternative par toucher.

Neurotypes : dyspraxie, TDAH, basse vision, enfants en développement moteur. Principe : loi de Fitts.

Mouvement

Cette section relève de la santé, pas de l'esthétique. Rien ne clignote plus de trois fois par seconde, sans exception, à cause du risque de crise photosensible.

Règle. Des transitions de 200 à 500 millisecondes, lentes, prévisibles et du même type dans tout le produit ; préférer l'opacité et la couleur, éviter les grands déplacements. L'animation occupe moins d'un tiers de l'écran. Aucune animation ne tourne seule en boucle. La préférence de mouvement réduit du système est toujours respectée, en remplaçant l'animation par une simple transition d'opacité, et l'interface offre en plus son propre contrôle pour couper tout mouvement. Interdits : rotation continue, parallaxe, carrousel automatique, éléments qui arrivent en volant, confettis et tout mouvement non demandé.

Raison. Le mouvement à l'écran provoque nausées, vertiges et désorientation chez les personnes atteintes de troubles vestibulaires. L'animation non pertinente gêne davantage les personnes autistes que la moyenne. Pour le TDAH, un mouvement constant est une distraction permanente, même en vision périphérique, parce que l'œil le suit.

Neurotypes : épilepsie photosensible, trouble vestibulaire, autisme, TDAH, personnes hautement sensibles. Principe : seuil de Doherty.

Boutons, liens et champs

Règle. Ce qui est cliquable a l'air cliquable, visuellement différent de tout élément décoratif. Chaque élément interactif a quatre états visibles : repos, survol, focus et actif. Le focus est un anneau de 3 pixels décalé de 2 à 3 pixels, d'une couleur à fort contraste, visible dans tous les thèmes, et il n'est jamais supprimé. Une seule action principale par écran, avec une hiérarchie claire entre principale, secondaire et discrète. L'icône renforce l'intention mais ne remplace pas le texte sur une action importante.

Champs de formulaire : le libellé est toujours visible au-dessus du champ, jamais seulement en placeholder, parce que le placeholder disparaît justement quand la mémoire de travail en a le plus besoin. Un texte d'aide avant le champ quand le format n'est pas évident. Une hauteur minimale égale à celle de la cible tactile. Une validation au bon moment : ni à chaque frappe, ni seulement à l'envoi.

Raison. Boutons et liens sont les éléments les plus critiques de la page. L'accessibilité va au-delà du HTML sémantique et des libellés pour lecteurs d'écran : le dessin décide si la personne hésite ou agit. L'hésitation est une charge, et l'ambiguïté une erreur différée.

Neurotypes : dyspraxie, dyslexie, TDAH, fonctions exécutives, utilisateurs du clavier et de lecteurs d'écran. Principes : loi de Fitts, effet von Restorff, rasoir d'Occam.

Formulaires et prévention des erreurs

Règle. Les processus lourds, comme l'inscription, le paiement et la configuration initiale, sont découpés en étapes courtes, un sujet par étape, avec la position claire : étape actuelle, total et suite. Le système est tolérant dans ce qu'il accepte et rigoureux dans ce qu'il renvoie : il accepte espaces, tirets, points et majuscules interverties, et normalise tout seul. La progression est enregistrée, parce que l'interruption est la règle, pas l'exception, pour le public prioritaire.

Un message d'erreur ne s'excuse pas, n'accuse pas et n'est pas vague. Il dit ce qui s'est passé et comment le résoudre, en une phrase. Par exemple : « Il manque deux chiffres. Un numéro de portable a 10 chiffres. »

Raison. Face à un parcours long et opaque, les personnes avec TDAH ou avec des difficultés de fonctions exécutives ont tendance à abandonner ou à prendre le chemin le moins coûteux, même faux. Une étape courte avec une position visible transforme un gros coût en plusieurs petits, avec une sensation d'avancer.

Neurotypes : TDAH, fonctions exécutives, dyscalculie, anxiété. Principes : loi de Miller, loi de Postel, loi de Parkinson, règle pic-fin.

Communication du système

Règle. Avertissements, validations, notifications et messages suivent un seul modèle visuel par type dans tout le produit. Le succès est chaleureux et direct. L'erreur est polie et tournée vers la solution. Le nom d'une action persiste dans tout le parcours : le bouton « publier » produit la confirmation « publié », jamais un synonyme. Une notification existe pour servir la personne, pas pour la faire revenir : pas de réengagement, pas d'urgence fabriquée, pas de rareté artificielle. La personne contrôle ce qu'elle reçoit, et le réglage par défaut est le minimum.

Raison. Une convention cassée et un style incohérent créent de la méfiance et font tomber la concentration. L'onboarding ne remplace pas la clarté : l'écran doit être compréhensible avant la première interaction. Un tutoriel est un pansement sur une interface ratée.

Neurotypes : TDAH, dyslexie, fonctions exécutives, autisme. Principes : loi de Jakob, loi de Miller, règle pic-fin.

Sous-titres, audio et médias

Règle. Tout média parlé a des sous-titres synchronisés, en texte clair sur fond sombre uni, par blocs de deux lignes au plus. L'audio ne démarre jamais seul. Chaque lecteur a pause, retour arrière et contrôle de vitesse. Un contenu essentiel n'existe jamais seulement en audio ou seulement en vidéo : il y a toujours une alternative textuelle.

Raison. Les sous-titres servent les personnes sourdes ou malentendantes, celles qui comprennent mieux en lisant, celles qui sont dans un lieu bruyant et celles qui ont besoin du renfort des deux canaux. Un son inattendu est une agression sensorielle pour les profils autistes et hautement sensibles.

Neurotypes : surdité et perte auditive, autisme, TDAH, personnes hautement sensibles, traitement auditif. Principes : redondance des canaux et prégnance.

Contenu et ton d'écriture

Règle. Voix active, phrases courtes, une idée par phrase, un sujet par paragraphe. Le nom décrit ce que la personne contrôle et reconnaît, jamais la façon dont le système a été construit. Un bouton dit exactement ce qui se passe : « enregistrer les modifications », pas « envoyer ». Un langage simple sans infantiliser. Du jargon seulement quand c'est le terme que la personne doit apprendre, et alors expliqué la première fois. Chaque mot à l'écran a une fonction ; ce qui n'aide pas à comprendre disparaît.

Raison. Pour les personnes dyslexiques, et pour toute personne sous charge, le coût de décodage du texte entre en concurrence avec son contenu. La concision est de l'accessibilité.

Neurotypes : dyslexie, TDAH, fonctions exécutives, locuteurs non natifs. Principes : rasoir d'Occam, loi de Tesler.

Modèles d'interface

Règle. Le contenu d'abord : chaque écran part de l'objectif de la personne, et ce qui ne sert pas l'objectif disparaît. Une navigation cohérente, avec les mêmes éléments aux mêmes endroits. Pas de pop-up qui interrompt la tâche, sauf risque réel et immédiat. Pas de changement de mise en page sans action de la personne. Une densité maîtrisée : en montrer plus à la demande plutôt que tout déverser. Un mode concentration disponible dans les longs parcours, qui masque tout ce qui n'est pas la tâche en cours.

Raison. Face à de nombreuses options concurrentes, les personnes avec TDAH ont tendance à se bloquer ou à choisir la tâche la moins coûteuse. Conserver la complexité veut dire la dépenser là où elle crée de la valeur : dans le contenu, pas dans l'opération.

Neurotypes : TDAH, autisme, fonctions exécutives, anxiété. Principes : paradoxe de la complexité, loi de Hick, loi de Jakob, effet esthétique-utilisabilité.

Tokens

Neurotypes pris en compte

Principes d'UX

Checklist de conformité

Avant de publier un écran :

• Contraste de tout texte informatif à 4,5:1 minimum et 7:1 pour le texte courant
• Sans-serif humaniste, avec I, l et 1, b, d, p et q, 0 et O distincts
• Interlignage de 150 % ou plus et lignes de 66 caractères au plus
• Chaque cible interactive à 48 pixels ou plus avec 8 pixels d'espace
• Focus clavier visible sur chaque élément interactif
• Aucun flash au-delà de trois par seconde
• Mouvement réduit respecté et contrôle local du mouvement présent
• Trois thèmes et trois tailles de texte fonctionnels
• Un libellé visible sur chaque champ et des erreurs tournées vers la solution
• Nombres longs segmentés et quantités avec support visuel
• Médias parlés sous-titrés et sans lecture automatique
• Une action principale par écran
• Le nom de chaque action identique du début à la fin du parcours
• Aucune mécanique d'engagement compulsif

Processus

Le système est un document vivant. Toute nouvelle règle arrive avec une justification et les neurotypes qu'elle sert, et toute règle existante peut être contestée avec de meilleures preuves. Les tests avec de vraies personnes neurodivergentes font partie du cycle de design, avec une méthode participative, et ne sont pas une étape finale de validation. Quand un test contredit une règle, la règle change, et le changement est consigné avec une date et une raison.

Hoff Research. Make it simple, but significant.